/* ==========================================================================
   Kácení stromů Baar — hlavní téma webu
   Vlastní CSS, žádný framework. Vše přes design tokeny v :root.
   Nahrazuje site.css/luxury.css zděděné z base projektu (studio-upgrade).
   ========================================================================== */

/* ── Fonty ────────────────────────────────────────────────────────────────
   Barlow Condensed (nadpisy) z Bunny Fonts — GDPR-friendly, povoleno v CSP.
   Inter (text) je self-hosted v /assets/fonts.                              */
@import url('https://fonts.bunny.net/css?family=barlow-condensed:600,700');

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokeny ───────────────────────────────────────────────────────── */
:root {
  /* Barvy — limetková + černá, převzato ze stávajícího webu */
  --lime:        #d6e04e;
  --lime-bright: #e6f062;
  --lime-dark:   #b6c22e;
  --ink:         #0f1108;
  --ink-soft:    #191c10;
  --ink-line:    #2a2e1e;
  --paper:       #ffffff;
  --paper-soft:  #f6f7ef;
  --text:        #14160d;
  --text-muted:  #6a705a;
  /* Tlumený text na tmavém pozadí. `--text-muted` je na černé nečitelný
     (kontrast 3.69 proti požadovaným 4.5) — naměřeno na popiscích
     kontaktního formuláře, který sedí v sekci `.on-dark`. */
  --text-muted-invert: rgba(255, 255, 255, 0.76);
  --text-invert: #ffffff;
  --border:      #e2e4d4;
  /* Chyba ve formuláři. Limetkový web červenou „značkovou" barvu nemá, ale
     u chyby je srozumitelnost nad vzhledem a limetka by na bílé nebyla
     čitelná vůbec. Kontrast 5.0 : 1 proti bílé. */
  --chyba:        #c0392b;
  --chyba-invert: #ff8f80;

  /* Typografie */
  --font-head: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.75rem, 7vw, 6rem);
  --fs-h1:    clamp(2.25rem, 5vw, 4rem);
  --fs-h2:    clamp(1.75rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Rozměry */
  /* 🔴 ŠÍŘKA OBSAHU. Do 9. 10. 2026 pevných 1240 px: na 1920px monitoru
     zbývalo po stranách 2 × 330 px prázdna a web působil jako nudle uprostřed.
     Teď roste s oknem a zastaví se na 1560 px, aby řádek nebyl nečitelně
     dlouhý. Pod 1512 px je to beze změny (1240 px), takže na noteboocích
     vypadá web přesně jako dřív. */
  --container: clamp(1240px, 82vw, 1560px);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius:    4px;
  --ctl-h:     48px;          /* minimální výška ovládacího prvku (dotykový cíl) */
  --radius-lg: 10px;
  /* Sloupec souvislého textu — na stránkách i v článku stejný.
     🔴 VYPLŇUJE CELÝ OBAL. Postupně 52 rem → 64 rem → `100%`: zadavatel
        9. 10. 2026 po každém kroku: „ne že to bude nudle", „stále není
        stejná šířka všude", „zase úzký obsah". Strop drží `--container`
        (max 1560 px), takže řádek nikdy neroste donekonečna.
     ⚠️ Kdyby byly řádky na velkém monitoru nečitelně dlouhé, nevracej sem
        pevné `rem` — ubrala by se tím zase jen šířka textu a vrátil by se
        odskok. Správné řešení je zúžit `--container` pro celý web. */
  --clanek-sloupec: 100%;

  /* Ostatní */
  --shadow:      0 2px 12px rgba(15, 17, 8, 0.08);
  --shadow-lg:   0 18px 50px rgba(15, 17, 8, 0.16);
  --transition:  180ms cubic-bezier(0.4, 0, 0.2, 1);
  --header-h:    76px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }

/* ── Typografie ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { text-wrap: pretty; }

.accent { color: var(--lime-dark); }
.on-dark .accent { color: var(--lime); }

/* Zvýraznění v nadpisech ze Stavebnice: <em>…</em> = limetkový akcent, NE kurzíva.
   (e_inline() propouští z Builder dat jen <em>/<strong>/<br>, viz KsbBuilderElements.) */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hero h1 em, .cta-band h2 em {
  font-style: normal;
  color: var(--lime-dark);
}
.on-dark :is(h1, h2, h3, h4, h5, h6) em,
.hero h1 em,
.cta-band :is(h1, h2, h3, h4, h5, h6) em,
.page-hero :is(h1, h2, h3, h4, h5, h6) em {
  color: var(--lime);
}
.on-lime :is(h1, h2, h3, h4, h5, h6) em { color: var(--ink); }

/* Popisek sekce („01 / SLUŽBY") */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--lime-dark);
}
.on-dark .eyebrow { color: var(--lime); }
.on-dark .eyebrow::before { background: var(--lime); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { max-width: 62ch; margin-top: 1rem; color: var(--text-muted); }

/* Od velkého displeje dvousloupcová hlavička sekce: nadpis vlevo, perex vpravo.
   V jednom sloupci zůstávala vpravo od nadpisu prázdná polovina stránky
   (naměřeno na 1440 px u sekce „Naše služby“). Perex se zarovnává na účaří
   nadpisu, takže dvojice drží společnou linku. */
@media (min-width: 1100px) {
  .section-head {
    display: grid;
    /* 🔴 LEVÝ SLOUPEC JE ŠIROKÝ JAKO NADPIS, ne jako podíl řádku. S podílem
       (1.1fr) rostl spolu s obalem: po rozšíření obalu na 1464 px zůstala mezi
       krátkým nadpisem („Naše práce v terénu") a perexem prázdná plocha přes
       300 px a vypadalo to jako chyba sazby — zadavatel to 9. 10. 2026 označil
       šipkou na snímku.
       ⚠️ `minmax(0, max-content)`, ne holé `max-content`: dlouhý nadpis se musí
          umět zalomit, jinak by perex zmáčkl na pár znaků. */
    grid-template-columns: minmax(0, max-content) minmax(0, 52ch);
    justify-content: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: end;
  }
  .section-head > .eyebrow { grid-column: 1; grid-row: 1; }
  .section-head > h1,
  .section-head > h2,
  .section-head > h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  /* První odstavec drží oba řádky a sedí dole u nadpisu; další pokračují pod ním. */
  .section-head > p { grid-column: 2; max-width: 52ch; margin-top: 0; }
  .section-head > p:first-of-type { grid-row: 1 / span 2; align-self: end; }
  .section-head > p + p { margin-top: 0.75rem; }
  /* Sekce, která chce hlavičku uprostřed (výpisy), zůstává jednosloupcová. */
  .section-head.text-center { display: block; }
}

/* 🔴 Tlačítko na konci sekce („Zobrazit vše“, „Všechny otázky“, „Zobrazit celou
   galerii“) sedělo natěsno pod mřížkou — globální reset `* { margin: 0 }` sebral
   odstavci, který ho obaluje, horní okraj, takže nad ním zbývalo 20 px. Odsazení
   patří sem, ne do každého partialu zvlášť. */
.section-foot { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* Totéž pro tlačítko pod textem v sekci „text + obrázek“ (`ksb_split`) —
   sedělo 20 px pod posledním odstavcem. */
.split-body .btn { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.on-dark { background: var(--ink); color: var(--text-invert); }
.on-dark .section-head p { color: rgba(255, 255, 255, 0.68); }
.on-lime { background: var(--lime); color: var(--ink); }

/* ── Tlačítka ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  line-height: 1;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn { min-height: var(--ctl-h); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn-primary:hover { background: var(--lime-bright); border-color: var(--lime-bright); }

.btn-dark { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
.btn-dark:hover { background: var(--ink-soft); }

.btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
.on-dark .btn-ghost:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

/* ── Hlavička ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; }
.brand img { height: 52px; width: auto; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.main-nav a {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding-block: 0.5rem;
  position: relative;
  transition: color var(--transition);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--lime-dark);
  transition: width var(--transition);
}
.main-nav a:hover::after, .main-nav a[aria-current='page']::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; flex: none; color: var(--lime-dark); }

/* Mobilní přepínač */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* 🔴 HLAVIČKA PŘETÉKALA NA KAŽDÉ STRÁNCE (320 px). Logo s názvem firmy (211 px)
   + mezera (24 px) + telefon s hamburgerem (78 px) = 313 px obsahu do 280 px
   místa, a protože `.brand` i `.header-actions` mají `flex: none`, neustoupil
   nikdo — web se dal na nejužších telefonech posunout o 13 px do strany.
   Na téhle šířce ustoupí NÁZEV: značku nese kolečko loga a telefon
   s hamburgerem musí zůstat dosažitelné. */
@media (max-width: 379px) {
  .brand-name { display: none; }
  .site-header .container { gap: 0.75rem; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .header-phone span { display: none; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter) 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%);
    /* 🔴 Samotný `transform` zásuvku jen odsune — pro TAB i pro čtečku je pořád
       „na stránce“ a fokus z ní zmizí mimo obrazovku. Proto i `visibility`
       (ta se dá animovat přes `transition-behavior`) a `pointer-events`. */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition), visibility 0s linear var(--transition);
  }
  .main-nav[data-open='true'] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--transition), visibility 0s;
  }
  .main-nav a { padding-block: 1rem; border-bottom: 1px solid var(--border); font-size: 1.25rem; }
  .main-nav a::after { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 82vh, 860px);
  background: var(--ink);
  color: var(--text-invert);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15,17,8,0.92) 0%, rgba(15,17,8,0.72) 45%, rgba(15,17,8,0.35) 100%);
}
.hero .container { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 5rem); }
.hero-inner { max-width: 60ch; }
.hero h1 { font-size: var(--fs-hero); margin-block: 1.25rem; }
.hero h1 .accent { color: var(--lime); }
.hero-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 54ch;
}
.hero-sign {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-top: 1.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ── Pruh se statistikami ────────────────────────────────────────────────── */
.stats-strip { background: var(--lime); color: var(--ink); }
.stats-strip .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
}
.stat-desc {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* ── Karty služeb ────────────────────────────────────────────────────────── */
/* 🔴 `minmax(min(100%, Npx), 1fr)`, nikdy holé `minmax(Npx, 1fr)`. Jakmile je
   viewport užší než N + okraje, pevné minimum stránku roztáhne do šířky —
   naměřeno 20 px přetečení na 320 px u karet služeb. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--lime-dark); }
.service-card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-soft); }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.service-card:hover .service-card-media img { transform: scale(1.05); }
.service-card-body { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.875rem; flex: 1; }
.service-card-num {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lime-dark);
  line-height: 1;
}
.service-card p { color: var(--text-muted); flex: 1; }
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: gap var(--transition), color var(--transition);
}
.service-card-link svg { width: 16px; height: 16px; flex: none; }
.service-card-link:hover { gap: 0.85rem; color: var(--lime-dark); }

/* ── Split blok (text + obrázek) ─────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-media img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.split-body > * + * { margin-top: 1.25rem; }
.split-body p { color: var(--text-muted); }
.on-dark .split-body p { color: rgba(255, 255, 255, 0.68); }

/* ── Galerie ─────────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.75rem;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-soft);
}
/* Dlaždice je odkaz na zvětšeninu — musí vyplnit celou buňku mřížky,
   jinak by kliknutí chytal jen proužek pod fotkou. */
.gallery-item__open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.875rem;
  font-size: var(--fs-small);
  color: #fff;
  background: linear-gradient(to top, rgba(15,17,8,0.85), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover figcaption { opacity: 1; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 900px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.on-dark .faq-item { border-color: var(--ink-line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 1.5rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color var(--transition);
}
.faq-q:hover { color: var(--lime-dark); }
.on-dark .faq-q:hover { color: var(--lime); }
.faq-icon { flex: none; width: 24px; height: 24px; transition: transform var(--transition); }
.faq-q[aria-expanded='true'] .faq-icon { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms ease; }
.faq-a > div { overflow: hidden; }
.faq-item[data-open='true'] .faq-a { grid-template-rows: 1fr; }
.faq-a p { color: var(--text-muted); padding-bottom: 1.5rem; max-width: 80ch; }
.on-dark .faq-a p { color: rgba(255, 255, 255, 0.68); }

/* ── Aktuality ───────────────────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-soft); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.news-date {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
/* 🔴 Výpis aktualit má v kartě `<h2>` (sémanticky správně — H1 je název stránky),
   ale pravidlo tu bylo psané jen pro `h3`, takže nadpisy karet braly globální
   `--fs-h2` (až 48 px) a karty se roztáhly na 724 px. Zděděno z původního webu.
   Cílí se proto na oba tagy — a stejně u karet služeb, které `h3` používají. */
.news-card h2,
.news-card h3 { font-size: 1.25rem; line-height: 1.2; }
.news-card p { color: var(--text-muted); font-size: var(--fs-small); flex: 1; }

/* ── CTA pruh ────────────────────────────────────────────────────────────── */
.cta-band { background: var(--ink); color: var(--text-invert); }
.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { max-width: 22ch; }
.cta-band h2 .accent { color: var(--lime); }

/* ── Formulář ────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.is-full { grid-column: 1 / -1; }
.form-group label {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-muted);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--lime-dark);
  box-shadow: 0 0 0 3px rgba(214, 224, 78, 0.3);
}
/* Hvězdička u povinného pole musí být vidět i v tlumeném popisku. */
.form-group label .req,
.form-group label abbr { color: var(--lime-dark); text-decoration: none; }
.on-dark .form-group label .req { color: var(--lime); }
.form-note { font-size: var(--fs-small); color: var(--text-muted); }

/* Formulář v tmavé sekci (`/kontakt`) — popisky i poznámka musí zůstat čitelné. */
.on-dark .form-group label,
.on-dark .form-note { color: var(--text-muted-invert); }
.on-dark .form-group input,
.on-dark .form-group textarea,
.on-dark .form-group select { border-color: transparent; }

/* 🔴 Tlačítko je „fit-content", nikdy roztažené přes celou kolonu. Ve flexovém
   `.form-group` (column) by ho `align-items: stretch` natáhlo na 100 % —
   naměřeno 536 px na 1440 px. Opakovaná výtka napříč projekty. */
.form-group .btn { align-self: flex-start; }
.form-group .btn + .form-note { margin-top: 0.75rem; }

/* ── Sekce ze Stavebnice JÁDRA ────────────────────────────────────────────
   Jádro umí vlastní sekce (`builder-section`) s vlastními třídami a žádné styly
   k nim neposílá — vzhled je věc webu. Na produkční úvodce leží kontaktní
   formulář (`contact_form`), který se po převodu vykreslil úplně neupravený:
   pole přes celou šířku, souhlas s GDPR jako checkbox roztažený na 1144 px
   a tlačítko zaražené vlevo dole. Tenhle blok to srovnává se zbytkem webu. */
.builder-section { padding-block: var(--section-y); }
/* 🔴 ODSAZENÍ SEKCÍ SE NESMÍ SČÍTAT — ALE MUSÍ TO PLATIT VŠUDE STEJNĚ.
   Každá sekce má 112 px nahoře i dole, takže mezi dvěma sekcemi bez pozadí
   vznikne 224 px prázdna. Při změně pozadí ta mezera odděluje plochy a patří
   tam; mezi dvěma stejnými je to jen díra (zadavatel: „~250 px mezi galerií
   a formulářem").

   ⚠️ SOUSEDSTVÍ NENÍ VIDĚT PŘES OBAL. Sekce `ksb_*` Stavebnice obaluje do
      `.bldr-section-wrap`, zatímco sekce jádra (`contact_form`) leží v `main`
      přímo. Původní pravidlo znalo jen přímé sousedy, takže na úvodce mezi
      galerií a formulářem NIKDY nezabralo — a na podstránkách naopak zabralo
      jen místy. Naměřeno 112 px na jednom přechodu a 224 px na jiném, který
      vypadá stejně. `:has()` umožní poznat pozadí sekce uvnitř obalu.

   ⚠️ `main >` DRŽÍ PRAVIDLO MIMO ČLÁNEK. Tam leží obaly v
      `.jta-article__sections` a rytmus je desetinový (32 px); bez té podmínky
      by se odstavce článku slepily na polovinu. */
main > :is(.section, .builder-section):not(.on-dark):not(.on-lime)
     + :is(.section, .builder-section):not(.on-dark):not(.on-lime),
main > .bldr-section-wrap:has(> :is(.section, .builder-section):not(.on-dark):not(.on-lime))
     + :is(.section, .builder-section):not(.on-dark):not(.on-lime),
main > :is(.section, .builder-section):not(.on-dark):not(.on-lime)
     + .bldr-section-wrap > :is(.section, .builder-section):not(.on-dark):not(.on-lime),
main > .bldr-section-wrap:has(> :is(.section, .builder-section):not(.on-dark):not(.on-lime))
     + .bldr-section-wrap > :is(.section, .builder-section):not(.on-dark):not(.on-lime) {
  padding-top: 0;
}
.builder-section .section-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* 🔴 FORMULÁŘ NESMÍ BÝT PŘES CELOU SEKCI. Na 1920 px měl 1464 px, takže
   políčko na jméno bylo přes půl obrazovky a oko mezi popiskem a polem
   nedoskočilo. Zadavatel 9. 10. 2026: „ty inputy jsou nesmyslně dlouhé,
   formulář kilometr široký". Šířku drží OBAL, ne jednotlivá pole — stejné
   pravidlo jako u `.prose`.
   ⚠️ V děleném rozložení už šířku drží sloupec mřížky, takže se strop ruší;
      jinak by se formulář uvnitř svého sloupce ještě jednou zúžil a vedle
      něj by zůstal pruh prázdna. */
.builder-contact-form { display: grid; gap: 1.25rem; max-width: 44rem; }
.builder-contact-split .builder-contact-form { max-width: none; }
.builder-contact-form .form-heading { font-size: var(--fs-h2); }
.builder-contact-form .form-description { color: var(--text-muted); }
.on-dark .builder-contact-form .form-description { color: var(--text-muted-invert); }

/* ── Hlášky formuláře ─────────────────────────────────────────────────────
   Markup vyrábí `formular.js` z jádra, vzhled je věc webu.
   🔴 Chyba patří K POLI, ne nahoru na stránku. Do 9. 10. 2026 se všechny
      slepily do jedné věty ve flash liště nad hlavičkou a návštěvník musel
      sám hledat, které políčko to je. */
.form-field-error {
  margin: 0.4rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--chyba);
}
.on-dark .form-field-error { color: var(--chyba-invert); }

/* ⚠️ Rámeček i vnitřní stín — samotná barva rámečku je na bílém pozadí
   u tenké linky skoro neznatelná a barvoslepý ji nemusí poznat vůbec,
   proto u pole přibude i text (`.form-field-error`). */
.builder-contact-form .is-invalid,
.builder-contact-form .is-invalid:focus {
  border-color: var(--chyba);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.14);
}

.form-messages {
  margin: 0 0 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.form-messages:empty { display: none; }
.form-messages--chyba {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--chyba);
  background: rgba(192, 57, 43, 0.07);
  color: var(--chyba);
}
.form-messages--ok {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--lime);
  background: rgba(190, 214, 48, 0.14);
}
/* Poděkování nastupuje na místo formuláře, takže nese jeho váhu. */
.form-messages--hotovo {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-h3);
  line-height: 1.6;
}

/* ── Dělené rozložení: vlevo formulář, vpravo text a foto ─────────────────
   Jádro posílá jen `<div class="builder-contact-split">` s formulářem a
   doplňkem; vzhled je věc webu (sekce Stavebnice nemají styly z jádra).
   ⚠️ `minmax(0, …)` u obou sloupců — bez nuly jako minimem by `min-content`
      dlouhého slova v popisu roztáhl levý sloupec a pravý by se smrskl.
   ⚠️ `align-items: start`, aby se foto neroztáhlo na výšku formuláře. */
.builder-contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  /* ⚠️ `stretch`, ne `start`. Fotka na výšku přečnívala pod spodní hranu
     formuláře o víc než 200 px a vlevo pod tlačítkem zůstala díra. Takhle
     je pravý sloupec přesně tak vysoký jako formulář a fotka se do něj
     ořízne (`object-fit: cover`). */
  align-items: stretch;
}
@media (max-width: 900px) {
  /* Pod 900 px by na formulář zbylo necelých 500 px a pole by byla užší než
     jejich popisky. Sloupce proto jdou pod sebe a doplněk končí jako druhý. */
  .builder-contact-split { grid-template-columns: minmax(0, 1fr); }
}
.builder-contact-aside {
  display: grid;
  /* Text nahoře si vezme, co potřebuje; zbytek výšky patří fotce. */
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* 🔴 KARTA, NE VYSYPANÝ TEXT. Pět řádků tlumenou šedí pod sebou, zarovnaných
   do prázdna vedle obrovského nadpisu, vypadalo jako nedodělek — zadavatel
   9. 10. 2026: „to je škaredé". Blok teď drží tvar: světlá plocha, limetková
   hrana vlevo (stejná řeč jako `.on-lime` pásy) a text v běžné barvě, protože
   kontakt není poznámka pod čarou.
   ⚠️ První řádek dělá `::first-line` — v obsahu proto musí být KRÁTKÝ
      („Raději zavoláte?"), jinak by se pseudotřída chytla jen jeho první
      vysázené řádky a věta by se rozpadla na dvě velikosti písma. */
.form-aside-text {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--lime);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--paper-soft);
  color: var(--text);
  line-height: 2;
}
.form-aside-text::first-line {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.on-dark .form-aside-text {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-invert);
}
.form-aside-media { margin: 0; min-height: 0; }
.form-aside-image {
  display: block;
  width: 100%;
  height: 100%;
  /* Krátký formulář nesmí fotku zmáčknout na proužek. */
  min-height: 18rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
@media (max-width: 900px) {
  /* V jednom sloupci není co dorovnávat — fotka dostane vlastní poměr,
     jinak by se roztáhla na celou výšku obrazovky. */
  .form-aside-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Dvousloupcová mřížka polí; `form-field-width-full` zabere celý řádek.
   ⚠️ `auto-fit` tu nestačí — na 1440 px narovnal čtyři pole vedle sebe do
   jednoho řádku a formulář vypadal jako tabulka. Sloupce jsou proto dva. */
.form-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.form-field-width-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-fields-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 🔴 Souhlas s podmínkami: `<label>` s checkboxem a textem. Bez tohohle pravidla
   je popisek blokový, checkbox se roztáhne na šířku kolony a text spadne pod něj
   (naměřeno 1144 px na produkci). Prvek je „fit-content“ a řádek zarovnaný. */
/* ⚠️ Specificita: `.form-group label` (0,1,1) přebíjí `.form-checkbox` (0,1,0),
   takže popisek souhlasu zůstával verzálkami s prostrkáním jako popisek pole.
   Selektor proto cílí na obojí. */
.form-group label.form-checkbox,
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  color: var(--text);
}
.on-dark .form-checkbox { color: var(--text-muted-invert); }
.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.15em;          /* na účaří prvního řádku textu */
  accent-color: var(--lime-dark);
  cursor: pointer;
}
.form-checkbox a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  /* Dotykový cíl: samotné zaškrtávátko je malé, klikací je celý popisek. */
  .form-group label.form-checkbox,
  .form-checkbox { min-height: 44px; align-items: center; }
  .form-checkbox input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
}
.form-checkbox a:hover { color: var(--lime-dark); }

.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-actions-align-left { justify-content: flex-start; }
.form-actions-align-center { justify-content: center; }
.form-actions-align-right { justify-content: flex-end; }

/* Sekce obrázku / tlačítka / mezery z jádra — ať drží rytmus stránky. */
.section-image img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.section-button { display: flex; }
.section-button .section-inner { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid; }
.alert-success { background: #f0f7e6; border-color: var(--lime-dark); color: #38470f; }
.alert-error { background: #fdecec; border-color: #e5484d; color: #7d1a1d; }

/* ── Kontaktní dlaždice ──────────────────────────────────────────────────── */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.contact-card {
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.contact-card h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.contact-card a:hover { color: var(--lime-dark); }
.contact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  margin-bottom: 1rem;
}
.contact-card-icon svg { width: 20px; height: 20px; }

/* ── Textový obsah stránek (prose) ───────────────────────────────────────── */
/* 🔴 JEDNA LEVÁ HRANA. Text má kvůli čitelnosti omezenou šířku řádku
   (`--clanek-sloupec`), ale NESMÍ se centrovat. Do 9. 10. 2026 se centroval
   a byl tím jediný odsazený prvek na webu: eyebrow, H1, nadpis CTA pruhu
   i mřížky karet začínaly na x=221, odstavec pod nimi až na x=441.
   Vypadalo to jako chyba sazby — zadavatel: „stále není stejná šířka
   všude… nebo spíš nikde."

   ⚠️ Pořadí řešení je důležité: NEposouvá se zbytek webu doprostřed (mřížky
      karet by se zúžily a hero pruhy rozpadly), ale zarovná se text k téže
      svislici jako všechno ostatní. Vpravo zbyde víc místa — tak se sází
      dokument, ne chyba.
   ⚠️ `max-width` zůstává: řádek delší než ~90 znaků se špatně čte. */
.prose,
.jta-article__body { max-width: min(100%, var(--clanek-sloupec)); }
.prose > * + *,
.jta-article__body > * + * { margin-top: 1.25rem; }
/* 🔴 PRVNÍ PRVEK NESMÍ MÍT HORNÍ OKRAJ. `.prose h2` má 2,5 rem a platilo to
   i pro nadpis na začátku bloku — `.prose > * + *` ho nepřebije, protože
   `.prose h2` má vyšší specificitu. Ten okraj se navíc PROPADNE skrz
   `.prose` i `.container` ven (nemají padding ani rámeček) a přičte se
   k odsazení sekce: nad nadpisem „Jak probíhá zakázka?" tak bylo
   112 + 40 = 152 px prázdna, zatímco sousední sekce měly 112.
   Zadavatel to vyznačil na snímku: „obrovská díra, kterou dělá nadpis."
   ⚠️ `:first-child` je pseudotřída, takže (0,2,0) přebije `.prose h2` (0,1,1). */
.prose > :first-child,
.jta-article__body > :first-child { margin-top: 0; }
.prose h2,
.jta-article__body h2 { margin-top: 2.5rem; }
.prose h3,
.jta-article__body h3 { margin-top: 2rem; }
.prose ul, .prose ol,
.jta-article__body ul, .jta-article__body ol { padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prose li::marker,
.jta-article__body li::marker { color: var(--lime-dark); }
.prose a,
.jta-article__body a { color: var(--lime-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose img,
.jta-article__body img { border-radius: var(--radius-lg); }
.prose blockquote,
.jta-article__body blockquote {
  border-left: 3px solid var(--lime);
  padding-left: 1.5rem;
  font-size: 1.125rem;
  color: var(--text-muted);
}

/* ── AKTUALITY Z MODULU „Aktuality a blog" ────────────────────────────────
   🔴 PROČ TENHLE BLOK EXISTUJE. Výpis i detail článku si web do 9. 10. 2026
      kreslil VLASTNÍMI šablonami (`views/news/*` nárokovanými v `moduly-webu.php`).
      Tím ale přestal dostávat, co do nich modul posílá — a tělo článku poskládané
      ve Stavebnici se na webu NIKDY nevykreslilo. Šablony proto patří modulu
      a zdejší je jen VZHLED.

   ⚠️ Markup modulu jede na třídách `jta-*` (design TERRA). Nepřejmenovávat —
      přijdou s každou aktualizací znova. Tenhle blok je převléká do zdejších
      tokenů; typografii těla článku dědí `.jta-article__body` přímo z `.prose`
      výš (jeden zdroj pravdy, ne druhá kopie pravidel).
   ───────────────────────────────────────────────────────────────────────── */

/* Hlavička stránky — stejná plocha jako `.page-hero`. */
.jta-page-hero { background: var(--ink); color: var(--text-invert); }
.jta-page-hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 6vw, 5rem);
}
/* ── Drobečková navigace (jen aktuality) ──────────────────────────────────
   Leží v tmavé hlavičce, takže barvy jdou z invertovaných tokenů. Aktuální
   stránka není odkaz — proto `span`, ne zašedlé `a`.
   ⚠️ Na úzkém displeji se smí zalomit; `white-space: nowrap` by na 320 px
      vystrčil název článku ven ze stránky. */
.jta-crumbs { margin-bottom: 0.5rem; }
.jta-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.jta-crumbs__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.jta-crumbs__link { color: var(--text-muted-invert); transition: color var(--transition); }
.jta-crumbs__link:hover { color: var(--lime); }
.jta-crumbs__sep { color: var(--lime); }
/* Název aktuální stránky bývá dlouhý — zkrátí se třemi tečkami, ať drobečky
   nezaberou tři řádky. */
.jta-crumbs__current {
  color: var(--text-invert);
  max-width: min(100%, 46ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jta-page-hero__title { margin-top: 0.75rem; }
/* ⚠️ Hlavička článku se ZÁMĚRNĚ nikam neposouvá. Dřív tu bylo pravidlo, které
      ji stahovalo do středu ke (tehdy centrovanému) textu; od chvíle, kdy text
      stojí na levé hraně obalu, by ji to naopak rozhodilo. */
.jta-page-hero__perex { color: var(--text-muted-invert); max-width: 62ch; margin-top: 1rem; }
.jta-page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-invert);
  line-height: 1;
}
.jta-page-hero__meta-sep { color: var(--lime); }

/* Odznak „Napsali o nás" — tvarem i barvou `.eyebrow`. */
.jta-news-source__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-dark);
  line-height: 1;
}
.jta-page-hero .jta-news-source__badge { color: var(--lime); }

/* ── Výpis aktualit ───────────────────────────────────────────────────────
   Karta drží tytéž rozměry jako `.news-card` v sekci Aktuality na úvodce —
   obojí musí vypadat stejně, jinak se web „rozjede" mezi stránkami. */
.jta-news { padding-block: var(--section-y); }
.jta-news__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.jta-news__heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.jta-news__empty { color: var(--text-muted); }
.jta-news__grid {
  display: grid;
  /* `min(100%, …)` místo holých pixelů — jinak mřížka na 320 px přeteče. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.jta-news__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  padding-bottom: 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.jta-news__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jta-news__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-soft);
  margin-bottom: 0.75rem;
}
.jta-news__media--empty { background: var(--paper-soft); }
.jta-news__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Všechno pod obálkou dostane vnitřní okraj karty. */
.jta-news__item > :not(.jta-news__media) { padding-inline: 1.5rem; }
/* Nadpis karty je `<h2>` (správně — H1 je název stránky), takže by vzal
   globální `--fs-h2` (až 48 px) a kartu roztáhl. Stejná past jako u `.news-card`. */
.jta-news__title { font-size: 1.25rem; line-height: 1.2; }
.jta-news__meta {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.jta-news__excerpt { color: var(--text-muted); font-size: var(--fs-small); flex: 1; }
.jta-news__link,
.jta-project__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  align-self: flex-start;
  transition: gap var(--transition), color var(--transition);
}
.jta-news__link:hover,
.jta-project__back-link:hover { gap: 0.85rem; color: var(--lime-dark); }
.jta-arrow { display: block; width: 15px; height: 15px; flex: none; }

/* ── Detail článku ─────────────────────────────────────────────────────── */
.jta-project__body { padding-block: var(--section-y); }
.jta-project__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Obálka, perex, zdroj, sdílení a odkazy drží jeden sloupec.

   ⚠️ Šířka je v `rem`, NE v `ch`. Jednotka `ch` se počítá z písma TOHO prvku,
      takže perex (1.125 rem) vyšel o 49 px širší než tělo článku a sloupec
      se viditelně rozjel. V `rem` drží všechny prvky stejnou osu.
   ⚠️ Sekce ze Stavebnice tu nejsou — od 9. 10. 2026 stojí MIMO
      `.jta-project__inner`, aby měly stejné šířky jako na stránce. */
.jta-project__inner > * {
  max-width: min(100%, var(--clanek-sloupec));
}

.jta-article__cover { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.jta-article__cover img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.jta-article__lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  border-left: 3px solid var(--lime);
  padding-left: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
/* ── Tělo článku poskládané ve Stavebnici ────────────────────────────────
   🔴 KAPITOLY ČLÁNKU NEJSOU SEKCE STRÁNKY. `ksb_prose` se renderuje jako
      `.section`, tedy s odsazením 112 px nahoře i dole — mezi dvěma kapitolami
      jednoho článku z toho vyšlo 224 px prázdna (naměřeno na 1440 px) a text
      se rozpadl na nesouvisející ostrůvky. Uvnitř článku se proto odsazení
      srazí na odstup odstavce.
   ⚠️ Mezi sekcí a `.jta-article__sections` je ještě obal `.bldr-section-wrap`,
      který kolem sekcí dělá jádro — selektory proto nesmí být na přímé
      potomky (`>`), jinak nechytnou nic. */
.jta-article__sections { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.jta-article__sections .section { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.jta-article__sections > :first-child .section { padding-top: 0; }
.jta-article__sections > :last-child .section { padding-bottom: 0; }

/* Text kapitoly musí stát v téže ose jako perex a tělo bez Stavebnice.
   `.prose` má šířku v `ch` (≈ 837 px), zbytek článku v `rem` (832 px) —
   rozdíl 5 px je na oko vidět jako „ujetý“ sloupec. */
/* Sekce JÁDRA (`heading`, `image`, …), které si redaktor může do článku přidat
   vedle zdejších `ksb_*`, mají stejný svislý rytmus jako `ksb_prose`. */
.jta-article__sections .builder-section { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

/* ⚠️ Sekce v článku si drží BĚŽNÝ obal (`.container`, 1560 px) — stejně jako
      na stránce. Text uvnitř nich stojí na téže levé hraně jako nadpis,
      perex i obálka, protože `.prose` se od 9. 10. 2026 necentruje.
      Zužovat tu `.container` NELZE: má `margin-inline: auto`, takže by se
      obsah sekce posunul doprostřed a odskok by se vrátil, jen o patro níž. */

/* Barevný pruh (CTA, tmavá varianta) si odstup ponechá — tam mezera odděluje
   plochy, ne odstavce. Pruh sahá přes celou šířku okna, stejně jako na stránce. */
.jta-article__sections .cta-band,
.jta-article__sections .section.on-dark,
.jta-article__sections .section.on-lime { margin-top: clamp(2rem, 4vw, 3rem); }
.jta-article__sections .cta-band + * { margin-top: clamp(2rem, 4vw, 3rem); }

/* Zdroj u převzaté zprávy. */
.jta-news-source {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--lime);
  background: var(--paper-soft);
  border-radius: var(--radius);
}
.jta-news-source__label {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.jta-news-source__link { color: var(--lime-dark); text-decoration: underline; text-underline-offset: 3px; }
.jta-news-source__note { color: var(--text-muted); font-size: var(--fs-small); margin-top: 0.4rem; }

/* Sdílení — ikony v kroužku, bez skriptů třetích stran. */
.jta-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
}
.jta-share__label {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.jta-share__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.jta-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ctl-h);
  min-width: var(--ctl-h);
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.jta-share__btn svg { display: block; width: 18px; height: 18px; flex: none; }
.jta-share__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
.jta-share__btn--copy {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Předchozí / další článek. */
.jta-article__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.jta-article__nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  transition: border-color var(--transition), transform var(--transition);
}
.jta-article__nav-item:hover { border-color: var(--lime-dark); transform: translateY(-2px); }
.jta-article__nav-item--next { text-align: right; align-items: flex-end; }
.jta-article__nav-label {
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.jta-article__nav-title { font-weight: 600; line-height: 1.3; }
.jta-article__back { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.jta-arrow--back { order: -1; }

/* Obálka videem (náhled z YouTube; odkaz vede na YouTube, web nemá přehrávač). */
.jta-video-cover { position: relative; display: block; }
.jta-video-cover__img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.jta-video-cover__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-invert);
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--radius-lg);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition);
}
.jta-video-cover__play:hover,
.jta-video-cover__play:focus-visible { background: rgba(0, 0, 0, 0.5); }
.jta-video-cover__play svg { display: block; width: 26px; height: 26px; flex: none; }

/* Na mobilu se dvousloupcová navigace článků srovná pod sebe a „další"
   přestane být zarovnané doprava — jinak by text utíkal mimo osu čtení. */
@media (max-width: 599px) {
  .jta-article__nav-item--next { text-align: left; align-items: flex-start; }
}

/* ── Hlavička podstránky ─────────────────────────────────────────────────── */
.page-hero { background: var(--ink); color: var(--text-invert); }
.page-hero .container { padding-block: clamp(3rem, 6vw, 5rem); }
.page-hero h1 { margin-top: 0.75rem; }
.page-hero p { color: rgba(255, 255, 255, 0.68); max-width: 62ch; margin-top: 1rem; }

/* ── Patička ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.68); }
.site-footer .container { padding-block: clamp(3rem, 5vw, 4.5rem); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-col h4 {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--lime);
  margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a { transition: color var(--transition); }
.footer-col a:hover { color: var(--lime); }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 1rem; max-width: 40ch; }

.social-links { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-links svg { width: 18px; height: 18px; display: block; }
.social-links a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

.footer-bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-small);
}

/* ── Pomocné třídy ───────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.lead-center { max-width: 60ch; margin: 1rem auto 2rem; }
.mt-auto { margin-top: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--lime); color: var(--ink);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* ── Animace odhalení při scrollu ────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease, transform 600ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Cookie lišta ─────────────────────────────────────────────────────────
   Markup dodává JÁDRO (`views/partials/cookie_lista.php`, třídy `jta-cookies__*`)
   a ovládá `cookies.js`; vzhled je věc webu, jádro k ní žádné styly neposílá.
   🔴 Bez tohohle bloku je lišta holé HTML přes celou šířku stránky — přesně tak
      vypadala po převodu na sdílené jádro 22. 9. 2026.
   Obě hlavní tlačítka mají shodnou velikost i váhu: odmítnutí nesmí být
   nenápadnější než souhlas, jinak souhlas není platný.                      */
.jta-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--text-invert);
  border-top: 3px solid var(--lime);
  box-shadow: var(--shadow-lg);
  animation: cookies-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Guard: bez něj by skrytá lišta dál zabírala celou spodní část obrazovky
   a brala kliky (autorské `position:fixed` přebíjí UA styl pro [hidden]). */
.jta-cookies[hidden] { display: none; pointer-events: none; }

@keyframes cookies-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .jta-cookies { animation: none; } }

.jta-cookies__panel {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.jta-cookies__hlavni { min-width: 0; }
.jta-cookies__nadpis { font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.jta-cookies__text { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.78); }
.jta-cookies__odkaz-radek { margin-top: 0.35rem; font-size: var(--fs-small); }
.jta-cookies__odkaz { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.jta-cookies__odkaz:hover { color: var(--lime-bright); }

/* Podrobný výběr kategorií — rozbalí se přes celou šířku panelu. */
.jta-cookies__podrobnosti {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 2rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
}
.jta-cookies__podrobnosti[hidden] { display: none; }
.jta-cookies__prepinac {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.jta-cookies__prepinac input { width: 18px; height: 18px; flex: none; accent-color: var(--lime); cursor: pointer; }
.jta-cookies__prepinac input:disabled { cursor: default; }
.jta-cookies__vzdy {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--lime);
}
.jta-cookies__popis { margin-top: 0.4rem; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.62); }

.jta-cookies__akce { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Tlačítka lišty sdílejí tvar s `.btn` webu (jádro tam `.btn` nedává). */
.jta-cookies__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 10.5rem;
  padding: 0.9rem 1.5rem;
  line-height: 1;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-invert);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.jta-cookies__btn:hover { background: var(--ink-soft); border-color: var(--text-invert); transform: translateY(-2px); }
.jta-cookies__btn:active { transform: translateY(0); }
.jta-cookies__btn--hlavni {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.jta-cookies__btn--hlavni:hover { background: var(--lime-bright); border-color: var(--lime-bright); color: var(--ink); }
/* „Nastavit podrobně“ je vedlejší volba — text, ne další rámeček. */
.jta-cookies__btn--tichy {
  min-width: 0;
  border-color: transparent;
  padding-inline: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: rgba(255, 255, 255, 0.78);
}
.jta-cookies__btn--tichy:hover { background: transparent; border-color: transparent; color: var(--text-invert); }
/* „Uložit výběr“ dává smysl jen s rozbalenými podrobnostmi. Jádro tlačítko
   nikdy neskrývá (`cookies.js` přepíná `[hidden]` jen panelu podrobností),
   takže se řídí podle STAVU TOHO PANELU — ten v DOM stojí před tlačítky. */
.jta-cookies__podrobnosti[hidden] ~ .jta-cookies__akce .jta-cookies__btn--vyber { display: none; }

@media (max-width: 860px) {
  .jta-cookies__panel { grid-template-columns: minmax(0, 1fr); }
  .jta-cookies__akce { width: 100%; }
  /* Souhlas a odmítnutí vedle sebe (stejná váha), podrobnosti pod nimi jako text —
     na mobilu by čtyři tlačítka pod sebou zabrala půl obrazovky. */
  .jta-cookies__btn { flex: 1 1 8rem; min-width: 0; }
  .jta-cookies__btn--tichy,
  .jta-cookies__btn--vyber { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .jta-cookies__panel { padding-block: 1rem; max-height: 85vh; overflow-y: auto; }
  .jta-cookies__btn { min-height: 48px; }          /* dotykový cíl dle HIG */
}

/* Odkaz na znovuotevření lišty v patičce — vypadá jako ostatní odkazy v patičce. */
.footer-cookie-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer-cookie-link:hover { color: var(--lime); }

/* ── Lightbox galerie ─────────────────────────────────────────────────────
   Otevřená fotka přes celou obrazovku. `[hidden]` vypíná zobrazení, proto tu
   NESMÍ být `display` bez ohledu na něj — `.lightbox { display: flex }` by
   atribut přebilo a dialog by svítil pořád. */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  /* 🔴 NAD COOKIE LIŠTOU (ta má 300). Při 200 lišta překrývala spodek fotky,
     popisek, počítadlo a na telefonu i obě šipky (ty se pod 640 px stěhují
     dolů). Kliknutí do levého dolního kouta pak spadlo na lištu a dialog se
     nezavřel. Otevřená fotka je modální okno — dokud je otevřená, patří jí
     celá obrazovka; lišta se vrátí, jakmile se zavře. */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 14, 8, 0.94);
}
body.is-lightbox { overflow: hidden; }

/* Plocha Swiperu vyplní okno; popisek a počítadlo leží pod ní. */
.lightbox__swiper {
  width: 100%;
  height: 100%;
  min-height: 0;
}
/* 🔴 DVĚ TŘÍDY, NE JEDNA. Swiper se načítá až při prvním otevření galerie,
   takže jeho `swiper-bundle.min.css` přistane v `<head>` AŽ ZA `theme.css` —
   a při shodné specificitě vyhrává pozdější pravidlo. `.swiper-slide` ze
   Swiperu má `display: block`, takže moje `.lightbox__slide { display: flex }`
   prohrálo a fotka se lepila k levému okraji; naměřeno 48 px od kraje místo
   518 px na střed (zadavatel 10. 10. 2026: „co to zas je na levé straně?").
   ⚠️ Platí pro KAŽDÉ pravidlo, které přepisuje třídu Swiperu — `!important`
      ne, stačí sáhnout o jednu třídu výš. */
.lightbox .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tažení se nesmí splést s tažením obrázku — prohlížeč jinak začne
   „drag & drop" fotky a Swiper přijde o gesto. */
.lightbox__slide img { -webkit-user-drag: none; user-select: none; }
.lightbox__img {
  display: block;
  max-width: 100%;
  /* Výška se musí vejít i s popiskem a počítadlem, jinak fotka přeteče ven. */
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--ink);
}
.lightbox__caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(2.5rem, 5vw, 3.5rem);
  transform: translateX(-50%);
  margin: 0;
  color: var(--text-invert);
  font-size: var(--fs-small);
  text-align: center;
  max-width: min(90%, 60ch);
}
.lightbox__caption[hidden] { display: none; }

.lightbox__counter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--text-muted-invert);
}
.lightbox__counter[hidden] { display: none; }

/* 🔴 OVLÁDÁNÍ MUSÍ MÍT `z-index`. Swiper dává `.swiper-wrapper` `z-index: 1`,
   takže plocha se snímky přebila šipky i křížek: klik na šipku spadl na snímek,
   obsloužil ho „klik mimo fotku" a dialog se ZAVŘEL místo přetočení.
   Odhaleno až skutečným klikem přes CDP (`scratchpad/tah.js`) — fokusovat
   a číst se tlačítko dalo pořád, jen se nedalo trefit. */
.lightbox__close,
.lightbox__nav {
  z-index: 3;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Dotykový cíl — pod 44 px se na telefonu trefuje špatně. */
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-invert);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.lightbox__close { top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.25rem); }

/* Na úzkém displeji by šipky ležely na fotce — jdou dolů vedle počítadla. */
@media (max-width: 599px) {
  .lightbox__nav { top: auto; bottom: clamp(0.75rem, 2vw, 1.25rem); transform: none; }
  .lightbox__nav--prev { left: clamp(0.75rem, 4vw, 2rem); }
  .lightbox__nav--next { right: clamp(0.75rem, 4vw, 2rem); }
  .lightbox__img { max-height: calc(100vh - 12rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__close, .lightbox__nav { transition: none; }
}