/* ==========================================================================
   Szablon wpisu bloga + tabele — kozlecki-przewiertysterowane.pl (2026-09-21)
   Ładowany przez inc/wpis-blog.php na całym froncie (miniatury są potrzebne
   na listingach, tabele i sekcja kontaktowa także na stronach Elementora).
   --------------------------------------------------------------------------
   Barwy z palety Blocksy tej strony:
     akcent   #ffcd05 (palette-1)      nagłówki #0a0500 (palette-4)
     akcent-2 #eebe3e (palette-2)      tekst    #728291 (palette-3)
   --------------------------------------------------------------------------
   ⚠️ ZASIĘG: na pojedynczym wpisie są DWA elementy .entry-content — pierwszy
   to fragment HEADERA (telefon/social). Reguły treści celują więc zawsze
   w `article > .entry-content`, nigdy w samo `.entry-content`.
   --------------------------------------------------------------------------
   Spis:
     1. Miniatury kart wpisów na listingach (kadrowanie do proporcji)
     1b. Kafelek wpisu na listingach — tło, ramka, zaokrąglenie miniatury
     2. Obrazki w treści: zaokrąglenie, cień, maksymalna szerokość
     2b. Linki z wklejonym `color: inherit`
     3. Lightbox
     4. Oddech przy nagłówkach
     5. Akordeon Gutenberga — fajka zamiast znaku „+"
     6. Blok FAQ (klasa `koz-faq`) — wygląd jak na /uslugi/przeciski-sterowane/
     7. Tabele (klasa `koz-tabela`)
     8. Sekcja kontaktowa [koz_kontakt]
     9. Moduł CTA (klasa `koz-cta`)
     9b. CTA — warianty (ciemny, żółty, bursztynowy, obrys, gradient, pasek,
         wyśrodkowany, zdjęcie do krawędzi, obrazek 3D, tekst na biało)
   --------------------------------------------------------------------------
   ⚠️ PREFIKS `--kozw-` (w = wpis), NIE `--koz-`: „Dodatkowy CSS" Customizera
   definiuje globalnie `:root { --koz-ink: #111 }` (relikt po starym module
   „Przyciski linkujące do usług") i ładuje się PO tym arkuszu, więc przejmował
   nasze tokeny — tytuły CTA wychodziły #111 zamiast #0a0500.
   ========================================================================== */

:root {
	--kozw-akcent:     #ffcd05;
	--kozw-akcent-2:   #eebe3e;
	--kozw-ink:        #0a0500;
	--kozw-tekst:      #728291;
	--kozw-ramka:      #e6e9ee;
	--kozw-jasne:      #f7f8fa;
	--kozw-radius:     16px;
	--kozw-cien:       0 4px 18px rgba(10, 5, 0, .06);
	--kozw-cien-mocny: 0 10px 34px rgba(10, 5, 0, .10);
}

/* --------------------------------------------------------------------------
   1. Miniatury kart wpisów na listingach (/blog/, kategorie, autor)
   --------------------------------------------------------------------------
   Blocksy renderuje kartę jako `boundless-image`, czyli „oryginalne
   proporcje": kontener nie ma żadnej wysokości, więc karta jest tak wysoka,
   jak obrazek. Przy mieszanych proporcjach (1200×630 obok 820×820) tytuły
   i przyciski w rzędzie rozjeżdżały się w pionie — stąd przymus wrzucania
   kwadratów. Ustalona proporcja + object-fit: cover kadruje dowolny obrazek.

   Proporcję zmienia się jedną zmienną (Customizer → Dodatkowy CSS):
       .entry-card > .ct-media-container { --koz-karta-proporcje: 16 / 9; }
   -------------------------------------------------------------------------- */

.entry-card > .ct-media-container {
	aspect-ratio: var(--koz-karta-proporcje, 4 / 3);
	overflow: hidden;
}

.entry-card > .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   1b. Kafelek wpisu — listingi ORAZ „Podobne wpisy" (2026-09-22)
   --------------------------------------------------------------------------
   Karta była biała na białej stronie, bez ramki i cienia, więc wpisy zlewały
   się w jedną płachtę (wzorzec z plombier.com.pl/blog/: każdy wpis to osobny
   kafelek). Delikatne tło #f7f8fa + włosowa ramka wystarczą — bez cienia
   w stanie spoczynku, żeby listing został spokojny.

   Ten sam wygląd dostaje moduł „Podobne wpisy" pod wpisem — dlatego oba
   selektory siedzą w JEDNEJ regule: gdy zmienisz wygląd kafelka, zmieni się
   w obu miejscach naraz i nie rozjadą się z czasem. Tam miniatura nie jest
   `boundless-image`, więc padding wciąga ją do środka sam, a zaokrąglenie
   ma już od motywu.

   ⚠️ Miniatura na LISTINGACH domyślnie WYCHODZI poza kartę: Blocksy daje jej klasę
   `boundless-image` i rozpycha ją ujemnymi marginesami o `--card-inner-spacing`
   (tu 40 px). Żeby miniatura dostała własne zaokrąglenie — takie jak
   w „Podobnych wpisach", czyli `var(--theme-border-radius, 5px)` — trzeba to
   rozpychanie skasować i wciągnąć ją do środka paddingu. Przy okazji padding
   schodzi z 40 na 18 px: przy karcie 364 px miniatura wewnątrz 40-pikselowego
   marginesu robiła się nieproporcjonalnie mała.

   ⚠️ PODWOJONA KLASA `.entry-card.entry-card` — dwie reguły Blocksy mają
   dokładnie tę samą specyficzność co zapis pojedynczy, a `main.min.css`
   ładuje się PO tym pliku, więc wygrywały remisem:
     `[data-cards="boxed"] .entry-card`                      → padding i ramka
     `.entry-card .boundless-image:first-child:not(:only-child)`
        → zeruje DOLNE rogi miniatury (logicznymi longhandami
          `border-end-start-radius` / `border-end-end-radius`, więc nie łapie
          ich szukanie po „border-radius"), bo w domyślnym układzie miniatura
          dotyka dolnej krawędzi karty.
   -------------------------------------------------------------------------- */

.entries .entry-card.entry-card,
.ct-related-posts .ct-related-posts-items > article {
	padding: 18px 18px 24px;
	border: 1px solid var(--kozw-ramka);
	border-radius: 14px;
	background: var(--kozw-jasne);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.entries .entry-card.entry-card:hover,
.entries .entry-card.entry-card:focus-within,
.ct-related-posts .ct-related-posts-items > article:hover,
.ct-related-posts .ct-related-posts-items > article:focus-within {
	border-color: #d8dde5;
	box-shadow: var(--kozw-cien-mocny);
	transform: translateY(-2px);
}

/* miniatura wciągnięta do środka karty + zaokrąglenie jak w „Podobnych wpisach" */
.entries .entry-card.entry-card > .ct-media-container.boundless-image {
	width: 100%;
	margin: 0 0 18px;
	border-radius: var(--theme-border-radius, 5px);
}

@media (max-width: 640px) {
	.entries .entry-card.entry-card,
	.ct-related-posts .ct-related-posts-items > article {
		padding: 14px 14px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.entries .entry-card.entry-card,
	.ct-related-posts .ct-related-posts-items > article { transition: none; }

	.entries .entry-card.entry-card:hover,
	.ct-related-posts .ct-related-posts-items > article:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   2. Obrazki w treści wpisu: zaokrąglenie, cień, twardy limit szerokości
   --------------------------------------------------------------------------
   Zaokrąglenie i cień są „miękkie": obrazek z własnym zaokrągleniem albo
   cieniem ustawionym w bloku (style inline) nadal wygrywa.
   Limit szerokości jest „twardy" (!important) — to zabezpieczenie przed
   ustawieniem w bloku szerokości większej niż kontener treści.
   -------------------------------------------------------------------------- */

/* `:not(.koz-cta, .koz-cta *)` — moduł CTA ma własne, świadome ograniczenia
   szerokości obrazka i ten bezpiecznik (specyficzność 0,3,1 + !important)
   je kasował: w wariancie wyśrodkowanym obrazek rozlewał się na całą kartę. */
.single-post article > .entry-content :is(img, figure, video, iframe, .wp-block-image):not(.koz-cta, .koz-cta *) {
	max-width: 100% !important;
}

/* to samo wyłączenie co wyżej — `… img` ma (0,2,2) i biło `height: 100%`
   w wariancie `--obraz-do-krawedzi` (0,2,1): obrazek wracał do swoich
   proporcji i pod spodem prześwitywało tło karty */
.single-post article > .entry-content img:not(.koz-cta *) {
	height: auto;
}

.single-post article > .entry-content .wp-block-image img {
	border-radius: var(--koz-img-radius, 14px);
	box-shadow: 0 6px 22px rgba(10, 5, 0, .08);
}

/* podpis pod obrazkiem */
.single-post article > .entry-content .wp-block-image figcaption {
	margin-top: 10px;
	color: var(--kozw-tekst);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* obrazki w galerii — to samo zaokrąglenie, bez podwójnego cienia */
.single-post article > .entry-content .wp-block-gallery img {
	border-radius: var(--koz-img-radius, 14px);
}

/* --------------------------------------------------------------------------
   2b. Linki w treści z wklejonym `color: inherit`
   --------------------------------------------------------------------------
   Wpisy przeklejane z edytora tekstu potrafią przynieść na <a> inline
   `style="color: inherit; text-decoration: underline; font-weight: inherit"`.
   Taki link gubi firmowy kolor (--theme-link-initial-color: #ffb900) i zlewa
   się z akapitem — w jednym wpisie część odnośników była żółta, a część
   szara (#728291). Treść wpisu 2830 wyczyszczona w bazie 21.09; poniżej
   siatka bezpieczeństwa na kolejne wklejki.

   `!important` jest tu bezpieczne: selektor łapie WYŁĄCZNIE linki, które
   same deklarują `color: inherit`, więc nie dotyka odnośników celowo
   pokolorowanych w edytorze.
   -------------------------------------------------------------------------- */

.single-post article > .entry-content a[style*="color:inherit"],
.single-post article > .entry-content a[style*="color: inherit"] {
	color: var(--theme-link-initial-color, #ffb900) !important;
}

.single-post article > .entry-content a[style*="color:inherit"]:hover,
.single-post article > .entry-content a[style*="color: inherit"]:hover {
	color: var(--theme-link-hover-color, #ffcd05) !important;
}

/* --------------------------------------------------------------------------
   3. Lightbox (assets/wpis-blog.js)
   --------------------------------------------------------------------------
   Włącza się klasą `koz-lightbox` w polu Blok → Zaawansowane → Dodatkowe
   klasy CSS (na bloku „Obrazek" albo „Galeria").
   -------------------------------------------------------------------------- */

.koz-lightbox img,
img.koz-lightbox {
	cursor: zoom-in;
	transition: transform .25s ease, box-shadow .25s ease;
}

.koz-lightbox img:hover,
img.koz-lightbox:hover {
	transform: translateY(-2px);
	box-shadow: var(--kozw-cien-mocny);
}

.koz-lightbox img:focus-visible,
img.koz-lightbox:focus-visible {
	outline: 3px solid var(--kozw-akcent);
	outline-offset: 3px;
}

.koz-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px 76px;
	background: rgba(10, 5, 0, .88);
	opacity: 0;
	transition: opacity .2s ease;
}

/* ⚠️ MUSI zostać: `display: flex` wyżej bije regułę przeglądarki
   `[hidden] { display: none }` (specyficzność klasy > selektora typu).
   Bez tego zamknięta warstwa zostaje nad stroną — niewidoczna (opacity 0),
   ale łapiąca KAŻDE kliknięcie: po zamknięciu podglądu strona wyglądała
   na zablokowaną. */
.koz-lb[hidden] {
	display: none;
}

.koz-lb[data-widoczny="1"] {
	opacity: 1;
}

.koz-lb__obraz {
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
	object-fit: contain;
}

.koz-lb__podpis {
	position: absolute;
	right: 20px;
	bottom: 24px;
	left: 20px;
	margin: 0;
	color: #e9ecef;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.koz-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.koz-lb__btn:hover,
.koz-lb__btn:focus-visible {
	background: var(--kozw-akcent);
	color: var(--kozw-ink);
	transform: scale(1.06);
}

.koz-lb__zamknij { top: 18px; right: 18px; }
.koz-lb__poprz   { top: 50%; left: 18px;  transform: translateY(-50%); }
.koz-lb__nast    { top: 50%; right: 18px; transform: translateY(-50%); }

.koz-lb__poprz:hover, .koz-lb__poprz:focus-visible,
.koz-lb__nast:hover,  .koz-lb__nast:focus-visible {
	transform: translateY(-50%) scale(1.06);
}

.koz-lb__licznik {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	color: #cfd4da;
	font-size: 14px;
	letter-spacing: .04em;
}

@media (max-width: 640px) {
	.koz-lb { padding: 16px 12px 70px; }
	.koz-lb__btn { width: 40px; height: 40px; font-size: 19px; }
	.koz-lb__poprz { left: 8px; }
	.koz-lb__nast  { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.koz-lb,
	.koz-lb__btn,
	.koz-lightbox img { transition: none; }
	.koz-lightbox img:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   4. Oddech między nagłówkiem a tekstem
   --------------------------------------------------------------------------
   Blocksy dawał H2 tylko ~20 px odstępu w dół przy ~52 px w górę — nagłówek
   wyglądał, jakby był przyklejony do następnego akapitu. Wyrównanie proporcji
   (góra : dół ≈ 3 : 2). Reguły celują w nagłówki BLOKOWE (.wp-block-heading),
   więc nie ruszają nagłówków spisu treści, akordeonów i modułów.
   -------------------------------------------------------------------------- */

.single-post article > .entry-content h2.wp-block-heading { margin-bottom: 32px; }
.single-post article > .entry-content h3.wp-block-heading { margin-bottom: 26px; }
.single-post article > .entry-content h4.wp-block-heading { margin-bottom: 22px; }
.single-post article > .entry-content h5.wp-block-heading { margin-bottom: 18px; }

/* nagłówek tuż po obrazku/tabeli/akordeonie — trochę więcej miejsca u góry */
.single-post article > .entry-content :is(figure, .koz-tabela, .wp-block-accordion) + :is(h2, h3, h4).wp-block-heading {
	margin-top: 46px;
}

@media (max-width: 640px) {
	.single-post article > .entry-content h2.wp-block-heading { margin-bottom: 24px; }
	.single-post article > .entry-content h3.wp-block-heading { margin-bottom: 20px; }
	.single-post article > .entry-content h4.wp-block-heading { margin-bottom: 18px; }
}

/* --------------------------------------------------------------------------
   5. Akordeon Gutenberga — fajka zamiast znaku „+"
   --------------------------------------------------------------------------
   Sam znak „+" wycina z HTML-a filtr w inc/wpis-blog.php (siedział wewnątrz
   <h2-h4>, więc wchodził do TEKSTU nagłówka). Wskaźnik rysuje pseudoelement:
   nie istnieje w tekście nagłówka ani w drzewie dostępności, a stan otwarcia
   i tak czyta aria-expanded na przycisku.
   -------------------------------------------------------------------------- */

.wp-block-accordion-heading__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: 16px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transform-origin: center;
	opacity: .75;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle::after {
	transform: translateY(2px) rotate(-135deg);
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-heading__toggle::after {
		transition: transform .2s ease-in-out, opacity .2s ease-in-out;
	}
}

/* podkreślanie tytułu po najechaniu (domyślne w rdzeniu) bywa krzykliwe
   na karcie FAQ — zostaje tylko delikatna zmiana koloru */
.koz-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Blok FAQ — klasa `koz-faq`
   --------------------------------------------------------------------------
   Wygląd 1:1 z akordeonem Elementora na /uslugi/przeciski-sterowane/:
   biała karta, promień 16 px, padding 24 px, tytuł Manrope 18/600, odstęp
   16 px między pozycjami. Różnica: na blogu tło strony jest białe, więc
   karta dostaje delikatną ramkę i cień (na stronach usługowych sekcja stoi
   na szarym tle i obchodziła się bez nich).

   Dwie drogi wstawienia — obie obsłużone tym samym stylem:
   a) blok „Akordeon" (Gutenberg) + klasa `koz-faq` w polu
      Blok → Zaawansowane → Dodatkowe klasy CSS (blok ma być CZYSTY, bez
      własnych kolorów/zaokrągleń — inline z bloku bije CSS);
   b) blok „Kod HTML" ze znacznikami <details>, gdy potrzebny jest inny
      poziom nagłówka (wzór w dokumentacji modułu).

   Żadna z dróg NIE generuje danych strukturalnych (FAQPage dokłada się
   osobno, ręcznie).
   -------------------------------------------------------------------------- */

.koz-faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 32px 0 40px;
	max-width: 992px;
}

/* blok rdzenia układa dzieci marginesami (is-layout-flow) — przy flex+gap
   trzeba je wyzerować, inaczej odstępy się dublują */
.koz-faq > * {
	margin-block: 0 !important;
}

/* --- karta pozycji --- */

.koz-faq .wp-block-accordion-item,
.koz-faq .koz-faq__item {
	overflow: hidden;
	padding: 0 !important;
	border: 1px solid var(--kozw-ramka);
	border-radius: var(--kozw-radius) !important;
	background: #fff !important;
	box-shadow: var(--kozw-cien);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.koz-faq .wp-block-accordion-item:hover,
.koz-faq .koz-faq__item:hover {
	border-color: #d8dde5;
	box-shadow: var(--kozw-cien-mocny);
}

/* --- nagłówek pytania --- */

.koz-faq .wp-block-accordion-heading,
.koz-faq .koz-faq__tytul {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--kozw-ink) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.koz-faq .wp-block-accordion-heading__toggle,
.koz-faq .koz-faq__pytanie {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 24px !important;
	text-align: left;
	cursor: pointer;
}

/* wariant HTML: <summary> bez natywnego trójkącika + własna fajka */
.koz-faq .koz-faq__pytanie {
	list-style: none;
}

.koz-faq .koz-faq__pytanie::-webkit-details-marker {
	display: none;
}

.koz-faq .koz-faq__tytul {
	flex: 1;
}

.koz-faq .koz-faq__pytanie::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .75;
	transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.koz-faq .koz-faq__item[open] > .koz-faq__pytanie::after {
	transform: translateY(2px) rotate(-135deg);
	opacity: 1;
}

.koz-faq :is(.wp-block-accordion-heading__toggle, .koz-faq__pytanie):focus-visible {
	outline: 3px solid var(--kozw-akcent);
	outline-offset: -3px;
	border-radius: var(--kozw-radius);
}

/* --- odpowiedź --- */

.koz-faq .wp-block-accordion-panel,
.koz-faq .koz-faq__odpowiedz {
	padding: 0 24px 22px !important;
	color: var(--kozw-tekst);
}

/* ⚠️ Zwinięty panel rdzenia dostaje `hidden="until-found"`, a taki element
   NADAL generuje box (to nie jest display:none — dzięki temu Ctrl+F znajduje
   ukrytą treść). Rdzeń zeruje mu padding regułą z !important; nasza reguła
   wyżej ją przebijała i każda zamknięta pozycja miała 22 px martwego
   miejsca u dołu. Stąd osobna reguła dla [hidden]. */
.koz-faq .wp-block-accordion-panel[hidden] {
	padding: 0 !important;
}

/* redaktorzy pakują treść odpowiedzi w blok „Grupa" z własnym paddingiem —
   wewnątrz karty FAQ ten padding tylko dubluje odstępy */
.koz-faq .wp-block-accordion-panel > .wp-block-group {
	padding: 0 !important;
}

.koz-faq :is(.wp-block-accordion-panel, .koz-faq__odpowiedz) > :last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.koz-faq { gap: 12px; }

	.koz-faq .wp-block-accordion-heading,
	.koz-faq .koz-faq__pytanie,
	.koz-faq .koz-faq__tytul { font-size: 17px !important; }

	.koz-faq .wp-block-accordion-heading__toggle,
	.koz-faq .koz-faq__pytanie { padding: 18px 18px !important; }

	.koz-faq .wp-block-accordion-panel,
	.koz-faq .koz-faq__odpowiedz { padding: 0 18px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.koz-faq .wp-block-accordion-item,
	.koz-faq .koz-faq__item,
	.koz-faq .koz-faq__pytanie::after { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Tabele — klasa `koz-tabela`
   --------------------------------------------------------------------------
   Zamiast inline CSS: kontener `.koz-tabela` (zaokrąglenie + poziome
   przewijanie na wąskim ekranie) i style samej tabeli. We WPISACH kontener
   dokłada się automatycznie (filtr w inc/wpis-blog.php), na STRONACH
   wpisuje się go ręcznie w bloku „Kod HTML" — dzięki temu automat nie rusza
   /przewierty-sterowane-cennik/.

   Wzór:
     <div class="koz-tabela">
       <table>
         <thead><tr><th>Średnica</th><th>Cena</th></tr></thead>
         <tbody><tr><td>Do Φ 110 mm</td><td>120 zł</td></tr></tbody>
       </table>
     </div>
     <p class="koz-tabela-uwaga">Ceny mają charakter poglądowy…</p>

   Modyfikatory na kontenerze:
     .koz-tabela--kolumna   – pierwsza kolumna pogrubiona i ciemniejsza
     .koz-tabela--kompakt   – mniejsze odstępy w komórkach
   -------------------------------------------------------------------------- */

.koz-tabela {
	overflow-x: auto;
	margin: 28px 0;
	border: 1px solid var(--kozw-ramka);
	border-radius: var(--kozw-radius);
	background: #fff;
	box-shadow: var(--kozw-cien);
	-webkit-overflow-scrolling: touch;
}

.koz-tabela > table {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	color: #39424c;
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

.koz-tabela > table :is(th, td) {
	padding: 15px 20px;
	border: 0;
	border-bottom: 1px solid var(--kozw-ramka);
	vertical-align: top;
	text-align: left;
}

/* wiersz nagłówkowy — żółta belka marki z CIEMNYM tekstem
   (biały na #ffcd05 ma kontrast ~1.6:1 i jest nieczytelny).
   ⚠️ BEZ white-space: nowrap — stare tabele z inline CSS mają
   `table-layout: fixed` i nagłówki wychodziły wtedy poza komórkę,
   nachodząc na sąsiednią (sprawdzone na „Rodzaje studni"). */
.koz-tabela > table :is(thead th, thead td),
.koz-tabela > table > tbody > tr:first-child > th {
	background: var(--kozw-akcent);
	color: var(--kozw-ink);
	font-weight: 700;
}

/* naprzemienne tła wierszy */
.koz-tabela > table > tbody > tr:nth-child(even) {
	background: #fafbfc;
}

.koz-tabela > table > tbody > tr:hover {
	background: var(--kozw-jasne);
}

.koz-tabela > table > tbody > tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* wyróżniona pierwsza kolumna — sam ciemniejszy, pogrubiony tekst,
   BEZ szarego tła (decyzja usera 21.09: tło rozbijało zebrę wierszy) */
.koz-tabela--kolumna > table > tbody > tr > :first-child {
	color: var(--kozw-ink);
	font-weight: 600;
}

.koz-tabela--kompakt > table :is(th, td) {
	padding: 10px 14px;
	font-size: 15px;
}

/* stopka tabeli — wiersze z zastrzeżeniami na całą szerokość (wzór
   z /przewierty-sterowane-cennik/: akapit o wycenie indywidualnej
   i „Minimalna cena za wyjazd…”). W kodzie: <tfoot> z colspan. */
.koz-tabela > table > tfoot :is(th, td) {
	background: var(--kozw-jasne);
	border-bottom: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.koz-tabela > table > tfoot > tr + tr :is(th, td) {
	border-top: 1px solid var(--kozw-ramka);
}

.koz-tabela > table .koz-tabela__akcent {
	color: var(--kozw-ink);
	font-weight: 700;
	text-align: center;
}

/* mocne akcenty w komórkach nie mają krzyczeć */
.koz-tabela > table strong {
	color: var(--kozw-ink);
	font-weight: 700;
}

.koz-tabela > table a {
	color: #8a6d00;
	text-decoration: underline;
}

/* dopisek pod tabelą (np. „Ceny mają charakter poglądowy…") */
.koz-tabela-uwaga,
.wp-block-table > figcaption,
.koz-tabela > table > caption {
	margin: -8px 0 28px;
	color: var(--kozw-tekst);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
}

.koz-tabela > table > caption {
	caption-side: bottom;
	margin: 0;
	padding: 12px 20px 14px;
}

/* blok tabeli Gutenberga: figure otacza kontener i podpis */
.wp-block-table {
	margin: 28px 0;
}

.wp-block-table > .koz-tabela {
	margin: 0;
}

.wp-block-table > figcaption {
	margin: 12px 0 0;
}

@media (max-width: 782px) {
	.koz-tabela > table {
		min-width: 460px;
		font-size: 15px;
	}

	.koz-tabela > table :is(th, td) {
		padding: 12px 14px;
	}
}

/* --------------------------------------------------------------------------
   8. Sekcja kontaktowa [koz_kontakt] — 2 kolumny jak na stronie głównej
   -------------------------------------------------------------------------- */

.koz-kontakt {
	margin: 56px 0 24px;
}

.koz-kontakt__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
}

.koz-kontakt__nad {
	margin: 0 0 10px;
	color: var(--kozw-akcent-2);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

/* nagłówek: domyślnie <p> ostylowany jak H2 sekcji (jak „Autor publikacji"
   i „Podobne wpisy" — świadome odchudzanie struktury nagłówków) */
.koz-kontakt__naglowek {
	margin: 0 0 18px !important;
	color: var(--kozw-ink);
	font-size: 35px;
	font-weight: 700;
	line-height: 1.25;
}

.koz-kontakt__opis {
	margin: 0 0 28px !important;
	color: var(--kozw-tekst);
	font-size: 16px;
	line-height: 1.65;
}

.koz-kontakt__dane {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.koz-kontakt__pozycja {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.koz-kontakt__ikona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kozw-akcent-2);
}

.koz-kontakt__ikona svg {
	width: 19px;
	height: 19px;
	fill: #fff;
}

.koz-kontakt__pozycja :is(a, span) {
	color: var(--kozw-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.koz-kontakt__pozycja a:hover,
.koz-kontakt__pozycja a:focus-visible {
	color: var(--kozw-akcent-2);
	text-decoration: underline;
}

/* --- karta z formularzem --- */

.koz-kontakt__formularz {
	padding: 34px 34px 30px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 44px rgba(10, 5, 0, .10);
}

/* sekcja 7 toc.css zwęża i szarzy każdy .wpforms-container w treści wpisu —
   wewnątrz tej karty formularz ma zajmować całą jej szerokość na białym */
.single-post article > .entry-content .koz-kontakt .wpforms-container {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

@media (max-width: 991px) {
	.koz-kontakt__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.koz-kontakt__naglowek { font-size: 28px; }
}

@media (max-width: 640px) {
	.koz-kontakt { margin: 40px 0 16px; }

	.koz-kontakt__formularz {
		padding: 22px 18px 20px;
		border-radius: 16px;
	}

	.koz-kontakt__pozycja :is(a, span) { font-size: 18px; }

	.koz-kontakt__ikona { width: 40px; height: 40px; }
	.koz-kontakt__ikona svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   9. Moduł CTA (`koz-cta`) — wpisy i podstrony
   --------------------------------------------------------------------------
   Wstawiany jako blok „Kod HTML" (Gutenberg) albo widget HTML (Elementor) —
   ten sam markup działa w obu miejscach, bo ten arkusz ładuje się na całym
   froncie. Treść, obrazek i przyciski edytuje się wprost w markupie; wygląd
   siedzi wyłącznie w klasach, więc przyszły lifting to zmiana w tym pliku,
   a nie w kilkunastu wpisach.

   ⚠️ OBRAZKI CTA od Edyty (1400×1300) to WYCINKI Z PRZEZROCZYSTOŚCIĄ
   (29–59 % piksli alfa 0): maszyna wychodzi poza zaokrągloną podkładkę
   (zdjęcie albo żółty prostokąt), wszystkie rogi są przezroczyste. Dlatego
   obrazek dostaje `height: auto` i ŻADNEGO kadrowania, zaokrąglenia, ramki
   ani tła — `object-fit: cover` + `border-radius`, jak w pierwszej wersji
   modułu, ucinały kompozycję i dublowały zaokrąglenie.

   Warianty (klasa obok `koz-cta`):
     koz-cta--obraz-prawo  – obrazek po prawej stronie
     koz-cta--bez-tla      – bez karty (sama treść na tle strony)
   Kolory i szerokość obrazka: zmienne --koz-cta-* na `.koz-cta`.
   -------------------------------------------------------------------------- */

.koz-cta {
	--koz-cta-tlo:        #f7f8fa;
	--koz-cta-ramka:      #e9ecf1;
	--koz-cta-obraz-max:  400px;
	--koz-cta-btn-tlo:    #eebe3e;  /* jak przyciski w całej witrynie */
	--koz-cta-btn-hover:  #ffcd05;
	--koz-cta-btn-tekst:  #ffffff;  /* na #0a0500 zamienisz, gdy zdecydujesz
	                                   się poprawić kontrast przycisków */

	/* ⚠️ FLEX Z ZAWIJANIEM, nie grid z media query: moduł trafia też do wąskich
	   kolumn Elementora przy szerokim oknie. Zapytanie o szerokość OKNA nic by
	   tam nie dało (sprawdzone: w kolumnie 671 px układ dwukolumnowy zostawał
	   i tekst ściskało do 145 px). Przy flex-wrap o złamaniu decyduje szerokość
	   SAMEGO modułu — i to bez container queries. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 44px;
	padding: 36px 40px;
	border: 1px solid var(--koz-cta-ramka);
	border-radius: 24px;
	background: var(--koz-cta-tlo);
	box-shadow: 0 6px 26px rgba(10, 5, 0, .06);
}

/* ⚠️ PODWOJONA KLASA (0,2,0) I `margin-block`, nie skrót `margin`:
   a) Blocksy zeruje `margin-top` regułą
      `:is(.is-layout-flow, .is-layout-constrained) > :where(:not(h1…h6))`
      o TEJ SAMEJ specyficzności co pojedyncza klasa, a jego arkusz ładuje się
      PO tym pliku — pojedyncze `.koz-cta { margin: 48px 0 }` przegrywało
      i karty stały 24 px od siebie zamiast 48;
   b) marginesy POZIOME muszą zostać przy Blocksy (`article > .entry-content > *`
      centruje nimi treść) — skrót `margin` by je skasował. */
.koz-cta.koz-cta {
	margin-block: 48px;
}

/* --- obrazek: pełna kompozycja, bez kadrowania --- */

.koz-cta .koz-cta__obraz {
	flex: 0 1 var(--koz-cta-obraz-max);
	min-width: min(300px, 100%);
	margin: 0;
}

.koz-cta .koz-cta__tresc {
	/* baza 380 px wymusza złamanie, zanim kolumna tekstu zrobi się za wąska */
	flex: 1 1 380px;
	min-width: min(380px, 100%);
}

.koz-cta .koz-cta__obraz img {
	display: block;
	width: 100%;
	max-width: var(--koz-cta-obraz-max);
	height: auto;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	object-fit: fill;
}

/* --- treść --- */

.koz-cta__nad {
	margin: 0 0 10px;
	color: var(--kozw-akcent-2);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* domyślnie <p> ostylowany jak nagłówek sekcji — struktura nagłówków wpisu
   zostaje czysta (jak „Podobne wpisy" i „Autor publikacji"); gdy CTA ma być
   pełnoprawnym nagłówkiem, wystarczy zamienić znacznik na <h2>/<h3> */
.koz-cta .koz-cta__tytul {
	margin: 0 0 14px;
	color: var(--kozw-ink);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

/* ⚠️ `:not(...)` jest tutaj konieczne: nadtytuł i tytuł też są akapitami,
   a selektor potomka z dzieckiem (0,2,1) bił reguły na samych klasach
   (0,2,0) — tytuł renderował się jako zwykły tekst 16 px. */
.koz-cta .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad) {
	margin: 0 0 14px;
	color: var(--kozw-tekst);
	font-size: 16px;
	line-height: 1.65;
}

.koz-cta .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad):last-of-type {
	margin-bottom: 0;
}

.koz-cta .koz-cta__tresc strong {
	color: var(--kozw-ink);
}

/* --- przyciski --- */

.koz-cta__przyciski {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* dwa przyciski równej wysokości, nawet gdy jeden
	                         łamie się na dwie linie — bolączka wersji 1 */
	gap: 14px;
	margin-top: 28px;
}

.koz-cta .koz-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 13px 26px;
	border: 2px solid var(--koz-cta-btn-tlo);
	border-radius: 8px;
	background: var(--koz-cta-btn-tlo);
	color: var(--koz-cta-btn-tekst);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.koz-cta .koz-cta__btn:hover,
.koz-cta .koz-cta__btn:focus-visible {
	background: var(--koz-cta-btn-hover);
	border-color: var(--koz-cta-btn-hover);
	color: var(--koz-cta-btn-tekst);
	text-decoration: none;
	transform: translateY(-1px);
}

.koz-cta .koz-cta__btn:focus-visible {
	outline: 3px solid var(--kozw-ink);
	outline-offset: 2px;
}

/* wariant drugoplanowy — obrys, żeby hierarchia dwóch akcji była czytelna */
.koz-cta .koz-cta__btn--obrys {
	background: transparent;
	color: var(--kozw-ink);
}

.koz-cta .koz-cta__btn--obrys:hover,
.koz-cta .koz-cta__btn--obrys:focus-visible {
	background: var(--koz-cta-btn-tlo);
	color: var(--koz-cta-btn-tekst);
}

/* --- warianty --- */

/* obrazek po prawej: row-reverse zamiast `order`, bo po złamaniu obrazek ma
   zostać NA GÓRZE — przy row-reverse pierwsza pozycja (obrazek) i tak ląduje
   w pierwszym wierszu */
.koz-cta--obraz-prawo {
	flex-direction: row-reverse;
}

.koz-cta--bez-tla {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* --- responsywność --- */

/* Media query odpowiada już tylko za gęstość (padding, skala pisma,
   przyciski na całą szerokość) — o kolumnach decyduje zawijanie wyżej. */
@media (max-width: 860px) {
	.koz-cta {
		gap: 8px;
		padding: 26px 22px;
	}

	.koz-cta--bez-tla { padding: 0; }

	.koz-cta .koz-cta__obraz img {
		max-width: 320px;
	}

	.koz-cta .koz-cta__tytul {
		font-size: 24px;
	}

	.koz-cta__przyciski {
		margin-top: 22px;
	}

	.koz-cta .koz-cta__btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.koz-cta .koz-cta__btn { transition: none; }
	.koz-cta .koz-cta__btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   9b. CTA — warianty do wyboru (2026-09-21)
   --------------------------------------------------------------------------
   Każdy wariant to JEDNA klasa dopisana obok `koz-cta`; markup zostaje ten
   sam, więc zmiana skórki to podmiana jednego słowa. Warianty barwne można
   łączyć z układowymi, np.
       class="koz-cta koz-cta--ciemny koz-cta--obraz-prawo"

   ⚠️ DOBÓR OBRAZKA DO TŁA: w zestawie Edyty `*-2` i `*-3` mają podkładkę
   z ŻÓŁTEGO prostokąta, a `*-1` — ze zdjęcia. Na wariancie `--zolty`
   żółta podkładka znika w tle, więc tam idą wersje `*-1` (albo sam wycinek
   maszyny bez podkładki).
   -------------------------------------------------------------------------- */

/* --- A. ciemny: mocny kontrast, dobry na zamknięcie wpisu --- */

.koz-cta--ciemny {
	--koz-cta-tlo:       #14110c;
	--koz-cta-ramka:     rgba(255, 255, 255, .10);
	--koz-cta-btn-tlo:   #ffcd05;
	--koz-cta-btn-hover: #ffdc4d;
	--koz-cta-btn-tekst: #0a0500;

	box-shadow: 0 16px 44px rgba(10, 5, 0, .24);
}

.koz-cta--ciemny .koz-cta__nad   { color: var(--kozw-akcent); }
.koz-cta--ciemny .koz-cta__tytul { color: #ffffff; }

.koz-cta--ciemny .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad) {
	color: #c6ccd4;
}

.koz-cta--ciemny .koz-cta__tresc strong { color: #ffffff; }

.koz-cta--ciemny .koz-cta__btn--obrys {
	border-color: rgba(255, 255, 255, .45);
	color: #ffffff;
}

.koz-cta--ciemny .koz-cta__btn--obrys:hover,
.koz-cta--ciemny .koz-cta__btn--obrys:focus-visible {
	border-color: var(--kozw-akcent);
	background: var(--kozw-akcent);
	color: var(--kozw-ink);
}

.koz-cta--ciemny .koz-cta__btn:focus-visible { outline-color: #ffffff; }

/* --- B. żółty: pas marki, do najmocniejszych wezwań --- */

.koz-cta--zolty {
	--koz-cta-tlo:       #ffcd05;
	--koz-cta-ramka:     #f0c007;
	--koz-cta-btn-tlo:   #14110c;
	--koz-cta-btn-hover: #2c261c;
	--koz-cta-btn-tekst: #ffffff;

	box-shadow: 0 12px 34px rgba(238, 190, 62, .38);
}

.koz-cta--zolty .koz-cta__nad   { color: rgba(10, 5, 0, .58); }
.koz-cta--zolty .koz-cta__tytul { color: var(--kozw-ink); }

.koz-cta--zolty .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad) {
	color: #4a3c10;
}

.koz-cta--zolty .koz-cta__tresc strong { color: var(--kozw-ink); }

.koz-cta--zolty .koz-cta__btn--obrys {
	border-color: var(--kozw-ink);
	color: var(--kozw-ink);
}

.koz-cta--zolty .koz-cta__btn--obrys:hover,
.koz-cta--zolty .koz-cta__btn--obrys:focus-visible {
	background: var(--kozw-ink);
	color: #ffffff;
}

/* --- B2. bursztynowy: tło w kolorze przycisków witryny (#eebe3e) --- */

.koz-cta--bursztyn {
	--koz-cta-tlo:       #eebe3e;
	--koz-cta-ramka:     #e0ae2b;
	--koz-cta-btn-tlo:   #14110c;
	--koz-cta-btn-hover: #2c261c;
	--koz-cta-btn-tekst: #ffffff;

	box-shadow: 0 12px 34px rgba(238, 190, 62, .34);
}

.koz-cta--bursztyn .koz-cta__nad   { color: rgba(10, 5, 0, .58); }
.koz-cta--bursztyn .koz-cta__tytul { color: var(--kozw-ink); }

.koz-cta--bursztyn .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad) {
	color: #4a3a12;
}

.koz-cta--bursztyn .koz-cta__tresc strong { color: var(--kozw-ink); }

.koz-cta--bursztyn .koz-cta__btn--obrys {
	border-color: var(--kozw-ink);
	color: var(--kozw-ink);
}

.koz-cta--bursztyn .koz-cta__btn--obrys:hover,
.koz-cta--bursztyn .koz-cta__btn--obrys:focus-visible {
	background: var(--kozw-ink);
	color: #ffffff;
}

.koz-cta--bursztyn .koz-cta__lista li          { color: #4a3a12; }
.koz-cta--bursztyn .koz-cta__lista li::before  { background: var(--kozw-ink); }
.koz-cta--bursztyn .koz-cta__lista li::after   { border-color: var(--kozw-akcent); }

/* --- C. obrys: biała karta z żółtą ramką (najbliżej pierwszej wersji) --- */

.koz-cta--obrys {
	--koz-cta-tlo:   #ffffff;
	--koz-cta-ramka: var(--kozw-akcent);

	border-width: 2px;
	box-shadow: 0 10px 30px rgba(10, 5, 0, .07);
}

/* --- D. gradient: ciepłe, bardzo delikatne tło --- */

.koz-cta--gradient {
	--koz-cta-ramka: #f4e6c0;

	background: linear-gradient(135deg, #fffdf6 0%, #fdf4dc 55%, #fceccf 100%);
}

/* --- E. obrazek do krawędzi karty --- */
/* ⚠️ Ten wariant KADRUJE obrazek, więc jest pod ZWYKŁE ZDJĘCIA, nie pod
   wycinki Edyty (te straciłyby wystającą maszynę). */

.koz-cta--obraz-do-krawedzi {
	padding: 0;
	overflow: hidden;
	gap: 0 44px;
}

/* ⚠️ Obrazek pozycjonowany absolutnie, a nie `height: 100%`: <figure> ma
   wysokość `auto` (bierze ją z `align-self: stretch`), a procentowa wysokość
   względem `auto` jest traktowana jak `auto` — obrazek spadał wtedy do swoich
   proporcji i pod spodem prześwitywało tło karty (267 px przy karcie 281 px).
   `inset: 0` liczy się od UŻYTEJ wysokości rodzica, więc wypełnia ją zawsze. */
.koz-cta--obraz-do-krawedzi .koz-cta__obraz {
	position: relative;
	align-self: stretch;
	min-height: 260px;
}

.koz-cta--obraz-do-krawedzi .koz-cta__obraz img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.koz-cta--obraz-do-krawedzi .koz-cta__tresc {
	padding: 34px 40px 34px 0;
}

.koz-cta--obraz-do-krawedzi.koz-cta--obraz-prawo .koz-cta__tresc {
	padding: 34px 0 34px 40px;
}

/* --- F. pasek: bez obrazka, tytuł i przycisk w jednej linii --- */
/* W markupie pomija się całą sekcję <figure class="koz-cta__obraz">. */

.koz-cta--pasek {
	padding: 26px 32px;
}

.koz-cta--pasek .koz-cta__tresc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
}

.koz-cta--pasek .koz-cta__tytul {
	flex: 1 1 320px;
	margin: 0;
	font-size: 22px;
}

.koz-cta--pasek .koz-cta__przyciski {
	flex: 0 0 auto;
	margin-top: 0;
}

/* --- G. wyśrodkowany: obrazek na górze, treść pod spodem --- */

.koz-cta--srodek {
	flex-direction: column;
	text-align: center;
}

/* ⚠️ Po obróceniu osi `flex-basis` opisuje WYSOKOŚĆ, więc `flex: 0 1 400px`
   z reguły bazowej przestaje ograniczać szerokość obrazka — rozlewał się
   wtedy na całą kartę. Szerokość trzeba podać wprost. */
.koz-cta--srodek .koz-cta__obraz {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	max-width: var(--koz-cta-obraz-max);
}

.koz-cta--srodek .koz-cta__tresc {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	max-width: 640px;
}

.koz-cta--srodek .koz-cta__przyciski {
	justify-content: center;
}

/* --- H. lista korzyści (element treści, działa w każdym wariancie) --- */

.koz-cta .koz-cta__lista {
	display: grid;
	gap: 9px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.koz-cta .koz-cta__lista li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	color: var(--kozw-tekst);
	font-size: 16px;
	line-height: 1.5;
}

.koz-cta .koz-cta__lista li::before {
	content: "";
	position: absolute;
	top: .35em;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kozw-akcent);
}

.koz-cta .koz-cta__lista li::after {
	content: "";
	position: absolute;
	top: .62em;
	left: 6px;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--kozw-ink);
	border-bottom: 2px solid var(--kozw-ink);
	transform: rotate(45deg);
}

.koz-cta--ciemny .koz-cta__lista li { color: #c6ccd4; }
.koz-cta--zolty  .koz-cta__lista li { color: #4a3c10; }

.koz-cta--zolty .koz-cta__lista li::before { background: var(--kozw-ink); }
.koz-cta--zolty .koz-cta__lista li::after  { border-color: var(--kozw-akcent); }

.koz-cta--srodek .koz-cta__lista li {
	text-align: left;
}

@media (max-width: 860px) {
	.koz-cta--pasek { padding: 22px 20px; }
	.koz-cta--pasek .koz-cta__tytul { font-size: 20px; }

	.koz-cta--obraz-do-krawedzi { padding: 0; }
	.koz-cta--obraz-do-krawedzi .koz-cta__obraz { min-height: 220px; }

	.koz-cta--obraz-do-krawedzi .koz-cta__tresc,
	.koz-cta--obraz-do-krawedzi.koz-cta--obraz-prawo .koz-cta__tresc {
		padding: 24px 22px 26px;
	}
}

/* --- I. tekst na biało (nakładka na dowolną skórkę barwną) ---------------
   Klasa dokładana obok wariantu koloru, np.
       class="koz-cta koz-cta--bursztyn koz-cta--srodek koz-cta--tekst-bialy"
   Musi stać PO skórkach barwnych — wszystkie mają tę samą specyficzność
   i rozstrzyga kolejność w pliku.
   ⚠️ Biel na #eebe3e to ok. 1,75:1 kontrastu (jak przyciski w witrynie),
   czyli poniżej progu WCAG także dla dużego tekstu. Na ciemnych skórkach
   ta klasa jest zbędna — tam biel jest domyślna.
   -------------------------------------------------------------------------- */

.koz-cta--tekst-bialy .koz-cta__nad   { color: rgba(255, 255, 255, .82); }
.koz-cta--tekst-bialy .koz-cta__tytul { color: #ffffff; }

.koz-cta--tekst-bialy .koz-cta__tresc > p:not(.koz-cta__tytul):not(.koz-cta__nad) {
	color: rgba(255, 255, 255, .92);
}

.koz-cta--tekst-bialy .koz-cta__tresc strong { color: #ffffff; }

.koz-cta--tekst-bialy .koz-cta__lista li         { color: rgba(255, 255, 255, .92); }
.koz-cta--tekst-bialy .koz-cta__lista li::before { background: #ffffff; }
.koz-cta--tekst-bialy .koz-cta__lista li::after  { border-color: var(--kozw-ink); }

.koz-cta--tekst-bialy .koz-cta__btn--obrys {
	border-color: rgba(255, 255, 255, .72);
	color: #ffffff;
}

.koz-cta--tekst-bialy .koz-cta__btn--obrys:hover,
.koz-cta--tekst-bialy .koz-cta__btn--obrys:focus-visible {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--kozw-ink);
}

/* --- J. obrazek 3D: maszyna wychodzi z karty --------------------------------
   Najmocniejsza ekspozycja obrazka. Trzy rzeczy budują głębię:
   1. `filter: drop-shadow()` — te obrazki są WYCINKAMI Z ALFĄ, więc cień
      obrysowuje sylwetkę maszyny, a nie prostokąt (box-shadow dałby ramkę);
   2. lekki obrót w perspektywie — bryła ustawiona pod kątem do widza;
   3. ujemne marginesy pionowe + powiększenie — maszyna wychodzi poza kartę,
      zamiast siedzieć w niej grzecznie.

   ⚠️ ODSTĘP OD TEKSTU: `transform: scale()` NIE zmienia pudełka w layoucie —
   kolumna ma dalej 470 px, a obrazek wylewa się poza nią wizualnie i zjada
   `gap`. Dlatego ten wariant ma własny, większy odstęp, a wersja bursztynowa
   (skala 1.2) jeszcze większy.

   ⚠️ ŚWIADOMIE BEZ `filter: blur()` — poświata to zwykły radial-gradient.
   Duże blury potrafią położyć rendering w webview (postmortem siteart.pl).
   -------------------------------------------------------------------------- */

.koz-cta--obraz-3d {
	--koz-cta-obraz-max: 470px;

	overflow: visible;
	/* 44 → 72 px: przy skali 1.06 obrazek zabiera wizualnie ~14 px z każdej
	   strony, więc bazowy odstęp robił się na desktopie za ciasny */
	gap: 16px 72px;
}

.koz-cta--obraz-3d .koz-cta__obraz {
	position: relative;
	margin-block: -30px;
	perspective: 1100px;
}

/* poświata pod maszyną — daje „podłoże", od którego bryła się odrywa */
.koz-cta--obraz-3d .koz-cta__obraz::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 18% 2% 4%;
	border-radius: 50%;
	background: radial-gradient(58% 54% at 50% 62%, rgba(255, 205, 5, .38), rgba(255, 205, 5, 0) 72%);
}

/* bez animacji na hoverze — decyzja usera 21.09: unoszenie obrazka
   odwracało uwagę od przycisków */
.koz-cta--obraz-3d .koz-cta__obraz img {
	position: relative;
	z-index: 1;
	transform: perspective(1100px) rotateY(-9deg) rotateX(4deg) scale(1.06);
	transform-origin: 62% 52%;
	filter:
		drop-shadow(0 24px 26px rgba(10, 5, 0, .30))
		drop-shadow(0 5px 8px rgba(10, 5, 0, .16));
}

/* wersja ciemna: jeszcze luźniejszy odstęp (maszyna jest tu po prawej,
   więc tekst dochodzi do niej bliżej) i obrazek podniesiony o 15 px —
   suma marginesów pionowych zostaje taka sama, żeby karta nie urosła */
.koz-cta--obraz-3d.koz-cta--ciemny {
	gap: 16px 88px;
}

.koz-cta--obraz-3d.koz-cta--ciemny .koz-cta__obraz {
	margin-block: -45px -15px;
}

/* na ciemnym tle poświata musi być mocniejsza, bo ginie */
.koz-cta--obraz-3d.koz-cta--ciemny .koz-cta__obraz::before {
	background: radial-gradient(58% 54% at 50% 62%, rgba(255, 205, 5, .26), rgba(255, 205, 5, 0) 72%);
}

.koz-cta--obraz-3d.koz-cta--ciemny .koz-cta__obraz img {
	filter:
		drop-shadow(0 26px 30px rgba(0, 0, 0, .55))
		drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

@media (max-width: 860px) {
	/* na telefonie bez obrotu (czyta się gorzej), z lżejszym cieniem i bez
	   desktopowych odstępów — po złamaniu kolumn `gap` działa w pionie */
	.koz-cta--obraz-3d {
		gap: 8px;
	}

	.koz-cta--obraz-3d .koz-cta__obraz {
		margin-block: -14px 0;
	}

	.koz-cta--obraz-3d .koz-cta__obraz img {
		transform: scale(1.04);
		filter: drop-shadow(0 14px 16px rgba(10, 5, 0, .26));
	}
}


/* wersja bursztynowa: mocniejsze powiększenie (prośba 21.09) — przy skali 1.2
   obrazek zabiera wizualnie ~27 px z każdej strony, więc żeby ODSTĘP WIDZIANY
   NA EKRANIE wyszedł taki sam jak w wersji szarej (~48 px), `gap` musi być
   o te 27 px większy niż tam: 72 + 27 ≈ 104 px */
.koz-cta--obraz-3d.koz-cta--bursztyn {
	gap: 16px 104px;
}

.koz-cta--obraz-3d.koz-cta--bursztyn .koz-cta__obraz img {
	transform: perspective(1100px) rotateY(-9deg) rotateX(4deg) scale(1.2);
}

/* Rezerwa nad kartą: im mocniej powiększony obrazek, tym wyżej maszyna
   wychodzi ponad kartę, a między kartami jest tylko 48 px. Cel: ~36 px
   prześwitu do elementu wyżej, tak jak w wersji szarej.
     szara       +12 px ponad kartę → bazowe 48 px wystarcza
     czarna      +27 px             → 64 px
     bursztynowa +45 px             → 84 px
   ⚠️ Podwojona klasa i `margin-block-start` — powód w komentarzu przy
   `.koz-cta.koz-cta` (Blocksy zeruje margin-top, marginesy poziome są jego). */
.koz-cta.koz-cta--obraz-3d.koz-cta--ciemny {
	margin-block-start: 64px;
}

.koz-cta.koz-cta--obraz-3d.koz-cta--bursztyn {
	margin-block-start: 84px;
}

/* ⚠️ To media query MUSI stać PO regułach wariantów barwnych wyżej:
   wewnątrz `@media` specyficzność jest ta sama (0,2,0), więc rozstrzyga
   kolejność w pliku. Wcześniejsza wersja stała przed nimi i bursztynowy
   wariant zostawał na telefonie z desktopowym `gap: 104px` i skalą 1.2. */
@media (max-width: 860px) {
	.koz-cta--obraz-3d.koz-cta--ciemny,
	.koz-cta--obraz-3d.koz-cta--bursztyn {
		gap: 8px;
	}

	.koz-cta.koz-cta--obraz-3d.koz-cta--ciemny,
	.koz-cta.koz-cta--obraz-3d.koz-cta--bursztyn {
		margin-block-start: 48px;
	}

	.koz-cta--obraz-3d.koz-cta--ciemny .koz-cta__obraz {
		margin-block: -14px 0;
	}

	.koz-cta--obraz-3d.koz-cta--bursztyn .koz-cta__obraz img {
		transform: scale(1.04);
		filter: drop-shadow(0 14px 16px rgba(10, 5, 0, .26));
	}
}

/* --- K2. wykończenia wariantu 3D ------------------------------------------
   Dokładane OBOK `koz-cta--obraz-3d`, nie zamiast:
       class="koz-cta koz-cta--obraz-3d koz-cta--obraz-3d-lustro"

   Świadomie NIE ma tu wariantu z kolorowym dyskiem za maszyną: każda grafika
   Edyty ma już własną podkładkę (zdjęcie albo żółty prostokąt), więc dysk
   byłby drugim kształtem walczącym z pierwszym.
   -------------------------------------------------------------------------- */

/* --- lustro: maszyna stoi na odbijającej podłodze ---
   Odbicie rysuje `-webkit-box-reflect`, które NIE zajmuje miejsca w layoucie
   — dlatego obrazek idzie wyżej (-40 px zamiast -30) i nie wychodzi poniżej
   karty, żeby odbicie zmieściło się w jej dolnym paddingu.
   ⚠️ Firefox nie zna tej własności: tam po prostu nie ma odbicia, reszta
   wygląda identycznie. Świadoma, bezpieczna degradacja.

   ⚠️ DŁUGOŚĆ ODBICIA: odbicie ma wysokość CAŁEGO obrazka (~490 px) i NIE
   zajmuje miejsca w layoucie, więc maska musi je zgasić, zanim wyjdzie poza
   kartę. Zapas pod obrazkiem zależy od wysokości kolumny tekstu (obrazek jest
   wyśrodkowany w pionie) — w najciaśniejszym zmierzonym przypadku to ~21 px,
   czyli ok. 4 % wysokości obrazka. Stąd `transparent 7%`: pas odbicia ma
   ~34 px, a jego ogon jest już przy zerowej kryciu, więc nie widać go poza
   kartą. Chcesz dłuższe odbicie — podnieś ten procent i sprawdź dolną
   krawędź karty przy KRÓTKIM tekście, bo tam zapas jest najmniejszy.

   ⚠️ KIERUNEK MASKI: w `-webkit-box-reflect` GÓRA gradientu to część PRZY
   obiekcie. Maska musi więc zaczynać się od widocznej i gasnąć (`… .28,
   transparent 34%`). Odwrotna kolejność (`transparent 64%, … .28`) chowa
   odbicie tuż pod maszyną, a pokazuje je na samym dole — a że odbicie ma
   wysokość całego obrazka (~490 px), duch maszyny lądował 400 px niżej,
   na następnej karcie. */

.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro .koz-cta__obraz {
	margin-block: -46px 16px;
}

/* rezerwa nad kartą: grafika stoi tu 22 px ponad kartą (bazowa 12 px),
   więc bazowe 48 px dawało tylko 26 px prześwitu zamiast docelowych ~36 */
.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro {
	margin-block-start: 58px;
}

/* poświata zastąpiona odbiciem — dwa „podłoża" naraz robiłyby bałagan */
.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro .koz-cta__obraz::before {
	display: none;
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro .koz-cta__obraz img {
	-webkit-box-reflect: below -4px linear-gradient(to bottom, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 7%);
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro.koz-cta--ciemny .koz-cta__obraz img {
	-webkit-box-reflect: below -4px linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 7%);
}

/* --- mocny: ostrzejsza perspektywa i światło z lewej ---
   Cień jest tu PRZESUNIĘTY w bok (34 px), a nie tylko w dół — czyta się jak
   punktowe światło studyjne, nie jak rozproszone. Specyficzność (0,3,1),
   żeby wygrywać ze skalą ustawioną przez warianty barwne. */

.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny {
	gap: 16px 88px;
}

/* rezerwa liczona osobno dla wersji ciemnej: ma własne podniesienie
   obrazka o 15 px, więc przy skali 1.1 wychodzi 47 px ponad kartę
   (jasna 32 px) i potrzebuje odpowiednio więcej miejsca */
.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny {
	margin-block-start: 72px;
}

.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny.koz-cta--ciemny {
	margin-block-start: 84px;
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny .koz-cta__obraz img {
	transform: perspective(900px) rotateY(-16deg) rotateX(5deg) scale(1.1);
	filter:
		drop-shadow(34px 28px 26px rgba(10, 5, 0, .26))
		drop-shadow(0 6px 10px rgba(10, 5, 0, .16));
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny.koz-cta--ciemny .koz-cta__obraz img {
	filter:
		drop-shadow(34px 30px 30px rgba(0, 0, 0, .52))
		drop-shadow(0 8px 12px rgba(0, 0, 0, .34));
}

/* ⚠️ Ten blok MUSI stać PO regułach wykończeń wyżej — `@media` nie dodaje
   specyficzności, więc przy remisie decyduje kolejność w pliku. */
@media (max-width: 860px) {
	.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny {
		gap: 8px;
	}

	.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro,
	.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny,
	.koz-cta.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny.koz-cta--ciemny {
		margin-block-start: 48px;
	}

	.koz-cta--obraz-3d.koz-cta--obraz-3d-lustro .koz-cta__obraz {
		margin-block: -14px 12px;
	}

	.koz-cta--obraz-3d.koz-cta--obraz-3d-mocny .koz-cta__obraz img {
		transform: scale(1.04);
		filter: drop-shadow(0 14px 16px rgba(10, 5, 0, .26));
	}
}

/* --- wykończenie „lekkie": rozjaśnione pole wokół maszyny -------------------
   Dokładane obok `koz-cta--obraz-3d`, tak jak lustro i mocne światło.

   Po co: bazowy cień to 30 % czystej czerni. Na jasnej karcie jest w porządku,
   ale na barwach średnio ciemnych (bursztyn #eebe3e, żółty #ffcd05) neutralna
   czerń przygasza całe pole obok maszyny — CIEŃ MUSI BYĆ STROJONY DO TŁA.
   Stąd `--koz-cta-cien-rgb`: domyślnie prawie czarny, na barwach marki ciepły
   brąz. Do tego alfa mniejsza o połowę i poświata zamiana z żółtej na
   ciepłobiałą, która realnie podnosi jasność tuż przy obrazku.

   ⚠️ Zmienna jest CELOWO używana tylko tutaj — bazowy wariant zostaje
   nietknięty, żeby dało się porównać obie wersje obok siebie.
   -------------------------------------------------------------------------- */

.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki {
	--koz-cta-cien-rgb: 10, 5, 0;
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki:is(.koz-cta--bursztyn, .koz-cta--zolty) {
	--koz-cta-cien-rgb: 104, 66, 6;
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki .koz-cta__obraz img {
	filter:
		drop-shadow(0 16px 20px rgba(var(--koz-cta-cien-rgb), .17))
		drop-shadow(0 3px 5px rgba(var(--koz-cta-cien-rgb), .10));
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki .koz-cta__obraz::before {
	background: radial-gradient(58% 54% at 50% 60%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%);
}

/* na ciemnej karcie rozjaśnianie działa odwrotnie: tam „lekkie" znaczy
   mniej dociążony cień, a poświata zostaje ciepła, bo biała by wyprała tło */
.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki.koz-cta--ciemny .koz-cta__obraz img {
	filter:
		drop-shadow(0 18px 24px rgba(0, 0, 0, .34))
		drop-shadow(0 4px 8px rgba(0, 0, 0, .20));
}

.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki.koz-cta--ciemny .koz-cta__obraz::before {
	background: radial-gradient(58% 54% at 50% 62%, rgba(255, 205, 5, .30), rgba(255, 205, 5, 0) 72%);
}

@media (max-width: 860px) {
	.koz-cta--obraz-3d.koz-cta--obraz-3d-lekki .koz-cta__obraz img {
		filter: drop-shadow(0 12px 14px rgba(var(--koz-cta-cien-rgb), .16));
	}
}