/* ============================================================
   ARCHETYP: KULINARNY 2.0 (2026-09-07)
   Biel + czern + JEDEN akcent (kolor z logo portalu). Karty bez ramek
   i cieni — oddziela przestrzen (kanon modern-chat), typografia serif
   w naglowkach, sans w tresci. Ostatnia warstwa kaskady: nadpisuje
   base/components/interactive TYLKO dla tego archetypu.

   Zasada akcentu (research 03, §1.3): akcent wolno uzyc na linku w tresci,
   glownym CTA, pierscieniu fokusa, aktywnej pozycji spisu tresci i pasku
   postepu. Nigdzie indziej — kafelki, kickery, nawigacja i stopka sa czarno-biale.
   Kontrasty: tekst #111111 na bieli 18,9:1; przygaszony #5F5F5F 6,39:1;
   odsylacz #94331E 7,63:1; akcent #C24429 5,06:1 (bialy napis na przycisku).
   ============================================================ */

:root {
  --kul-radius: 10px;
  --kul-surface-2: color-mix(in srgb, var(--color-text-main) 4%, var(--color-bg));
  --kul-dur: 180ms;
  --kul-ease: cubic-bezier(.16, 1, .3, 1);
  --radius-card: 12px;
  --shadow-card: none;
}
@media (prefers-reduced-motion: reduce) { :root { --kul-dur: 0ms; } }

/* ---------- Typografia bazowa ---------- */
h1, h2, h3, h4 { font-weight: 600; }
.zx-prose h2 { margin-top: var(--space-7); }
.zx-prose h3 { margin-top: var(--space-6); }
.zx-prose a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zx-prose a:hover { color: var(--color-link-hover, var(--color-accent-hover)); }
.zx-prose li { margin-bottom: .4rem; }
.zx-prose ul li::marker, .zx-prose ol li::marker { color: var(--color-text-muted); }
.zx-prose blockquote, .zx-prose .zx-quote {
  border-left: 3px solid var(--color-text-main);
  background: none; border-radius: 0; font-style: normal; font-size: 1.05rem;
  padding: .25rem 0 .25rem 1.25rem;
}
.zx-prose .w-skrocie, .zx-prose .zx-lead, .zx-prose .callout {
  background: var(--kul-surface-2); border-left: 3px solid var(--color-text-main);
  border-radius: 0 var(--kul-radius) var(--kul-radius) 0; box-shadow: none; font-size: 1.05rem;
}

/* Tabele: wrapper przewijany poziomo (filtr the_content), naglowek na szarym. */
/* Tabele — po audycie szablonu 2026-09-08 (281 tabel): siatka niewidoczna (--color-border 1,27:1),
   brak linii pionowych, width:100% martwe w kontenerze przewijanym, brak zebry, liczby do lewej,
   pierwsza kolumna jako <td>, wrapper bez klawiatury. Poniżej: własny token linii tabeli (>=3:1),
   linie pionowe, min-width, zebra, .num, th[scope=row] przyklejony, tryb kartowy dla >5 kolumn. */
.zx-kul { --kul-table-line: #A9A09B; --kul-table-line-soft: #D8D2CD; }
.zx-prose { container-type: inline-size; container-name: prose; }
.zx-prose table { min-width: 100%; width: auto; border-collapse: separate; border-spacing: 0; font-size: .95rem; margin: 0; }
.zx-prose th, .zx-prose td {
  padding: .65rem .85rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--kul-table-line-soft); border-inline-end: 1px solid var(--kul-table-line-soft);
}
.zx-prose th:last-child, .zx-prose td:last-child { border-inline-end: 0; }
.zx-prose th { background: var(--kul-surface-2); font-weight: 600; border-bottom-color: var(--kul-table-line); }
.zx-prose tbody tr:last-child td, .zx-prose tbody tr:last-child th { border-bottom: 0; }
.zx-prose tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--kul-surface-2) 55%, transparent); }
.zx-prose td.num, .zx-prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zx-prose caption { caption-side: top; text-align: left; padding: .5rem .85rem; font-size: .9rem; color: var(--color-text-muted); }
.zx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.zx-prose .table-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  margin: var(--space-4) 0; border: 1px solid var(--kul-table-line); border-radius: var(--kul-radius);
  /* Sygnal przewijania: cien na krawedzi, znika przy dosunieciu (background-attachment: local). */
  background:
    linear-gradient(to right, var(--color-surface) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--color-surface) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.zx-prose .table-wrapper:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.zx-prose .table-wrapper figure, .zx-prose .table-wrapper table { margin: 0; }
/* Nagłówek wiersza przyklejony: po przewinięciu w prawo etykieta wiersza zostaje widoczna. */
.zx-prose .table-wrapper th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--color-surface);
  border-inline-end: 2px solid var(--kul-table-line); font-weight: 600;
}
.zx-prose .table-wrapper tbody tr:nth-child(even) > th[scope="row"] { background: color-mix(in srgb, var(--kul-surface-2) 55%, var(--color-surface)); }
/* Tryb kartowy dla tabel >5 kolumn na wąskim kontenerze (data-label z filtra treści). */
@container prose (max-width: 520px) {
  .zx-prose .table-wrapper[data-stack] { overflow: visible; background: none; border: 0; border-radius: 0; }
  .zx-prose .table-wrapper[data-stack] table, .zx-prose .table-wrapper[data-stack] tbody,
  .zx-prose .table-wrapper[data-stack] tr, .zx-prose .table-wrapper[data-stack] td, .zx-prose .table-wrapper[data-stack] th { display: block; width: auto; min-width: 0; }
  .zx-prose .table-wrapper[data-stack] thead, .zx-prose .table-wrapper[data-stack] caption.zx-visually-hidden { display: none; }
  .zx-prose .table-wrapper[data-stack] tr { border: 1px solid var(--kul-table-line); border-radius: var(--kul-radius); margin-bottom: var(--space-3); padding: .25rem .75rem .5rem; background: var(--color-surface); }
  .zx-prose .table-wrapper[data-stack] td, .zx-prose .table-wrapper[data-stack] th { border: 0; border-bottom: 1px solid var(--kul-table-line-soft); padding: .45rem 0; text-align: left; white-space: normal; position: static; }
  .zx-prose .table-wrapper[data-stack] tr > :last-child { border-bottom: 0; }
  .zx-prose .table-wrapper[data-stack] th[scope="row"] { font-size: 1.02em; border-bottom: 2px solid var(--kul-table-line); }
  .zx-prose .table-wrapper[data-stack] td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-text-muted); }
  .zx-prose .table-wrapper[data-stack] td.num { text-align: left; }
}

/* Karta przepisu — markup TRESCI (generator), motyw tylko styluje. */
.zx-prose .recipe-card, .zx-prose .zx-recipe-card {
  border: 1px solid var(--color-text-main); border-radius: var(--radius-card);
  background: var(--color-bg); box-shadow: none; padding: clamp(1.25rem, 3vw, 2rem);
}
.zx-prose .recipe-card > :first-child, .zx-prose .zx-recipe-card > :first-child { margin-top: 0; }
.zx-prose .recipe-card__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
  font-size: .9rem; color: var(--color-text-muted);
}
.zx-prose .recipe-card__meta strong { color: var(--color-text-main); }

/* ---------- Header ---------- */
.zx-header { box-shadow: none; background: color-mix(in srgb, var(--color-bg) 92%, transparent); }
.zx-header__bar { min-height: 64px; gap: 1.25rem; }
.zx-logo-custom img { height: 44px; width: auto; display: block; }
.zx-nav a { font-weight: 500; font-size: .95rem; color: var(--color-text-muted); border-bottom-width: 1px; }
.zx-nav a:hover, .zx-nav a:focus-visible,
.zx-nav .current-menu-item > a, .zx-nav .current-menu-ancestor > a, .zx-nav a[aria-current="page"] {
  color: var(--color-text-main); border-bottom-color: var(--color-text-main);
}
.zx-search-input {
  width: 200px; padding: 8px 14px 8px 34px; font-size: .9rem; font-family: inherit;
  border-radius: var(--kul-radius); background: var(--kul-surface-2);
  transition: width var(--kul-dur) var(--kul-ease), border-color var(--kul-dur) var(--kul-ease), background var(--kul-dur) var(--kul-ease);
}
.zx-search-input:focus { width: 260px; border-color: var(--color-text-main); background: var(--color-bg); }
.zx-search-submit { left: 11px; }

/* Wyszukiwarka w panelu mobilnym (header.php renderuje ja tylko w tym archetypie). */
.kul-nav-search { display: none; }
@media (max-width: 900px) {
  .zx-nav { padding-top: 88px; }
  .kul-nav-search { display: flex; gap: .5rem; margin-top: 1.5rem; }
  .kul-nav-search input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .6rem .9rem; font: inherit;
    border: 1px solid var(--color-border); border-radius: var(--kul-radius); background: var(--color-bg); color: var(--color-text-main);
  }
  .kul-nav-search button {
    min-height: 44px; padding: 0 1rem; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--color-bg); background: var(--color-text-main); border: 0; border-radius: var(--kul-radius);
  }
}

/* ---------- Przyciski ---------- */
.kul-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.35rem; border-radius: 999px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background var(--kul-dur) var(--kul-ease), color var(--kul-dur) var(--kul-ease), border-color var(--kul-dur) var(--kul-ease);
}
.kul-btn--primary { background: var(--color-accent); color: #FFFFFF; border: 1px solid var(--color-accent); }
.kul-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #FFFFFF; }
.kul-btn--ghost { background: var(--color-bg); color: var(--color-text-main); border: 1px solid var(--color-text-main); }
.kul-btn--ghost:hover { background: var(--color-text-main); color: var(--color-bg); }

/* ---------- Hero strony glownej ---------- */
.kul-hero {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) var(--space-4);
}
@media (min-width: 900px) { .kul-hero--cover { grid-template-columns: 1.05fr .95fr; } }
.kul-hero__title {
  margin: 0 0 var(--space-3); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.kul-hero__lead {
  margin: 0 0 var(--space-4); max-width: 56ch;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--color-text-muted);
}
.kul-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.kul-hero__media { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--kul-surface-2); }
.kul-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sekcje ---------- */
.kul-section { margin-block: clamp(3rem, 6vw, 4.5rem); }
.kul-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: var(--space-4); padding-bottom: .75rem; border-bottom: 1px solid var(--color-border);
}
.kul-section__title { margin: 0; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); line-height: 1.25; }
.kul-section__more { font-size: .92rem; font-weight: 500; color: var(--color-text-main); text-decoration: none; white-space: nowrap; }
.kul-section__more::after { content: " →"; }
.kul-section__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Dzialy (kafelki) ---------- */
/* 240 px = na kontenerze 1136 px cztery kolumny (8 dzialow = 4+4), na tablecie 2-3, na telefonie 1. */
.kul-hubs { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kul-hub {
  position: relative; display: flex; flex-direction: column; gap: .35rem; min-height: 44px;
  padding: 1.1rem 2.75rem 1.1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--kul-radius);
  color: var(--color-text-main); background: var(--color-bg); text-decoration: none;
  transition: border-color var(--kul-dur) var(--kul-ease), background var(--kul-dur) var(--kul-ease);
}
.kul-hub:hover, .kul-hub:focus-visible { border-color: var(--color-text-main); background: var(--kul-surface-2); }
.kul-hub__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.kul-hub__text { font-size: .9rem; line-height: 1.45; color: var(--color-text-muted); }
.kul-hub__arrow { position: absolute; right: 1rem; top: 1.05rem; color: var(--color-text-muted); transition: transform var(--kul-dur) var(--kul-ease); }
.kul-hub:hover .kul-hub__arrow { transform: translateX(3px); color: var(--color-text-main); }

/* ---------- Kicker, meta, miniatura ---------- */
.kul-kicker {
  display: inline-block; margin-bottom: .35rem; font-size: max(.78rem, 13px); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none;
}
.kul-kicker:hover { color: var(--color-text-main); }
.kul-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--color-text-muted); }
.kul-meta__sep { opacity: .7; }
.kul-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--kul-radius); background: var(--kul-surface-2); }
.kul-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--kul-ease); }
.kul-thumb__ph { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .kul-card:hover .kul-thumb img, .kul-featured:hover .kul-thumb img { transform: scale(1.02); }
}

/* ---------- Wyrozniony ---------- */
.kul-featured { display: grid; gap: var(--space-5); align-items: center; margin-bottom: var(--space-6); }
@media (min-width: 840px) { .kul-featured { grid-template-columns: 58fr 42fr; } }
.kul-featured__media { display: block; }
.kul-featured .kul-thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-card); }
.kul-featured__title { margin: .25rem 0 .75rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.kul-featured__title a, .kul-card__title a, .kul-row__title a { color: var(--color-text-main); text-decoration: none; }
.kul-featured__title a:hover, .kul-card__title a:hover, .kul-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kul-featured__excerpt { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: 1rem; line-height: 1.6; }

/* ---------- Siatka kart ---------- */
.kul-grid { display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .kul-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .kul-grid { grid-template-columns: repeat(3, 1fr); } }
.kul-card { display: flex; flex-direction: column; gap: .75rem; background: none; border: 0; box-shadow: none; }
.kul-card__media { display: block; }
.kul-card__body { display: flex; flex-direction: column; gap: .35rem; }
.kul-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.kul-card__excerpt {
  margin: 0; font-size: .92rem; line-height: 1.55; color: var(--color-text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kul-card .kul-meta { margin-top: .25rem; }

/* ---------- Najwazniejsze parametry ---------- */
.kul-facts {
  display: grid; gap: 1px; grid-template-columns: 1fr; margin: 0;
  background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--kul-radius); overflow: hidden;
}
@media (min-width: 720px) { .kul-facts { grid-template-columns: repeat(3, 1fr); } }
.kul-fact { margin: 0; padding: 1.1rem 1.25rem; background: var(--color-bg); }
.kul-fact dt { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.kul-fact dd { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
.kul-fact__link { display: inline-block; margin-top: .45rem; font: 500 .85rem/1.3 var(--font-body); color: var(--color-link); }

/* ---------- Od czego zaczac (lista numerowana) ---------- */
.kul-picks { list-style: none; counter-reset: pick; margin: 0; padding: 0; display: grid; }
@media (min-width: 760px) { .kul-picks { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }
.kul-pick { counter-increment: pick; border-top: 1px solid var(--color-border); }
.kul-pick__link {
  display: grid; grid-template-columns: 2.25rem 96px 1fr; gap: 1rem; align-items: center;
  padding: .9rem 0; color: var(--color-text-main); text-decoration: none;
}
.kul-pick__link::before { content: counter(pick, decimal-leading-zero); font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text-muted); }
.kul-pick__media { display: block; width: 96px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--kul-surface-2); }
.kul-pick__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kul-pick__body { display: grid; gap: .25rem; }
.kul-pick__title { font-weight: 600; line-height: 1.35; }
.kul-pick__link:hover .kul-pick__title { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- O autorze ---------- */
.kul-about {
  display: grid; gap: var(--space-5); align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
@media (min-width: 760px) { .kul-about:has(.kul-about__media) { grid-template-columns: 200px 1fr; } }
.kul-about__media { margin: 0; }
.kul-about__media img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.kul-about .kul-section__title { margin-bottom: .75rem; }
.kul-about__body p { margin: 0 0 var(--space-4); max-width: 62ch; color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Wpis ---------- */
.kul-post-head { margin-block: var(--space-4) var(--space-5); padding-bottom: 0; border-bottom: 0; }
.kul-post-title {
  margin: .35rem 0 .9rem; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem);
  line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
}
.kul-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--color-text-muted); }
.kul-post-meta a { color: var(--color-text-main); font-weight: 500; text-decoration: none; }
.kul-post-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kul-cover { margin: var(--space-4) 0 0; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; box-shadow: none; background: var(--kul-surface-2); }
.kul-cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* „Przejdz do przepisu” (toc.js) = realne CTA czytelnika -> akcent. Slot nad okladka. */
.kul-post-head__actions:empty { display: none; }
.kul-post-head__actions { margin-top: 1rem; }
.zx-skip-to-recipe {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 0;
  padding: .6rem 1.25rem; border: 1px solid var(--color-accent); border-radius: 999px;
  background: var(--color-accent); color: #FFFFFF; font-family: var(--font-body); font-size: .95rem; font-weight: 600;
}
.zx-skip-to-recipe::before { content: "\2193"; margin: 0; }
.zx-skip-to-recipe:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #FFFFFF; }

/* Wstawka narzedzia w tresci (filtr the_content, tylko wpisy z pasujacymi slowami) */
.zx-prose .kul-inline-cta {
  margin: var(--space-6) 0; padding: 1.35rem 1.5rem;
  border: 1px solid var(--color-text-main); border-radius: var(--radius-card); background: var(--color-bg);
}
.zx-prose .kul-inline-cta__kicker { margin: 0 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.zx-prose .kul-inline-cta__title { margin: 0 0 .4rem; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.zx-prose .kul-inline-cta__text { margin: 0 0 1rem; font-size: .95rem; color: var(--color-text-muted); }
/* .zx-prose a nadaje kolor odsylacza (0,1,1) i wygrywalby z .kul-btn--primary (0,1,0):
   bialy napis na przycisku znikal w ciemnej czerwieni. Wyzsza specyficznosc tutaj. */
.zx-prose .kul-inline-cta .kul-btn { text-decoration: none; }
.zx-prose .kul-inline-cta .kul-btn--primary, .zx-prose .kul-inline-cta .kul-btn--primary:hover { color: #FFFFFF; }

/* Osadzone narzedzie w tresci (sidebarCta.inlineEmbed): widget ma wlasny arkusz (.jwkp),
   motyw daje mu naglowek H2, lead i odstepy jak sekcji artykulu. */
.zx-prose .kul-inline-tool { margin: var(--space-6) 0; }
.zx-prose .kul-inline-tool > h2 { margin-top: 0; }
.zx-prose .kul-inline-tool__lead { color: var(--color-text-muted); }
.zx-prose .kul-inline-tool > .jwkp, .zx-prose .kul-inline-tool > [id] { max-width: 100%; margin-left: 0; margin-right: 0; }
.zx-prose .kul-inline-tool__more { font-size: .9rem; margin-top: .75rem; }

/* Strona kalkulatora: widget z tresci ma wlasny arkusz; tu tylko oddech i pelna szerokosc kolumny. */
.page .zx-prose .kalkulator, .page .zx-prose [class*="kalkulator"] { max-width: 100%; }

/* Panel boczny */
.kul-aside__sticky { display: grid; gap: var(--space-4); }
/* Panel przyklejony, ale NIE wyzszy niz ekran: przy spisie z 20+ pozycjami (H2+H3) boksy
   CTA i „w tym dziale” byly ucinane dolna krawedzia okna az do konca artykulu. Panel
   przewija sie wewnetrznie (cienki pasek), scroll-spy nadal dziala. */
@media (min-width: 1080px) {
  .kul-aside__sticky {
    position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow-y: auto;
    padding-right: 6px; scrollbar-width: thin; align-content: start;
  }
}
.kul-aside__box { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.kul-aside__box:first-child { padding-top: 0; border-top: 0; }
.kul-aside__title {
  margin: 0 0 .6rem; font-family: var(--font-heading); font-size: .85rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted);
}
.kul-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; line-height: 1.4; }
.kul-aside__list a { color: var(--color-text-main); text-decoration: none; }
.kul-aside__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kul-aside__more { display: inline-block; margin-top: .75rem; font-size: .88rem; color: var(--color-link); }
.kul-cta {
  display: block; padding: 1rem 1.1rem; border: 1px solid var(--color-text-main); border-radius: var(--kul-radius);
  color: var(--color-text-main); text-decoration: none; transition: background var(--kul-dur) var(--kul-ease);
}
.kul-cta:hover { background: var(--kul-surface-2); }
.kul-cta strong { display: block; margin-bottom: .25rem; font-family: var(--font-heading); font-size: 1.05rem; }
.kul-cta span { display: block; font-size: .88rem; line-height: 1.45; color: var(--color-text-muted); }

/* Spis tresci w panelu: bez ramki/tla/cienia (components.css je daje), akcent = aktywna pozycja. */
@media (min-width: 1080px) {
  .zx-kul .zx-toc { position: static; padding: 0; border: 0; background: none; box-shadow: none; }
}
.zx-kul .zx-toc li.lvl-3 a { padding-left: 1.6rem; font-size: .85rem; }

/* Tagi, udostepnianie, poprzedni / nastepny */
.kul-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--space-5) 0 0; }
.kul-tags a {
  display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .8rem;
  border: 1px solid var(--color-border); border-radius: 999px; font-size: .85rem; color: var(--color-text-main); text-decoration: none;
}
.kul-tags a:hover { border-color: var(--color-text-main); }
.zx-kul .zx-share-bar { margin-top: var(--space-5); }
.zx-kul .zx-share-btn {
  background: var(--color-bg) !important; color: var(--color-text-main) !important;
  border: 1px solid var(--color-border); min-height: 32px; display: inline-flex; align-items: center;
}
.zx-kul .zx-share-btn:hover { border-color: var(--color-text-main); }
.kul-prevnext { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
@media (min-width: 600px) { .kul-prevnext { grid-template-columns: 1fr 1fr; } .kul-prevnext__item--next { text-align: right; } }
.kul-prevnext small { display: block; margin-bottom: .25rem; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.kul-prevnext a { font-weight: 600; color: var(--color-text-main); text-decoration: none; line-height: 1.35; }
.kul-prevnext a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Komentarze */
.kul-comments-wrap { max-width: 720px; }
.comments-area { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.comments-title, .comment-reply-title { margin: 0 0 var(--space-4); font-size: 1.35rem; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-left: clamp(1rem, 4vw, 2.5rem); }
.comment-body { padding: 1rem 0; border-top: 1px solid var(--color-border); font-size: .95rem; }
.comment-author { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.comment-author .avatar { width: 36px; height: 36px; border-radius: 50%; }
.comment-metadata { font-size: .82rem; color: var(--color-text-muted); margin: .2rem 0 .6rem; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content p { margin-bottom: .6rem; }
.reply a { font-size: .85rem; color: var(--color-link); }
.comment-form label { display: block; margin: 0 0 .35rem; font-size: .9rem; font-weight: 500; color: var(--color-text-muted); }
.comment-form p { margin: 0 0 var(--space-3); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  display: block; width: 100%; padding: .7rem .9rem; font: inherit; color: var(--color-text-main);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--kul-radius);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--color-text-main); box-shadow: var(--focus-ring); }
.comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; }
.comment-form-cookies-consent input { width: 20px; height: 20px; margin-top: .15rem; }
.comment-form-cookies-consent label { display: inline; margin: 0; }
.comment-form input[type="submit"] {
  min-height: 44px; padding: .65rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
  color: #FFFFFF; background: var(--color-accent); border: 0; border-radius: 999px;
}
.comment-form input[type="submit"]:hover { background: var(--color-accent-hover); }
.comment-notes, .logged-in-as { font-size: .88rem; color: var(--color-text-muted); }

/* ---------- Archiwum / hub dzialu / wyszukiwanie ---------- */
.kul-hub-head { padding-block: clamp(2rem, 4vw, 3rem) var(--space-4); }
.kul-hub-head__title { margin: .25rem 0 .75rem; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem); line-height: 1.15; letter-spacing: -.01em; }
.kul-hub-head__q { font-style: italic; }
.kul-hub-head__desc { max-width: var(--measure); color: var(--color-text-muted); }
/* Sekcja contentowa archiwum: H1 -> BLUF -> opis SEO (decyzja 2026-09-08, kazda strona). */
.kul-seo { max-width: var(--measure); margin-top: .25rem; }
.kul-seo__bluf { margin: 0 0 .75rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; color: var(--color-text-main); text-wrap: pretty; }
.kul-seo__desc { color: var(--color-text-muted); font-size: 1rem; }
.kul-seo__desc p { margin-bottom: .75rem; }
.kul-seo__desc > :last-child { margin-bottom: 0; }
.kul-seo + .kul-hub-head__count { margin-top: .75rem; }
/* Opis SEO dzialu pod siatka: kolumna tresci, naglowki H2 jak we wpisie, oddzielony linia. */
.kul-archive-desc:empty { display: none; }
.kul-archive-desc { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.kul-archive-desc .kul-seo { max-width: 720px; }
.kul-archive-desc .kul-seo__desc { color: var(--color-text-main); font-size: var(--font-size-body); }
.kul-archive-desc .kul-seo__desc h2 { margin-top: var(--space-5); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.kul-archive-desc .kul-seo__desc h2:first-child { margin-top: 0; }
.kul-archive-desc .kul-seo__desc p { margin-bottom: var(--space-4); }
.kul-hub-head__desc p { margin-bottom: .75rem; }
.kul-hub-head__count { margin: .5rem 0 0; font-size: .9rem; color: var(--color-text-muted); }
.kul-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-3); }
.kul-chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .9rem;
  border: 1px solid var(--color-border); border-radius: 999px; font-size: .9rem; color: var(--color-text-main); text-decoration: none;
}
.kul-chip:hover { border-color: var(--color-text-main); }
.kul-chip__n { font-size: .8rem; color: var(--color-text-muted); }
.kul-grid--archive { margin-top: var(--space-4); }
.kul-empty { color: var(--color-text-muted); }

.kul-search { display: flex; gap: .5rem; max-width: 560px; margin-top: var(--space-3); }
.kul-search input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .6rem 1rem; font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--kul-radius); background: var(--color-bg); color: var(--color-text-main);
}
.kul-search input:focus { outline: none; border-color: var(--color-text-main); box-shadow: var(--focus-ring); }
.kul-search button {
  min-height: 44px; padding: 0 1.2rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--color-bg); background: var(--color-text-main); border: 0; border-radius: var(--kul-radius);
}
.kul-list { display: grid; }
.kul-row { display: grid; gap: 1rem; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
@media (min-width: 600px) { .kul-row { grid-template-columns: 200px 1fr; align-items: start; } }
.kul-row__title { margin: 0 0 .35rem; font-size: 1.2rem; line-height: 1.3; }

/* Paginacja: przyciski min. 40 px (cele dotykowe), aktywna = czarna. */
.navigation.pagination { margin: var(--space-6) 0; border: 0; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 .8rem;
  border: 1px solid var(--color-border); border-radius: 8px; font-size: .92rem; color: var(--color-text-main); text-decoration: none; background: var(--color-bg);
}
.navigation.pagination a.page-numbers:hover { border-color: var(--color-text-main); }
.navigation.pagination .page-numbers.current { background: var(--color-text-main); color: var(--color-bg); border-color: var(--color-text-main); }
.navigation.pagination .page-numbers.dots { border: 0; }

/* ---------- Stopka: jasna, oddzielona linia (nie czarny blok) ---------- */
.zx-footer { background: var(--color-bg); color: var(--color-text-main); border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.zx-footer h4, .zx-footer .zx-footer__h { color: var(--color-text-main); font-family: var(--font-heading); font-size: .95rem; font-weight: 600; margin: 0 0 .75rem; }
.zx-footer p, .zx-footer li, .zx-footer a, .zx-footer__desc { color: var(--color-text-muted); font-size: .92rem; }
.zx-footer a:hover { color: var(--color-text-main); text-decoration: underline; text-underline-offset: 3px; }
.zx-footer__brand img { height: 40px; width: auto; }
.zx-footer__grid { padding-bottom: var(--space-5); }
.zx-footer__seo, .zx-footer__disclaimer { border-top-color: var(--color-border); }
.zx-footer__seo h4, .zx-footer__seo .zx-footer__h { color: var(--color-text-main); }
/* Tabele w tresci na waskim ekranie: mniejszy stopien i luzniejsze lamanie zamiast 4–5 wierszy w komorce. */
@media (max-width: 760px) {
  .zx-prose table { font-size: .86rem; }
  .zx-prose th, .zx-prose td { padding: .5rem .6rem; }
}
.zx-footer__seo-text p { color: var(--color-text-muted); max-width: 80ch; }
.zx-footer__seo-text a { color: var(--color-link); }
.zx-footer__copy-bar { background: none; border-top: 1px solid var(--color-border); color: var(--color-text-muted); }

/* ---------- Detale globalne ---------- */
.zx-top { background: var(--color-text-main); }
.zx-progress { height: 3px; }
.zx-breadcrumb { padding-top: var(--space-4); }

@media print {
  .kul-aside, .kul-related, .kul-prevnext, .kul-tags, .kul-hero__actions, .kul-nav-search, .kul-comments-wrap { display: none !important; }
}

/* Odsylacz do biezacej strony zamieniony na tekst (filtr the_content) */
.zx-prose .kul-self-link { color: var(--color-text-muted); }
/* 404: lista dzialow */
.zx-404-hubs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .5rem 0 1.5rem; padding: 0; }
.zx-404-hubs a { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .9rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-main); text-decoration: none; font-size: .9rem; }
.zx-404-hubs a:hover { border-color: var(--color-text-main); }
