/*
 * components.css — warianty stylów bloków rdzenia (patrz inc/block-styles.php).
 *
 * Zasada: jeżeli coś da się powiedzieć w theme.json, mówimy to w theme.json.
 * Tutaj zostaje reszta — pseudo-elementy, maski ikon, stany hover i te reguły,
 * których warstwa `styles` po prostu nie opisuje.
 *
 * Ikony: zestaw liniowy w stylu Lucide (stroke 1.5), wstrzykiwany jako maska CSS.
 * Dlaczego maska, a nie <svg> w markupie: bloki rdzenia (przycisk, akapit)
 * przyjmują wyłącznie tekst, więc inline SVG wymagałby bloku core/html w każdej
 * instancji — nieedytowalnego dla klienta i podatnego na przypadkowe zepsucie.
 * Maska trzyma ikonę w CSS, koloruje ją `currentColor`/tokenem i jest dla
 * czytników ekranu niewidoczna — a tego właśnie chcemy, bo każda z tych ikon
 * jest dekoracyjna i ma obok siebie tekst.
 *
 * Gdy w kroku 4-5 dojdą własne bloki z danymi z SCF, ikony renderowane
 * serwerowo mogą tam być zwykłym inline SVG — maska jest rozwiązaniem dla
 * wariantów bloków rdzenia, nie dogmatem.
 */

:root {
  --pcp-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --pcp-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 28 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.3a.53.53 0 0 1 .95 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.16.75a.53.53 0 0 1 .3.91l-3.74 3.63a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.88L2.16 9.8a.53.53 0 0 1 .29-.91l5.17-.75a2.12 2.12 0 0 0 1.6-1.16z'/%3E%3C/svg%3E");
  --pcp-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --pcp-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.22 3.48a.5.5 0 0 0 .78-.41V7.87a.5.5 0 0 0-.75-.43L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
  --pcp-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --pcp-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  --pcp-icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --pcp-icon-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
  --pcp-icon-cloud-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpath d='M16 14v6'/%3E%3Cpath d='M8 14v6'/%3E%3Cpath d='M12 16v6'/%3E%3C/svg%3E");
  --pcp-icon-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.5a2 2 0 0 0-1.9 1.5l-2.4 8.4a.25.25 0 0 1-.5 0L9.2 2.2a.25.25 0 0 0-.5 0l-2.3 8.4A2 2 0 0 1 4.5 12H2'/%3E%3C/svg%3E");
  --pcp-icon-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E");
  --pcp-icon-battery-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='M22 14v-4'/%3E%3Cpath d='M6 14v-4'/%3E%3C/svg%3E");
  --pcp-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --pcp-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --pcp-icon-life-buoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --pcp-icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z'/%3E%3C/svg%3E");
  --pcp-icon-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --pcp-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  /*
	 * Ikony kroków pierwszego kontaktu. Trzy z nich są komponowane, a nie wzięte
	 * 1:1 z Lucide — zestaw nie ma uścisku dłoni z tym kadrem, osoby w dymku ani
	 * grupy z dymkiem, więc kształty są złożone z prymitywów w tej samej metryce
	 * (viewBox 24, stroke 1.5, zaokrąglone końce), żeby nie odstawały od reszty.
	 */
  --pcp-icon-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
  --pcp-icon-user-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='9' r='2'/%3E%3Cpath d='M8.5 14a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E");
  --pcp-icon-calendar-17: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Ctext x='12' y='19' text-anchor='middle' font-family='sans-serif' font-size='8' font-weight='700' fill='black' stroke='none'%3E17%3C/text%3E%3C/svg%3E");
  --pcp-icon-grupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4a1.5 1.5 0 0 0-1.5-1.5h-7A1.5 1.5 0 0 0 10 4v3a1.5 1.5 0 0 0 1.5 1.5H13l2 2.5 1-2.5h2.5A1.5 1.5 0 0 0 20 7z'/%3E%3Ccircle cx='4.5' cy='14' r='2'/%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Ccircle cx='19.5' cy='14' r='2'/%3E%3Cpath d='M1.5 21a3 3 0 0 1 6 0'/%3E%3Cpath d='M9 21a3 3 0 0 1 6 0'/%3E%3Cpath d='M16.5 21a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
  /*
	 * Ikony chipów „z czym możesz się zgłosić". Komponowane z prymitywów w tej
	 * samej metryce co reszta (viewBox 24, stroke 1.5) — zestaw nie ma smutnej
	 * miny, głowy ze spiralą, splotu ani twarzy w ramce.
	 */
  --pcp-icon-frown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 16a4.5 4.5 0 0 0-7 0'/%3E%3Cpath d='M9 9.5h.01'/%3E%3Cpath d='M15 9.5h.01'/%3E%3C/svg%3E");
  --pcp-icon-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-8-8 8 8 0 0 0-8 8c0 2.2 1 4 2.5 5.2V21h9v-2.5h2a1.5 1.5 0 0 0 1.5-1.5v-2z'/%3E%3Cpath d='M13 8.5a2 2 0 1 0-2.5 2.4 2 2 0 1 0 1.7 2.6'/%3E%3C/svg%3E");
  --pcp-icon-splot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9' transform='rotate(45 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9' transform='rotate(-45 12 12)'/%3E%3C/svg%3E");
  --pcp-icon-heart-crack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z'/%3E%3Cpath d='m12 5-2 4.5 3 2-2 3.5'/%3E%3C/svg%3E");
  --pcp-icon-kryzys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='4'/%3E%3Cpath d='M8.5 15.5a4.5 4.5 0 0 1 7 0'/%3E%3Cpath d='M8.5 9.5h2'/%3E%3Cpath d='M13.5 9.5h2'/%3E%3C/svg%3E");
  --pcp-icon-uzaleznienie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 15V9.5a1 1 0 0 1 2 0V13'/%3E%3Cpath d='M10 12.5a1 1 0 0 1 2 0V14'/%3E%3Cpath d='M12 13a1 1 0 0 1 2 0v1.5a3 3 0 0 1-6 0'/%3E%3C/svg%3E");
  --pcp-icon-siec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='2.5'/%3E%3Ccircle cx='12' cy='7' r='2.5'/%3E%3Ccircle cx='19' cy='15' r='2.5'/%3E%3Cpath d='m7 15.5 3.2-6.2'/%3E%3Cpath d='m14.2 8.4 3.1 4.6'/%3E%3Cpath d='M7.5 17.5h9'/%3E%3C/svg%3E");
  --pcp-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --pcp-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
}

/* Wybór ikony — klasa dodatkowa obok wariantu stylu. Korzysta z niej chip,
   ikona w kółku (.pcp-feature-icon) i każdy przyszły komponent z ikoną. */
.pcp-icon--calendar {
  --pcp-icon: var(--pcp-icon-calendar);
}

.pcp-icon--video {
  --pcp-icon: var(--pcp-icon-video);
}

.pcp-icon--clock {
  --pcp-icon: var(--pcp-icon-clock);
}

.pcp-icon--shield {
  --pcp-icon: var(--pcp-icon-shield);
}

.pcp-icon--map-pin {
  --pcp-icon: var(--pcp-icon-map-pin);
}

.pcp-icon--message {
  --pcp-icon: var(--pcp-icon-message);
}

.pcp-icon--cloud-rain {
  --pcp-icon: var(--pcp-icon-cloud-rain);
}

.pcp-icon--activity {
  --pcp-icon: var(--pcp-icon-activity);
}

.pcp-icon--zap {
  --pcp-icon: var(--pcp-icon-zap);
}

.pcp-icon--battery-low {
  --pcp-icon: var(--pcp-icon-battery-low);
}

.pcp-icon--user {
  --pcp-icon: var(--pcp-icon-user);
}

.pcp-icon--users {
  --pcp-icon: var(--pcp-icon-users);
}

.pcp-icon--life-buoy {
  --pcp-icon: var(--pcp-icon-life-buoy);
}

.pcp-icon--sparkles {
  --pcp-icon: var(--pcp-icon-sparkles);
}

.pcp-icon--target {
  --pcp-icon: var(--pcp-icon-target);
}

.pcp-icon--frown {
  --pcp-icon: var(--pcp-icon-frown);
}

.pcp-icon--brain {
  --pcp-icon: var(--pcp-icon-brain);
}

.pcp-icon--splot {
  --pcp-icon: var(--pcp-icon-splot);
}

.pcp-icon--heart-crack {
  --pcp-icon: var(--pcp-icon-heart-crack);
}

.pcp-icon--kryzys {
  --pcp-icon: var(--pcp-icon-kryzys);
}

.pcp-icon--uzaleznienie {
  --pcp-icon: var(--pcp-icon-uzaleznienie);
}

.pcp-icon--siec {
  --pcp-icon: var(--pcp-icon-siec);
}

.pcp-icon--handshake {
  --pcp-icon: var(--pcp-icon-handshake);
}

.pcp-icon--user-bubble {
  --pcp-icon: var(--pcp-icon-user-bubble);
}

.pcp-icon--calendar-17 {
  --pcp-icon: var(--pcp-icon-calendar-17);
}

.pcp-icon--grupa {
  --pcp-icon: var(--pcp-icon-grupa);
}

/* --- Przyciski ------------------------------------------------------------
 *
 * Kolory, promień i padding przycisku pochodzą z theme.json
 * (styles.elements.button). Tutaj tylko to, czego `styles` nie opisuje.
 *
 * Nadpisywanie wariantów rdzenia (np. „Outline") jest bezpieczne bez sztuczek
 * ze specyficznością: rdzeń wypisuje je jako `:root :where(...)`, czyli 0,1,0.
 * Zwykły selektor klasowy wygrywa z nimi niezależnie od kolejności arkuszy.
 * Zachowane `:not(.has-text-color)` / `:not(.has-background)` powtarzają
 * strażników rdzenia — dzięki nim kolor wybrany ręcznie w edytorze nadal wygrywa
 * z wariantem.
 */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 44px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Gradient tylko dla tego wariantu — reszta przycisków zostaje na płaskim
   granacie z theme.json. Kładziemy go jako `background-image`, nie `background`,
   żeby nie skasować `background-color` z rdzenia: gdy klient wybierze w edytorze
   własne tło (`.has-background`), gradient ustępuje mu miejsca. */
.wp-block-button.is-style-pcp-arrow
  > .wp-block-button__link:not(.has-background) {
  background-image: var(--wp--preset--gradient--button);
}

.wp-block-button.is-style-pcp-arrow
  > .wp-block-button__link:hover:not(.has-background),
.wp-block-button.is-style-pcp-arrow
  > .wp-block-button__link:focus:not(.has-background) {
  background-image: var(--wp--preset--gradient--button-hover);
}

/* Uniesienie i wewnętrzny obrys jak w projekcie. Osobno od gradientu (bez
   `:not(.has-background)`), żeby obrys i cień zostały także wtedy, gdy klient
   ustawi w edytorze własne tło. Radius pigułki daje już theme.json (element
   button), więc go tu nie powtarzamy. */
.wp-block-button.is-style-pcp-arrow > .wp-block-button__link {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 7.5px rgba(0, 0, 0, 0.1),
    0 4px 3px rgba(0, 0, 0, 0.05);
}

/* Strzałka. Dekoracyjna: maska nie wnosi tekstu do drzewa dostępności,
   inaczej niż `content: "→"`, które czytnik ekranu potrafi przeczytać. */
.wp-block-button.is-style-pcp-arrow > .wp-block-button__link::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.1em;
  block-size: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.wp-block-button.is-style-pcp-arrow > .wp-block-button__link:hover::after {
  transform: translateX(3px);
}

/* Wariant „Outline" z rdzenia — u nas bez obrysu. Rdzeń wypisuje własny
   `border: 2px solid`, więc zerujemy go jawnie zamiast po prostu nie deklarować. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 0;
  padding: 14px 28px;
  background-color: transparent;
}

.wp-block-button.is-style-outline
  > .wp-block-button__link:not(.has-text-color) {
  color: var(--wp--preset--color--primary);
}

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

/* Obrys jasny — ten sam przycisk na ciemnym tle. */
.wp-block-button.is-style-pcp-outline-light > .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--bg);
  padding: 14px 28px;
  background-color: transparent;
  color: var(--wp--preset--color--bg);
}

.wp-block-button.is-style-pcp-outline-light > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary-dark);
}

/*
 * Pigułka tagu — link, nie przycisk akcji, stąd mniejszy padding i waga.
 *
 * Wariant „obrysowy na ciemnym" za projektem: pastelowy tekst i delikatny obrys
 * na półprzezroczystym tle. Pastel #B9D2E6 na granacie primary-dark ma kontrast
 * ~9:1, więc zapas względem AA jest duży nawet po podbiciu tła hoverem.
 * Pigułki żyją wyłącznie na pasie primary-dark — na jasnym tle ten wariant
 * z założenia nie występuje.
 */
.wp-block-button.is-style-pcp-tag > .wp-block-button__link {
  padding: 8px 18px;
  border: 1px solid
    color-mix(in srgb, var(--wp--preset--color--primary-soft) 45%, transparent);
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--wp--preset--color--primary-soft);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}

.wp-block-button.is-style-pcp-tag > .wp-block-button__link:hover {
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--primary-soft) 70%,
    transparent
  );
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--wp--preset--color--bg);
}

/*
 * Jasny wypełniony — pierwszoplanowe CTA na ciemnym panelu. Granatowy przycisk
 * primary zniknąłby na granacie, a czysta biel krzyczy — bg-soft trzyma
 * hierarchię: jaśniejszy od panelu o kilka kroków, kontrast tekstu ~11:1.
 * Strzałka jak w is-style-pcp-arrow — to ten sam gest „idź dalej".
 */
.wp-block-button.is-style-pcp-solid-light > .wp-block-button__link {
  background-color: var(--wp--preset--color--bg-soft);
  color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-pcp-solid-light > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-pcp-solid-light > .wp-block-button__link::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.1em;
  block-size: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.wp-block-button.is-style-pcp-solid-light
  > .wp-block-button__link:hover::after {
  transform: translateX(3px);
}

/* --- Karta ---------------------------------------------------------------- */

.wp-block-group.is-style-pcp-card {
  padding: clamp(28px, 3vw, 32px);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg);
  box-shadow: var(--wp--preset--shadow--card);
  transition: box-shadow 0.2s ease;
}

.wp-block-group.is-style-pcp-card:hover {
  box-shadow: var(--wp--preset--shadow--card-hover);
}

/* --- Auto-marginesy layoutu `constrained` ---------------------------------
 *
 * JEDYNE miejsce, w którym motyw neutralizuje tę regułę rdzenia:
 *
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 *     max-width: …; margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * Dla przepływu pionowego jest nieszkodliwa — element o pełnej szerokości ma
 * z obu stron zero wolnego miejsca. Problem zaczyna się, gdy grupę renderowaną
 * jako `constrained` przełączamy na flex albo grid: auto-marginesy działają
 * wtedy w osi poprzecznej, unieważniają `align-items` i kurczą element do
 * szerokości treści. Objawy bywają mylące — raz to wyśrodkowany krótki tekst,
 * raz przycisk, który „nie chce" mieć 100% szerokości.
 *
 * `!important` nie jest tu skrótem: reguły rdzenia nie da się przebić żadną
 * specyficznością. `align-self` też nie pomoże — auto-marginesy biją wyrównanie.
 *
 * Dwa warianty:
 *   .pcp-do-lewej   — element kurczy się do treści i przylega do lewej
 *   .pcp-rozciagnij — element wypełnia oś poprzeczną (stretch działa znowu)
 *
 * Nowa sekcja: dopisz klasę w markupie ALBO dopisz jej selektor do listy niżej.
 * Sekcje media-scoped (kroki, zgłoszenia) powtarzają same deklaracje w swoich
 * media queries — bez klasy w markupie nie da się ich stąd objąć.
 */
.pcp-do-lewej > *,
.pcp-opinia > *,
#opinie .is-style-pcp-card > * {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.pcp-rozciagnij > * {
  margin-inline: 0 !important;
}

/* --- Chip ----------------------------------------------------------------- */

.is-style-pcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text-main);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.3;
}

.is-style-pcp-chip::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask: var(--pcp-icon, var(--pcp-icon-shield)) center / contain
    no-repeat;
  mask: var(--pcp-icon, var(--pcp-icon-shield)) center / contain no-repeat;
}

/* --- Badge ---------------------------------------------------------------- */

/*
 * Kolor dziedziczony, obrys liczony z koloru tekstu — dzięki temu ten sam
 * wariant działa na bieli i na granacie bez osobnej klasy „light".
 */
.is-style-pcp-badge {
  display: inline-block;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--wp--preset--border-radius--pill);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* --- Link ze strzałką -----------------------------------------------------
 *
 * Ten sam komponent występuje w dwóch kształtach, stąd selektory parami:
 *   - akapit z linkiem w środku — core/paragraph (karty, stopka),
 *   - sam link — core/read-more („Sprawdź więcej” w pętli usług), gdzie
 *     element z klasą JEST odnośnikiem.
 */
.is-style-pcp-link-arrow {
  margin: 0;
  font-weight: 600;
}

.is-style-pcp-link-arrow a,
a.is-style-pcp-link-arrow {
  text-decoration: none;
}

.is-style-pcp-link-arrow a:hover,
a.is-style-pcp-link-arrow:hover {
  text-decoration: underline;
}

/* Strzałka wisi na <a>, nie na akapicie — inaczej wypadałaby poza obszar klikalny. */
.is-style-pcp-link-arrow a::after,
a.is-style-pcp-link-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  margin-inline-start: 8px;
  inline-size: 1.05em;
  block-size: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.is-style-pcp-link-arrow a:hover::after,
a.is-style-pcp-link-arrow:hover::after {
  transform: translateX(3px);
}

/* --- CTA karty (biała pigułka) -------------------------------------------- */

/*
 * „Sprawdź więcej" z kart usług. Biel na szarym tle karty (`bg-card`) — stąd
 * obrys i cień, bo sam kontrast tła nie wystarcza, żeby przycisk odczytać jako
 * element klikalny.
 *
 * Nie jest to `core/button`: blok w karcie to `core/read-more`, który rdzeń
 * renderuje jako pojedyncze `<a>`. Dlatego wygląd przycisku odtwarzamy tu
 * zamiast dziedziczyć z `elements.button` w theme.json.
 */
.is-style-pcp-card-cta a,
a.is-style-pcp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
  box-shadow: var(--wp--preset--shadow--card);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.is-style-pcp-card-cta a:hover,
a.is-style-pcp-card-cta:hover {
  border-color: var(--wp--preset--color--primary-soft);
  box-shadow: var(--wp--preset--shadow--card-hover);
  text-decoration: none;
}

/* Strzałka jak w pozostałych CTA — maska, więc czytnik ekranu jej nie czyta. */
.is-style-pcp-card-cta a::after,
a.is-style-pcp-card-cta::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.05em;
  block-size: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  mask: var(--pcp-icon-arrow-right) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.is-style-pcp-card-cta a:hover::after,
a.is-style-pcp-card-cta:hover::after {
  transform: translateX(3px);
}

/* --- Opinie --------------------------------------------------------------- */

/*
 * Zajawka nad kartami łamie się na dwie linie. Bez ograniczenia szerokości
 * ciągnęłaby się przez całe 1200px i czytałaby się jak akapit treści, a ma być
 * podpisem nagłówka.
 */
.pcp-opinie__lead {
  max-inline-size: 60ch;
  margin-inline: auto;
}

/*
 * Karta opinii świadomie NIE używa wariantu `is-style-pcp-card`: tam obrys
 * i cień wydzielają element klikalny, a opinia niczego nie otwiera. Zostaje
 * samo tło — wystarczy, żeby oddzielić cytat od strony.
 */
/*
 * Drugi selektor celuje w starszy markup sekcji, który wciąż siedzi w treści
 * strony: karty mają tam wariant `is-style-pcp-card` zamiast klasy `pcp-opinia`.
 * Wariant dokłada obrys, cień i padding do 32px — tutaj żadnego z nich nie
 * chcemy. Zostaje do czasu, aż sekcja zostanie odświeżona z wzorca; wtedy ten
 * selektor można skasować.
 */
.pcp-opinia,
#opinie .is-style-pcp-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 0;
  border-radius: var(--wp--preset--border-radius--card);
  box-shadow: none;
}

#opinie .is-style-pcp-card:hover {
  box-shadow: none;
}

/*
 * Gwiazdki, cytat i podpis dosunięte do lewej. Selektory tej karty są dopisane
 * do wariantu `.pcp-do-lewej` na górze pliku — patrz „Auto-marginesy layoutu
 * constrained". Tu zostaje tylko wskazówka, żeby nie szukać reguły po omacku.
 */

/* --- Stopka --------------------------------------------------------------- */

/*
 * Odstęp między pozycjami nawigacji stopki. Rdzeń wypisuje `gap` na klasie
 * kontenera layoutu (`.wp-container-core-navigation-is-layout-*`, 0,1,0) —
 * ten selektor ma 0,2,0, więc wygrywa niezależnie od kolejności arkuszy.
 */
.pcp-footer .wp-block-navigation {
  gap: var(--wp--preset--spacing--20);
}

/*
 * Linki nawigacji bez podkreślenia: globalny styl linku z theme.json jest dla
 * treści, gdzie podkreślenie niesie informację „to odnośnik". W liście nawigacji
 * rolę tę pełni sam układ, a podkreślenie pięciu pozycji pod sobą robi szum.
 * Na hover wraca — wtedy jest sygnałem celu, nie dekoracją.
 */
.pcp-footer .wp-block-navigation-item__content,
.pcp-footer .wp-block-site-title a {
  text-decoration: none;
}

.pcp-footer .wp-block-navigation-item__content:hover {
  text-decoration: underline;
}

/*
 * Logo nie kurczy się poniżej swojej szerokości, gdy nazwa placówki łamie się
 * na dwie linie — bez tego flex ściska obrazek zamiast zawinąć tekst.
 */
.pcp-footer__logo .wp-block-site-logo {
  flex: 0 0 auto;
}

/*
 * Dolny wiersz: rok po lewej, domena po prawej. Poniżej progu zawijania kolumn
 * `flex-wrap` układa je jedno pod drugim — wtedy `space-between` nie ma czego
 * rozpychać, więc oba akapity lądują do lewej, jak na makiecie mobilnej.
 */
.pcp-footer__dol {
  column-gap: var(--wp--preset--spacing--40);
}

/* --- Gwiazdki opinii ------------------------------------------------------ */

/*
 * Podmiana tekstu na obrazek, nie ukrycie treści: tekst akapitu (np. „Ocena 5
 * na 5") zostaje w drzewie dostępności i jest jedynym nośnikiem tej informacji
 * dla czytnika ekranu — gwiazdki to maska, więc czytnik ich nie widzi.
 * Wypchnięcie tekstu przez `text-indent` zamiast `font-size: 0` jest tu celowe:
 * tekst o zerowym rozmiarze bywa pomijany przez czytniki.
 *
 * Wariant rysuje zawsze pięć gwiazdek. Oceny cząstkowe (4/5) przyjdą razem
 * z prawdziwymi danymi opinii — wtedy `--pcp-stars-count` albo blok własny.
 */
.is-style-pcp-stars {
  --pcp-star-size: 20px;

  display: inline-block;
  overflow: hidden;
  margin: 0;
  inline-size: calc(5 * var(--pcp-star-size) * 28 / 24);
  block-size: var(--pcp-star-size);
  background-color: var(--wp--preset--color--accent-blue);
  text-indent: 100%;
  white-space: nowrap;
  -webkit-mask: var(--pcp-icon-star) left center /
    calc(var(--pcp-star-size) * 28 / 24) var(--pcp-star-size) repeat-x;
  mask: var(--pcp-icon-star) left center / calc(var(--pcp-star-size) * 28 / 24)
    var(--pcp-star-size) repeat-x;
}

/* --- Nagłówek ------------------------------------------------------------- */

/*
 * Nazwa placówki łamana na dwie linie jak w projekcie.
 *
 * Ograniczamy szerokość, zamiast wstawiać <br> w nazwie witryny: ta sama nazwa
 * trafia do <title>, kanału RSS, danych strukturalnych i e-maili WordPressa —
 * wszędzie tam <br> byłby widocznym śmieciem. CSS łamie tylko to, co widać.
 */
.wp-block-site-title {
  max-inline-size: 18ch;
  line-height: 1.25;
}

/*
 * Menu w geometrycznym środku okna.
 *
 * Wiersz nagłówka ma trzy bloki: logo, menu, CTA. Flex ze `space-between`
 * wyrównałby odstępy, a nie wyśrodkował menu — logo (172px) i CTA (~220px) mają
 * różną szerokość, więc menu uciekałoby w stronę węższego skraju. Siatka
 * `1fr auto 1fr` daje obu skrajom tyle samo miejsca, przez co środkowa kolumna
 * trafia dokładnie na oś okna niezależnie od tego, co w skrajach stoi.
 *
 * Selektor musi mieć co najmniej 0,1,1, bo rdzeń wypisuje `body .is-layout-flex
 * { display: flex }` — samo `.pcp-header__wiersz` (0,1,0) by przegrało.
 *
 * Tylko od 842px: niżej menu zwija się pod hamburgera i wiersz ma wtedy wrócić
 * do flexa, żeby przycisk stanął przy prawej krawędzi, a nie na środku.
 */
@media (min-width: 842px) {
  .pcp-header .pcp-header__wiersz {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .pcp-header .pcp-header__wiersz > .pcp-header__cta {
    justify-self: end;
  }
}

/*
 * Bez CTA menu idzie do prawej, nie zostaje na środku.
 *
 * Środkowa kolumna miała sens, dopóki po obu stronach coś stało. Gdy CTA znika
 * (poniżej 1230px), trzecia kolumna jest pusta i menu wisiałoby w połowie
 * z martwym polem po prawej. Zabranie tej kolumny przesuwa menu na skraj.
 *
 * `display: none` na CTA sprawia, że element nie zajmuje komórki siatki, więc
 * menu samo wchodzi w drugą kolumnę — nie trzeba przestawiać mu `grid-column`.
 */
@media (min-width: 842px) and (max-width: 1230px) {
  .pcp-header .pcp-header__wiersz {
    grid-template-columns: 1fr auto;
  }
}

/*
 * Odstęp między pozycjami menu. Rdzeń wypisuje `gap` na klasie kontenera
 * layoutu (`.wp-container-core-navigation-is-layout-*`, 0,1,0) — ten selektor
 * ma 0,2,0, więc wygrywa niezależnie od kolejności arkuszy.
 */
.pcp-header .wp-block-navigation {
  gap: var(--wp--preset--spacing--30);
}

/*
 * Wysokość paska ograniczona do 86px.
 *
 * `box-sizing: border-box`, więc w te 86px wchodzi padding grupy (2×16px)
 * i dolna kreska (1px) — na treść zostaje 53px, a najwyższe dziecko (przycisk
 * CTA, ~48px) mieści się z zapasem. Bez `border-box` padding doliczyłby się
 * z wierzchu i pasek urósłby do 119px.
 */
.pcp-header {
  box-sizing: border-box;
  block-size: var(--pcp-naglowek-wysokosc);
  /*
	 * Padding pionowy siedzi tu, a nie w atrybutach bloku. Wpisany w markup
	 * trafia do atrybutu `style` elementu, a stylu inline nie da się przebić
	 * niczym poza `!important` — przy dwóch różnych wysokościach paska
	 * (86px i 64px) musiałby być bity w każdym media query.
	 */
  padding-block: 16px;
}

/*
 * Wiersz rozciągnięty na pełną wysokość paska.
 *
 * Sam `align-items: center` na wierszu nie wystarczał: wyśrodkowywał dzieci
 * względem wiersza, a wiersz miał wysokość swojej treści i przylegał do górnej
 * krawędzi grupy. Dopiero gdy wiersz wypełnia całe pole treści, jego wyrównanie
 * pokrywa się z wyrównaniem względem paska.
 */
.pcp-header > .pcp-header__wiersz {
  block-size: 100%;
}

/*
 * Hamburger jako kwadrat z zaokrągleniem, ikona trzykreskowa.
 *
 * Rdzeń renderuje w tym przycisku własny SVG z DWIEMA kreskami — makieta ma
 * trzy. SVG jest w markupie generowanym przez blok, więc nie da się go podmienić
 * bez nadpisywania renderu; chowamy go i rysujemy ikonę maską na pseudo-elemencie,
 * tak jak pozostałe ikony w motywie.
 */
.pcp-header .wp-block-navigation__responsive-container-open {
  /*
	 * Bez `display` — o widoczności decyduje wyłącznie media query niżej.
	 * Ustawione tutaj przebijało regułę rdzenia, która chowa przycisk powyżej
	 * progu (ta sama specyficzność 0,2,0, a nasz arkusz ładuje się później),
	 * przez co hamburger sterczał także na desktopie.
	 */
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border-radius: 12px;
  background-color: var(--wp--preset--color--bg-soft);
}

.pcp-header .wp-block-navigation__responsive-container-open svg {
  display: none;
}

.pcp-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask: var(--pcp-icon-menu) center / contain no-repeat;
  mask: var(--pcp-icon-menu) center / contain no-repeat;
}

/*
 * Pasek w układzie mobilnym jest niższy. Nadpisujemy token, a nie samą
 * `block-size` — dzięki temu `scroll-padding-top` dla kotwic (base.css) zmienia
 * się razem z nim i sekcje nadal nie chowają się pod nagłówkiem.
 */
@media (max-width: 841px) {
  :root {
    --pcp-naglowek-wysokosc: 64px;
  }

  .pcp-header {
    padding-block: 10px;
  }
}

/*
 * Pozycje menu jako pigułki — bez podkreślenia (globalny styl linku z theme.json
 * jest dla treści, nie nawigacji), z tłem bg-soft na hover i na pozycji bieżącej,
 * jak w projekcie.
 *
 * Wysokość ustawiona wprost, nie przez padding pionowy: przy 32px na cały link
 * padding 16px z góry i z dołu zająłby całe pole i nie zostałoby miejsca na
 * tekst. Stąd `block-size` + centrowanie flexem, a padding tylko poziomy.
 */
.pcp-header .wp-block-navigation .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  block-size: 32px;
  padding-block: 0;
  padding-inline: 8px;
  border-radius: var(--wp--preset--border-radius--pill);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.pcp-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.pcp-header
  .wp-block-navigation
  .current-menu-item
  > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--bg-soft);
  text-decoration: none;
}

/* --- Podmenu na desktopie (flyout „Usługi") ---------------------------------
 *
 * Dwie rzeczy, których rdzeń nie robi z sensem dla tego projektu:
 *
 * 1. Pigułka hover rodzica. Rdzeń kładzie tło tylko pod `__content` (sama
 *    etykieta), a chevron to OSOBNY <button> obok — hover urywał się przed
 *    strzałką. Przenosimy pigułkę na całe `li.has-child`, więc obejmuje
 *    etykietę i chevron jako jeden cel. `__content` w rodzicu traci wtedy własną
 *    pigułkę, żeby nie było tła w tle.
 *
 * 2. Sam flyout. Domyślny jest za wąski (dłuższe nazwy usług zawijają się do
 *    dwóch linii i nachodzą na siebie) i bez oddechu. Dajemy stałą min-szerokość,
 *    `nowrap`, padding, cień i pigułki pod pozycjami.
 *
 * Tylko ≥842px — poniżej menu jedzie jako overlay (reguły `.is-menu-open` wyżej),
 * gdzie podmenu jest listą w kolumnie, nie warstwą.
 */
@media (min-width: 842px) {
  .pcp-header .wp-block-navigation .wp-block-navigation-item.has-child {
    position: relative;
    display: flex;
    align-items: center;
    block-size: 32px;
    padding-inline: 8px;
    border-radius: var(--wp--preset--border-radius--pill);
    transition: background-color 0.2s ease;
  }

  .pcp-header
    .wp-block-navigation
    .wp-block-navigation-item.has-child
    > .wp-block-navigation-item__content {
    block-size: auto;
    padding-inline: 0;
    background-color: transparent;
  }

  /*
   * Chevron: przycisk-ikona bez własnego tła/obrysu, wpięty w pigułkę rodzica.
   * `width/height: auto` nadpisuje rdzeniowe `0.6em` (≈12px) na buttonie —
   * bez tego flexowy kontener 12px ściskałby svg z powrotem do 12px mimo
   * jawnej szerokości ikony.
   */
  .pcp-header .wp-block-navigation .wp-block-navigation__submenu-icon {
    display: flex;
    align-items: center;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: 0;
    padding-inline-start: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .pcp-header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }

  /* Hover i focus-within na całym rodzicu — jedno tło pod etykietą i chevronem. */
  .pcp-header .wp-block-navigation .wp-block-navigation-item.has-child:hover,
  .pcp-header
    .wp-block-navigation
    .wp-block-navigation-item.has-child:focus-within {
    background-color: var(--wp--preset--color--bg-soft);
  }

  .pcp-header
    .wp-block-navigation
    .wp-block-navigation-item.has-child:hover
    .wp-block-navigation__submenu-icon
    svg,
  .pcp-header
    .wp-block-navigation
    .wp-block-navigation-item.has-child:focus-within
    .wp-block-navigation__submenu-icon
    svg {
    transform: rotate(180deg);
  }

  /*
   * Mostek nad przerwą między pigułką a flyoutem: bez niego kursor gubi hover
   * w 10px pustki i menu zamyka się w połowie drogi.
   */
  .pcp-header
    .wp-block-navigation
    .wp-block-navigation-item.has-child::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    block-size: 12px;
  }

  .pcp-header .wp-block-navigation .wp-block-navigation__submenu-container {
    inset-block-start: calc(100% + 10px);
    inset-inline-start: 0;
    min-inline-size: 240px;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--preset--border-radius--card);
    background-color: var(--wp--preset--color--bg);
    box-shadow: var(--wp--preset--shadow--card-hover);
  }

  .pcp-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    inline-size: 100%;
  }

  .pcp-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    inline-size: 100%;
    block-size: auto;
    min-block-size: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--wp--preset--color--primary);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
  }

  .pcp-header
    .wp-block-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--bg-soft);
  }
}

/* --- Menu mobilne (overlay) -------------------------------------------------
 *
 * Panel zjeżdża z góry, jak roleta — kierunek ruchu wskazuje, skąd menu przyszło
 * i dokąd wróci. Rdzeń domyślnie tylko je pokazuje, bez ruchu.
 *
 * Animujemy `transform`, nie `height` ani `top`: te dwa wymuszają układ na każdej
 * klatce, `transform` idzie po stronie kompozytora i nie rusza reszty strony.
 */
@keyframes pcp-ikona-x {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/*
 * Rdzeń dokłada treści overlaya `padding-top: calc(2rem + 24px)` — 56px ponad
 * wierszem z krzyżykiem, licząc na to, że przycisk zamykania jest pozycjonowany
 * absolutnie i trzeba pod niego zrobić miejsce. U nas krzyżyk stoi w normalnym
 * flow i sam zajmuje wysokość paska, więc ten zapas jest pustką.
 *
 * Selektor ma 0,4,0 wobec 0,3,0 rdzenia — nie zależymy od kolejności arkuszy.
 */
.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-block-start: 0;
}

/* Własne przejście zamiast rdzeniowego `fade-in` — dwie animacje na tym samym
   elemencie biłyby się o `opacity` przy zamykaniu. */
.pcp-header .wp-block-navigation__responsive-container.is-menu-open {
  animation: none;
  background-color: var(--wp--preset--color--bg);
  /* Treść od góry, nie wyśrodkowana w pionie — inaczej przy pięciu pozycjach
	   menu wisi w powietrzu, a kciuk ma najbliżej do dolnej krawędzi. */
  justify-content: flex-start;
  padding-block: 0;
  padding-inline: var(--wp--custom--container--padding);
}

/*
 * Wiersz z przyciskiem zamykania ma tę samą wysokość co pasek nagłówka, więc
 * X ląduje dokładnie tam, gdzie przed chwilą był hamburger. Bez tego ikona
 * skacze i traci się związek „to ten sam przycisk".
 */
.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block: calc((var(--pcp-naglowek-wysokosc) - 40px) / 2);
  margin-inline-start: auto;
  padding: 0;
  border-radius: 12px;
  background-color: var(--wp--preset--color--bg-soft);
  color: var(--wp--preset--color--primary);
}

.pcp-header .wp-block-navigation__responsive-container-close svg {
  display: none;
}

.pcp-header .wp-block-navigation__responsive-container-close::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  background-color: currentColor;
  animation: pcp-ikona-x 0.28s 0.06s ease both;
  -webkit-mask: var(--pcp-icon-x) center / contain no-repeat;
  mask: var(--pcp-icon-x) center / contain no-repeat;
}

/*
 * Pozycje jako wiersze pełnej szerokości rozdzielone włosową kreską. Pigułka
 * z desktopu tu nie działa: przy jednej kolumnie tło pod tekstem czyta się jak
 * stan wybrania, a nie jak przycisk.
 */
.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0;
}

.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  inline-size: 100%;
}

.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  inline-size: 100%;
  /* 56px celu dotykowego — z zapasem ponad próg 44px z WCAG 2.5.8. */
  min-block-size: 56px;
  padding: 0;
  border-block-end: 1px solid var(--wp--preset--color--border);
  border-radius: 0;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
}

.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover {
  background-color: transparent;
  text-decoration: none;
  color: var(--wp--preset--color--accent-blue);
}

/*
 * Rdzeń rozpycha otwarte podmenu: `padding-top: var(--wp--style--block-gap)`
 * (u nas 24px) i `padding-inline: 2rem`. Przy pigułkowej liście to zostawiało
 * dziurę między „Usługi" a pierwszą podpozycją i sugerowało, że to osobna
 * grupa, a nie rozwinięcie tej pozycji.
 *
 * Selektor powtarza ścieżkę rdzenia i dokłada `.pcp-header` — 0,5,0 wobec
 * 0,4,0, bo reguły rdzenia używają `:where()`, które nie wnosi specyficzności.
 */
.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container {
  gap: 0;
  padding: 0;
}

/* Podpozycje cofnięte i lżejsze — hierarchia zamiast płaskiej listy. */
.pcp-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding-inline-start: 16px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  color: var(--wp--preset--color--text-muted);
}

/*
 * CTA znika z nagłówka od 1230px w dół.
 *
 * Próg nie jest okrągły, bo nie wynika z urządzenia tylko z zawartości: logo,
 * pięć pozycji menu i przycisk przestają się mieścić w jednym wierszu właśnie
 * tutaj. Poniżej przycisk wypychałby menu do drugiej linii.
 *
 * Sama akcja nie ginie — CTA wraca w hero, w sekcjach i w stopce.
 *
 * display: none, a nie visibility/opacity: przycisk ma zniknąć także dla
 * czytnika ekranu i wypaść z kolejności Tab. Powielony, niewidoczny link do
 * tego samego miejsca jest dla nawigacji klawiaturą szumem, nie ułatwieniem.
 *
 * Selektor podwójny nieprzypadkowo: samo `.pcp-header__cta` przegrywało
 * z generowanym przez rdzeń `.wp-block-buttons-is-layout-flex{display:flex}`
 * — ta sama specyficzność (0,1,0), a styl layoutu jest wypisywany później.
 */
@media (max-width: 1230px) {
  .pcp-header .pcp-header__cta {
    display: none;
  }
}

/*
 * Menu chowa się pod hamburgera od 841px w dół.
 *
 * Atrybut `overlayMenu: "mobile"` bloku nawigacji ma próg zaszyty w rdzeniu na
 * 600px i nie da się go podać z markupu — trzeba przesunąć go stylem. Rdzeń
 * używa dwóch reguł w `@media (min-width: 600px)`: pokazuje listę poziomo
 * i chowa przycisk hamburgera. Poniżej odwracamy obie.
 *
 * Prefiks `.pcp-header` nie jest dekoracją — daje 0,3,0 i 0,4,0 wobec 0,2,0
 * i 0,3,0 rdzenia, więc nie zależymy od kolejności ładowania arkuszy. Zawęża
 * też zmianę do nagłówka: nawigacja stopki ma `overlayMenu: "never"` i nie ma
 * jej co zwijać.
 *
 * Między 841px a 1230px zostaje samo menu poziome bez CTA — to celowy stan
 * pośredni, nie luka.
 */
@media (max-width: 841px) {
  .pcp-header
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  /*
	 * Zjazd i wjazd panelu jako TRANZYCJA, nie animacja.
	 *
	 * Keyframes umiały pokazać tylko otwieranie: zamknięcie to zdjęcie klasy
	 * `is-menu-open` przez rdzeń, po którym element od razu wpada w `display: none`
	 * — nie ma czego animować. Tranzycja z `allow-discrete` odwleka przełączenie
	 * `display` do końca ruchu, więc panel zdąży wyjechać w górę.
	 *
	 * `@starting-style` podaje stan, OD którego startuje wjazd. Bez niego
	 * przeglądarka nie ma wartości początkowej dla elementu, który dopiero co
	 * przestał być `display: none`, i pokazałaby go od razu na miejscu.
	 *
	 * Bez wsparcia (starsze przeglądarki) menu po prostu pojawia się i znika
	 * skokowo — działa tak samo, tylko bez ruchu.
	 */
  .pcp-header .wp-block-navigation__responsive-container {
    transition:
      transform 0.26s cubic-bezier(0.2, 0, 0, 1),
      opacity 0.2s ease,
      display 0.26s allow-discrete;
  }

  .pcp-header
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
    transform: translateY(-100%);
    opacity: 0;
  }

  .pcp-header .wp-block-navigation__responsive-container.is-menu-open {
    transform: translateY(0);
    opacity: 1;
  }

  @starting-style {
    .pcp-header .wp-block-navigation__responsive-container.is-menu-open {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
}

/* ==========================================================================
   Sekcje strony głównej (krok 4)
   ==========================================================================
   Pięć reguł, których systemu bloków nie da się nauczyć. Reszta sekcji stoi
   na blokach rdzenia i wariantach z kroku 1 — jeżeli dokładasz tu szóstą,
   najpierw sprawdź, czy naprawdę nie ma na to atrybutu bloku.
   ========================================================================== */

/* --- 1. Awatar: koło z inicjałami ----------------------------------------
 *
 * core/group ma z wymiarów wyłącznie min-height (patrz jego block.json) —
 * bez szerokości nie ma koła, a „RP" i „?" dawałyby owale różnej szerokości.
 */
.pcp-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 56px;
  block-size: 56px;
  margin: 0;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/*
 * Karty „dołączy wkrótce" mają wyglądać na nieaktywne — to celowe, nie usterka.
 *
 * Tło z tokena bg-soft, a nie border: na kolorze obramowania (#E3E9F0) tekst
 * pomocniczy dawał 4.46:1, czyli o włos poniżej AA. 18px o wadze 600 to wciąż
 * „mały tekst" w rozumieniu WCAG (próg 24px, albo 18.66px pogrubione), więc
 * obowiązuje 4.5:1. Na bg-soft wychodzi 4.79:1.
 */
.pcp-avatar--muted {
  background-color: var(--wp--preset--color--bg-soft);
  color: var(--wp--preset--color--text-muted);
}

/* --- 2. Ikona w kółku -----------------------------------------------------
 *
 * Ikonę wybiera klasa .pcp-icon--* (ta sama co przy chipach), więc kółko nie
 * wie nic o konkretnym symbolu. Element jest pusty i dekoracyjny: znaczenie
 * niesie nagłówek obok, dlatego maska, a nie <img> z alt-em.
 */
.pcp-feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg-soft);
}

.pcp-feature-icon::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask: var(--pcp-icon, var(--pcp-icon-shield)) center / contain
    no-repeat;
  mask: var(--pcp-icon, var(--pcp-icon-shield)) center / contain no-repeat;
}

/* Na jasnym panelu bg-soft kółko w tym samym kolorze zniknęłoby w tle. */
.has-bg-soft-background-color .pcp-feature-icon {
  background-color: var(--wp--preset--color--bg);
}

/*
 * Powody w sekcji „Dlaczego my" — białe karty na panelu bg-soft.
 *
 * Karta jest tu tylko tłem treści, nie celem kliknięcia: stąd bez cienia
 * i bez podniesienia na hover, inaczej niż karty usług, które prowadzą dalej.
 * Padding węższy niż w `is-style-pcp-card`, bo w kolumnie 50% szeroki oddech
 * zjadałby miejsce na tekst.
 */
.pcp-powod.is-style-pcp-card,
.pcp-powod.is-style-pcp-card:hover {
  padding: 20px;
  /* Delikatny cień jak w projekcie, ale ten sam w spoczynku i na hover:
	   karta nie jest klikalna, więc podnoszenie jej pod kursorem kłamałoby. */
  box-shadow: var(--wp--preset--shadow--card);
}

/*
 * Ikona odwrócona: granatowe kółko, biały glif. Reguła musi stać PO
 * `.has-bg-soft-background-color .pcp-feature-icon` — ta sama specyficzność
 * (0,2,0), więc rozstrzyga kolejność w arkuszu.
 */
.pcp-powod .pcp-feature-icon {
  inline-size: 40px;
  block-size: 40px;
  background-color: var(--wp--preset--color--primary);
}

.pcp-powod .pcp-feature-icon::before {
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--wp--preset--color--bg);
}

/* --- 3. Miękka maska krawędzi zdjęcia (sekcja „Z czym możesz przyjść") ---- */
.pcp-zgloszenia__foto img {
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* --- 4. Chipy rozrzucone wokół zdjęcia ------------------------------------
 *
 * Pozycje są przypisane sztywno do nth-child, więc dotyczą DOKŁADNIE dziesięciu
 * chipów — tylu, ile przewiduje projekt. Jedenasty i kolejne celowo zostają
 * w normalnym flow zamiast lądować jeden na drugim w rogu: rozjechana sekcja
 * jest widoczna od razu, a chip pozycjonowany „gdziekolwiek" udaje, że działa.
 * Chcesz więcej niż dziesięć — dopisz pozycje albo zmień układ na siatkę.
 *
 * Poniżej 1024px zero pozycjonowania: zwykły flex-wrap pod zdjęciem.
 */
/*
 * Poniżej progu rozrzutu sekcja zmienia kolejność: chipy wchodzą przed CTA,
 * a zdjęcie znika.
 *
 * Zdjęcie jest tłem kompozycji, nie treścią — bez rozrzuconych chipów nie niesie
 * już żadnej informacji, a zjada pół ekranu. `display: none` zamiast ukrywania
 * wizualnego jest tu właściwe: alt opisuje zdjęcie ilustracyjne, więc czytnik
 * ekranu też nic nie traci.
 *
 * Przycisk trafia pod chipy, bo na wąskim ekranie to chipy odpowiadają na
 * pytanie z nagłówka, a CTA jest domknięciem sekcji. `order` wymaga kontenera
 * flex — grupa jest renderowana jako layout przepływowy, stąd `display: flex`.
 */
/*
 * Odstęp między sekcjami na wąskim ekranie: 40px zamiast 64px.
 *
 * Nadpisujemy zmienną presetu, a nie padding każdej sekcji z osobna. Wszystkie
 * pasy używają `spacing|70` jako swojego oddechu góra/dół, więc jedno miejsce
 * steruje całą stroną — inaczej ta sama liczba musiałaby wylądować w kilkunastu
 * regułach i przy następnej sekcji ktoś by o niej zapomniał.
 *
 * theme.json nie umie warunkować presetów szerokością okna, ale wypisuje je
 * jako zwykłe custom property na :root — a te nadpisać można.
 */
@media (max-width: 781px) {
  :root {
    --wp--preset--spacing--70: 40px;
  }
}

@media (max-width: 1023px) {
  .pcp-zgloszenia-sekcja {
    display: flex;
    flex-direction: column;
  }

  /*
	 * Wariant `.pcp-rozciagnij` — deklaracje powtórzone, bo reguła musi żyć
	 * wewnątrz tego media query (patrz „Auto-marginesy layoutu constrained”).
	 * Bez tego kontener przycisków kurczył się do treści i CTA dostawało 100%
	 * z wąskiej szerokości. Zajawki to nie rozepchnie — ma własną grupę
	 * `constrained` z `contentSize: 640px`.
	 */
  .pcp-zgloszenia-sekcja > * {
    margin-inline: 0 !important;
  }

  .pcp-zgloszenia-sekcja > .pcp-zgloszenia {
    order: 1;
    margin-block-start: var(--wp--preset--spacing--30);
  }

  .pcp-zgloszenia-sekcja > .wp-block-buttons {
    order: 2;
  }

  /*
	 * Podwójna klasa jest konieczna: rdzeń wypisuje
	 * `.wp-block-image.aligncenter { display: table }` (0,2,0), więc samo
	 * `.pcp-zgloszenia__foto` (0,1,0) przegrywa bez względu na kolejność
	 * arkuszy — zdjęcie zostawało widoczne mimo `display: none`.
	 */
  .wp-block-image.pcp-zgloszenia__foto {
    display: none;
  }

  /*
	 * CTA na pełną szerokość. Sam blok `wp-block-button` to opakowanie o
	 * szerokości treści, więc rozciągnąć trzeba oba: kontener i sam odnośnik —
	 * rdzeń renderuje `wp-block-button__link` jako inline-flex.
	 */
  .pcp-zgloszenia-sekcja .wp-block-button,
  .pcp-zgloszenia-sekcja .wp-block-button__link {
    inline-size: 100%;
  }
}

@media (min-width: 1024px) {
  .pcp-zgloszenia {
    position: relative;
  }

  .pcp-chips-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .pcp-chips-scatter > :nth-child(-n + 10) {
    position: absolute;
    margin: 0;
    pointer-events: auto;
  }

  /*
	 * Pozycje odwzorowane z makiety. Liczone względem grupy .pcp-zgloszenia
	 * (kontener 1200px), dlatego część wartości jest UJEMNA — na projekcie chipy
	 * po lewej wychodzą poza kolumnę treści, w margines strony. To celowe: rozrzut
	 * ma sprawiać wrażenie swobodnego, a nie wpisanego w siatkę.
	 *
	 * Chip 8 i 10 mają największe przesunięcie w dół, więc siedzą najniżej na
	 * zdjęciu — kolejność w markupie jest kolejnością CZYTANIA, nie układu.
	 */
  .pcp-chips-scatter > :nth-child(1) {
    inset-block-start: 17%;
    inset-inline-start: 5%;
  }

  .pcp-chips-scatter > :nth-child(2) {
    inset-block-start: 12%;
    inset-inline-end: 12%;
  }

  .pcp-chips-scatter > :nth-child(3) {
    inset-block-start: 37%;
    inset-inline-start: 0%;
  }

  .pcp-chips-scatter > :nth-child(4) {
    inset-block-start: 32%;
    inset-inline-end: 3%;
  }

  .pcp-chips-scatter > :nth-child(5) {
    inset-block-start: 42%;
    inset-inline-start: 35%;
  }

  .pcp-chips-scatter > :nth-child(6) {
    inset-block-start: 54%;
    inset-inline-end: 8%;
  }

  .pcp-chips-scatter > :nth-child(7) {
    inset-block-start: 57%;
    inset-inline-start: 5%;
  }

  .pcp-chips-scatter > :nth-child(8) {
    inset-block-start: 72%;
    inset-inline-end: 1%;
  }

  .pcp-chips-scatter > :nth-child(9) {
    inset-block-start: 79%;
    inset-inline-start: 0%;
  }

  .pcp-chips-scatter > :nth-child(10) {
    inset-block-start: 83%;
    inset-inline-start: 28%;
  }
}

/* --- 5. Dekoracyjny kształt panelu CTA ------------------------------------
 *
 * Pseudo-element zamiast obrazka: zero dodatkowego żądania, skaluje się bez
 * utraty jakości i bierze kolor z tokenów. `overflow: hidden` przycina go do
 * zaokrąglenia panelu.
 */
.pcp-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pcp-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -22%;
  inset-inline-end: -4%;
  inline-size: clamp(220px, 32vw, 420px);
  block-size: clamp(220px, 32vw, 420px);
  border-radius: calc(2 * var(--wp--preset--border-radius--panel));
  background-color: var(--wp--preset--color--primary-light);
  opacity: 0.45;
}

/* Na wąskim ekranie kształt schodzi pod treść — zostaje delikatny narożnik. */
@media (max-width: 767px) {
  .pcp-cta::after {
    opacity: 0.3;
  }
}

/* --- 6. Hero: zdjęcie na pełną szerokość -----------------------------------
 *
 * Wysokość klamrowana zamiast proporcji: na ultraszerokim monitorze kadr 16:9
 * na pełną szerokość zjadałby dwa ekrany. object-fit tnie od środka, więc
 * dobierając zdjęcie warto pilnować, żeby osoby były w prawej tercji
 * (WEB_LAYOUT.md §3.2).
 */
.pcp-hero__foto {
  margin: 0;
}

.pcp-hero__foto img {
  display: block;
  inline-size: 100%;
  block-size: clamp(300px, 44vw, 580px);
  object-fit: cover;
}

/* --- 7. Akordeon FAQ (core/details) ----------------------------------------
 *
 * Bez JavaScriptu: <details>/<summary> daje rozwijanie, klawiaturę i czytniki
 * ekranu w prezencie. CSS dorabia tylko wygląd karty i znak plus/×.
 * `interpolate-size` włącza płynne rozwijanie w przeglądarkach, które to znają
 * (Chromium 129+, stopniowo reszta) — pozostałe otwierają skokowo i to jest OK.
 */
/*
 * Akordeon to jeden panel, nie osiem osobnych kart.
 *
 * Wcześniej każde <details> miało własny obrys, tło i odstęp — czytało się jak
 * osiem niezależnych bloków, choć to jedna lista. W projekcie pytania dzieli
 * włosowa kreska wewnątrz wspólnego panelu.
 *
 * Otwarcie pozycji nie zmienia jej tła ani nie dokłada cienia: stan niesie już
 * znak × i sama widoczna odpowiedź, a podświetlanie wiersza rozbijałoby panel
 * z powrotem na kafelki.
 */
.pcp-faq-lista {
  interpolate-size: allow-keywords;

  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg-card);
  /* Kreski biegną na całą szerokość panelu — bez przycięcia wychodziłyby
	   poza zaokrąglone rogi. */
  overflow: hidden;
}

.pcp-faq-lista .wp-block-details {
  margin: 0;
  padding: 24px 28px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/*
 * Kreska zamiast odstępu. Zerowanie `margin-block-start` jest konieczne, bo
 * blockGap grupy rdzeń wypisuje jako `.wp-container-* > * + *` (0,1,0) —
 * ten selektor ma 0,2,0, więc rozstrzyga niezależnie od kolejności arkuszy.
 */
.pcp-faq-lista .wp-block-details + .wp-block-details {
  margin-block-start: 0;
  border-block-start: 1px solid var(--wp--preset--color--border);
}

.pcp-faq-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/* Safari trzyma własny trójkącik osobnym pseudo-elementem. */
.pcp-faq-lista summary::-webkit-details-marker {
  display: none;
}

/* Plus obraca się w × po otwarciu — jeden znak, dwa stany, zero podmiany DOM. */
.pcp-faq-lista summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  /* Znak jest sterowaniem, nie treścią — stąd kolor pomocniczy, żeby nie
	   konkurował wagą z samym pytaniem. */
  background-color: var(--wp--preset--color--text-muted);
  -webkit-mask: var(--pcp-icon-plus) center / contain no-repeat;
  mask: var(--pcp-icon-plus) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.pcp-faq-lista .wp-block-details[open] > summary::after {
  transform: rotate(45deg);
}

.pcp-faq-lista .wp-block-details[open] > summary {
  margin-block-end: 12px;
}

/*
 * Animacja rozwijania.
 *
 * `::details-content` to jedyny sposób, żeby dobrać się do treści <details>
 * bez owijania jej dodatkowym divem — a `interpolate-size: allow-keywords`
 * (ustawione wyżej na .pcp-faq-lista i dziedziczone) pozwala animować
 * `block-size` do `auto`, więc wysokość nie musi być znana z góry.
 *
 * `content-visibility` w przejściu z `allow-discrete`: bez tego przeglądarka
 * chowa treść natychmiast po kliknięciu i animacja zwijania nie ma czego
 * pokazać — zamknięcie po prostu przeskakuje.
 *
 * Cały blok stoi w @supports, bo bez wsparcia dla `::details-content` reguła
 * `block-size: 0` nie miałaby gdzie się przypiąć, ale `margin-block-end: 0`
 * na summary już tak — i odpowiedź w starszej przeglądarce przykleiłaby się
 * do pytania. Tutaj brak wsparcia oznacza brak animacji i nic poza tym.
 */
@supports selector(::details-content) {
  .pcp-faq-lista .wp-block-details[open] > summary {
    margin-block-end: 0;
  }

  .pcp-faq-lista .wp-block-details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.28s ease,
      padding-block-start 0.28s ease,
      content-visibility 0.28s allow-discrete;
  }

  .pcp-faq-lista .wp-block-details[open]::details-content {
    block-size: auto;
    padding-block-start: 12px;
  }
}

/* --- 8. Kroki pierwszego kontaktu ------------------------------------------
 *
 * Desktop: krok wyśrodkowany, a za ikonami biegnie przerywana linia. Linia to
 * pseudo-element rodzica — maluje się POD dziećmi kolumn, a kółka ikon mają
 * nieprzezroczyste tło (na pasie bg-soft są białe), więc same ją przykrywają.
 * 12.5% po bokach = środek pierwszej i ostatniej z czterech równych kolumn.
 *
 * Mobile: układ wiersza — ikona w lewej kolumnie siatki, tytuł i opis po
 * prawej. Zera na marginesach nadpisują blockGap grupy (rdzeń wypisuje go
 * niskospecyficznym :where, więc zwykła klasa wystarcza) — odstępy przejmuje
 * siatka.
 */
/*
 * Kółko ikony w tej sekcji jest większe niż domyślne 48px i zawsze białe —
 * pas ma tło bg-soft, więc biel jest tym, co wydziela ikonę z pasa.
 */
.pcp-krok .pcp-feature-icon {
  inline-size: 76px;
  block-size: 76px;
  background-color: var(--wp--preset--color--bg);
}

.pcp-krok .pcp-feature-icon::before {
  inline-size: 34px;
  block-size: 34px;
  background-color: var(--wp--preset--color--accent-teal);
}

@media (min-width: 782px) {
  .pcp-kroki {
    position: relative;
  }

  /*
	 * Linia za ikonami. Pseudo-element rodzica maluje się POD dziećmi kolumn,
	 * a kółka mają nieprzezroczyste tło, więc same ją przesłaniają — stąd wrażenie
	 * odcinków między kółkami bez rysowania każdego z osobna.
	 *
	 * 12.5% po bokach to środek pierwszej i ostatniej z czterech równych kolumn,
	 * a 38px od góry to połowa kółka, czyli jego oś.
	 */
  .pcp-kroki::before {
    content: "";
    position: absolute;
    inset-block-start: 38px;
    inset-inline-start: 12.5%;
    inset-inline-end: 12.5%;
    border-block-start: 1px solid var(--wp--preset--color--border);
  }

  .pcp-krok {
    text-align: center;
  }

  .pcp-krok .pcp-feature-icon {
    margin-inline: auto;
  }
}

/*
 * Mobile: ikona w lewej kolumnie siatki, tytuł i opis po prawej, wszystko do
 * lewej. Zera na marginesach nadpisują blockGap grupy (rdzeń wypisuje go
 * niskospecyficznym :where, więc zwykła klasa wystarcza) — odstępy przejmuje
 * siatka.
 */
@media (max-width: 781px) {
  .pcp-krok {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 20px;
    row-gap: 8px;
    /* Ikona i tytuł mają zaczynać się na tej samej linii — `start`, a nie
		   `center`, bo opisy mają różną długość i wyśrodkowanie rozjeżdżałoby
		   kółka względem siebie. */
    align-items: start;
    text-align: start;
  }

  /*
	 * Wariant `.pcp-do-lewej` — deklaracje powtórzone, bo reguła musi żyć
	 * wewnątrz tego media query (patrz „Auto-marginesy layoutu constrained”).
	 * Na desktopie ich NIE chcemy: tam `.pcp-krok .pcp-feature-icon` centruje
	 * kółko właśnie auto-marginesami.
	 */
  .pcp-krok > * {
    margin-block: 0;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }

  .pcp-krok > .pcp-feature-icon {
    position: relative;
    grid-row: 1 / span 2;
    inline-size: 56px;
    block-size: 56px;
  }

  .pcp-krok > .pcp-feature-icon::before {
    inline-size: 26px;
    block-size: 26px;
  }

  /*
	 * Kreska pod kółkiem zastępuje poziomą linię łączącą z desktopu: pionowa
	 * lista nie ma jak jej poprowadzić, a sam odcinek pod ikoną utrzymuje
	 * sygnał „to jest sekwencja kroków", nie luźne pozycje.
	 */
  .pcp-krok > .pcp-feature-icon::after {
    content: "";
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline: 2px;
    border-block-start: 1px solid var(--wp--preset--color--border);
  }

  /* Ostatni krok kończy sekwencję — kreska pod nim prowadziłaby donikąd. */
  .pcp-kroki
    > .wp-block-column:last-child
    .pcp-krok
    > .pcp-feature-icon::after {
    content: none;
  }
}

/* --- 9. Karta „dołączy wkrótce" --------------------------------------------
 *
 * Przerywany obrys i brak cienia odróżniają miejsce zarezerwowane od karty
 * z żywym człowiekiem — patrz też .pcp-avatar--muted wyżej.
 */
.wp-block-group.is-style-pcp-card.pcp-karta-pusta {
  border-style: dashed;
  box-shadow: none;
}

.wp-block-group.is-style-pcp-card.pcp-karta-pusta:hover {
  box-shadow: none;
}

/* --- 10. Przyciski na wąskim ekranie ---------------------------------------
 *
 * Projekt mobilny prowadzi wszystkie CTA (hero, sekcje, panel CTA) oraz
 * pigułki diagnoz na pełną szerokość — jeden pewny cel dotykowy w wierszu
 * zamiast dwóch ściśniętych obok siebie.
 */
@media (max-width: 599px) {
  .wp-block-buttons > .wp-block-button {
    inline-size: 100%;
  }

  .wp-block-buttons > .wp-block-button > .wp-block-button__link {
    inline-size: 100%;
  }
}

/* ==========================================================================
   Podstrona usługi (krok 5)
   ==========================================================================
   Sekcje szablonu single-usluga.html. Wszystkie siatki łamią się na jednym
   progu 782px — tym samym, na którym rdzeń zwija core/columns — więc strona
   składa się do jednej kolumny naraz, a nie schodkami.

   Grupy-kontenery siatek (parametry, proces) są w markupie `layout:default`
   (is-layout-flow), NIE `constrained`: dzięki temu nie łapią rdzeniowej reguły
   auto-marginesów z `!important` (patrz „Auto-marginesy layoutu constrained”
   na górze pliku), a odstępy w siatce w całości przejmuje `gap`.
   ========================================================================== */

/* --- Przycisk: obrys granatowy na jasnym tle -------------------------------
 *
 * Drugoplanowe CTA hero i panelu końcowego. Rdzeniowy wariant `outline` jest
 * u nas celowo bez obrysu, a `pcp-outline-light` ma biały obrys na ciemny pas —
 * tu potrzebny jest osobny: granatowy obrys, granatowy tekst, na hover wypełnienie.
 */
.wp-block-button.is-style-pcp-outline-primary > .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--primary);
  padding: 14px 28px;
  background-color: transparent;
  color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-pcp-outline-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-pcp-outline-primary > .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
}

/* --- Hero usługi -----------------------------------------------------------
 *
 * Dwie kolumny (core/columns) zwijają się na 781px z pudełka. Poniżej progu
 * zdjęcie znika, a karta cytatu — która na desktopie nachodzi na dół zdjęcia —
 * wraca do zwykłego przepływu pełną szerokością.
 */
.pcp-usluga-hero__foto {
  margin: 0;
}

/*
 * Obraz ukryty na wąskim ekranie — makieta mobilna go nie pokazuje. Ponieważ
 * to core/post-featured-image (zdjęcie usługi), a nie dekoracja, na desktopie
 * jest kandydatem na LCP; `display: none` na mobile znika też z drzewa
 * dostępności, co jest tu w porządku: cytat obok niesie całą treść sekcji.
 */
.pcp-usluga-hero__foto {
  display: none;
}

/*
 * Karta cytatu. Na mobile stoi w przepływie pod przyciskami (pełna szerokość);
 * dopiero od 782px podjeżdża w górę i nachodzi na dół zdjęcia jak w projekcie.
 */
.pcp-usluga-hero__cytat {
  position: relative;
  margin: 0;
}

@media (min-width: 782px) {
  .pcp-usluga-hero__foto {
    display: block;
  }

  /*
	 * Ujemny margines wciąga kartę na zdjęcie. Węższa od kolumny i dosunięta do
	 * lewej — nachodzi na dolny-lewy róg, nie zasłania całego kadru. z-index
	 * trzyma ją nad zdjęciem niezależnie od kolejności malowania.
	 */
  .pcp-usluga-hero__cytat {
    z-index: 1;
    max-inline-size: 22rem;
    margin-block-start: -72px;
    margin-inline-end: var(--wp--preset--spacing--40);
  }
}

/* --- Pas parametrów --------------------------------------------------------
 *
 * Mobile: pozycje jedna pod drugą, rozdzielone włosową kreską u góry. Desktop:
 * pięć równych kolumn z pionowymi separatorami między nimi (pierwsza bez).
 */
.pcp-parametry {
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

/* blockGap grupy rdzeń wypisuje `:where(...)` (0 punktów) — ta klasa (0,2,0)
   wygrywa; odstępy w siatce przejmuje `gap`, a nie margines dzieci. */
.pcp-parametry > * {
  margin-block: 0;
}

.pcp-parametry > * + * {
  padding-block-start: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--wp--preset--color--border);
}

/* Etykieta uppercase — wspólny wygląd dla parametrów usług, wierszy karty
   danych kontaktowych i labeli formularza. `.pcp-etykieta` to klasa ogólna
   (strona kontaktu), `.pcp-parametry__etykieta` zostaje dla istniejącego
   markupu usług — jedna deklaracja, dwa selektory, zero duplikacji. */
.pcp-etykieta,
.pcp-parametry__etykieta {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pcp-parametry__wartosc {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

@media (min-width: 782px) {
  /*
	 * Flex zamiast `repeat(5, 1fr)` — kolumny równe niezależnie od liczby
	 * pozycji. Diagnozy mają pięć parametrów, usługi terapeutyczne cztery;
	 * sztywne pięć kolumn zostawiało przy czterech pustą szpaltę po prawej.
	 */
  .pcp-parametry {
    display: flex;
    gap: 0;
  }

  .pcp-parametry > * {
    flex: 1;
  }

  /* Separator jako obrys między kolumnami — kreska pozioma z mobile znika. */
  .pcp-parametry > * + * {
    padding-block-start: 0;
    padding-inline-start: var(--wp--preset--spacing--30);
    border-block-start: 0;
    border-inline-start: 1px solid var(--wp--preset--color--border);
  }
}

/* --- Siatka objawów --------------------------------------------------------
 *
 * Jeden blok listy (core/list) zamiast dziesięciu grup — klient edytuje zwykłą
 * listę, a CSS zamienia pozycje w kafelki. Grid dwukolumnowy układa je wierszami
 * L/P, więc kolejność w markupie jest kolejnością czytania także na mobile.
 */
.pcp-objawy {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcp-objawy > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text-main);
  font-size: var(--wp--preset--font-size--small);
}

/* Punktor. Dekoracyjny — treść pozycji niesie sam tekst <li>. */
.pcp-objawy > li::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 0.5em;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--primary);
}

@media (min-width: 782px) {
  .pcp-objawy {
    grid-template-columns: 1fr 1fr;
  }
}

/* Kropki primary w prostej liście „Czym diagnoza nie jest" — bez kafelków. */
.pcp-lista-punkty li::marker {
  color: var(--wp--preset--color--primary);
}

/* --- Karty procesu ---------------------------------------------------------
 *
 * Numer kroku liczy CSS (`counter`), nie tekst w markupie: przy przestawianiu
 * kart w edytorze numeracja nie może się rozjechać. Licznik zeruje kontener
 * i inkrementuje każde kółko — idzie w kolejności DOM, więc siatka może układać
 * karty, jak chce, a numery zostają 1…5.
 */
.pcp-proces {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  counter-reset: pcp-proces;
}

.pcp-proces > * {
  margin-block: 0;
}

/*
 * Karta procesu nie jest klikalna — ten sam cień w spoczynku i na hover, żeby
 * nie udawała elementu prowadzącego dalej (jak `.pcp-powod` w „Dlaczego my”).
 */
.pcp-proces__karta.is-style-pcp-card,
.pcp-proces__karta.is-style-pcp-card:hover {
  box-shadow: var(--wp--preset--shadow--card);
}

.pcp-proces__glowa {
  align-items: center;
}

.pcp-proces__numer {
  counter-increment: pcp-proces;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: var(--wp--preset--border-radius--pill);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
}

.pcp-proces__numer::before {
  content: counter(pcp-proces);
}

@media (min-width: 782px) {
  .pcp-proces {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Strona zespołu (archiwum /zespol/)
   ==========================================================================
   Siatkę kart specjalistów renderuje blok pcp/zespol-lista (inc/zespol-render.php)
   wprost z CPT `zespol`. Karty to `is-style-pcp-card` — padding, obrys, cień
   i radius dziedziczą stamtąd; tu tylko układ wnętrza. Wszystko łamie się na
   progu 782px, tym samym co reszta serwisu.
   ========================================================================== */

.pcp-zespol-karty {
  display: grid;
  gap: var(--wp--preset--spacing--30);
}

/* Karta: dwie kolumny — awatar | cała treść. Jasne tło (bg-card) z obrysem
   i miękkim cieniem („unosi się" jak w projekcie). */
.pcp-zespol-karta {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--30);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--panel);
  background-color: var(--wp--preset--color--bg-card);
  box-shadow: var(--wp--preset--shadow--card);
}

/* Lewa kolumna: awatar. Trzyma się góry, gdy prawa kolumna rośnie. */
.pcp-zespol-karta__avatar {
  align-self: flex-start;
}

/* Awatar na karcie zespołu jest większy niż domyślny (56px z .pcp-avatar,
   używany na stronie głównej) — dlatego nadpisujemy tylko w tym kontekście. */
.pcp-zespol-karta .pcp-avatar {
  inline-size: 96px;
  block-size: 96px;
  font-size: 36px;
}

/* Prawa kolumna: cała treść. Flex column, żeby stopka dosunęła się do dołu
   (karty w wierszu równają wysokość). */
.pcp-zespol-karta__tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
}

.pcp-zespol-karta__tytul {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  min-inline-size: 0;
}

.pcp-zespol-karta__nazwisko {
  margin: 0;
  font-size: clamp(22px, 1.6vw, 26px);
  line-height: 1.2;
}

/* Rola na karcie — wypełniona pigułka (jasny błękit, tekst muted), jak w projekcie. */
.pcp-zespol-karta__rola {
  align-self: flex-start;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg-soft);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Wiersze „Etykieta: wartość" — ciasno, jak na makiecie (odstępy niesie
   głównie line-height, między wpisami tylko drobny gap). */
.pcp-zespol-karta__parametry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.pcp-zespol-karta__param {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.pcp-zespol-karta__etykieta {
  color: var(--wp--preset--color--text-main);
  font-weight: 600;
}

.pcp-zespol-karta__opis {
  margin: 0;
}

/* Stopka dosunięta do dołu — karty w wierszu równają wysokość. */
.pcp-zespol-karta__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  margin-block-start: auto;
  padding-block-start: var(--wp--preset--spacing--10);
}

.pcp-zespol-karta__profil,
.pcp-zespol-karta__umow {
  margin: 0;
}

/* „Zobacz profil" podkreślony na stałe (na makiecie), nie dopiero na hover. */
.pcp-zespol-karta__profil a {
  text-decoration: underline;
}

/* Lista obszarów pracy w białej karcie — kropki primary, dwie kolumny na desktopie. */
.pcp-obszary-lista {
  display: grid;
  gap: var(--wp--preset--spacing--10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcp-obszary-lista > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

.pcp-obszary-lista > li::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 0.5em;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--primary);
}

@media (min-width: 782px) {
  .pcp-zespol-karty {
    grid-template-columns: 1fr 1fr;
  }

  .pcp-obszary-lista {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--wp--preset--spacing--30);
  }
}

/* Wąski ekran: karta zostaje dwukolumnowa (awatar | tekst), ale mniejszy awatar
   i ciaśniejszy padding oddają kolumnie tekstu więcej miejsca — inaczej przy
   ~390px tekst zawija się po dwa–trzy słowa. */
@media (max-width: 520px) {
  .pcp-zespol-karta {
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--30);
  }

  .pcp-zespol-karta .pcp-avatar {
    inline-size: 64px;
    block-size: 64px;
    font-size: 24px;
  }
}

/* ============================================================================
 * Kontakt — strona /kontakt/
 *
 * Siatka dwóch kart (dane kontaktowe | formularz), karta danych z opcji SCF,
 * formularz Contact Form 7 stylowany pod tokeny motywu (domyślny arkusz CF7
 * jest wyłączony w pcp-core/inc/cf7.php — WSZYSTKO, czego formularz potrzebuje,
 * musi być tutaj, łącznie z ukryciem regionu czytnika ekranu) oraz czerwony
 * alert pilnej pomocy.
 * ========================================================================== */

/* --- Siatka sekcji głównej ------------------------------------------------ */

.pcp-kontakt-siatka {
  display: grid;
  gap: var(--wp--preset--spacing--30);
}

/* Grupa siatki ma `layout: default` — rdzeń emuluje blockGap marginesami
   dzieci (is-layout-flow), co w gridzie dawałoby podwójne odstępy. */
.pcp-kontakt-siatka > * {
  margin: 0 !important;
}

@media (min-width: 782px) {
  .pcp-kontakt-siatka {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}

/* --- Karta (wspólne dla obu kart sekcji głównej) -------------------------- */

/* Karty to zwykłe divy (render PHP bloków dynamicznych), bez layoutu rdzenia —
   odstępy pionowe robi flex. */
.pcp-kontakt-karta {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

/* Nagłówek-etykieta z linią — nagłówek rangą (H2/H3), etykieta wyglądem.
   `.pcp-tytul-etykieta` to klasa ogólna (sekcje profilu specjalisty, karta
   „Kluczowe informacje”), `.pcp-kontakt-karta__tytul` zostaje dla markupu
   kart kontaktu — jedna deklaracja, dwa selektory. */
.pcp-tytul-etykieta,
.pcp-kontakt-karta__tytul {
  margin: 0;
  padding-block-end: var(--wp--preset--spacing--20);
  border-block-end: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cel kotwicy „Nie wiem, od czego zacząć” — skok nie może chować nagłówka
   karty pod ewentualnym stickym headerem; fokus programowy bez obwódki
   (obwódkę dostają pola, nie kontener). */
.pcp-kontakt-formularz {
  scroll-margin-block-start: var(--wp--preset--spacing--50);
}

.pcp-kontakt-formularz:focus {
  outline: none;
}

/* --- Karta danych kontaktowych -------------------------------------------- */

.pcp-kontakt-dane__lista {
  display: flex;
  flex-direction: column;
}

.pcp-kontakt-dane__wiersz {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pcp-kontakt-dane__wiersz + .pcp-kontakt-dane__wiersz {
  margin-block-start: var(--wp--preset--spacing--20);
  padding-block-start: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--wp--preset--color--border);
}

.pcp-kontakt-dane__wiersz p {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.pcp-kontakt-dane__wiersz p.pcp-etykieta {
  font-size: var(--wp--preset--font-size--badge);
}

.pcp-kontakt-dane__mapa {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

/* --- Formularz (Contact Form 7) ------------------------------------------- */

.pcp-form__siatka {
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

@media (min-width: 782px) {
  .pcp-form__siatka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pcp-form__pole--pelne,
  .pcp-form__wyslij {
    grid-column: 1 / -1;
  }
}

.pcp-form__pole {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

/* Tag CF7 owija kontrolkę w span — ma być przezroczysty dla layoutu. */
.pcp-form__pole .wpcf7-form-control-wrap {
  display: block;
}

/* Pola tekstowe, select, textarea — jeden wygląd. `font: inherit` zamiast
   wyliczania: pola mają pisać tym samym krojem co strona. */
.pcp-kontakt-formularz input[type="text"],
.pcp-kontakt-formularz input[type="email"],
.pcp-kontakt-formularz input[type="tel"],
.pcp-kontakt-formularz select,
.pcp-kontakt-formularz textarea {
  inline-size: 100%;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text-main);
  font: inherit;
  line-height: 1.5;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pcp-kontakt-formularz textarea {
  min-block-size: 140px;
  resize: vertical;
}

.pcp-kontakt-formularz ::placeholder {
  color: var(--wp--preset--color--text-muted);
  opacity: 1;
}

.pcp-kontakt-formularz input[type="text"]:hover,
.pcp-kontakt-formularz input[type="email"]:hover,
.pcp-kontakt-formularz input[type="tel"]:hover,
.pcp-kontakt-formularz select:hover,
.pcp-kontakt-formularz textarea:hover {
  border-color: var(--wp--preset--color--primary-soft);
}

/* Fokus: obwódka zastąpiona ringiem — nigdy samo `outline: none`. */
.pcp-kontakt-formularz input[type="text"]:focus,
.pcp-kontakt-formularz input[type="email"]:focus,
.pcp-kontakt-formularz input[type="tel"]:focus,
.pcp-kontakt-formularz select:focus,
.pcp-kontakt-formularz textarea:focus {
  border-color: var(--wp--preset--color--accent-blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

/* Radio i checkbox — natywne kontrolki w kolorze marki, bez atrap. */
.pcp-form__radio {
  margin: 0;
  padding: 0;
  border: 0;
}

.pcp-form__radio legend {
  margin-block-end: 8px;
  padding: 0;
}

.pcp-kontakt-formularz .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

.pcp-kontakt-formularz .wpcf7-list-item {
  margin: 0;
}

.pcp-kontakt-formularz .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.pcp-kontakt-formularz input[type="radio"],
.pcp-kontakt-formularz input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  margin: 2px 0 0;
  accent-color: var(--wp--preset--color--primary);
}

.pcp-kontakt-formularz .wpcf7-list-item-label {
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.pcp-form__zgoda .wpcf7-list-item-label {
  color: var(--wp--preset--color--text-muted);
}

/* --- Wysyłka -------------------------------------------------------------- */

.pcp-form__wyslij {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--20);
}

/* Submit CF7 to input, nie blok przycisku — wygląd głównego CTA odtwarzamy
   z tych samych tokenów co elements.button w theme.json. */
.pcp-kontakt-formularz input[type="submit"] {
  padding: 14px 28px;
  border: 0;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pcp-kontakt-formularz input[type="submit"]:hover,
.pcp-kontakt-formularz input[type="submit"]:focus-visible {
  background-color: var(--wp--preset--color--primary-dark);
}

.pcp-kontakt-formularz input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Honeypot — pole-pułapka na boty (pcp-core/inc/cf7.php). Poza ekranem, nie
   `display:none`: część botów pomija pola ukryte tym sposobem, off-screen
   zostają w drzewie i dostają focus/wypełnienie. aria-hidden trzyma je z dala
   od czytników ekranu. */
.pcp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 781px) {
  .pcp-form__wyslij {
    flex-direction: column;
    align-items: stretch;
  }

  .pcp-kontakt-formularz input[type="submit"] {
    inline-size: 100%;
  }
}

/* --- Walidacja i komunikaty CF7 ------------------------------------------- */

.pcp-kontakt-formularz .wpcf7-not-valid {
  border-color: var(--wp--preset--color--alert-red);
}

.pcp-kontakt-formularz .wpcf7-not-valid-tip {
  display: block;
  margin-block-start: 6px;
  color: var(--wp--preset--color--alert-red);
  font-size: var(--wp--preset--font-size--small);
}

/* Kontener pól ukrytych CF7 to <fieldset> — bez arkusza CF7 rysowałby
   domyślną ramkę przeglądarki jako pusty pasek na górze formularza. */
.pcp-kontakt-formularz .hidden-fields-container {
  display: none;
}

.pcp-kontakt-formularz .wpcf7-response-output {
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: var(--wp--preset--spacing--20);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  font-size: var(--wp--preset--font-size--small);
}

/* Pusty komunikat przed wysyłką (stan init/submitting) nie może wisieć jako
   obramowany pasek — pokazujemy go dopiero, gdy CF7 ma co powiedzieć. */
.pcp-kontakt-formularz .init .wpcf7-response-output,
.pcp-kontakt-formularz .submitting .wpcf7-response-output,
.pcp-kontakt-formularz .resetting .wpcf7-response-output {
  display: none;
}

.pcp-kontakt-formularz .sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent-teal);
  background-color: var(--wp--preset--color--accent-mint);
  color: var(--wp--preset--color--text-main);
}

.pcp-kontakt-formularz .invalid .wpcf7-response-output,
.pcp-kontakt-formularz .unaccepted .wpcf7-response-output,
.pcp-kontakt-formularz .failed .wpcf7-response-output,
.pcp-kontakt-formularz .aborted .wpcf7-response-output,
.pcp-kontakt-formularz .spam .wpcf7-response-output {
  border-color: var(--wp--preset--color--alert-red);
  background-color: var(--wp--preset--color--alert-red-soft);
  color: var(--wp--preset--color--alert-red);
}

/* Region komunikatów dla czytników ekranu — domyślny arkusz CF7 (który go
   chował) jest wyłączony, więc chowamy go sami. Wzorzec sr-only, nie
   display:none — czytnik ma go ogłaszać. */
.pcp-kontakt-formularz .screen-reader-response {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  word-wrap: normal;
}

.pcp-kontakt-formularz .screen-reader-response ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spinner wysyłki — CF7 wstrzykuje go za przyciskiem; bez jego arkusza
   rysujemy własny, prosty. */
.pcp-kontakt-formularz .wpcf7-spinner {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  border: 3px solid var(--wp--preset--color--primary-soft);
  border-block-start-color: var(--wp--preset--color--primary);
  border-radius: 50%;
  visibility: hidden;
  animation: pcp-spin 0.8s linear infinite;
}

.pcp-kontakt-formularz .submitting .wpcf7-spinner {
  visibility: visible;
}

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

@media (prefers-reduced-motion: reduce) {
  .pcp-kontakt-formularz .wpcf7-spinner {
    animation: none;
  }
}

/* --- Alert pilnej pomocy --------------------------------------------------- */

.pcp-alert {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid
    color-mix(
      in srgb,
      var(--wp--preset--color--alert-red) 45%,
      var(--wp--preset--color--bg)
    );
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--alert-red-soft);
}

.pcp-alert__etykieta {
  margin: 0;
  color: var(--wp--preset--color--alert-red);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pcp-alert__tresc {
  margin: 0;
  color: var(--wp--preset--color--text-main);
  line-height: 1.6;
}

/* --- Przycisk: biała pigułka na barwnym pasie ------------------------------ */

.wp-block-button.is-style-pcp-white > .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-pcp-white > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--primary-soft);
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary-dark);
  box-shadow: var(--wp--preset--shadow--card);
}

/* ============================================================================
 * Profil specjalisty — /zespol/<slug>/ (single-zespol)
 *
 * Hero z awatarem, układ dwukolumnowy z rozdzielającą się kolumną boczną
 * (D2 ze SPECJALISTA.md: grid-template-areas, jeden DOM), chipy obszarów,
 * płaskie karty wykształcenia i nagłówki-etykiety sekcji treści.
 * ========================================================================== */

/* --- Hero profilu ---------------------------------------------------------- */

.pcp-profil-hero {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  justify-items: center;
  text-align: center;
}

.pcp-profil-hero__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  min-inline-size: 0;
}

.pcp-profil-hero__tekst > * {
  margin: 0;
}

/* Opis pod nazwiskiem — pełne zdania w wersalikach (transform w CSS, w polu
   zwykła pisownia — czytniki nie literują). Luźniejszy line-height niż
   etykieta jednolinijkowa. */
.pcp-profil-hero__opis {
  max-inline-size: 62ch;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
}

.pcp-profil-hero__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  justify-content: center;
  inline-size: 100%;
}

/* Awatar profilu większy niż listowy (56px) i kartowy (96px). */
.pcp-profil-hero .pcp-avatar {
  inline-size: 112px;
  block-size: 112px;
  font-size: 40px;
}

@media (max-width: 781px) {
  .pcp-profil-hero__przyciski .wp-block-button,
  .pcp-profil-hero__przyciski .wp-block-button__link {
    inline-size: 100%;
  }
}

@media (min-width: 782px) {
  .pcp-profil-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wp--preset--spacing--50);
    align-items: center;
    justify-items: start;
    text-align: start;
  }

  /* Desktop: awatar po prawej; DOM trzyma go pierwszym (mobile: na górze). */
  .pcp-profil-hero .pcp-avatar {
    order: 2;
    inline-size: 140px;
    block-size: 140px;
    font-size: 48px;
  }

  .pcp-profil-hero__tekst {
    align-items: flex-start;
  }

  .pcp-profil-hero__przyciski {
    justify-content: flex-start;
  }
}

/* --- Układ dwukolumnowy (D2: grid-template-areas) -------------------------- */

.pcp-profil-uklad {
  display: grid;
  grid-template-areas: "info" "tresc" "wsparcie";
  gap: var(--wp--preset--spacing--50);
}

/* Grupa układu ma `layout: default` — rdzeń emuluje blockGap marginesami
   dzieci (is-layout-flow); w gridzie gap wystarcza. */
.pcp-profil-uklad > * {
  margin: 0 !important;
}

.pcp-profil-uklad > .pcp-profil-tresc {
  grid-area: tresc;
  min-inline-size: 0;
}

.pcp-profil-uklad > .pcp-profil-info {
  grid-area: info;
}

.pcp-profil-uklad > .pcp-profil-wsparcie {
  grid-area: wsparcie;
}

@media (min-width: 782px) {
  .pcp-profil-uklad {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: "tresc info" "tresc wsparcie" "tresc .";
    align-items: start;
  }
}

/* --- Sekcje treści profilu -------------------------------------------------- */

/* Oddech między sekcjami: większy odstęp przed każdym nagłówkiem-etykietą
   (poza pierwszym) niż zwykły blockGap akapitów. */
.pcp-profil-tresc > .pcp-tytul-etykieta:not(:first-child) {
  margin-block-start: var(--wp--preset--spacing--50);
}

/* --- Karta płaska (wykształcenie, karta boczna) ----------------------------
 *
 * Obrys + szare tło, BEZ cienia i BEZ hovera — elementy nieinteraktywne;
 * `is-style-pcp-card` sygnalizowałby cieniem klikalność, której tu nie ma.
 */
.pcp-karta-plaska {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg-card);
}

/* --- Karta „Kluczowe informacje" ------------------------------------------- */

.pcp-profil-info__karta {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.pcp-profil-info__karta > * {
  margin: 0;
}

.pcp-profil-info__wartosc {
  color: var(--wp--preset--color--text-main);
  font-weight: 600;
}

/* Chipy obszarów — małe pigułki z obrysem, nieinteraktywne (bez hovera). */
.pcp-profil-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcp-chip-maly {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 500;
  line-height: 1.4;
}

/* --- Panel „Potrzebujesz wsparcia?" ---------------------------------------- */

.pcp-profil-wsparcie__panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg-soft);
  text-align: center;
}

.pcp-profil-wsparcie__panel > * {
  margin: 0;
}

/* Przyciski kolumny bocznej — pełna szerokość karty/panelu. */
.pcp-profil-info .wp-block-button,
.pcp-profil-info .wp-block-button__link,
.pcp-profil-wsparcie .wp-block-button,
.pcp-profil-wsparcie .wp-block-button__link {
  inline-size: 100%;
}

/* ==========================================================================
   Baza wiedzy (blog na natywnym `post`)

   Jeden zestaw reguł karty obsługuje dwa miejsca: kartę w pętli core/query na
   liście (.pcp-blog-lista .wp-block-post) i kartę powiązanych renderowaną w PHP
   (.pcp-wpis). Klasy wewnętrzne (pcp-wpis__*) są w obu takie same.
   ========================================================================== */

/* --- Hero listy / archiwum ------------------------------------------------- */

.pcp-baza-hero > * {
  margin: 0;
}

.pcp-baza-hero__opis {
  margin-block-start: var(--wp--preset--spacing--10);
}

/* --- Chipy kategorii ------------------------------------------------------- */

.pcp-blog-kat__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--10);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcp-blog-kat__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text-main);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.pcp-blog-kat__link:hover {
  border-color: var(--wp--preset--color--accent-blue);
  color: var(--wp--preset--color--accent-blue);
}

.pcp-blog-kat__link.is-active {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
}

/* --- Karta wpisu (lista + powiązane) --------------------------------------- */

.pcp-blog-lista .wp-block-post,
.pcp-wpis {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg);
  box-shadow: var(--wp--preset--shadow--card);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.pcp-blog-lista .wp-block-post:hover,
.pcp-wpis:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--card-hover);
}

/* Zdjęcie wyróżniające — flush do krawędzi karty, stały kadr 16:9. */
.pcp-wpis__media {
  display: block;
  margin: 0;
  background-color: var(--wp--preset--color--bg-card);
}

.pcp-wpis__media img,
.pcp-wpis__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pcp-wpis__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding: clamp(20px, 2.4vw, 28px);
}

/* Kategoria jako pigułka. Wrapper post-terms trzyma chipy w rzędzie; separator
   przecinka jest zbędny przy odstępie flex. */
.pcp-wpis__kat {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcp-wpis__kat .wp-block-post-terms__separator {
  display: none;
}

.pcp-wpis__kat a,
span.pcp-wpis__kat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg-soft);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.pcp-wpis__kat a:hover {
  background-color: var(--wp--preset--color--primary-soft);
}

.pcp-wpis__tytul {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.3;
}

.pcp-wpis__tytul a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.pcp-wpis__tytul a:hover {
  text-decoration: underline;
}

.pcp-wpis__zajawka {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

/* Meta zawsze przy dolnej krawędzi karty — równa linia niezależnie od długości
   zajawki. */
.pcp-wpis__meta {
  margin-block-start: auto;
  padding-block-start: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

.pcp-wpis__meta > * {
  margin: 0;
}

.pcp-wpis__data,
.pcp-wpis__czas,
.pcp-wpis-meta__data,
.pcp-wpis-meta__czas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pcp-wpis__data::before,
.pcp-wpis__czas::before,
.pcp-wpis-meta__data::before,
.pcp-wpis-meta__czas::before {
  content: "";
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  background-color: currentColor;
  -webkit-mask: var(--pcp-icon-calendar) center / contain no-repeat;
  mask: var(--pcp-icon-calendar) center / contain no-repeat;
}

.pcp-wpis__czas::before,
.pcp-wpis-meta__czas::before {
  -webkit-mask-image: var(--pcp-icon-clock);
  mask-image: var(--pcp-icon-clock);
}

/* --- Paginacja i pustka ---------------------------------------------------- */

.pcp-blog-paginacja {
  margin-block-start: var(--wp--preset--spacing--50);
  gap: var(--wp--preset--spacing--30);
  font-weight: 600;
}

.pcp-blog-paginacja .wp-block-query-pagination-numbers {
  display: inline-flex;
  gap: var(--wp--preset--spacing--10);
}

.pcp-blog-paginacja a,
.pcp-blog-paginacja .page-numbers {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.pcp-blog-paginacja a:hover {
  text-decoration: underline;
}

.pcp-blog-paginacja .page-numbers.current {
  color: var(--wp--preset--color--text-muted);
}

.pcp-blog-pusto {
  padding-block: var(--wp--preset--spacing--50);
}

/* --- Pojedynczy wpis ------------------------------------------------------- */

.pcp-wpis-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

.pcp-wpis-meta__kat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.pcp-wpis-meta__kat:hover {
  background-color: var(--wp--preset--color--primary-soft);
}

.pcp-artykul__tytul {
  margin: 0;
}

.pcp-artykul__lead {
  margin: 0;
  line-height: 1.5;
}

.pcp-artykul__media {
  margin-block: 0;
}

.pcp-artykul__media img {
  inline-size: 100%;
  border-radius: var(--wp--preset--border-radius--panel);
}

/* Rytm treści artykułu — czytelna miara i oddech między blokami. */
.pcp-artykul__tresc > * {
  margin-block: 0;
}

.pcp-artykul__tresc > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.pcp-artykul__tresc > h2 {
  margin-block-start: var(--wp--preset--spacing--50);
}

.pcp-artykul__tresc > h3 {
  margin-block-start: var(--wp--preset--spacing--40);
}

.pcp-artykul__tresc :where(img, .wp-block-image img) {
  border-radius: var(--wp--preset--border-radius--card);
}

.pcp-artykul__tresc blockquote {
  margin-inline: 0;
  padding-inline-start: var(--wp--preset--spacing--30);
  border-inline-start: 3px solid var(--wp--preset--color--accent-gold);
  color: var(--wp--preset--color--primary);
  font-style: italic;
}

.pcp-artykul__tagi {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

.pcp-artykul__tagi a {
  color: var(--wp--preset--color--text-muted);
}

/* --- Box autora ------------------------------------------------------------ */

.pcp-autor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--wp--preset--border-radius--card);
  background-color: var(--wp--preset--color--bg-card);
}

.pcp-autor__foto {
  flex: none;
}

.pcp-autor__avatar {
  display: block;
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--wp--preset--border-radius--pill);
  object-fit: cover;
}

.pcp-autor__tresc {
  flex: 1 1 240px;
}

.pcp-autor__tresc > * {
  margin: 0;
}

.pcp-autor__rola {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pcp-autor__imie {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
}

.pcp-autor__imie a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.pcp-autor__imie a:hover {
  text-decoration: underline;
}

.pcp-autor__bio {
  margin-block-start: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

/* --- Powiązane ------------------------------------------------------------- */

.pcp-powiazane__tytul {
  margin: 0 0 var(--wp--preset--spacing--40);
  text-align: center;
}

.pcp-powiazane__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--30);
}

/* --- Wyszukiwarka ---------------------------------------------------------- */

.pcp-szukaj .wp-block-search__inside-wrapper {
  padding: 6px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--bg);
}

.pcp-szukaj .wp-block-search__input {
  border: 0;
  background: transparent;
  padding-inline: 16px;
}

.pcp-szukaj .wp-block-search__input:focus {
  outline: none;
}

.pcp-szukaj .wp-block-search__button {
  margin: 0;
  border-radius: var(--wp--preset--border-radius--pill);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
}

.pcp-szukaj .wp-block-search__button:hover {
  background-color: var(--wp--preset--color--primary-dark);
}