/* ============================================================
   Společně pro Vrané nad Vltavou a Skochovice
   Tokeny a komponenty. Vzhled odpovídá prototypu, jen hodnoty
   jsou srovnané do škál, aby se daly měnit na jednom místě.
   ============================================================ */

:root{
  /* ---- barvy ---- */
  --ink:#0C1740;          /* text */
  --blue:#1B3AC4;         /* primární */
  --blue-2:#2A4FE0;
  --azure:#1327E0;        /* vlny, akcent */
  --navy:#0C1A55;         /* hero, tmavé bloky */
  --navy-deep:#081040;    /* patička */
  --red:#E6141E;          /* akcent, podtržení */
  --red-tmavy:#B3111A;   /* na světlém pozadí, kde --red neprojde na AA */
  --red-soft:#F7DADC;
  --paper:#F5F7FC;        /* pozadí */
  --stone:#E9F0FB;        /* tónovaná sekce */
  --card:#FFFFFF;
  --line:#DFE4F1;
  --muted:#454F74;

  /* Text na tmavém pozadí. V prototypu bylo osm odstínů psaných napevno,
     rozdíly mezi nimi byly pod prahem viditelnosti. Tady jsou tři. */
  --on-dark:#E9EEFF;
  --on-dark-soft:#C4D0F5;
  --on-dark-dim:#9DB0E6;

  /* ---- odstupy: násobky 8, plus 4 na jemné doladění ---- */
  --s-1:4px;
  --s-2h:12px;   /* jediná mezihodnota, pro těsnější gapy */
  --s-2:8px;
  --s-3:16px;
  --s-4:24px;
  --s-5:32px;
  --s-6:40px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;

  /* ---- písmo: šest kroků místo jedenácti ---- */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-base:17px;
  --fs-lg:19px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:34px;
  /* plynulé velikosti nadpisů */
  --fs-h1:clamp(38px,6.2vw,72px);
  --fs-h2:clamp(28px,4vw,44px);

  --ff:"Nunito Sans",system-ui,sans-serif;

  /* ---- zaoblení: tři kroky místo šesti ---- */
  --r-xs:8px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-pill:999px;

  --shadow:0 1px 2px rgba(12,26,85,.05), 0 12px 30px -18px rgba(12,26,85,.28);
  --shadow-lg:0 2px 4px rgba(12,26,85,.06), 0 30px 60px -30px rgba(12,26,85,.38);

  --maxw:1120px;
  /* Okraj obsahu k hraně obrazovky. Drží ho víc věcí než .wrap (rozbalené
     menu leží přes celou šířku hlavičky), proto proměnná a ne číslo. */
  --okraj:var(--s-4);
  --prechod:.2s ease;
  --prechod-rychly:.15s ease;
}

/* ---------- základ ---------- */
*{box-sizing:border-box}
/* Chrome na Androidu spouští Auto Dark Theme a stránku si přebarví sám.
   Poloprůhledná hlavička z toho vyjde jako nečitelná šeď místo bílé.
   Klíčové slovo "only" je opt-out: holé "light" znamená jen "umím světlý
   režim", což je přesně to, na co Auto Dark Theme cílí. */
/* Žádné scroll-behavior:smooth. Stránka je přes 10 000 px vysoká, takže
   plynulé rolování na kotvu znamenalo vteřinu a čtvrt letu přes celý obsah –
   a na příchodu z medailonku nebo z plánu to vypadalo jako překreslování.
   Skok je okamžitý a je vidět rovnou to, kam člověk mířil. */
html{color-scheme:light;color-scheme:only light}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--ff);line-height:1.05;margin:0;letter-spacing:-.01em}
a{color:inherit}
/* Bílý prstenec navíc: samotná červená má na modrém pozadí kontrast 1,8:1. */
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 5px rgba(255,255,255,.85)}
/* Sekce, na kterou skript po kliku v menu přesune ohnisko: ring kolem celého
   bloku nic neříká a na mobilu vypadal jako chyba. Ohnisko tam zůstává. */
[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--okraj)}
/* Odkaz na přeskočení navigace: schovaný, dokud na něj někdo nepřijde tabem. */
.preskocit{
  position:absolute;left:var(--s-2);top:-100px;z-index:50;
  background:var(--blue);color:#fff;padding:var(--s-2h) var(--s-3);
  border-radius:var(--r-sm);text-decoration:none;font-weight:700;
}
.preskocit:focus{top:var(--s-2)}

/* Hlavička je sticky a vysoká 74 px, bez tohohle by pod ní kotvy mizely. */
section,footer,main,.tema,.oblast,.cand{scroll-margin-top:140px}
section{padding-top:var(--s-9);padding-bottom:var(--s-9)}
.sekce-bez-horni-mezery{padding-top:0}
.sekce-tonovana{background:var(--stone)}

/* ---------- opakované kousky ---------- */

/* Karta. V prototypu byl tenhle recept napsaný čtyřikrát zvlášť
   (.hl, .area, .cand, .prog-card). Teď je jednou. */
.karta{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow);
  transition:transform var(--prechod), box-shadow var(--prechod);
}
.karta:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}


.eyebrow{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:var(--s-2);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);border-radius:2px}
.eyebrow-svetly{color:var(--on-dark-dim)}

.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--fs-md);
  padding:var(--s-2h) var(--s-4);border-radius:var(--r-pill);text-decoration:none;cursor:pointer;border:0;
  transition:transform var(--prechod), box-shadow var(--prechod), background var(--prechod);
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(230,20,30,.55)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.65)}

.sec-head{max-width:60ch}
.sec-head h2{font-size:var(--fs-h2);font-weight:700;margin:var(--s-3) 0 0;letter-spacing:-.02em}
.sec-head p{color:var(--muted);font-size:var(--fs-lg);margin:var(--s-3) 0 0}

/* Mřížka karet. Počet sloupců si každá sekce nastaví přes --sloupce. */
.mrizka{display:grid;grid-template-columns:repeat(var(--sloupce,3),1fr);gap:var(--s-3);margin-top:var(--s-7)}
#oblasti .mrizka{--sloupce:3}
#kandidati .mrizka{--sloupce:5}

/* ---------- hlavička ---------- */
/* Deliberately opaque. A translucent bar (color-mix + backdrop-filter) let a
   browser's forced night mode show the darkened page through it, which is how
   the header ended up an unreadable grey. Opaque survives any such filter,
   whether or not the browser honours color-scheme. */
header{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
header.scrolled{box-shadow:0 6px 22px -14px rgba(12,26,85,.4)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:74px;gap:var(--s-3)}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand-logo{width:212px;height:auto;display:block}
.menu{display:flex;align-items:center;gap:var(--s-1)}
.menu a{
  text-decoration:none;font-weight:700;font-size:var(--fs-md);color:var(--ink);
  padding:var(--s-2) var(--s-2h);border-radius:var(--r-sm);transition:background var(--prechod-rychly), color var(--prechod-rychly);
}
.menu a:hover{background:var(--stone);color:var(--blue)}
.burger{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  width:44px;height:44px;cursor:pointer;padding:0;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:var(--s-1) auto;border-radius:2px;transition:.25s}

/* ---------- hero ---------- */
.hero{padding-top:0;padding-bottom:0;position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark)}
.hero::before{
  content:"";position:absolute;inset:0;background:
    radial-gradient(120% 80% at 84% -12%, rgba(230,20,30,.16), transparent 52%),
    radial-gradient(90% 75% at 6% 6%, rgba(42,79,224,.55), transparent 60%);
}
/* The wave is the join between the hero and the section under it, so it
   has to be that section's colour. Hiding the highlights changed which
   section that is and left a pale sliver here; a test now pins the two
   together so reordering or hiding a section fails loudly instead. */
.hero .waves-spoj{fill:var(--stone)}
.hero .waves{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;display:block;z-index:1}
.hero-in{
  position:relative;z-index:2;padding-top:var(--s-8);padding-bottom:150px;
  display:grid;grid-template-columns:1fr auto;gap:var(--s-6);align-items:center;
}
.hero h1{font-size:var(--fs-h1);font-weight:800;color:#fff;margin:var(--s-4) 0 0;max-width:15ch}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{
  content:"";position:absolute;left:0;right:0;bottom:.07em;height:.14em;
  background:var(--red);border-radius:4px;z-index:-1;opacity:.95;
}
.hero p.lead{
  font-size:clamp(var(--fs-base),2.2vw,20px);color:var(--on-dark-soft);
  max-width:54ch;margin:var(--s-4) 0 0;line-height:1.55;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2h);margin-top:var(--s-5)}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6);margin-top:var(--s-7);
  padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.14);
}
.fact b{font-family:var(--ff);font-size:var(--fs-3xl);font-weight:700;color:#fff;display:block;line-height:1}
.fact span{font-size:var(--fs-sm);color:var(--on-dark-dim);font-weight:500}
.hero-photo{width:min(400px,42vw);justify-self:end}
.hero-photo img{
  width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:3px solid rgba(255,255,255,.9);box-shadow:0 24px 50px -22px rgba(0,0,0,.6);
}

/* ---------- highlighty ---------- */
/* Karta rozcestníku je celá odkaz na svou oblast a nahoře má fotku Vraného
   v pruhu, text pod ní na bílé. Fotka tak nemusí ustupovat textu a text
   nemusí ustupovat fotce. Vybráno ze tří variant 10. 9. 2026, viz
   podklady/texty/navrhy.md. */
.hl{
  padding:0 var(--s-4) var(--s-4);text-decoration:none;color:inherit;
  overflow:hidden;display:flex;flex-direction:column;
}
.hl:hover h3{color:var(--blue)}
.hl .pozadi{
  width:auto;height:170px;object-fit:cover;
  margin:0 calc(-1 * var(--s-4)) var(--s-4);
}
.hl h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-2)}
.hl p{font-size:var(--fs-md);color:var(--muted);margin:0}

/* ---------- oblasti a garanti ---------- */

/* ---------- vrstvy obsahu v oblastech ---------- */
.rozbal{color:var(--red);font-weight:700;font-size:var(--fs-md);cursor:pointer}
.rozbal span{display:inline-block;transition:transform var(--prechod)}
/* Areas and their topics: two levels, not four. Each area is a heading with
   its topics right underneath, so there is no selected state to explain and
   no panel to open. A topic card links straight to its full plan. */
.oblasti{display:grid;gap:var(--s-9);margin-top:var(--s-7)}
.oblast > h3{font-size:var(--fs-2xl);letter-spacing:-.01em}
.oblast > h3::after{content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--red));margin-top:var(--s-2)}
.oblast .heslo-oblasti{color:var(--ink);font-size:var(--fs-lg);font-weight:600;margin:var(--s-3) 0 var(--s-2)}
.oblast .garant{display:flex;gap:var(--s-2) var(--s-3);flex-wrap:wrap;align-items:center;margin:0}
.oblast .garant .popisek{color:var(--muted);font-size:var(--fs-sm)}
/* Garant s obličejem: tatáž fotka jako na kandidátce, jen v malém.
   Kdo má medailonek, je odkazem: pilulka s rámečkem, aby bylo vidět, že se
   na ni dá kliknout. Kdo medailonek nemá, zůstane holým jménem. */
.oblast .garant b,
.oblast .garant .osoba{
  font-size:var(--fs-md);font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;gap:var(--s-2);
}
.oblast .garant img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.oblast .garant .osoba{
  text-decoration:none;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:3px var(--s-2h) 3px 3px;background:var(--card);
  transition:border-color var(--prechod-rychly), color var(--prechod-rychly);
}
.oblast .garant .osoba:hover{border-color:var(--blue);color:var(--blue)}
/* Neklikací jméno má stejné odsazení, aby řádek nepodskakoval. */
.oblast .garant > b{padding:3px var(--s-2h) 3px 3px;border:1.5px solid transparent}
.pripravujeme{color:var(--muted);font-size:var(--fs-md);margin-top:var(--s-3)}
.uvod{margin:var(--s-4) 0 0;padding:var(--s-3);background:var(--stone);border-left:4px solid var(--blue);border-radius:var(--r-xs);color:var(--ink);font-size:var(--fs-md)}
.mrizka-temat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--s-3);margin-top:var(--s-3)}

/* The heading is the link, so a screen reader announces a short name and the
   description and the number stay part of the card's text. The link stretches
   over the whole card, so the hit area still matches what it looks like. */
.tema{position:relative;display:flex;flex-direction:column;padding:var(--s-4)}
.tema h4{font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.tema h4 a{text-decoration:none;color:inherit}
.tema h4 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tema:hover h4 a{color:var(--blue)}
/* The ring belongs around the card, not around the two words of the heading. */
.tema:has(a:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.tema h4 a:focus-visible{outline:none}
.tema .situace{color:var(--muted);font-size:var(--fs-md);margin:0 0 var(--s-3)}
.tema .udelame{color:var(--ink);font-size:var(--fs-md);margin:0 0 var(--s-3)}
.tema .milnik{margin:0 0 var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);
  color:var(--ink);font-size:var(--fs-md)}
/* The number is the hook you scan for; it used to hide one level down. */
.tema .cislo{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:baseline;
  background:var(--stone);border-radius:var(--r-sm);padding:var(--s-3);margin:0 0 var(--s-3)}
.tema .cislo b{font-size:var(--fs-2xl);color:var(--ink)}
.tema .cislo span{font-size:var(--fs-md);color:var(--muted);flex:1 1 14rem}
.tema .rozbal{margin-top:auto}

/* Level 3 lives on its own page: /nahled/program/<slug>/ */
.plan-page{padding-block:var(--s-7) var(--s-8)}
.plan-page h1{font-size:var(--fs-h2);margin:0 0 var(--s-3)}
.drobek{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--s-3)}
.drobek a{color:var(--blue)}
.akce{margin-top:var(--s-7)}
.btn-zpet{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-zpet:hover{background:var(--stone)}
.vrstva3 .heslo{margin:0 0 var(--s-2);font-style:italic;font-size:var(--fs-lg);color:var(--ink)}
.vrstva3 .lead{margin-bottom:var(--s-4)}
.vrstva3 h2{font-size:var(--fs-base);margin:0 0 var(--s-2);color:var(--ink)}
.vrstva3 ul{margin:0;padding-left:1.1em}
.vrstva3 li{font-size:var(--fs-md);margin-bottom:var(--s-1)}
.blok{background:var(--stone);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3)}
.blok-cerveny{background:var(--red-soft)}
.blok-cerveny h2{color:var(--red-tmavy)}
.dva-sloupce{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s-3)}
ul.dva-sloupce{gap:var(--s-1) var(--s-4)}
.stitky{margin:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.stitek{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:2px var(--s-2h);font-size:var(--fs-sm);background:var(--card)}
.stitek-zacatek{border-color:var(--red);color:var(--red-tmavy)}
.osa-nadpis{text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);color:var(--muted)}
.osa{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--s-3)}
.osa li{border-top:2px solid var(--line);padding-top:var(--s-2);position:relative;font-size:var(--fs-sm)}
.osa li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--red)}
.osa b{display:block;color:var(--ink)}
.osa span{color:var(--red-tmavy)}

@media (max-width:600px){
  /* Na širší obrazovce vnější okraj stejně neurčuje .wrap, ale --maxw. Tady
     ano, a 24 px je na telefonu zbytečně drahých osm pixelů řádku. */
  :root{--okraj:var(--s-3)}
  /* Vnořené krabice po 24 px nechávaly na 320 px čtrnáct znaků na řádek. */
  .tema,.blok{padding:var(--s-3)}
}

/* ---------- program ---------- */
/* Odkaz na celý program, na konci všech oblastí. */
.prog-card{
  background:var(--navy);color:var(--on-dark-soft);border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-5);position:relative;overflow:hidden;margin-top:var(--s-7);
}
.prog-card::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,20,30,.24),transparent 70%);
}
.prog-card > *{position:relative}
.prog-card h3{color:#fff;font-size:var(--fs-2xl);font-weight:700;margin:var(--s-2h) 0 var(--s-2)}
.prog-card p{color:var(--on-dark-dim);margin:0 0 var(--s-4)}

/* ---------- kandidáti ---------- */
/* Sloupec, aby štítek oblasti sedl na spodní hranu karty. Karty v řádku jsou
   stejně vysoké, takže se štítky srovnají i pod různě dlouhými jmény. */
.cand{
  padding:var(--s-4) var(--s-3);text-align:center;position:relative;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
/* Karta se pod myší nadzvedne – bez toho není poznat, že se na ni dá kliknout.
   Kandidát bez medailonku odkaz nemá, takže se ani nehýbe. */
.cand:has(a:hover){transform:scale(1.08);box-shadow:0 14px 30px rgba(12,26,85,.18);z-index:1}
@media (prefers-reduced-motion:reduce){
  .cand{transition:none}
  .cand:has(a:hover){transform:none}
}
.cand .pos{
  position:absolute;top:var(--s-2);left:var(--s-2);font-family:var(--ff);font-weight:700;
  font-size:var(--fs-sm);color:var(--blue);background:var(--stone);border-radius:var(--r-xs);padding:2px var(--s-2);
}
.cand .av{
  width:84px;height:84px;margin:var(--s-1) auto var(--s-3);border-radius:50%;
  background:linear-gradient(140deg,var(--blue-2),var(--blue));color:#fff;
  display:grid;place-items:center;font-family:var(--ff);font-weight:700;font-size:var(--fs-xl);
  overflow:hidden;
}
/* Fotka místo iniciál. Ořez obličeje je už ve zdrojovém souboru (fotky.sh),
   object-position je jen doladění na kartě: style="--foto-y:35%". */
.cand .av img{width:100%;height:100%;object-fit:cover;object-position:50% var(--foto-y,50%)}
.cand b{font-size:var(--fs-md);font-weight:700;display:block}
/* Jméno je odkaz na medailonek a jeho plocha je celá karta – stejně jako
   u karet témat. Kandidát bez medailonku odkaz nemá a karta je jen text. */
.cand b a{color:inherit;text-decoration:none}
.cand b a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cand:hover b a{color:var(--blue)}
.cand:has(a:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.cand b a:focus-visible{outline:none}
.cand span{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:var(--s-1);line-height:1.35}
.cand span:not(.pos):not(.tag){margin-bottom:var(--s-2)}
.cand .tag{
  align-self:center;margin-top:auto;
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--red-tmavy);background:var(--red-soft);padding:3px var(--s-2);border-radius:var(--r-pill);
}

/* Medailonek kandidáta: /nahled/kandidati/<slug>/. Stojí na stejné kostře
   jako stránka plánu, přibývá jen hlavička s fotkou. */
.medailonek-hlava{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-5);flex-wrap:wrap}
.medailonek-hlava .av{width:min(180px,38vw);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none}
.medailonek-hlava .av img{width:100%;height:100%;object-fit:cover}
.medailonek-hlava h1{margin:0 0 var(--s-1)}
.medailonek-hlava .role{margin:0 0 var(--s-2);color:var(--muted);font-size:var(--fs-md)}
.medailonek h2:not(:first-child){margin-top:var(--s-4)}
.medailonek p{margin:0 0 var(--s-2)}
.medailonek ul{margin:0 0 var(--s-2)}

/* ---------- výzva k volbám ---------- */
.cta{
  background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:var(--s-8) var(--s-7);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
  flex-wrap:wrap;position:relative;overflow:hidden;
}
.cta-akce{margin:var(--s-4) 0 0}
.cta::before{
  content:"";position:absolute;inset:0;background:
    radial-gradient(80% 120% at 100% 0,rgba(230,20,30,.26),transparent 55%),
    radial-gradient(70% 120% at 0% 100%,rgba(230,20,30,.30),transparent 55%);
}
.cta .txt{position:relative;z-index:2;max-width:34ch}
.cta h2{font-size:var(--fs-h2);color:#fff;font-weight:800}
.cta p{color:var(--on-dark-soft);margin:var(--s-2h) 0 0;font-size:var(--fs-lg)}
.cta .box{
  position:relative;z-index:2;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);text-align:center;backdrop-filter:blur(4px);
}
.cta .box .no{
  width:76px;height:76px;margin:0 auto var(--s-2);border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:var(--ff);font-weight:800;font-size:36px;
}
.cta .box b{display:block;font-size:var(--fs-md);color:#fff}
.cta .box span{font-size:var(--fs-sm);color:var(--on-dark-soft)}

/* ---------- patička ---------- */
footer{background:var(--navy-deep);color:var(--on-dark-dim);padding-top:var(--s-8);padding-bottom:var(--s-5);border-top:3px solid var(--red)}
.foot-top{display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;padding-bottom:var(--s-6);border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand b{font-family:var(--ff);color:#fff;font-size:var(--fs-lg);font-weight:700;display:block}
.foot-brand p{margin:var(--s-2) 0 0;max-width:38ch;font-size:var(--fs-md);color:var(--on-dark-dim)}
.foot-links{display:flex;gap:var(--s-2h);align-items:flex-start}
.foot-links a{
  width:46px;height:46px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;text-decoration:none;transition:background var(--prechod), transform var(--prechod);color:var(--on-dark);
}
.foot-links a:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.foot-bottom{padding-top:var(--s-4);display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--on-dark-dim)}
.foot-bottom a{color:var(--on-dark-dim);text-decoration:none}
.foot-bottom a:hover{color:#fff}

/* ---------- odkrývání při scrollu ---------- */
/* Schválně animation, ne transition: .js .reveal má vyšší specificitu než
   .karta, takže by zkratkou transition smazalo kartě přechod stínu a posunu
   na hoveru. Vstupní efekt je stejně animace, ne změna stavu. */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{animation:odkryt .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes odkryt{to{opacity:1;transform:none}}

/* ---------- responzivita ---------- */
@media (max-width:960px){
  #oblasti .mrizka{--sloupce:2}
  #kandidati .mrizka{--sloupce:3}
  .hero-in{grid-template-columns:1fr}
  .hero-photo{width:100%;justify-self:start;margin-top:var(--s-2)}
}
@media (max-width:720px){
  .menu{display:none}
  .brand-logo{width:168px}
  .burger{display:block}
  .menu.open{
    display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:var(--s-2) var(--okraj) var(--s-4);gap:2px;box-shadow:var(--shadow);
  }
  .menu.open a{padding:13px var(--s-2)}
  section{padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .hero-in{padding-top:var(--s-7);padding-bottom:120px}
  #oblasti .mrizka{--sloupce:1}
  #kandidati .mrizka{--sloupce:2}
  .cta{padding:var(--s-6) var(--s-4)}
}
@media (max-width:360px){
  /* Dvě karty vedle sebe už se sem nevejdou, přetékaly do stran. */
  #kandidati .mrizka{--sloupce:1}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none;animation:none}
  .karta:hover,.btn:hover{transform:none}
}