/*
Theme Name: Puszasto
Theme URI: https://puszasto.pl
Author: Puszasto
Description: Lekki motyw blokowy dla Puszasto — biblioteka poradników cyfrowych o opiece nad psem i kotem, w sześciu kategoriach gatunek × etap. Kierunek wizualny 2.0 „Jasny dzień”: kość słoniowa, świeża mięta, czyste niebo i ciepła morela, duża typografia redakcyjna, dominująca fotografia i jedna organiczna linia — Ścieżka Puszasto — prowadząca przez całą stronę. Zbudowany pod WooCommerce, zakup pojedynczy i dostęp miesięczny.
Version: 2.3.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kudlato
Tags: block-theme, full-site-editing, e-commerce, blog, accessibility-ready, custom-colors, custom-logo
*/

/* -------------------------------------------------------------------------
   Tokeny, layout i kolory są zdefiniowane w theme.json.
   Ten plik zawiera wyłącznie to, czego theme.json nie potrafi wyrazić:
   komponenty marki, stany, ruch i drobne poprawki dostępności.
   ------------------------------------------------------------------------- */

:root {
	--kudlato-accent: var(--wp--preset--color--mint);
	/*
	 * Przyciemnienie pod tekstem na kadrze. Zdjęcia 2.0 są jasne, więc gradient
	 * musi być mocniejszy niż przy ciemnej fotografii — inaczej biały tytuł
	 * gubi kontrast na białej ścianie w tle. Wartości dobrane na najjaśniejszym
	 * kadrze z zestawu (pies dorosły).
	 */
	--kudlato-scrim: linear-gradient(180deg, rgb(21 63 58 / 0%) 28%, rgb(21 63 58 / 38%) 52%, rgb(15 46 42 / 78%) 76%, rgb(15 46 42 / 92%) 100%);
	--kudlato-shadow-soft: 0 2px 8px rgb(21 63 58 / 6%), 0 18px 44px rgb(21 63 58 / 10%);
	--kudlato-shadow-lift: 0 4px 12px rgb(21 63 58 / 8%), 0 26px 60px rgb(21 63 58 / 16%);
}

/* Jeden akcent na sekcję — klasa ustawia zmienną, komponenty tylko z niej czytają. */
.kudlato-accent-mint { --kudlato-accent: var(--wp--preset--color--mint); }
.kudlato-accent-sky { --kudlato-accent: var(--wp--preset--color--sky); }
.kudlato-accent-apricot { --kudlato-accent: var(--wp--preset--color--apricot); }
.kudlato-accent-sun { --kudlato-accent: var(--wp--preset--color--sun); }

/* Ścieżka Puszasto dostaje akcent atrybutem, bo barwę wybiera JavaScript przy
   przekraczaniu sekcji — kontener ścieżki leży poza nimi i nie odziedziczy klasy.
   Reguły brakowało: `scroll.js` od początku ustawiał `data-accent`, ale nic go nie
   czytało, więc linia i znacznik zawsze zostawały miętowe (wykryte 2 sierpnia 2026
   przy podmianie znacznika na futrzaka). */
.kudlato-track-wrap[data-accent="mint"] { --kudlato-accent: var(--wp--preset--color--mint); }
.kudlato-track-wrap[data-accent="sky"] { --kudlato-accent: var(--wp--preset--color--sky); }
.kudlato-track-wrap[data-accent="apricot"] { --kudlato-accent: var(--wp--preset--color--apricot); }
.kudlato-track-wrap[data-accent="sun"] { --kudlato-accent: var(--wp--preset--color--sun); }
.kudlato-track-wrap[data-accent="oat"] { --kudlato-accent: var(--wp--preset--color--oat); }

[hidden] {
	display: none !important;
}

/* --- Dostępność: pomiń do treści -----------------------------------------
   Link jest generowany przez rdzeń WordPressa (motyw blokowy, `wp_body_open`).
   Tutaj tylko nadpisujemy jego wygląd.
   ------------------------------------------------------------------------- */

a.skip-link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	clip-path: inset(50%);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	height: auto;
	left: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	position: absolute;
	text-decoration: none;
	top: var(--wp--preset--spacing--12);
	white-space: nowrap;
	width: auto;
	z-index: 100000;
}

a.skip-link:focus {
	clip-path: none;
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* --- Fokus: widoczny na jasnym i ciemnym tle ----------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--paper);
}

.has-ink-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.kudlato-on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--paper);
	box-shadow: 0 0 0 5px var(--wp--preset--color--ink);
}

/* --- Przyciski ----------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: -0.005em;
	min-height: 44px; /* cel dotykowy WCAG 2.2 */
	padding: 0.95em 1.7em;
	transition: background-color 160ms var(--kudlato-ease), border-color 160ms var(--kudlato-ease), color 160ms var(--kudlato-ease), transform 160ms var(--kudlato-ease);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	box-shadow: 0 8px 20px rgb(15 46 42 / 16%);
	color: var(--wp--preset--color--white);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink-deep);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--mist);
}

.wp-block-button__link[aria-disabled="true"],
.wp-block-button__link:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.wp-block-button__link.is-loading {
	position: relative;
}

.wp-block-button__link.is-loading::after {
	animation: kudlato-spin 900ms linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	content: "";
	display: inline-block;
	height: 0.85em;
	margin-inline-start: 0.6em;
	vertical-align: -0.1em;
	width: 0.85em;
}

@keyframes kudlato-spin {
	to { transform: rotate(360deg); }
}

/* --- Formularze --------------------------------------------------------- */

:where(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--kudlato-field-border);
	border-radius: var(--wp--custom--radius--field);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	min-height: 44px;
	padding: 10px 12px;
	width: 100%;
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--ink);
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	border-width: 2px;
}

label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: 6px;
}

.kudlato-field-error {
	align-items: flex-start;
	color: var(--wp--preset--color--error);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 6px;
	margin-top: 6px;
}

.kudlato-field-error::before {
	content: "!";
	border: 2px solid currentColor;
	border-radius: 50%;
	flex: 0 0 auto;
	font-weight: 700;
	height: 1.25em;
	line-height: 1.1;
	text-align: center;
	width: 1.25em;
}

.kudlato-field-hint {
	color: var(--wp--preset--color--charcoal);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 6px;
}

/* --- Typografia redakcyjna ---------------------------------------------- */

.wp-block-heading {
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h1.wp-block-heading,
h2.wp-block-heading {
	line-height: 1.04;
}

.has-x-large-font-size + .has-lead-font-size,
.has-xx-large-font-size + .has-lead-font-size,
.has-display-font-size + .has-lead-font-size {
	color: var(--wp--preset--color--charcoal);
	max-inline-size: 52ch;
}

/* Odstęp nagłówek → treść: 24–40 px (decyzja 2.0, sekcja 8). */
.wp-block-heading + p,
.wp-block-heading + .wp-block-buttons {
	margin-top: clamp(24px, 2vw, 40px);
}

.kudlato-prose {
	max-inline-size: 72ch;
}

/* --- Metadane zaufania --------------------------------------------------- */

.kudlato-meta {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.01em;
	line-height: 1.45;
}

.kudlato-meta__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--wp--preset--spacing--16);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Bloki treści marki -------------------------------------------------- */

.kudlato-callout {
	border-left: 4px solid var(--wp--preset--color--moss);
	border-radius: 0 18px 18px 0;
	padding: var(--wp--preset--spacing--24);
}

.kudlato-callout > :first-child { margin-top: 0; }
.kudlato-callout > :last-child { margin-bottom: 0; }

.kudlato-callout__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.kudlato-callout--now {
	background-color: var(--wp--preset--color--mist);
	border-left-color: var(--wp--preset--color--ink);
}

.kudlato-callout--consult {
	background-color: var(--wp--preset--color--oat);
	border-left-color: var(--wp--preset--color--amber-strong);
}

.kudlato-callout--limits {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--moss-strong);
	border-radius: 0 18px 18px 0;
}

/* --- Logo ---------------------------------------------------------------- */

.kudlato-brand {
	display: inline-flex;
	line-height: 0;
	padding: 6px 0;
	text-decoration: none;
}

.kudlato-brand img {
	height: auto;
	width: clamp(118px, 12vw, 156px);
}

.kudlato-brand:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.kudlato-brand--light:focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* =========================================================================
   ŚCIEŻKA PUSZASTO — charakterystyczny element marki
   Jedna organiczna linia pod całą treścią. Rysuje się przy przewijaniu,
   prowadzi świetlny znacznik i zmienia akcent między sekcjami. Bez ruchu
   zostaje spokojną linią kompozycyjną, nigdy nie znika całkiem.
   ========================================================================= */

.kudlato-canvas {
	position: relative;
}

/*
 * `max-width` i `margin-inline` są tu obowiązkowe, mimo że kontener jest
 * absolutnie pozycjonowany i rozpięty na `inset: 0`.
 *
 * Powód: WordPress w układzie „constrained” nakłada na KAŻDE bezpośrednie
 * dziecko sekcji regułę `max-width: contentSize; margin-inline: auto`. Ścieżka
 * dostawała przez to 680 px szerokości na stronie o 1425 px — linia ściskała
 * się do wąskiego pasa na środku, przez większość drogi chowała się za białymi
 * kartami, a znacznik wyglądał, jakby wisiał w pustce (zgłoszone 2 sierpnia
 * 2026, zmierzone na produkcji). Reguła rdzenia używa `:where()`, więc ma
 * zerową specyficzność i zwykła klasa ją nadpisuje.
 */
/* Kontener ścieżki celowo NIE ma `z-index` — pozycjonowany element z ustawionym
   z-indexem zakłada własny kontekst układania i wtedy żadne dziecko nie wyjdzie
   wyżej niż on. Bez tego futrzak nie mógłby wskoczyć nad treść, bo kontener
   trzymałby go na poziomie 0. Kolejność ustawiają teraz dzieci: linia pod
   treścią, znacznik nad nią. `pointer-events: none` dziedziczy się w dół, więc
   futrzak na wierzchu i tak nie przechwytuje kliknięć. */
.kudlato-track-wrap {
	inset: 0;
	margin-inline: 0;
	max-width: none;
	pointer-events: none;
	position: absolute;
}

/* Linia zostaje dekoracją tła: pod kartami, sekcjami i tekstem. */
.kudlato-track {
	position: relative;
	z-index: 0;
}

.kudlato-canvas > *:not(.kudlato-track-wrap) {
	position: relative;
	z-index: 1;
}

.kudlato-track {
	display: block;
	height: 100%;
	width: 100%;
}

.kudlato-track__line {
	opacity: 0.85;
	stroke: var(--kudlato-accent, var(--wp--preset--color--mint));
	stroke-linecap: round;
	/* `vector-effect` sprawia, że to są piksele CSS, nie jednostki viewBoxu. */
	stroke-width: 5;
	transition: stroke 600ms var(--kudlato-ease);
}

.kudlato-track__marker {
	height: 56px;
	/* Kotwica w lewym górnym rogu ścieżki — pozycję nadaje wyłącznie transform
	   (patrz scroll.js), więc znacznik nie rusza układu przy przewijaniu. */
	inset: 0 auto auto 0;
	opacity: 0;
	position: absolute;
	width: 56px;
	/* Nad treścią: karty i sekcje stoją na 1, futrzak ma być widoczny zawsze,
	   także gdy przechodzi przez kafelek albo ciemną sekcję. */
	z-index: 5;
}

/* Poświata w barwie sekcji została po dawnej kropce: to ona niesie sygnał
   „jesteś tutaj”. Sam futrzak ma stałe barwy, więc bez niej znacznik przestałby
   reagować na zmianę akcentu między sekcjami. */
/* Sama poświata, bez obwódki: sylwetka futrzaka jest kudłata, więc równe kółko
   dookoła kłóciłoby się z nią i wracał efekt „monety”. Barwę sekcji niesie teraz
   przede wszystkim linia ścieżki, poświata tylko odcina znacznik od tła. */
.kudlato-track__marker::before {
	border-radius: 50%;
	box-shadow: 0 0 24px 9px color-mix(in srgb, var(--kudlato-accent) 52%, transparent);
	content: "";
	inset: 9px;
	position: absolute;
}

/* Wiatr: pochylenie od pędu przewijania. Osobna warstwa, bo `__marker` trzyma
   pozycję, a `__pet` podskok — trzy transformy na jednym elemencie kasowałyby
   się nawzajem. Oś obrotu przy samym dole, żeby futro odchylało się jak trawa,
   a nie obracało wokół środka. */
.kudlato-track__wind {
	display: block;
	height: 100%;
	position: relative;
	transform-origin: 50% 92%;
	width: 100%;
}

/* Podskok animuje wyłącznie ten element (scroll.js). Punkt obrotu przy dole,
   żeby przysiad przed skokiem wyglądał na oparty o podłoże. */
.kudlato-track__pet {
	display: block;
	height: 100%;
	transform-origin: 50% 84%;
	width: 100%;
}

/* „Ups” — rzadka wpadka futrzaka. Zostaje tam, gdzie się wydarzyła, i sama
   gaśnie. Kotwica w lewym górnym rogu, jak u znacznika. */
.kudlato-track__oops {
	align-items: center;
	display: flex;
	gap: 5px;
	inset: 0 auto auto 0;
	opacity: 0;
	position: absolute;
	z-index: 4;
}

.kudlato-track__oops img {
	display: block;
	height: 27px;
	width: 34px;
}

.kudlato-track__oops b {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
}

/* --- Legowisko na końcu ścieżki ------------------------------------------
   Pojawia się dopiero, gdy futrzak dochodzi do dołu strony — wcześniej pusta
   poducha wisiałaby w powietrzu bez powodu. Leży pod znacznikiem, żeby futrzak
   układał się NA niej, nie za nią. */
/* Kotwica w lewym górnym rogu, jak u znacznika: położenie nadaje wyłącznie
   transform ze scroll.js, bo poducha ma stanąć przy przycisku „Poznaj dostęp
   miesięczny”, a ten wędruje razem z układem. Wcześniejsze `left: 50%` plus
   `translateX(-50%)` dodatkowo mieszało w liczeniu środka. */
.kudlato-track__bed {
	display: block;
	inset: 0 auto auto 0;
	opacity: 0;
	position: absolute;
	width: 150px;
	z-index: 2;
}

.kudlato-track__bed img {
	display: block;
	height: auto;
	width: 100%;
}

/* --- Futrzak w logo -------------------------------------------------------
   Sygnet jest osobnym elementem od napisu, żeby mógł podskakiwać sam. Punkt
   obrotu przy dole — tak jak u znacznika na ścieżce. */
.kudlato-brand {
	align-items: center;
	display: inline-flex;
	gap: 9px;
	text-decoration: none;
}

/* Sygnet jest o skok większy od wysokości liter: futrzak to teraz twarz marki,
   a kudłata sylwetka potrzebuje więcej miejsca niż równy kafel, żeby przy
   26 px nie zlać się w plamę. Napis zszedł do 24 px, żeby proporcja została
   spokojna. */
.kudlato-brand__pet {
	display: block;
	flex: none;
	height: 30px;
	position: relative;
	transform-origin: 50% 86%;
	width: 30px;
	/* Ponad napisem: podczas hasania po nagłówku futrzak przechodzi nad
	   literami, nie za nimi. */
	z-index: 2;
}

.kudlato-brand__pet img {
	display: block;
	height: 100%;
	width: 100%;
}

.kudlato-brand__word {
	display: block;
	height: 24px;
	width: auto;
}

/* Ekrany wąskie: linia zostaje, ale cieńsza i bliżej krawędzi — nie może
   przechodzić pod tekstem tak, żeby go zaburzać. */
@media (max-width: 781px) {
	.kudlato-track__line { stroke-width: 3; }
	.kudlato-track { opacity: 0.7; }

	/* Futrzak schodzi do 42 px — przy 390 px ekranu pełne 56 px zajmowałoby
	   ósmą część szerokości i wchodziło na treść. */
	.kudlato-track__marker { height: 42px; width: 42px; }
}

/* =========================================================================
   HERO 2.0 — trzy plany, mask reveal, CTA od pierwszej klatki
   ========================================================================= */

.kudlato-hero {
	background:
		radial-gradient(80% 60% at 12% 8%, var(--wp--preset--color--mint) 0%, transparent 62%),
		radial-gradient(70% 60% at 92% 24%, var(--wp--preset--color--sky) 0%, transparent 58%),
		linear-gradient(180deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--white) 100%);
	overflow: clip;
	position: relative;
}

/*
 * Runda 2: kolumny mają tworzyć jeden równy blok, a nie tekst obok niższego
 * zdjęcia. Stąd `align-items: stretch` i wspólna minimalna wysokość — kadr
 * dobiera się do tekstu przez `object-fit: cover`, bez rozciągania proporcji.
 */
.kudlato-hero__inner {
	align-items: stretch;
	display: grid;
	gap: var(--wp--preset--spacing--48);
	grid-template-columns: 1fr;
}

.kudlato-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.kudlato-hero__eyebrow {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--16);
	text-transform: uppercase;
}

.kudlato-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0;
	max-inline-size: 15ch;
	text-wrap: balance;
}

.kudlato-hero__lead {
	font-size: var(--wp--preset--font-size--lead);
	margin: clamp(24px, 2vw, 40px) 0 0;
	max-inline-size: 46ch;
}

.kudlato-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12);
	margin-top: var(--wp--preset--spacing--32);
}

.kudlato-hero__note {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	margin-top: var(--wp--preset--spacing--24);
}

.kudlato-hero__stage {
	/* Na wąskim ekranie kadr idzie pod tekst i trzyma proporcję 4:3. */
	aspect-ratio: 4 / 3;
	position: relative;
}

.kudlato-hero__layer {
	position: absolute;
}

.kudlato-hero__layer--bg {
	background:
		radial-gradient(60% 60% at 30% 30%, var(--wp--preset--color--sun) 0%, transparent 70%),
		radial-gradient(70% 70% at 75% 65%, var(--wp--preset--color--apricot) 0%, transparent 68%);
	border-radius: 50% 46% 54% 48%;
	filter: blur(6px);
	inset: -6% -4% 4% -8%;
	opacity: 0.55;
}

.kudlato-hero__layer--mid {
	border-radius: var(--wp--custom--radius--module);
	box-shadow: var(--kudlato-shadow-lift);
	inset: 0;
	overflow: hidden;
}

.kudlato-hero__layer--mid picture,
.kudlato-hero__layer--mid img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 900px) {
	.kudlato-hero__inner {
		gap: var(--wp--preset--spacing--64);
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	}

	/*
	 * Wspólna minimalna wysokość obu kolumn. Tekst decyduje, gdy jest wyższy;
	 * kadr nigdy nie zostaje niższy i nie zostawia pustego pasa pod sobą.
	 */
	.kudlato-hero__text,
	.kudlato-hero__stage {
		min-height: clamp(680px, 50vw, 760px);
	}

	.kudlato-hero__stage {
		aspect-ratio: auto;
	}
}

/* =========================================================================
   SELEKTOR „ZNAJDŹ SWOJĄ ŚCIEŻKĘ”
   Etykietami wyboru są duże sceny, nie kapsułki. Natywne pola radio zostają
   pod spodem: obsługa klawiaturą, czytnik ekranu i działanie bez JavaScriptu.
   ========================================================================= */

.kudlato-finder {
	--kudlato-accent: var(--wp--preset--color--mint);
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
}

.kudlato-finder__head {
	margin-bottom: var(--wp--preset--spacing--48);
	max-width: 60ch;
}

.kudlato-finder__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}

.kudlato-finder__lead {
	font-size: var(--wp--preset--font-size--lead);
	margin: clamp(24px, 2vw, 40px) 0 0;
}

.kudlato-finder__group {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.kudlato-finder__legend {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--16);
	padding: 0;
	text-transform: uppercase;
}

.kudlato-finder__legend:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.kudlato-finder__scenes {
	display: grid;
	gap: var(--wp--preset--spacing--16);
	grid-template-columns: 1fr;
}

.kudlato-finder__scene {
	position: relative;
}

.kudlato-finder__input {
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	clip-path: inset(50%);
}

.kudlato-finder__card {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--module);
	box-shadow: var(--kudlato-shadow-soft);
	cursor: pointer;
	display: block;
	font-weight: 400;
	margin: 0;
	min-height: 360px;
	overflow: hidden;
	position: relative;
	transition: box-shadow 320ms var(--kudlato-ease), transform 320ms var(--kudlato-ease);
}

.kudlato-finder__media {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
}

.kudlato-finder__media::after {
	background: var(--kudlato-scrim);
	content: "";
	inset: 0;
	position: absolute;
}

.kudlato-finder__img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--kudlato-ease);
	width: 100%;
}

.kudlato-finder__caption {
	display: block;
	inset: auto 0 0 0;
	padding: var(--wp--preset--spacing--32);
	position: absolute;
	/* Drugi poziom zabezpieczenia kontrastu obok gradientu — na wypadek kadru
	   jaśniejszego niż ten, na którym dobrano gradient. */
	text-shadow: 0 1px 12px rgb(15 46 42 / 45%);
}

.kudlato-finder__name {
	color: var(--wp--preset--color--white);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.kudlato-finder__hint {
	color: var(--wp--preset--color--white);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 8px;
	max-width: 34ch;
	opacity: 0.92;
}

/* Stan wyboru i fokus są widoczne bez hoveru i nie polegają na samym kolorze. */
.kudlato-finder__card:hover,
.kudlato-finder__input:focus-visible + .kudlato-finder__card {
	box-shadow: var(--kudlato-shadow-lift);
	transform: translateY(-4px);
}

.kudlato-finder__card:hover .kudlato-finder__img {
	transform: scale(1.04);
}

.kudlato-finder__input:focus-visible + .kudlato-finder__card {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.kudlato-finder__input:checked + .kudlato-finder__card::after {
	background: var(--kudlato-accent);
	border-radius: 999px;
	content: "";
	height: 10px;
	inset: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) auto auto;
	position: absolute;
	width: 44px;
}

@media (min-width: 900px) {
	.kudlato-finder__scenes {
		gap: var(--wp--preset--spacing--24);
		grid-template-columns: 1fr 1fr;
	}

	.kudlato-finder__card {
		min-height: clamp(560px, 48vw, 760px);
	}

	.kudlato-finder__scenes--three {
		grid-template-columns: repeat(3, 1fr);
	}

	.kudlato-finder__scenes--three .kudlato-finder__card {
		min-height: clamp(360px, 30vw, 440px);
	}
}

/* Mobile: karty etapów przewijają się poziomo z widocznym fragmentem następnej,
   ale bez przejmowania pionowego scrolla i bez pułapki przewijania. */
@media (max-width: 899px) {
	.kudlato-finder__scenes--three {
		grid-auto-columns: 78%;
		grid-auto-flow: column;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-bottom: var(--wp--preset--spacing--12);
		scroll-snap-type: x proximity;
	}

	.kudlato-finder__scenes--three .kudlato-finder__scene {
		scroll-snap-align: start;
	}
}

/* --- Widoczność kroków ---------------------------------------------------
   Jeden krok naraz jest wymuszony CSS-em, a nie JavaScriptem. Atrybut
   `data-active-step` ustawia serwer na podstawie parametrów `kf_gatunek`
   i `kf_etap`; skrypt tylko go przełącza. Dzięki temu awaria albo brak
   `finder.js` nie może rozwinąć selektora w jedną długą kolumnę ze wszystkimi
   krokami i sześcioma wynikami naraz.
   `display: none` (a nie `visibility`) wyjmuje ukryte pola radio z kolejności
   tabulacji — bez tego klawiatura wchodziłaby w niewidoczne kroki.
   ------------------------------------------------------------------------- */

.kudlato-finder__step {
	position: relative;
}

.kudlato-finder[data-active-step="species"] [data-kudlato-step="stage"],
.kudlato-finder[data-active-step="species"] [data-kudlato-step="result"],
.kudlato-finder[data-active-step="stage"] [data-kudlato-step="species"],
.kudlato-finder[data-active-step="stage"] [data-kudlato-step="result"],
.kudlato-finder[data-active-step="result"] [data-kudlato-step="species"],
.kudlato-finder[data-active-step="result"] [data-kudlato-step="stage"],
/* Wariant awaryjny: gdyby atrybut w ogóle nie powstał, zostaje sam krok 1. */
.kudlato-finder:not([data-active-step]) [data-kudlato-step="stage"],
.kudlato-finder:not([data-active-step]) [data-kudlato-step="result"] {
	display: none;
}

/* Etapy psa i kota nigdy razem; wynik zawsze dokładnie jeden. */
.kudlato-finder__group--stages:not([data-current]),
.kudlato-finder__result:not([data-current]) {
	display: none;
}

.kudlato-finder__submit {
	margin-top: var(--wp--preset--spacing--24);
}

/* Podgląd kategorii — trzeci stan selektora. */
.kudlato-finder__result {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--48);
	grid-template-columns: 1fr;
}

.kudlato-finder__stack {
	display: grid;
	grid-template-areas: "stack";
	margin: 0 auto;
	max-width: 380px;
	place-items: center;
	width: 100%;
}

.kudlato-finder__sheet {
	background-color: var(--wp--preset--color--white);
	border-radius: 18px;
	box-shadow: var(--kudlato-shadow-soft);
	grid-area: stack;
	overflow: hidden;
	width: 74%;
}

.kudlato-finder__sheet img {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kudlato-finder__sheet--blank {
	aspect-ratio: 3 / 4;
	background:
		linear-gradient(160deg, var(--kudlato-accent) 0%, var(--wp--preset--color--white) 70%);
}

/* Okładka z prawdziwą grafiką jest zawsze na wierzchu — puste karty tylko
   sugerują, że w kategorii jest więcej materiałów. */
.kudlato-finder__sheet[data-kudlato-sheet="1"] { transform: rotate(-4deg) translate(-16%, 2%); z-index: 3; }
.kudlato-finder__sheet[data-kudlato-sheet="2"] { transform: rotate(1deg) translate(0, -2%); z-index: 2; }
.kudlato-finder__sheet[data-kudlato-sheet="3"] { transform: rotate(5deg) translate(16%, 3%); z-index: 1; }

.kudlato-finder__eyebrow {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.kudlato-finder__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 8px 0 0;
}

.kudlato-finder__title:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.kudlato-finder__benefit {
	font-size: var(--wp--preset--font-size--lead);
	margin: var(--wp--preset--spacing--16) 0 0;
	max-width: 46ch;
}

.kudlato-finder__access {
	background-color: color-mix(in srgb, var(--kudlato-accent) 40%, var(--wp--preset--color--white));
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--24) 0 0;
	max-width: 48ch;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.kudlato-finder__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	margin-top: var(--wp--preset--spacing--24);
}

.kudlato-finder__reset {
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	min-height: 44px;
	padding: 0 4px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 900px) {
	.kudlato-finder__result {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	}

	.kudlato-finder__stack {
		max-width: none;
	}
}

/* Bez JavaScriptu krok kończy zwykły przycisk wysyłki — z JavaScriptem znika,
   bo przejście robi się bez przeładowania. */
.kudlato-finder[data-enhanced] .kudlato-finder__submit {
	display: none;
}

/* =========================================================================
   SZACHOWNICA SZEŚCIU KATEGORII
   Duże moduły 7/5, zdjęcie jest treścią, tytuł i CTA leżą na kadrze.
   Żadnych etykiet „PIES” i „KOT” — gatunek widać na zdjęciu i w tytule.
   ========================================================================= */

.kudlato-board__intro {
	margin: 0 auto var(--wp--preset--spacing--48);
	max-width: 62ch;
	text-align: center;
}

.kudlato-board__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}

.kudlato-board__lead {
	font-size: var(--wp--preset--font-size--lead);
	margin: clamp(24px, 2vw, 40px) auto 0;
	max-width: 54ch;
}

/*
 * Runda 2: naprzemienna szachownica 7/5 zamieniona na równą siatkę 3 × 2.
 * Pierwszy rząd to trzy ścieżki psie, drugi trzy kocie — kolejność wynika
 * z `kudlato_core_categories()`, więc siatka niczego nie przestawia.
 * Wszystkie karty mają tę samą szerokość i wysokość (proporcja 4:5).
 */
/*
 * Szachownica wychodzi poza standardową szerokość treści: sześć kart ma
 * wypełniać ekran, a nie stać w kolumnie 1240 px. Górna granica pilnuje, żeby
 * na monitorze 2560 px karta nie urosła do rozmiaru billboardu.
 */
.kudlato-board-full > .kudlato-board,
.kudlato-board-full .kudlato-board__grid,
.kudlato-board-full .kudlato-board__intro {
	margin-inline: auto;
	max-width: 1800px;
}

.kudlato-board__grid {
	display: grid;
	gap: clamp(24px, 2vw, 32px);
	grid-template-columns: 1fr;
}

/*
 * Karta rośnie razem z tekstem. Wcześniej trzymało ją `aspect-ratio: 4/5`,
 * a treść leżała absolutnie przy dolnej krawędzi — przy węższych kolumnach
 * (ok. 293 px) tytuł nie mieścił się w wyliczonej wysokości i był ucinany
 * u góry. Teraz zdjęcie jest tłem, tekst płynie w kolumnie, a `min-height`
 * daje tylko dolną granicę. Równe wysokości w rzędzie załatwia sama siatka.
 */
.kudlato-board__module {
	background-color: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--module);
	box-shadow: var(--kudlato-shadow-soft);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(380px, 26vw, 560px);
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: box-shadow 360ms var(--kudlato-ease), transform 360ms var(--kudlato-ease);
}

.kudlato-board__media {
	display: block;
	inset: 0;
	position: absolute;
}

.kudlato-board__media::after {
	background: var(--kudlato-scrim);
	content: "";
	inset: 0;
	position: absolute;
}

.kudlato-board__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.kudlato-board__body {
	display: block;
	padding: clamp(20px, 2vw, 32px);
	position: relative;
	text-shadow: 0 1px 12px rgb(15 46 42 / 45%);
}

.kudlato-board__eyebrow {
	color: var(--wp--preset--color--white);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	opacity: 0.9;
	text-transform: uppercase;
}

.kudlato-board__title {
	color: var(--wp--preset--color--white);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	/* Skala liczona z szerokości kolumny, nie z ekranu — przy trzech kolumnach
	   nagłówek H2 był tak duży, że wypychał resztę treści poza kartę. */
	font-size: clamp(1.35rem, 1.1vw + 0.9rem, 2rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.06;
	margin-top: 10px;
	text-wrap: balance;
}

.kudlato-board__benefit {
	color: var(--wp--preset--color--white);
	display: block;
	font-size: clamp(0.875rem, 0.3vw + 0.8rem, 1rem);
	line-height: 1.45;
	margin-top: 10px;
	max-width: 42ch;
	opacity: 0.94;
}

.kudlato-board__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	margin-top: var(--wp--preset--spacing--24);
}

/* CTA jest widoczne od razu, także na telefonie — nie chowamy go pod hover. */
.kudlato-board__cta {
	align-items: center;
	background-color: var(--kudlato-accent);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-weight: 600;
	gap: 8px;
	min-height: 44px;
	padding: 0 22px;
}

.kudlato-board__cta::after {
	content: "→";
	transition: transform 260ms var(--kudlato-ease);
}

.kudlato-board__count {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	opacity: 0.86;
}

.kudlato-board__module:hover,
.kudlato-board__module:focus-visible {
	box-shadow: var(--kudlato-shadow-lift);
	transform: translateY(-6px);
}

.kudlato-board__module:hover .kudlato-board__cta::after {
	transform: translateX(4px);
}

/* Duży tablet: dwie kolumny. Desktop: trzy. Telefon: jedna. */
@media (min-width: 640px) {
	.kudlato-board__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.kudlato-board__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kudlato-board__body { padding: var(--wp--preset--spacing--32); }
}

@media (max-width: 639px) {
	.kudlato-board__module {
		min-height: 360px;
	}
}

/* =========================================================================
   KARTY POJEDYNCZYCH PORADNIKÓW
   Pojawiają się w kategorii i w rekomendacjach — nigdy jako sześć kafelków
   udających całą ofertę.
   ========================================================================= */

.kudlato-guides__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 0;
}

.kudlato-guides__grid,
.kudlato-catalog__grid {
	display: grid;
	gap: var(--wp--preset--spacing--24);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.kudlato-guides__grid,
	.kudlato-catalog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.kudlato-guides__grid,
	.kudlato-catalog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kudlato-guide {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--kudlato-shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--24);
	transition: box-shadow 300ms var(--kudlato-ease), transform 300ms var(--kudlato-ease);
}

.kudlato-guide:hover,
.kudlato-guide:focus-within {
	box-shadow: var(--kudlato-shadow-lift);
	transform: translateY(-4px);
}

.kudlato-guide__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.kudlato-guide__media {
	display: block;
	overflow: hidden;
}

.kudlato-guide__cover {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 500ms var(--kudlato-ease);
	width: 100%;
}

.kudlato-guide:hover .kudlato-guide__cover {
	transform: scale(1.03);
}

.kudlato-guide__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.16;
	margin: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24) 0;
}

.kudlato-guide__result,
.kudlato-guide__price,
.kudlato-guide__library,
.kudlato-guide__cta {
	margin: 8px var(--wp--preset--spacing--24) 0;
}

.kudlato-guide__price {
	display: block;
	font-weight: 600;
}

.kudlato-guide__library {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
}

.kudlato-guide__cta {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	margin-top: var(--wp--preset--spacing--16);
}

.kudlato-guide__cta::after {
	content: " →";
}

/* =========================================================================
   DWIE FORMY DOSTĘPU I PORÓWNANIE
   ========================================================================= */

/* --- Pasek sygnałów zaufania ---------------------------------------------
   Pięć kolumn na desktopie, dwie na tablecie, jedna na telefonie. Ikona daje
   oku punkt zaczepienia, podpis jest wytłuszczony, a opis schodzi do drugiego
   planu kolorem — wcześniej wszystko było jednakowo szare i pasek znikał.
   ------------------------------------------------------------------------- */

.kudlato-trust {
	display: grid;
	gap: clamp(20px, 2.4vw, 40px);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0;
}

/* Ikona nad tekstem, wszystko w jednej osi — sygnały czytają się wtedy jako
   pięć równorzędnych kolumn, a nie jako lista z ozdobnikiem z boku. */
.kudlato-trust__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.kudlato-trust__icon {
	fill: none;
	height: 34px;
	stroke: var(--wp--preset--color--ink);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 34px;
}

.kudlato-trust__title {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	line-height: 1.25;
}

.kudlato-trust__text {
	color: var(--wp--preset--color--moss-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

@media (min-width: 600px) {
	.kudlato-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.kudlato-trust {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --- Badge „LUB” --------------------------------------------------------
   Runda 2: samotny napis „ALBO” ginął w pustej przestrzeni. Zastępuje go
   okrągły znacznik z ikoną dwóch rozchodzących się kierunków i czytelnym
   tekstem — ikona bez podpisu byłaby zagadką.
   ------------------------------------------------------------------------- */

.kudlato-or {
	align-items: center;
	align-self: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	border-radius: 999px;
	box-shadow: var(--kudlato-shadow-soft);
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: clamp(64px, 6vw, 80px);
	justify-content: center;
	justify-self: center;
	width: clamp(64px, 6vw, 80px);
}

.kudlato-or__icon {
	display: block;
	fill: none;
	height: 22px;
	stroke: var(--wp--preset--color--ink);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 22px;
}

.kudlato-or__label {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
}

/* --- Skrócone porównanie form dostępu ------------------------------------ */

.kudlato-access {
	align-items: stretch;
	display: grid;
	gap: var(--wp--preset--spacing--16);
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 1180px;
}

.kudlato-access__card {
	background-color: color-mix(in srgb, var(--kudlato-accent) 34%, var(--wp--preset--color--white));
	border-radius: var(--wp--custom--radius--module);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(240px, 22vw, 340px);
	padding: clamp(24px, 3vw, 48px);
}

.kudlato-access__icon {
	display: block;
	fill: none;
	height: clamp(40px, 3.4vw, 56px);
	margin-bottom: var(--wp--preset--spacing--16);
	stroke: var(--wp--preset--color--ink);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: clamp(40px, 3.4vw, 56px);
}

.kudlato-access__card p {
	margin-bottom: 0;
	max-width: 42ch;
}

.kudlato-access__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--16);
}

@media (min-width: 782px) {
	.kudlato-access {
		gap: var(--wp--preset--spacing--32);
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}
}

.kudlato-compare {
	margin-inline: auto;
	max-width: 1280px;
}

.kudlato-compare__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0 auto var(--wp--preset--spacing--48);
	max-width: 20ch;
	text-align: center;
}

/*
 * Szerokość dobrana w dwóch krokach. 1180 px łamało punkty listy po dwa–trzy
 * słowa, 1500 px na ekranie FHD dochodziło do krawędzi strony i zostawiało
 * pustkę w środku lewej karty. 1280 px mieści każdy punkt w jednym wierszu
 * i zachowuje margines po bokach.
 */
.kudlato-compare__grid {
	align-items: stretch;
	display: grid;
	gap: var(--wp--preset--spacing--24);
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 1280px;
}

/*
 * Obie karty mają tę samą wysokość, listy startują na tej samej linii,
 * a CTA siedzą na wspólnej dolnej osi — stąd kolumnowy flex z rozpychającym
 * `margin-top: auto` przy przycisku.
 */
.kudlato-compare__side {
	background-color: var(--wp--preset--color--white);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--module);
	box-shadow: var(--kudlato-shadow-soft);
	display: flex;
	flex-direction: column;
	min-height: clamp(360px, 30vw, 480px);
	padding: clamp(24px, 2.4vw, 40px);
	transition: border-color 300ms var(--kudlato-ease), box-shadow 300ms var(--kudlato-ease), transform 300ms var(--kudlato-ease);
}

/* Wyróżnienie akcentem i skalą, nigdy wygaszeniem — karta bez fokusu nadal
   musi być w pełni czytelna. */
.kudlato-compare__side.is-current {
	border-color: var(--kudlato-accent);
	box-shadow: var(--kudlato-shadow-lift);
	transform: scale(1.02);
}

.kudlato-compare__side h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 0;
	min-height: 2.4em;
}

.kudlato-compare__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kudlato-compare__list li {
	padding-left: 28px;
	position: relative;
}

.kudlato-compare__list li + li {
	margin-top: 10px;
}

.kudlato-compare__list li::before {
	background-color: var(--kudlato-accent);
	border-radius: 999px;
	content: "";
	height: 10px;
	inset-inline-start: 0;
	position: absolute;
	top: 0.55em;
	width: 10px;
}

.kudlato-compare__side--single { --kudlato-accent: var(--wp--preset--color--sky); }
.kudlato-compare__side--library { --kudlato-accent: var(--wp--preset--color--apricot); }

.kudlato-compare__stack {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 var(--wp--preset--spacing--24);
}

.kudlato-compare__tile {
	border-radius: 12px;
	box-shadow: var(--kudlato-shadow-soft);
	display: block;
	overflow: hidden;
}

.kudlato-compare__cover {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* `auto` w górnym marginesie spycha CTA na dół karty — obie karty kończą się
   przyciskiem na tej samej wysokości niezależnie od długości listy. */
.kudlato-compare__cta {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--24);
}

@media (min-width: 900px) {
	.kudlato-compare__grid {
		gap: var(--wp--preset--spacing--32);
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}
}

/* =========================================================================
   PLAN DOSTĘPU MIESIĘCZNEGO
   ========================================================================= */

.kudlato-plan__box {
	background-color: color-mix(in srgb, var(--kudlato-accent) 26%, var(--wp--preset--color--white));
	border-radius: var(--wp--custom--radius--module);
	margin-inline: auto;
	max-width: 46rem;
	padding: var(--wp--preset--spacing--48);
}

.kudlato-plan__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 0;
}

.kudlato-plan__price {
	margin: 0 0 var(--wp--preset--spacing--24);
}

.kudlato-plan__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.kudlato-plan__period {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
}

.kudlato-plan__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kudlato-plan__list li {
	padding-left: 28px;
	position: relative;
}

.kudlato-plan__list li + li {
	margin-top: 12px;
}

.kudlato-plan__list li::before {
	background-color: var(--wp--preset--color--ink);
	border-radius: 999px;
	content: "";
	height: 8px;
	inset-inline-start: 0;
	position: absolute;
	top: 0.6em;
	width: 8px;
}

.kudlato-plan__cta {
	margin: var(--wp--preset--spacing--32) 0 0;
}

.kudlato-plan__note {
	color: var(--wp--preset--color--moss-strong);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
}

/* =========================================================================
   STOS PRZYKŁADOWYCH PORADNIKÓW
   ========================================================================= */

.kudlato-stack__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 0;
}

.kudlato-stack__grid {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--48);
	grid-template-columns: 1fr;
}

.kudlato-stack__sheets {
	display: grid;
	grid-template-areas: "stack";
	min-height: 340px;
	place-items: center;
}

.kudlato-stack__sheet {
	border-radius: 16px;
	box-shadow: var(--kudlato-shadow-soft);
	display: block;
	grid-area: stack;
	overflow: hidden;
	width: min(58%, 240px);
}

.kudlato-stack__sheet.is-current {
	box-shadow: var(--kudlato-shadow-lift);
	outline: 3px solid var(--kudlato-accent);
	outline-offset: 3px;
}

.kudlato-stack__cover {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kudlato-stack__notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kudlato-stack__note {
	border-left: 3px solid transparent;
	opacity: 0.55;
	padding-left: var(--wp--preset--spacing--16);
	transition: opacity 300ms var(--kudlato-ease), border-color 300ms var(--kudlato-ease);
}

.kudlato-stack__note + .kudlato-stack__note {
	margin-top: var(--wp--preset--spacing--16);
}

.kudlato-stack__note.is-current {
	border-left-color: var(--wp--preset--color--ink);
	opacity: 1;
}

.kudlato-stack__eyebrow {
	color: var(--wp--preset--color--moss-strong);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kudlato-stack__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
}

@media (min-width: 900px) {
	.kudlato-stack__grid {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	}

	.kudlato-stack__sheets {
		min-height: 420px;
	}
}

/* =========================================================================
   PRÓBKA PORADNIKA — trzy rozkładówki
   ========================================================================= */

.kudlato-sample {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--48);
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}

.kudlato-sample__eyebrow {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.kudlato-sample__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 10px 0 0;
	max-width: 18ch;
}

.kudlato-sample__lead {
	margin: clamp(24px, 2vw, 40px) 0 0;
	max-width: 52ch;
}

.kudlato-sample__note {
	color: var(--wp--preset--color--moss-strong);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--16) 0 0;
	max-width: 52ch;
}

.kudlato-sample__cta {
	margin: var(--wp--preset--spacing--32) 0 0;
}

/* --- Dwa ekrany z prawdziwą zawartością ----------------------------------
   Zamiast zdjęć tabletu z pustymi prostokątami rysujemy stronę poradnika
   w HTML: tekst jest ostry w każdej rozdzielczości, da się go przetłumaczyć
   i przeczyta go czytnik ekranu. Perspektywa i maska ekranu są w CSS.
   ------------------------------------------------------------------------- */

/*
 * Ekrany stoją obok siebie, a nie jeden na drugim. Nakładanie wyglądało
 * efektownie, ale ucinało spis treści w połowie słowa — a to jest sekcja,
 * której zadaniem jest pokazać, że fragment da się przeczytać.
 */
.kudlato-sample__screens {
	align-items: center;
	display: grid;
	gap: clamp(12px, 1.5vw, 20px);
	grid-template-columns: 1fr;
	min-height: clamp(360px, 36vw, 520px);
}

.kudlato-sample__screen {
	background-color: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	border-radius: 22px;
	box-shadow: var(--kudlato-shadow-lift);
	overflow: hidden;
	padding: 12px;
	width: 100%;
}

/* Przesunięcie i lekki obrót zostają w 2D. Trójwymiarowe `rotateY` ładnie
   wygląda, ale GSAP animujący ten sam `transform` musiałby rozkładać macierz
   3D — a wtedy przy scrollu ekran potrafi „przeskoczyć”. */
/* Ekrany zachodzą na siebie tylko krawędzią — tytuł i spis treści na okładce
   muszą zostać czytelne, inaczej sekcja pokazuje pół strony. */
.kudlato-sample__screen--cover {
	rotate: -2.5deg;
	translate: 0 -10px;
}

.kudlato-sample__screen--page {
	rotate: 2.5deg;
	translate: 0 10px;
}

.kudlato-sample__page {
	background-color: var(--wp--preset--color--paper);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: clamp(16px, 2vw, 24px);
}

.kudlato-sample__label {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.kudlato-sample__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

.kudlato-sample__title--small {
	font-size: 1.125rem;
}

.kudlato-sample__sub {
	color: var(--wp--preset--color--moss-strong);
	font-size: 0.8125rem;
	margin: 0 0 4px;
}

.kudlato-sample__toc-label,
.kudlato-sample__field-label {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	margin: 0;
	padding-top: 10px;
	text-transform: uppercase;
}

.kudlato-sample__toc {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	gap: 8px;
	line-height: 1.3;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kudlato-sample__toc li {
	align-items: baseline;
	display: flex;
	gap: 10px;
}

.kudlato-sample__toc span {
	color: var(--kudlato-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
}

.kudlato-sample__tasks {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	gap: 10px;
	line-height: 1.35;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kudlato-sample__tasks li {
	padding-left: 26px;
	position: relative;
}

.kudlato-sample__tasks li::before {
	border: 2px solid var(--wp--preset--color--moss);
	border-radius: 5px;
	content: "";
	height: 14px;
	inset-inline-start: 0;
	position: absolute;
	top: 2px;
	width: 14px;
}

.kudlato-sample__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 2px;
}

.kudlato-sample__field span {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	display: block;
	height: 1px;
}

.kudlato-sample__field span:last-child {
	width: 62%;
}

@media (min-width: 900px) {
	.kudlato-sample {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	}

	.kudlato-sample__screens {
		grid-template-columns: 1fr 1fr;
	}
}

/* Na telefonie ekrany idą jeden pod drugim i tracą obrót — obrócona karta
   na pełnej szerokości wchodziłaby w margines. */
@media (max-width: 599px) {
	.kudlato-sample__screen--cover,
	.kudlato-sample__screen--page {
		rotate: none;
		translate: none;
	}
}

/* =========================================================================
   STRONA KATEGORII
   ========================================================================= */

.kudlato-cathero {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--48);
	grid-template-columns: 1fr;
}

.kudlato-cathero__eyebrow {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.kudlato-cathero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 10px 0 0;
	max-width: 16ch;
}

.kudlato-cathero__benefit {
	font-size: var(--wp--preset--font-size--lead);
	margin: clamp(24px, 2vw, 40px) 0 0;
	max-width: 46ch;
}

.kudlato-cathero__access {
	background-color: color-mix(in srgb, var(--kudlato-accent) 38%, var(--wp--preset--color--white));
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--24) 0 0;
	max-width: 50ch;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.kudlato-cathero__siblings {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	list-style: none;
	margin: var(--wp--preset--spacing--24) 0 0;
	padding: 0;
}

.kudlato-cathero__siblings-label {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
}

.kudlato-cathero__media {
	border-radius: var(--wp--custom--radius--module);
	box-shadow: var(--kudlato-shadow-lift);
	overflow: hidden;
}

.kudlato-cathero__img {
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 900px) {
	.kudlato-cathero {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	}
}

/* --- Grafika kategorii na landingu taksonomii ---------------------------- */

.kudlato-taxonomy-hero {
	margin: 0;
}

.kudlato-taxonomy-hero img {
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--hero);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kudlato-taxonomy-hero img[src$=".svg"] {
	aspect-ratio: auto;
	border-radius: 0;
	max-width: 340px;
}

.kudlato-empty {
	background-color: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
	text-align: center;
}

.kudlato-empty img {
	height: auto;
	margin: 0 auto var(--wp--preset--spacing--16);
	max-width: 320px;
	width: 100%;
}

.kudlato-empty h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 0;
}

.kudlato-empty p {
	margin: 0 auto;
	max-width: 46ch;
}

/* =========================================================================
   FINAŁOWE CTA
   ========================================================================= */

.kudlato-final {
	background:
		radial-gradient(70% 70% at 18% 20%, var(--wp--preset--color--mint) 0%, transparent 62%),
		radial-gradient(60% 60% at 86% 70%, var(--wp--preset--color--sun) 0%, transparent 60%),
		var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--module);
	overflow: clip;
	position: relative;
}

.kudlato-final h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin-inline: auto;
	max-inline-size: 18ch;
	text-align: center;
	text-wrap: balance;
}

.kudlato-final__layers {
	display: flex;
	gap: var(--wp--preset--spacing--16);
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--48);
}

.kudlato-final__layer {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--kudlato-shadow-soft);
	display: block;
	overflow: hidden;
	width: min(30%, 300px);
}

.kudlato-final__layer:nth-child(2) {
	margin-top: var(--wp--preset--spacing--32);
	width: min(38%, 380px);
}

.kudlato-final__layer img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kudlato-final .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--32);
}

/* =========================================================================
   SKLEP: stany i drobne komponenty
   ========================================================================= */

.kudlato-badge {
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--wp--preset--color--moss-strong);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin-bottom: var(--wp--preset--spacing--8);
	padding: 4px 10px;
	text-transform: uppercase;
}

.kudlato-status {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.kudlato-unavailable {
	background-color: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	margin-block: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--24);
}

.kudlato-unavailable p:first-child { margin-top: 0; }
.kudlato-unavailable p:last-child { margin-bottom: 0; }

.kudlato-unavailable__help {
	color: var(--wp--preset--color--moss-strong);
	font-size: var(--wp--preset--font-size--small);
}

.kudlato-product-terms {
	margin-block: var(--wp--preset--spacing--24);
}

.kudlato-product-terms__library {
	background-color: color-mix(in srgb, var(--wp--preset--color--apricot) 34%, var(--wp--preset--color--white));
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
}

.kudlato-product-terms__list {
	font-size: var(--wp--preset--font-size--small);
	padding-inline-start: 1.25rem;
}

.kudlato-product-terms__list li {
	margin-block: 6px;
}

/* --- Grafika ilustracyjna ----------------------------------------------- */

.kudlato-role-figure {
	margin: 0 0 var(--wp--preset--spacing--12);
}

.kudlato-role-figure img {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--card);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kudlato-illustrative {
	color: var(--wp--preset--color--moss-strong);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	margin-top: 6px;
}

/* --- Ciemne powierzchnie ------------------------------------------------- */

.has-ink-background-color :where(a):not(.wp-block-button__link),
.kudlato-footer :where(a):not(.wp-block-button__link) {
	color: var(--wp--preset--color--mint);
}

.has-ink-background-color :where(a):not(.wp-block-button__link):hover,
.kudlato-footer :where(a):not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--white);
}

.kudlato-footer--checkout :where(a):not(.wp-block-button__link) {
	color: var(--wp--preset--color--ink);
}

.kudlato-footer__list {
	list-style: none;
}

.kudlato-footer__list li + li {
	margin-top: 6px;
}

/* --- Wyśrodkowane otwarcia sekcji ----------------------------------------
   Bez globalnego `text-align: center`. Centrowane są wyłącznie te dwa
   komponenty, o które chodziło: nagłówek nad siatką trzech kart oraz blok
   „nagłówek + akapit” przy dwóch filarach weryfikacji.
   ------------------------------------------------------------------------- */

.kudlato-section-heading {
	margin-inline: auto;
	max-inline-size: none;
	text-align: center;
	width: 100%;
}

.kudlato-section-intro {
	margin-inline: auto;
	max-width: 800px;
	text-align: center;
}

.kudlato-section-intro > * {
	margin-inline: auto;
}

/* =========================================================================
   FAQ
   Nagłówek jest wyśrodkowany względem listy, a nie względem szerokości sekcji.
   Pytania są większe, cały wiersz jest celem dotykowym, a strzałka rdzenia
   ustępuje własnemu, czytelnemu znacznikowi.
   ========================================================================= */

.kudlato-faq {
	margin-inline: auto;
	max-width: 1000px;
}

.kudlato-faq__heading {
	margin-inline: auto;
	max-width: 900px;
}

.kudlato-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	margin-top: clamp(24px, 3vw, 40px);
}

.kudlato-faq .wp-block-details {
	background-color: var(--wp--preset--color--white);
	transition: border-color 200ms var(--kudlato-ease), box-shadow 200ms var(--kudlato-ease);
}

.kudlato-faq .wp-block-details > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: clamp(1rem, 1.1vw + 0.6rem, 1.25rem);
	font-weight: 600;
	gap: var(--wp--preset--spacing--16);
	line-height: 1.4;
	/* Cel dotykowy z zapasem ponad minimum WCAG 2.2. */
	min-height: 56px;
	list-style: none;
	padding-block: 4px;
}

.kudlato-faq .wp-block-details > summary::-webkit-details-marker,
.kudlato-faq .wp-block-details > summary::marker {
	display: none;
	content: "";
}

/* Własny znacznik: czytelniejszy niż domyślny trójkąt i obraca się przy
   otwarciu, więc stan nie jest komunikowany samym położeniem treści. */
.kudlato-faq .wp-block-details > summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	flex: 0 0 auto;
	height: 10px;
	margin-inline-start: auto;
	rotate: 45deg;
	transition: rotate 200ms var(--kudlato-ease);
	width: 10px;
}

.kudlato-faq .wp-block-details[open] > summary::after {
	rotate: -135deg;
}

.kudlato-faq .wp-block-details:hover {
	border-color: var(--wp--preset--color--moss);
}

.kudlato-faq .wp-block-details > summary:focus-visible {
	border-radius: 6px;
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.kudlato-faq .wp-block-details[open] {
	border-color: var(--wp--preset--color--moss);
	box-shadow: var(--kudlato-shadow-soft);
}

.kudlato-faq .wp-block-details > :not(summary) {
	padding-top: var(--wp--preset--spacing--8);
}

.kudlato-faq__more {
	margin-top: var(--wp--preset--spacing--24);
}

@media (max-width: 599px) {
	.kudlato-faq .wp-block-details > summary {
		font-size: 1.0625rem;
	}
}

/* --- Spis treści --------------------------------------------------------- */

.kudlato-toc {
	background-color: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.kudlato-toc > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kudlato-toc__list {
	list-style: none;
	margin: var(--wp--preset--spacing--12) 0 0;
	padding: 0;
}

.kudlato-toc__list li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin-top: 8px;
}

.kudlato-toc__list li[data-level="3"] {
	padding-inline-start: var(--wp--preset--spacing--16);
}

.kudlato-toc-wrap {
	max-height: none;
}

@media (min-width: 782px) {
	.kudlato-toc-wrap {
		max-height: calc(100vh - 2rem);
		overflow-y: auto;
		padding-top: var(--wp--preset--spacing--16);
	}
}

.kudlato-form-preview {
	border: 1px dashed var(--wp--preset--color--moss);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--16);
}

/* --- Warianty stylów bloków --------------------------------------------- */

.wp-block-group.is-style-kudlato-card {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--kudlato-shadow-soft);
	padding: var(--wp--preset--spacing--32);
	transition: transform 240ms var(--kudlato-ease), box-shadow 240ms var(--kudlato-ease);
}

.wp-block-group.is-style-kudlato-card:hover,
.wp-block-group.is-style-kudlato-card:focus-within {
	box-shadow: var(--kudlato-shadow-lift);
	transform: translateY(-4px);
}

.wp-block-group.is-style-kudlato-callout-now,
.wp-block-group.is-style-kudlato-callout-consult {
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	padding: var(--wp--preset--spacing--24);
}

.wp-block-group.is-style-kudlato-callout-now {
	background-color: var(--wp--preset--color--mist);
	border-left: 4px solid var(--wp--preset--color--ink);
}

.wp-block-group.is-style-kudlato-callout-consult {
	background-color: var(--wp--preset--color--oat);
	border-left: 4px solid var(--wp--preset--color--amber-strong);
}

.wp-block-list.is-style-kudlato-checklist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-kudlato-checklist > li {
	padding-left: 2rem;
	position: relative;
}

.wp-block-list.is-style-kudlato-checklist > li::before {
	border: 2px solid var(--wp--preset--color--moss);
	border-radius: 5px;
	content: "";
	height: 1rem;
	inset-inline-start: 0;
	position: absolute;
	top: 0.35em;
	width: 1rem;
}

.wp-block-paragraph.is-style-kudlato-meta {
	color: var(--wp--preset--color--moss-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.01em;
	line-height: 1.45;
}

/* --- Sekcje na jednym płótnie -------------------------------------------- */

.has-mist-background-color {
	border-radius: var(--wp--custom--radius--module);
}

main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Otwarcie podstrony: duży wyśrodkowany nagłówek i krótkie wprowadzenie. */
main h1.wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-inline: auto;
	max-inline-size: 20ch;
	text-align: center;
}

main h1.wp-block-heading + .has-lead-font-size {
	margin-inline: auto;
	max-inline-size: 54ch;
	text-align: center;
}

/* =========================================================================
   RUCH
   Stan początkowy obowiązuje wyłącznie pod klasą `kudlato-motion`, którą
   dokłada mikroskopijny skrypt w <head> i zdejmuje bezpiecznik po 2,5 s,
   jeśli GSAP nie doszedł. Bez JavaScriptu i przy ograniczeniu ruchu treść
   jest po prostu widoczna.
   ========================================================================= */

.kudlato-motion [data-kudlato-reveal],
.kudlato-motion .kudlato-board__module {
	opacity: 0;
}

.kudlato-motion [data-kudlato-reveal].is-visible,
.kudlato-motion .kudlato-board__module.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.kudlato-motion [data-kudlato-reveal],
	.kudlato-motion .kudlato-board__module,
	[data-kudlato-reveal],
	.kudlato-board__module {
		opacity: 1 !important;
		transform: none !important;
	}

	.kudlato-track__marker {
		display: none;
	}

	.kudlato-guide:hover,
	.kudlato-board__module:hover {
		transform: none;
	}
}

/* --- Druk ---------------------------------------------------------------- */

@media print {
	.kudlato-no-print,
	.kudlato-track-wrap,
	.wp-block-template-part header,
	.wp-block-template-part footer {
		display: none !important;
	}
}