/* ==========================================================================
   WOH GROUP — Divi Child — woh-global.css
   Autor: WOH GROUP LTD
   Zmienne, typografia i style komponentów globalnych.
   Zgodne 1:1 ze specyfikacją wdrożeniową (sekcje 2, 5, 10).
   Prefiks klas: woh- (patrz sekcja 8 specyfikacji — lista klas CSS).
   ========================================================================== */

:root {
	/* --- Kolory tekstu --- */
	--woh-ink: #111111;
	--woh-ink-2: #1A1D22;
	--woh-muted: #6B7280;
	--woh-muted-2: #5A6069;
	--woh-subtle: #9AA0A8;

	/* --- Akcent marki / gradient --- */
	--woh-accent: #EB1D24;
	--woh-accent-tint: #FCE9EA;
	--woh-grad: linear-gradient(105deg, #EA018C 0%, #EB1D24 55%, #EE8431 100%);
	--woh-grad-cta: linear-gradient(105deg, #E23A86 0%, #E0433C 55%, #EE8B46 100%);

	/* --- Tła --- */
	--woh-bg-1: #F5F6F8;
	--woh-bg-2: #ECEEF1;
	--woh-panel-1: #FBFCFD;
	--woh-panel-2: #F4F6F8;

	/* --- Bordery --- */
	--woh-border: #E9EBEF;
	--woh-border-field: #E5E7EB;
	--woh-border-panel: #EAECEF;
	--woh-border-hover: #F1CDD1;

	/* --- Promienie / cienie / layout --- */
	--woh-radius: 16px;
	--woh-radius-sm: 11px;
	--woh-radius-btn: 12px;
	--woh-shadow: 0 1px 2px rgba(17, 17, 17, .04);
	--woh-shadow-hover: 0 12px 28px rgba(17, 17, 17, .09);
	--woh-shadow-btn: 0 10px 26px rgba(235, 29, 36, .28);
	--woh-shadow-cta: 0 12px 30px rgba(226, 53, 47, .10);
	--woh-max: 1200px;
	--woh-max-narrow: 1040px; /* case study, sekcja 2.4 */
	--woh-pad: 24px;

	/* --- Stopka --- */
	--woh-footer-bg: #111111;
	--woh-footer-text: #C9CDD3;
	--woh-footer-muted: #9AA0A8;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
body {
	font-family: 'Manrope', sans-serif;
	color: var(--woh-ink);
	overflow-x: hidden;
}

html {
	overflow-x: hidden;
}

img, picture, video, svg {
	max-width: 100%;
	height: auto;
}

.woh-container {
	max-width: var(--woh-max);
	margin: 0 auto;
	padding: 0 var(--woh-pad);
}

.woh-section {
	padding: 56px 0;
}

/* ==========================================================================
   TYPOGRAFIA (sekcja 2.3)
   ========================================================================== */
.woh-h1,
h1.woh-h1 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--woh-ink);
}

.woh-h1--home {
	font-size: clamp(42px, 4.2vw, 52px);
}

.woh-h1--sub {
	font-size: clamp(26px, 2.7vw, 36px);
	line-height: 1.2;
}

.woh-h1--case {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.14;
}

.woh-h2,
h2.woh-h2 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--woh-ink);
}

.woh-h2--panel {
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.woh-h3 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.3;
	color: var(--woh-ink);
}

.woh-lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--woh-muted-2);
}

.woh-hero-text {
	font-size: 15.5px;
	line-height: 1.6;
	color: #4B5158;
}

.woh-card-text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--woh-muted);
}

.woh-kicker {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--woh-accent);
	margin-bottom: 12px;
}

.woh-nav-link {
	font-size: 15px;
	font-weight: 600;
	color: var(--woh-ink-2);
}

.woh-nav-link:hover,
.woh-nav-link.woh-is-active {
	color: var(--woh-accent);
}

/* Podkreślenie gradientem pod słowem-akcentem w H1 (sekcja 2.2) —
   zastosuj klasę na <span> wewnątrz nagłówka Divi Text/Heading module. */
.woh-accent-underline {
	color: var(--woh-ink);
	background-image: linear-gradient(105deg, #EA018C, #EB1D24 60%, #EE8431);
	background-size: 100% 3px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 3px;
}

/* Wypełnienie tekstu gradientem — użycie punktowe (duże liczby, akcent słowa) */
.woh-accent-fill {
	background: var(--woh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   PRZYCISKI (sekcja 2.6 / 5)
   ========================================================================== */
.woh-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--woh-grad);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--woh-radius-btn);
	padding: 14px 28px;
	box-shadow: var(--woh-shadow-btn);
	border: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.woh-btn-primary:hover {
	transform: translateY(-1px);
	filter: brightness(.96);
}

.woh-btn-secondary {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: var(--woh-ink) !important;
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--woh-radius-btn);
	padding: 14px 26px;
	border: 1.5px solid #D8DBE0;
	transition: transform .18s ease, border-color .18s ease;
}

.woh-btn-secondary:hover {
	transform: translateY(-1px);
	border-color: #C7CBD2;
}

/* Warianty na tle gradientu (CTA banner) */
.woh-btn-onaccent {
	background: #fff;
	color: #151515 !important;
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.woh-btn-onaccent-outline {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .7);
	color: #fff !important;
	font-weight: 700;
}

/* ==========================================================================
   KARTY (sekcja 2.4, 2.6, 5)
   ========================================================================== */
.woh-card {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: var(--woh-radius);
	box-shadow: var(--woh-shadow);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	height: 100%;
	box-sizing: border-box;
}

.woh-card:hover,
.woh-service-card:hover,
.woh-process-card:hover,
.woh-project-card:hover,
.woh-takeover-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(17, 17, 17, .08);
	border-color: var(--woh-border-hover);
}

.woh-service-card,
.woh-process-card {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: var(--woh-radius);
	box-shadow: var(--woh-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.woh-project-card {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: var(--woh-radius);
	overflow: hidden;
	box-shadow: var(--woh-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Subtelny hover ikon w kartach — desktop/tablet, bez neonów i przesady */
.woh-card-icon,
.woh-service-card-icon,
.woh-process-icon,
.woh-process-number {
	transition: transform .22s ease;
}

@media (min-width: 768px) {
	.woh-card:hover .woh-card-icon,
	.woh-service-card:hover .woh-service-card-icon,
	.woh-process-card:hover .woh-process-icon,
	.woh-process-card:hover .woh-process-number,
	.woh-takeover-card:hover .woh-card-icon {
		transform: translateY(-3px) scale(1.06);
	}
}

/* ==========================================================================
   SIATKI KART — jedna definicja CSS Grid dla wszystkich sekcji kartowych
   Home (Filary, "Co możemy przejąć", Wybrane realizacje, Jak pracujemy).
   4 kolumny ≥981px, 2 kolumny 768–980px, 1 kolumna ≤767px — dokładnie
   wg uzgodnionych breakpointów. align-items:stretch gwarantuje równe
   wysokości kart w każdym wierszu (karty same mają height:100%).
   ========================================================================== */
.woh-services-grid,
.woh-cards-grid,
.woh-takeover-grid,
.woh-process-grid,
.woh-realizacje-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 16px;
}

@media (min-width: 768px) and (max-width: 980px) {
	.woh-services-grid,
	.woh-cards-grid,
	.woh-takeover-grid,
	.woh-process-grid,
	.woh-realizacje-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (min-width: 981px) {
	.woh-services-grid,
	.woh-cards-grid,
	.woh-takeover-grid,
	.woh-process-grid,
	.woh-realizacje-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}

/* Ekosystem — subtelny hover (desktop/tablet), spokojny, bez glow */
.woh-ecosystem-item {
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

@media (min-width: 768px) {
	.woh-ecosystem-item:hover {
		transform: translateY(-3px);
		box-shadow: 0 16px 34px rgba(17, 17, 17, .07);
		background: #fff;
	}

	.woh-ecosystem-item:hover .woh-ecosystem-icon {
		transform: translateY(-3px) scale(1.06);
	}
}

.woh-ecosystem-icon {
	transition: transform .22s ease;
}

/* Pasek "okna przeglądarki" nad miniaturami (galerie / mockupy, sekcja 5) */
.woh-window-bar {
	height: 26px;
	background: #F3F4F6;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	border-bottom: 1px solid var(--woh-border);
}

.woh-window-bar span {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	display: inline-block;
}

.woh-window-bar span:nth-child(1) { background: #E0655F; }
.woh-window-bar span:nth-child(2) { background: #E6B94F; }
.woh-window-bar span:nth-child(3) { background: #5FB57A; }

/* Kafelek ikony (sekcja 2.6) */
.woh-icon-tile {
	width: 40px;
	height: 40px;
	border-radius: var(--woh-radius-sm);
	background: var(--woh-accent-tint);
	color: var(--woh-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.woh-icon-tile svg,
.woh-icon-tile img {
	width: 21px;
	height: 21px;
}

/* Numer w kółku z gradientem (kroki procesu, etapy — sekcja 5/6) */
.woh-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--woh-grad);
	color: #fff !important;
	font-weight: 800;
	font-size: 14px;
	flex: none;
}

.woh-step-number--lg {
	width: 46px;
	height: 46px;
	font-size: 16px;
	box-shadow: 0 6px 16px rgba(235, 29, 36, .22);
}

/* ==========================================================================
   TAGI / BADGE / FILTRY (sekcja 5)
   ========================================================================== */
.woh-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--woh-muted-2);
	background: var(--woh-bg-1);
	border: 1px solid var(--woh-border-panel);
	padding: 5px 12px;
	border-radius: 7px;
	gap: 8px;
}

.woh-badge {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--woh-accent);
	background: var(--woh-accent-tint);
	padding: 5px 11px;
	border-radius: 99px;
	white-space: nowrap;
	flex: none;
}

/* Wariant dla dłuższych treści (np. "UK · Polska · Niemcy..." na stronie
   Kontakt) — zawija się zamiast wychodzić poza ekran na mobile. */
.woh-badge--wrap {
	white-space: normal;
	line-height: 1.5;
	max-width: 100%;
	box-sizing: border-box;
}

/* Kafelki szybkich linków (np. strona 404) — spokojny hover spójny z resztą kart */
.woh-quicklink {
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.woh-quicklink:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(17, 17, 17, .08);
	border-color: var(--woh-border-hover) !important;
}

.woh-quicklink-icon {
	transition: transform .22s ease, background .22s ease, color .22s ease;
}

.woh-quicklink:hover .woh-quicklink-icon {
	transform: translateY(-3px) scale(1.06);
	background: var(--woh-grad);
	color: #fff;
}

@media (max-width: 767px) {
	.woh-quicklink {
		width: 130px !important;
		padding: 20px 14px !important;
	}
}

.woh-filter {
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid #E3E5E9;
	background: #fff;
	color: var(--woh-muted-2);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.woh-filter--active {
	background: var(--woh-grad);
	color: #fff !important;
	border-color: transparent;
}

/* ==========================================================================
   FORMULARZE (sekcja 5 / .woh-field) — dopracowane: spójna wysokość,
   customowa strzałka select (nie wygląda jak surowe pole systemowe),
   wyraźny focus w akcencie marki.
   ========================================================================== */
.woh-field,
.et_pb_contact_form input[type=text].woh-field,
.et_pb_contact_form input[type=email].woh-field,
.et_pb_contact_form input[type=tel].woh-field,
.et_pb_contact_form textarea.woh-field,
.et_pb_contact_form select.woh-field {
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--woh-border-field);
	border-radius: var(--woh-radius-sm);
	padding: 13px 15px;
	font-size: 14.5px;
	font-family: 'Manrope', sans-serif;
	color: var(--woh-ink-2);
	box-sizing: border-box;
	transition: border-color .18s ease, box-shadow .18s ease;
}

input.woh-field,
select.woh-field {
	height: 48px;
}

textarea.woh-field {
	height: auto;
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}

/* Select — customowa strzałka zamiast domyślnej, systemowej */
select.woh-field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

.woh-field::placeholder {
	color: #AEB3BB;
}

.woh-field:focus {
	outline: none;
	border-color: var(--woh-accent);
	box-shadow: 0 0 0 3px rgba(235, 29, 36, .12);
}

.woh-field-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
}

/* Wiersze/pola formularza — spójny, większy odstęp */
.woh-form-row {
	margin-bottom: 20px;
}

/* Checkbox zgody — dobre wyrównanie z opisem */
.woh-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

input[type="checkbox"].woh-checkbox {
	accent-color: var(--woh-accent);
	width: 19px;
	height: 19px;
	flex: none;
	margin-top: 3px;
	cursor: pointer;
}

/* ==========================================================================
   SEKCJA CTA (sekcja 2.6 / 5 — .woh-cta / .woh-cta-banner)
   ========================================================================== */
.woh-cta-banner {
	border-radius: 22px;
	padding: 40px 46px;
	background: var(--woh-grad-cta);
	box-shadow: var(--woh-shadow-cta);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	color: #fff;
}

.woh-cta-banner h2,
.woh-cta-banner .woh-h2 {
	color: #fff;
	margin: 0 0 8px;
}

.woh-cta-banner p {
	color: rgba(255, 255, 255, .92);
	margin: 0;
}

.woh-cta-banner .woh-cta-actions {
	display: flex;
	gap: 12px;
	flex: none;
}

/* ==========================================================================
   SIATKI 2-KOLUMNOWE / POMOCNICZE (używane na podstronach O nas / Kontakt)
   ========================================================================== */
.woh-split-2 {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 44px;
	align-items: start;
}

.woh-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.woh-contact-layout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: start;
}

.woh-competency-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.woh-three-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

/* Powiązane realizacje na podstronach usług — 3 karty w rzędzie na desktopie
   (nadpisuje domyślne 4 kolumny z .woh-cards-grid). Tablet=2 / mobile=1
   dziedziczone z .woh-cards-grid (patrz media queries niżej). */
@media (min-width: 981px) {
	.woh-realizacje-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.woh-six-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

.woh-five-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* Pasek meta-danych case study (Klient/Zakres/Technologia/Rok) — używany
   zarówno w statycznych JSON-ach (Divi) jak i w single-realizacje.php.
   Baza (desktop) tutaj; mobile override (2 kolumny) w woh-responsive.css. */
.woh-meta-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Hero pojedynczej realizacji (single-realizacje.php) — 2 kolumny desktop,
   1 kolumna mobile/tablet, ten sam wzorzec co hero na stronach z JSON. */
.woh-realizacja-hero {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	align-items: stretch;
}

@media (max-width: 980px) {
	.woh-realizacja-hero {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 980px) {
	.woh-competency-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woh-three-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woh-six-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woh-five-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.woh-competency-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.woh-three-grid {
		grid-template-columns: 1fr;
	}

	.woh-six-grid {
		grid-template-columns: 1fr;
	}

	.woh-five-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ==========================================================================
   BREADCRUMB (sekcja 5)
   ========================================================================== */
.woh-breadcrumb {
	font-size: 13px;
	font-weight: 600;
	color: var(--woh-subtle);
	display: flex;
	align-items: center;
	gap: 8px;
}

.woh-breadcrumb .woh-breadcrumb-current {
	color: var(--woh-muted-2);
}

/* ==========================================================================
   PANEL / BOX (sekcja 5 — .woh-panel)
   ========================================================================== */
.woh-panel {
	background: linear-gradient(180deg, var(--woh-panel-1), var(--woh-panel-2));
	border: 1px solid var(--woh-border-panel);
	border-radius: 20px;
	padding: 34px 30px;
}

/* ==========================================================================
   PASEK TECHNOLOGII (sekcja 5 — .woh-tech-bar)
   ========================================================================== */
.woh-tech-bar {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: var(--woh-radius);
	padding: 22px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 22px;
}

.woh-tech-bar .woh-tech-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woh-tech-bar .woh-tech-item span.woh-tech-icon {
	width: 28px;
	height: 28px;
	display: block;
}

.woh-tech-bar .woh-tech-item .woh-tech-name {
	font-weight: 700;
	font-size: 15px;
}

/* ==========================================================================
   PORÓWNANIE 2 KOLUMNY (sekcja 5 — .woh-compare)
   ========================================================================== */
.woh-compare {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: var(--woh-radius);
	padding: 28px;
}

.woh-compare--accent {
	border: 1.5px solid var(--woh-border-hover);
	box-shadow: 0 14px 34px rgba(235, 29, 36, .08);
	position: relative;
	overflow: hidden;
}

.woh-compare--accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--woh-grad);
}

/* ==========================================================================
   CYTAT (sekcja 5 — .woh-quote)
   ========================================================================== */
.woh-quote {
	background: #fff;
	border: 1px solid var(--woh-border);
	border-radius: 20px;
	padding: 34px;
	box-shadow: var(--woh-shadow);
	position: relative;
	overflow: hidden;
}

.woh-quote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #EA018C, #EB1D24 55%, #EE8431);
}

.woh-quote-text {
	font-size: 19px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--woh-ink-2);
	margin: 0 0 16px;
}

.woh-quote-author {
	font-size: 14px;
	color: var(--woh-muted);
	font-weight: 600;
}

/* ==========================================================================
   GALERIA / MAPA (sekcja 5, 6.8 — .woh-gallery / .woh-map-box)
   ========================================================================== */
.woh-map-box {
	position: relative;
	height: 180px;
	border-radius: var(--woh-radius);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--woh-border);
	background-image:
		linear-gradient(#EEF0F3 1px, transparent 1px),
		linear-gradient(90deg, #EEF0F3 1px, transparent 1px);
	background-size: 26px 26px;
}

/* ==========================================================================
   HEADER
   Globalny header to teraz jeden, samodzielny komponent w osobnym pliku:
   assets/css/woh-header.css (klasy woh-global-header, woh-header-inner,
   woh-header-logo, woh-desktop-nav, woh-lang-switcher, woh-header-cta,
   woh-mobile-toggle, woh-mobile-menu). Nic z tego nie zależy od
   wewnętrznych nazw klas Divi — patrz docs/woh-header.json.
   ========================================================================== */

/* ==========================================================================
   FOOTER (sekcja 4)
   ========================================================================== */
.woh-footer {
	background: var(--woh-footer-bg);
	color: var(--woh-footer-text);
}

.woh-footer-topline {
	height: 3px;
	background: var(--woh-grad);
}

.woh-footer-grid {
	max-width: var(--woh-max);
	margin: 0 auto;
	padding: 60px var(--woh-pad) 30px;
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 44px;
}

/* Uwaga: te klasy są nadawane bezpośrednio na elementach HTML wewnątrz
   treści modułu Text (nie na samej Divi Column — natywne pole "CSS Class"
   dla Column/Row/Section nie ma potwierdzonego klucza w schemacie JSON,
   więc klasowanie odbywa się na poziomie znaczników w content.innerContent,
   dokładnie jak w dostarczonym referencyjnym eksporcie). */
.woh-footer-heading {
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff !important;
	margin: 0 0 16px;
}

.woh-footer-text,
.woh-footer-text a {
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	line-height: 1.9;
	color: var(--woh-footer-text) !important;
	text-decoration: none;
}

.woh-footer-text a:hover {
	color: #fff !important;
}

.woh-footer-desc {
	max-width: 280px;
	line-height: 1.65;
	color: var(--woh-footer-muted) !important;
	margin: 0 0 18px;
}

.woh-footer-logo {
	margin: 0 0 16px;
}

.woh-footer-logo img {
	display: block;
}

.woh-footer-logo .woh-logo-text {
	color: #fff !important;
	font-size: 20px;
	display: inline-block;
}

.woh-footer-social a {
	width: 38px;
	height: 38px;
	border: 1px solid #2A2A2A;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--woh-footer-text);
}

.woh-footer-bottom {
	border-top: 1px solid #262626;
}

.woh-footer-bottom-inner {
	max-width: var(--woh-max);
	margin: 0 auto;
	padding: 18px var(--woh-pad);
	border-top: 1px solid #262626;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: #8A9098 !important;
}

.woh-footer-bottom-inner a {
	color: #8A9098 !important;
}

/* ==========================================================================
   HOME — HERO
   Row-owy gradient tła i zaokrąglenie rogów hero NIE są ustawiane przez
   natywne atrybuty JSON (nie mamy zweryfikowanego klucza dla gradientu/
   promienia na poziomie Row), więc — dokładnie jak przy blurze nagłówka —
   używamy znacznika + selektora :has().
   ========================================================================== */
.et_pb_row:has(.woh-hero-marker) {
	background: linear-gradient(180deg, #F5F6F8, #ECEEF1);
	border-radius: 22px;
	overflow: hidden;
	min-height: 392px;
	align-items: stretch;
}

.et_pb_row:has(.woh-hero-marker) > .et_pb_column:last-child {
	display: flex;
}

.et_pb_row:has(.woh-hero-marker) > .et_pb_column:last-child > * {
	width: 100%;
}

/* Linki w treściach prawnych (Regulamin i podobne) — kolor marki zamiast
   domyślnego niebieskiego przeglądarki. */
.woh-legal-prose a {
	color: var(--woh-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(235, 29, 36, .35);
}

.woh-legal-prose a:hover {
	color: var(--woh-ink);
	text-decoration-color: var(--woh-ink);
}

.woh-legal-prose strong {
	color: var(--woh-ink);
}

/* =====================================================================
   TREŚĆ POJEDYNCZEGO WPISU (Divi Post Content + .woh-post-prose)
   Linki w kolorze WOH zamiast domyślnych niebieskich + czytelna
   typografia (H2/H3, akapity, listy, cytaty, obrazy).
   ===================================================================== */
.et_pb_post_content,
.woh-post-prose {
	font-size: 17px;
	line-height: 1.75;
	color: #2A2E35;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.et_pb_post_content p,
.woh-post-prose p {
	margin: 0 0 22px;
}

.et_pb_post_content a,
.woh-post-prose a {
	color: var(--woh-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(235, 29, 36, .35);
	transition: color .18s ease, text-decoration-color .18s ease;
}

.et_pb_post_content a:visited,
.woh-post-prose a:visited {
	color: var(--woh-accent);
}

.et_pb_post_content a:hover,
.woh-post-prose a:hover {
	color: #B3151B;
	text-decoration-color: #B3151B;
}

/* Hero pojedynczego wpisu (shortcode woh_post_hero) — 16:10 featured image
   po prawej, na mobile schodzi pod tekst na pełną szerokość. */
.woh-post-hero-media img,
.woh-post-hero-media > div {
	width: 100%;
	height: 100%;
}

/* Featured image w hero wpisu — contain + jasne tło, nic nie jest ucinane
   (tekst, mockup, logo na grafice pozostają widoczne w całości). */
.woh-post-hero-img {
	object-fit: contain !important;
	object-position: center !important;
	background: #F8F9FB;
}

/* Obrazki w kartach wpisów bloga — 16:10, contain z jasnym tłem, bez
   brzydkiego kadrowania grafik z tekstem/mockupem/logo. Osobna klasa,
   żeby NIE ruszać zdjęć realizacji (te zostają na cover). */
.woh-blog-card-image {
	background: #F8F9FB;
}

.et_pb_post_content h2,
.woh-post-prose h2 {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	color: #111;
	margin: 44px 0 16px;
}

.et_pb_post_content h3,
.woh-post-prose h3 {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	color: #111;
	margin: 34px 0 12px;
}

.et_pb_post_content ul,
.et_pb_post_content ol,
.woh-post-prose ul,
.woh-post-prose ol {
	margin: 0 0 22px;
	padding-left: 24px;
}

.et_pb_post_content li,
.woh-post-prose li {
	margin-bottom: 10px;
	line-height: 1.7;
}

.et_pb_post_content img,
.woh-post-prose img {
	border-radius: 16px;
	max-width: 100%;
	height: auto;
}

.et_pb_post_content blockquote,
.woh-post-prose blockquote {
	margin: 28px 0;
	padding: 20px 26px;
	background: linear-gradient(180deg, #FBFCFD, #F7F8FA);
	border-left: 4px solid var(--woh-accent);
	border-radius: 12px;
	font-size: 17.5px;
	line-height: 1.65;
	color: #1A1D22;
}

.et_pb_post_content blockquote p:last-child,
.woh-post-prose blockquote p:last-child {
	margin-bottom: 0;
}

.et_pb_post_content table,
.woh-post-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 15px;
}

.et_pb_post_content th,
.et_pb_post_content td,
.woh-post-prose th,
.woh-post-prose td {
	border: 1px solid #E9EBEF;
	padding: 12px 14px;
	text-align: left;
}

.et_pb_post_content th,
.woh-post-prose th {
	background: #F7F8FA;
	font-weight: 700;
}

/* Sekcja "Wybrane realizacje" — jasny, zaokrąglony panel (ten sam
   sprawdzony wzorzec znacznik + :has() co panel hero). */
.et_pb_row:has(.woh-realizacje-marker),
.woh-realizacje-panel-wrap {
	background: linear-gradient(180deg, #FBFCFD, #F7F8FA);
	border-radius: 28px;
	padding: 44px 40px !important;
}

.woh-realizacje-panel-wrap {
	box-sizing: border-box;
	margin-top: 12px;
	margin-bottom: 20px;
}

.woh-realizacje-link {
	transition: color .2s ease;
}

.woh-realizacje-link:hover {
	color: var(--woh-ink);
}

/* Karty "Wybrane realizacje" na stronie głównej (shortcode [woh_home_realizacje],
   patrz inc/cpt-realizacje.php) — hover: uniesienie + podświetlenie borderu
   gradientem WOH (dwuwarstwowe tło: białe wypełnienie + gradientowa "ramka"). */
.woh-home-realizacja-card {
	transition: transform .22s ease, box-shadow .22s ease;
}

.woh-home-realizacja-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(17, 17, 17, .12);
	border-color: transparent;
	background-image: linear-gradient(#fff, #fff), var(--woh-grad);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.woh-home-realizacja-card .woh-home-realizacja-image {
	overflow: hidden;
}

.woh-home-realizacja-card .woh-home-realizacja-image img,
.woh-home-realizacja-card .woh-home-realizacja-image > div {
	transition: transform .25s ease;
}

.woh-home-realizacja-card:hover .woh-home-realizacja-image img,
.woh-home-realizacja-card:hover .woh-home-realizacja-image > div {
	transform: scale(1.03);
}

/* ==========================================================================
   OGÓLNE ZABEZPIECZENIA — nie nadpisujemy globalnych klas Divi (et_pb_*);
   poniższe reguły działają wyłącznie poprzez klasy woh-* dodane w polu
   "CSS Class" modułów, zgodnie z wymogiem specyfikacji.
   ========================================================================== */