/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS – rusztowanie warstwy 3 (rytm sekcji + nagłówek + reveal + prose).
   Współdzielone klocki, z których składają się WSZYSTKIE strony opisowe.
   Tokeny theme.json, BEM, FLAT (zero cieni). Ładowane globalnie (inc/enqueue.php).

   Zasada DRY: blok/strona NIE definiuje własnego tła, paddingu sekcji,
   nagłówka eyebrow+H2+lead ani animacji – bierze stąd.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rytm sekcji ──────────────────────────────────────────────────────────
   Pionowy oddech + alternacja tła (biały ↔ sky), ciemny wariant = navy gradient.
   Sekcja zawiera w środku .wrapper (max-width + padding boczny). Sama .section
   odpowiada TYLKO za tło i rytm pionowy – reszta to kompozycja. */
.section {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--base);
}

/* Ziarno (film grain) – REUŻYWALNA receptura z base.css (token --grain-image).
   DRY: tu tylko spinamy ją z selektorem sekcji (sekcje generują bloki, więc
   aliasujemy selektor zamiast dodawać klasę w markupie) – recepta żyje w base.css.
   `.section` ma już position+isolation, więc ::after pod treścią (z-index -1) działa.
   Na WSZYSTKICH sekcjach – spójna kinowa faktura. Czarne drobiny na jasnym, białe
   na ciemnym (override poniżej). Siłę nadpisuje się lokalnie (--grain-opacity). */
.section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--grain-image);
	background-size: 200px 200px;
	opacity: var(--grain-opacity);
}

/* Alternujące jasne tło (co druga sekcja na stronach opisowych). */
.section--sky {
	background-color: var(--wp--preset--color--surface);
}

/* Ciemna sekcja: radialny „glow-blue" jak w prototypie – navy + dwie subtelne
   poświaty (sky w prawym-górnym, gold w lewym-dolnym). Nagłówki/tekst rozjaśniane,
   inaczej byłyby niewidoczne na granacie. */
.section--dark {
	/* Ziarno: białe drobiny (czarne giną na navy). Pokrycie ~46% (faktura, nie rzadki
	   śnieg), więc poniżej ~0.06 jest niewidoczne na granacie; 0.10 daje kinową fakturę
	   o sile zbliżonej do jasnych sekcji. Nakłada się na navy-gradient + poświaty
	   (grainy gradient). Za mocne → zejdź do 0.07; za słabe → 0.12. */
	--grain-image: var(--grain-image-on-dark);
	--grain-opacity: 0.12;
	background-color: var(--wp--preset--color--primary);
	background-image:
		radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--wp--preset--color--surface) 7%, transparent) 0%, transparent 50%),
		radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent) 0%, transparent 40%);
	color: var(--wp--preset--color--base);
}
.section--dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}
.section--dark a:not(.button):not(.link-arrow) {
	color: var(--wp--preset--color--accent);
}

/* Wariant bez pionowego rytmu (gdy sekcja sama steruje paddingiem, np. full-bleed media). */
.section--flush {
	padding-block: 0;
}

/* ── Nagłówek sekcji (eyebrow + H2 + lead) ────────────────────────────────
   Markup: template-parts/section-header.php. Powtarzalny wzorzec każdej sekcji. */
.section-header {
	max-width: 46rem;
	margin-block-end: var(--wp--preset--spacing--md);
}
.section-header--center {
	margin-inline: auto;
	text-align: center;
}

/* Eyebrow pozycjonuje się z paskiem po lewej (z components.css); w wariancie
   wyśrodkowanym całość centrujemy razem ze złotą kreską. */
.section-header--center .eyebrow {
	justify-content: center;
}

.section-header__title {
	margin-block: 0.5rem 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

.section-header__lead {
	margin-block-start: 0.85rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
/* Na ciemnym tle lead z mniejszą szarością – muted byłby za ciemny. */
.section--dark .section-header__lead {
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

/* ── Reveal on scroll – czyste CSS scroll-driven (animation-timeline: view()) ──
   Brak JS, brak IntersectionObservera: animacja l. na compositorze.
   Cała reguła zamknięta w @supports → przeglądarki bez wsparcia (Firefox za
   flagą) renderują treść NORMALNIE (zero ukrytego stanu, zero FOUC, pełna
   dostępność). Druga bramka: prefers-reduced-motion – przy redukcji ruchu
   reguła w ogóle się nie aktywuje, więc base.css nie ma czego wyłączać.

   view() jest SCRUBOWANY – progres animacji przyklejony do pozycji scrolla.
   TYLKO TELEFON (czwarta bramka: max-width 47.99rem). Flick-scroll przewija cały
   zakres w ułamku sekundy, więc scrub czyta się jak czysty wjazd – kozacko gra na
   telefonie. NA DESKTOPIE reveal JEST WYŁĄCZONY (świadoma decyzja): na dużym/wysokim
   viewporcie wolny scroll scrubował animację i element wisiał w połowie ruchu →
   przeszkadzało. Brak reguły = elementy renderują się statycznie (zero ukrytego
   stanu, bo .reveal nie ma bazowego opacity:0 – efekt żył wyłącznie w tej regule).

   Stagger: scroll-timeline IGNORUJE animation-delay (jest time-based), więc
   opóźnienie robimy przez przesunięcie animation-range (--d1…--d4). */
@keyframes integracjatyija-reveal {
	from {
		opacity: 0.6;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	/* ── Telefon (i tylko telefon) – fade + podjazd ── */
	@media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
		.reveal {
			animation: integracjatyija-reveal linear both;
			animation-timeline: view();
			/* Start dopiero gdy element wjedzie w kadr (nie przy samej dolnej krawędzi),
			   koniec gdy jest już dobrze widoczny – ruch gra w polu widzenia, nie pod foldem. */
			animation-range: entry 20% cover 45%;
		}

		/* Stagger – kolejne elementy kończą reveal nieco później w progresie scrolla. */
		.reveal--d1 { animation-range: entry 28% cover 53%; }
		.reveal--d2 { animation-range: entry 36% cover 61%; }
		.reveal--d3 { animation-range: entry 44% cover 69%; }
		.reveal--d4 { animation-range: entry 52% cover 77%; }
	}
}

/* ── Prose – treść długa (WYSIWYG / wp_editor) na stronach opisowych ───────
   Rytm akapitów, śródtytuły, listy, cytaty. theme.json daje bazę typografii;
   tu dokładamy odstępy i wzorce treści lecącej. Owijka: <div class="prose">. */
.prose {
	max-width: var(--wp--style--global--content-size, 720px);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}
/* Treść ELASTYCZNA (strona opisowa edycji, page.php): gdy `.prose` jest jednocześnie
   kontenerem natywnego layoutu WP (`is-layout-constrained`), szerokość liczy się PER-BLOK
   (tekst→content-size, alignwide→wide, alignfull→pełna). Zdejmujemy więc kolumnę z samej
   prose – inaczej jej max-width zdławiłby bloki full/wide. Typografia prose zostaje; gutter
   i wybicie alignfull niesie `has-global-padding` (root-padding z theme.json). */
/* ── Strona opisowa edycji (page.php, auto sub-hero): treść ELASTYCZNA ──────────────
   Kontener = natywny layout WP (`is-layout-constrained` + `has-global-padding`): tekst→720px
   (contentSize), `alignwide`→1280px, `alignfull`/`.section`→pełna szerokość. Szerokość liczy
   się PER-BLOK, jak w kanwie edytora (WYSIWYG). Odstępy między blokami = blockGap WP (24px),
   linki = theme.json. NIE używamy tu `.prose` jako kontenera – jego selektory descendant
   wchodziły w bloki SCF i rozjeżdżały ich własną typografię. */
.entry-content.is-layout-constrained {
	/* Odstęp pod sub-hero (zamiast usuniętej owijki `.section`, której symetryczny padding-block
	   robił gap na dole). Dół czysty: sekcje SCF niosą własny padding-block, tekst → odstęp stopki. */
	padding-block-start: var(--wp--preset--spacing--xl);
}
/* Bloki SEKCYJNE SCF (`.section`: contact-form, media-text-stats, events…) biorą pełną szerokość
   z konwencji motywu (`.section`), NIE z `alignfull` (konwencja WP). Constrained layout zna tylko
   `alignfull` i NIE-`alignfull` dzieciom narzuca `margin-inline: auto !important` (centrowanie
   kolumny) → zwykły ujemny margines przegrywa. Stąd `!important`: dajemy `.section` to samo wybicie
   co `alignfull` (pełna szerokość + zniesienie root-paddingu). To spina MIESZANIE SCF + natywnych. */
.entry-content.is-layout-constrained > .section {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}
/* Typografia TYLKO bezpośrednich bloków natywnych (child combinator `>` = fizycznie zero wycieku
   w `.section`, bo bloki SCF nie są dziećmi bezpośrednimi tekstu). Skala nagłówków + wcięcie list;
   rytm akapitów i kolor linków niosą blockGap WP i theme.json. */
.entry-content.is-layout-constrained > :is(h2, h3, h4) {
	margin-block-start: 1.5em;
	margin-block-end: 0.4em;
	line-height: 1.2;
}
.entry-content.is-layout-constrained > h2 { font-size: var(--wp--preset--font-size--xl); }
.entry-content.is-layout-constrained > h3 { font-size: var(--wp--preset--font-size--lg); }
.entry-content.is-layout-constrained > h4 { font-size: var(--wp--preset--font-size--md); }
.entry-content.is-layout-constrained > :is(ul, ol) { padding-inline-start: 1.5em; }

/* Flow – pionowy rytm między blokami treści (owl selector). */
.prose > * + * {
	margin-block-start: 1.25em;
}

.prose :is(h2, h3, h4) {
	margin-block-start: 1.8em;
	margin-block-end: 0.5em;
	line-height: 1.2;
}
.prose h2 { font-size: var(--wp--preset--font-size--xl); }
.prose h3 { font-size: var(--wp--preset--font-size--lg); }
.prose h4 { font-size: var(--wp--preset--font-size--md); }

.prose :is(ul, ol) {
	padding-inline-start: 1.5em;
}
.prose li + li {
	margin-block-start: 0.4em;
}

.prose a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.25s ease;
}
.prose a:hover {
	color: var(--wp--preset--color--accent);
}

.prose strong {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

.prose blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25em;
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

.prose img {
	border-radius: var(--wp--custom--radius--md);
}

/* Lead – samodzielne zdanie wprowadzające (większe, lżejsze), bez prose. */
.lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	font-weight: 300;
	color: var(--wp--preset--color--text);
}