/*
  Šumava v srdci — sdílené styly (v2, "terénní list").
  Jediný soubor komponent a rozvržení pro celý web. Hodnoty bere VÝHRADNĚ z tokens.css (var(--...)).
  Nezakládej další soubor ani <style> blok na stránce: chybí komponenta? Přidej ji sem jako další oddíl.
  Načítat vždy v pořadí: tokens.css, pak tento soubor.

  Oddíly: 1 základ · 2 hlavička a menu · 3 hero, vrstevnice, mlha · 4 tlačítka a drobné prvky ·
          5 bloky a karty · 6 údaje (terénní štítek) · 7 čtený text článku · 8 FAQ, výzva, citace, tabulka · 9 patička · 10 pohyb
  Poznámka: šířka 62rem (rozbalené menu) a 64rem (dvousloupec článku) je v @media natvrdo,
  protože proměnné v media query nefungují.
*/

/* ================= 1. základ ================= */

* { box-sizing: border-box; }

:root { --fokus: var(--barva-focus); }
.tmava { --fokus: var(--barva-focus-tm); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.menu-otevrene { overflow: hidden; }

body {
  margin: 0;
  background: var(--barva-mlha);
  color: var(--barva-hluboka);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--barva-modrin); color: var(--barva-hluboka); }

a { color: var(--barva-jezero); text-decoration-color: var(--barva-modrin); text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
a:hover { color: var(--barva-slat); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--stopa-nadpis); margin: 0; text-wrap: balance; }
h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--barva-slat); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--sirka-max); margin: 0 auto; padding: 0 var(--okraj); }
.sloupec-textu { max-width: var(--sirka-textu); }

.preskoc { position: absolute; left: var(--mezera-3); top: -4rem; z-index: 100; background: var(--barva-modrin); color: var(--barva-hluboka); font-family: var(--font-display); font-weight: 700; padding: 0.7rem 1rem; border-radius: var(--radius); text-decoration: none; }
.preskoc:focus { top: var(--mezera-3); }

/* ================= 2. hlavička a menu ================= */

.hlavicka { position: absolute; inset: 0 0 auto 0; z-index: 30; color: var(--barva-na-tmave); }
.hlavicka-radek { display: flex; align-items: center; justify-content: space-between; gap: var(--mezera-3); min-height: var(--vyska-hlavicky); flex-wrap: wrap; }

.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; text-decoration: none; color: var(--barva-na-tmave); position: relative; z-index: 50; min-height: var(--min-dotyk); }
.wordmark:hover { color: var(--barva-na-tmave); }
.wordmark .w-v { color: var(--barva-modrin); }
.wordmark .w-srdce { color: var(--barva-na-tmave); }

.znacka-symbol { width: 2.1rem; height: 2.1rem; flex: none; overflow: visible; }
.znacka-symbol path { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.znacka-symbol .zs-1 { stroke: var(--barva-jezero-svetle); }
.znacka-symbol .zs-2 { stroke: var(--barva-na-tmave); }
.znacka-symbol .zs-3 { stroke: none; fill: var(--barva-modrin); }

.nav-panel { display: block; }
.nav { display: flex; gap: var(--mezera-1); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: var(--min-dotyk); padding: 0 0.85rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; color: var(--barva-na-tmave-tlumena); text-decoration: none; transition: color var(--doba-kratka); }
.nav a:hover { color: var(--barva-na-tmave); }
.nav a[aria-current="page"] { color: var(--barva-na-tmave); box-shadow: inset 0 -3px 0 var(--barva-modrin); }

.menu-tlacitko { display: none; align-items: center; gap: 0.7rem; min-height: var(--min-dotyk); padding: 0 1rem; background: var(--barva-sklo-tm); color: var(--barva-na-tmave); border: 1px solid var(--barva-linka-tm); border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer; position: relative; z-index: 50; backdrop-filter: blur(6px); }
.menu-cary { position: relative; width: 1.15rem; height: 0.8rem; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-cary::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.menu-otevrene .menu-cary { border-color: transparent; }
.menu-otevrene .menu-cary::before, .menu-otevrene .menu-cary::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transform: rotate(45deg); }
.menu-otevrene .menu-cary::after { transform: rotate(-45deg); }

/* menu: pod 62rem hamburger (s JS), bez JS vodorovný řádek pod značkou */
@media (max-width: 61.99rem) {
  .nav-panel { flex-basis: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--okraj)); padding: 0 var(--okraj) var(--mezera-2); }
  .nav { flex-wrap: nowrap; white-space: nowrap; }
  .js .hlavicka-radek { flex-wrap: nowrap; }
  .js .menu-tlacitko { display: inline-flex; }
  .js .nav-panel { display: none; }
  .js.menu-otevrene .nav-panel { display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; margin: 0; padding: calc(var(--vyska-hlavicky) + var(--mezera-3)) var(--okraj) var(--mezera-6); overflow-y: auto; background: var(--barva-hluboka); background-image: radial-gradient(120% 70% at 100% 0%, var(--barva-hluboka-2), transparent 70%); }
  .js .nav { flex-direction: column; white-space: normal; gap: 0; }
  .js .nav a { width: 100%; min-height: 3.5rem; padding: 0.4rem 0; font-size: 1.75rem; letter-spacing: var(--stopa-nadpis); border-bottom: 1px solid var(--barva-linka-tm); box-shadow: none; }
  .js .nav a[aria-current="page"] { color: var(--barva-modrin); box-shadow: none; }
}

/* ================= 3. hero, vrstevnice, mlha ================= */

.hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(110% 90% at 80% 10%, var(--barva-hluboka-2) 0%, var(--barva-hluboka) 62%); color: var(--barva-na-tmave); padding: calc(var(--vyska-hlavicky) + var(--mezera-6)) 0 var(--mezera-8); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--barva-mlha) 0%, transparent) 0%, color-mix(in srgb, var(--barva-mlha) 45%, transparent) 45%, var(--barva-mlha) 100%); }
.hero-obsah { position: relative; z-index: 3; }
.hero-obsah-sloupec { display: flex; flex-direction: column; align-items: flex-start; }

.vrstevnice { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.vrstevnice .v { fill: none; stroke: currentColor; stroke-width: var(--vrstevnice-tloustka); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vrstevnice .v-index { stroke-width: var(--vrstevnice-tloustka-index); }
.vrstevnice-hero { color: var(--barva-vrstevnice-tm); opacity: var(--vrstevnice-kryti-hero); -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 96%); mask-image: linear-gradient(to bottom, black 45%, transparent 96%); }
.vrstevnice-hero .v-index { stroke: var(--barva-vrstevnice-tm-index); stroke-opacity: 0.55; }
.vrstevnice-pozadi { color: var(--barva-vrstevnice-tm); opacity: 0.9; -webkit-mask-image: linear-gradient(to top, black 10%, transparent 90%); mask-image: linear-gradient(to top, black 10%, transparent 90%); }
.vrstevnice-pozadi .v-index { stroke: var(--barva-vrstevnice-tm-index); stroke-opacity: 0.4; }

.vrstevnice-portret { display: none; }
@media (max-width: 47.99rem) {
  .vrstevnice-krajina { display: none; }
  .vrstevnice-portret { display: block; }
  .eyebrow { font-size: var(--text-xs); letter-spacing: 0.1em; }
}

.mlha { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; filter: blur(48px); }
.mlha-a { width: 70%; height: 55%; left: -15%; bottom: 8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--barva-mlha) 26%, transparent), transparent); animation: mlha-a var(--doba-mlha) ease-in-out infinite alternate; }
.mlha-b { width: 55%; height: 50%; right: -12%; top: 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--barva-jezero-svetle) 20%, transparent), transparent); animation: mlha-b var(--doba-mlha) ease-in-out infinite alternate; }

.eyebrow { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--barva-modrin); margin: 0 0 var(--mezera-3); }
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }

.hero h1 { font-size: var(--text-h1-str); color: var(--barva-na-tmave); max-width: 24ch; }
.hero .lede { font-style: italic; font-size: var(--text-lede); line-height: 1.5; color: var(--barva-na-tmave-tlumena); max-width: 36ch; margin: var(--mezera-3) 0 0; }
.hero .akce { display: flex; gap: var(--mezera-3); flex-wrap: wrap; margin-top: var(--mezera-5); }

/* úvodní hero: velká typografie + legenda mapy */
.hero-uvod { min-height: min(46rem, 94svh); display: flex; align-items: flex-end; padding-top: calc(var(--vyska-hlavicky) + var(--mezera-7)); }
.hero-uvod .hero-obsah { display: grid; gap: var(--mezera-6); align-items: end; }
.hero-uvod h1 { font-size: var(--text-h1); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
.h1-akcent { display: block; color: var(--barva-modrin); }
.hero-uvod .lede { max-width: 30ch; }

.legenda { background: var(--barva-sklo-tm); border: 1px solid var(--barva-linka-tm); border-radius: var(--radius-karta); padding: var(--mezera-3) var(--mezera-4); backdrop-filter: blur(8px); max-width: 22rem; }
.legenda-nadpis { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--barva-na-tmave-tlumena); margin: 0 0 var(--mezera-2); }
.legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.legenda li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-sm); line-height: 1.4; color: var(--barva-na-tmave); }
.legenda-znak { flex: none; width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center; }
.legenda-overeno { border: 1.5px solid var(--barva-jezero-svetle); border-radius: 50%; color: var(--barva-jezero-svetle); font-size: 0.7rem; line-height: 1; }
.legenda-overeno::after { content: "✓"; }
.legenda-klid { border: 2px dashed var(--barva-modrin); border-radius: 50%; }
.legenda-data { height: 0.7rem; color: var(--barva-na-tmave-tlumena); background: linear-gradient(90deg, currentColor 0 24%, transparent 24% 38%, currentColor 38% 62%, transparent 62% 76%, currentColor 76% 100%); }

@media (min-width: 62rem) {
  .hero-uvod .hero-obsah { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--mezera-7); }
  .legenda { justify-self: end; margin-bottom: var(--mezera-2); }
}

/* hero pilíře, článku, 404 */
.hero-nizky, .hero-clanek { padding-bottom: 9.5rem; }
.hero-clanek { padding-bottom: 11rem; }
.hero-clanek h1 { margin: var(--mezera-2) 0 var(--mezera-3); }
.hero-404 { min-height: min(40rem, 90svh); display: flex; align-items: flex-end; }
.hero-404 h1 { font-size: var(--text-h1); line-height: 0.98; max-width: 10ch; }
.rozcestnik { list-style: none; margin: var(--mezera-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mezera-2); }
.rozcestnik a { display: inline-flex; align-items: center; min-height: var(--min-dotyk); padding: 0 1rem; border: 1px solid var(--barva-linka-tm); border-radius: var(--radius); background: var(--barva-sklo-tm); color: var(--barva-na-tmave); font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.rozcestnik a:hover { border-color: var(--barva-modrin); color: var(--barva-modrin); }

/* ================= 4. tlačítka a drobné prvky ================= */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3rem; padding: 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; border: 2px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: background-color var(--doba-kratka), border-color var(--doba-kratka), transform var(--doba-kratka); }
.btn-primarni { background: var(--barva-modrin); color: var(--barva-hluboka); }
.btn-primarni:hover { background: var(--barva-modrin-svetla); color: var(--barva-hluboka); transform: translateY(-2px); }
.btn-sekundarni { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.btn-sekundarni:hover { color: inherit; border-color: currentColor; }
.btn-text { background: none; border: none; padding: 0; min-height: var(--min-dotyk); color: var(--barva-jezero); text-decoration: underline; text-decoration-color: var(--barva-modrin); font-weight: 700; }

.znacka-overeno { display: inline-flex; align-items: center; gap: 0.45em; min-height: 1.9rem; padding: 0 0.75em; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.01em; color: var(--barva-jezero); border: 1px solid var(--barva-linka-vyr); border-radius: var(--radius); }
.znacka-overeno::before { content: "✓"; font-weight: 800; }
.tmava .znacka-overeno { color: var(--barva-jezero-svetle); border-color: var(--barva-linka-tm); background: var(--barva-sklo-tm); }

.stitek { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--barva-slat); }
.tmava .stitek { color: var(--barva-modrin); }
.stitek-odkaz { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--min-dotyk); text-decoration: none; }
.stitek-odkaz::before { content: "←"; letter-spacing: 0; }
.stitek-odkaz:hover { color: var(--barva-na-tmave); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mezera-2) var(--mezera-3); }

/* stav klidového území — barva + tečka + text (nikdy jen barva) */
.klid-ano  { --klid-barva: var(--barva-klid-ano); }
.klid-ne   { --klid-barva: var(--barva-klid-ne); }
.klid-cast { --klid-barva: var(--barva-klid-cast); }
.klid-nev  { --klid-barva: var(--barva-klid-nev); }
.klid { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--barva-zula); line-height: 1.3; }
.klid::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 2px dashed var(--klid-barva); flex: none; }
.klid-ne::before { border-style: solid; background: var(--klid-barva); }

/* ================= 5. bloky a karty ================= */

.blok { padding: var(--mezera-7) 0; }
.hero + .blok { padding-top: var(--mezera-5); }
.blok-hlava { margin-bottom: var(--mezera-5); max-width: 40rem; }
.blok h2 { font-size: var(--text-h2); }
.podnadpis { color: var(--barva-zula); margin-top: var(--mezera-2); max-width: 46ch; }

.mrizka-clanku { display: grid; gap: var(--mezera-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

.karta-clanek { position: relative; display: flex; flex-direction: column; background: var(--barva-papir); border: 1px solid var(--barva-linka); border-radius: var(--radius-karta); box-shadow: var(--stin-karta); overflow: hidden; transition: transform var(--doba-stredni), box-shadow var(--doba-stredni); }
.karta-clanek:hover { transform: translateY(-4px); box-shadow: var(--stin-zvednuta); }
.karta-clanek:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }

.karta-miniatura { position: relative; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--barva-hluboka-2), var(--barva-hluboka)); color: var(--barva-jezero-svetle); overflow: hidden; }
.karta-miniatura[data-pilir="jezera-a-slate"] { background: linear-gradient(135deg, var(--barva-jezero), var(--barva-hluboka)); }
.karta-miniatura[data-pilir="historie-sumavy"] { background: linear-gradient(135deg, var(--barva-slat), var(--barva-hluboka)); color: var(--barva-na-tmave-tlumena); }
.karta-miniatura[data-pilir="itinerare"] { background: linear-gradient(135deg, var(--barva-zula), var(--barva-hluboka)); color: var(--barva-na-tmave-tlumena); }
.karta-miniatura[data-pilir="prakticke-info"] { background: linear-gradient(135deg, var(--barva-jezero), var(--barva-hluboka-2)); }
.karta-miniatura .vrstevnice { opacity: 0.7; }
.karta-miniatura .v-index { stroke: var(--barva-modrin); stroke-opacity: 0.8; }
.karta-miniatura::after { content: ""; position: absolute; top: 0.85rem; right: 0.85rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--barva-mlha); box-shadow: inset 0 1px 2px var(--barva-linka-vyr); }
.karta-miniatura .stitek { position: absolute; left: 1rem; bottom: 0.9rem; z-index: 1; padding: 0.3em 0.7em; background: var(--barva-papir); color: var(--barva-hluboka); border-radius: var(--radius); }

.karta-telo { display: flex; flex-direction: column; gap: var(--mezera-3); flex: 1; padding: var(--mezera-4); }
.karta-clanek h3 { font-size: var(--text-h3); }
.karta-clanek h3 a { color: var(--barva-hluboka); text-decoration: none; }
.karta-clanek h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.karta-clanek h3 a:hover { color: var(--barva-slat); }
.karta-clanek p { color: var(--barva-zula); font-size: 1.0625rem; line-height: 1.6; }
.karta-clanek .meta { margin-top: auto; padding-top: var(--mezera-3); border-top: 1px solid var(--barva-linka); }

/* karty pilířů */
.mrizka-pilire { display: grid; gap: var(--mezera-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.karta-pilir { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--mezera-2); min-height: 13.5rem; padding: var(--mezera-4); background: var(--barva-papir); border: 1px solid var(--barva-linka); border-radius: var(--radius-karta); color: var(--barva-hluboka); text-decoration: none; transition: background-color var(--doba-stredni), color var(--doba-stredni), transform var(--doba-stredni); }
.karta-pilir .vrstevnice { z-index: -1; color: var(--barva-vrstevnice-sv); opacity: 0.3; -webkit-mask-image: linear-gradient(105deg, transparent 25%, black 100%); mask-image: linear-gradient(105deg, transparent 25%, black 100%); transition: opacity var(--doba-stredni), color var(--doba-stredni); }
.karta-pilir .v-index { stroke: var(--barva-vrstevnice-sv-index); }
.karta-pilir h3 { font-size: var(--text-h3); margin-top: 0.15rem; }
.karta-pilir p { color: var(--barva-zula); font-size: 1.0625rem; line-height: 1.55; max-width: 28ch; }
.karta-pilir-pocet { margin-top: auto; padding-top: var(--mezera-3); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--barva-slat); }
.karta-pilir .sipka { display: inline-grid; place-items: center; width: var(--min-dotyk); height: var(--min-dotyk); margin: -0.6rem -0.6rem -0.6rem 0; font-size: 1.3rem; transition: transform var(--doba-stredni); }
.karta-pilir:hover { background: var(--barva-hluboka); color: var(--barva-na-tmave); transform: translateY(-3px); }
.karta-pilir:hover .stitek, .karta-pilir:hover .karta-pilir-pocet { color: var(--barva-modrin); }
.karta-pilir:hover p { color: var(--barva-na-tmave-tlumena); }
.karta-pilir:hover .vrstevnice { color: var(--barva-vrstevnice-tm); opacity: 0.95; }
.karta-pilir:hover .v-index { stroke: var(--barva-modrin); stroke-opacity: 0.7; }
.karta-pilir:hover .sipka { transform: translateX(4px); }

.prazdno { display: grid; gap: var(--mezera-4); justify-items: start; max-width: 40rem; padding: var(--mezera-5); border: 2px dashed var(--barva-linka-vyr); border-radius: var(--radius-karta); }
.prazdno .podnadpis { margin: 0; color: var(--barva-hluboka); }

/* dvousloupec "Než vyrazíš" */
.dva-sloupce { display: grid; gap: var(--mezera-6); }
.dva-sloupce h2 { margin-bottom: var(--mezera-4); }
.mezinadpis { font-size: var(--text-h3); margin-bottom: var(--mezera-3); }
@media (min-width: 62rem) { .dva-sloupce { grid-template-columns: 1fr 1fr; gap: var(--mezera-7); align-items: start; } }

/* ================= 6. údaje — terénní štítek ================= */

.udaje { display: flex; flex-wrap: wrap; gap: var(--mezera-3) var(--mezera-4); margin: 0; padding: 0; }
.udaj { display: flex; flex-direction: column-reverse; gap: 0.15rem; min-width: 0; }
.udaj dt { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--barva-zula); }
.udaj dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-udaj); line-height: 1; letter-spacing: -0.03em; color: var(--barva-hluboka); font-variant-numeric: tabular-nums; white-space: nowrap; }
.udaj .jednotka { font-family: var(--font-mono); font-weight: 500; font-size: 0.34em; letter-spacing: 0; color: var(--barva-slat); }
.udaje-mini { gap: var(--mezera-2) var(--mezera-4); }
.udaje-mini dd { font-size: 1.5rem; }

.udaje-stitek { position: relative; background: var(--barva-papir); border: 1px solid var(--barva-linka); border-radius: var(--radius-karta); box-shadow: var(--stin-karta); padding: var(--mezera-5) var(--mezera-4) var(--mezera-4); display: grid; gap: var(--mezera-4); }
.udaje-stitek::before { content: ""; position: absolute; top: 0.8rem; left: 50%; width: 3rem; height: 0.7rem; margin-left: -1.5rem; border-radius: 99px; background: var(--barva-mlha); box-shadow: inset 0 1px 2px var(--barva-linka-vyr); }
.udaje-stitek .udaje { gap: var(--mezera-3) 0; }
.udaje-stitek .udaj { padding: 0 var(--mezera-3); border-left: 1px solid var(--barva-linka); }
.udaje-stitek .udaj:first-child { padding-left: 0; border-left: 0; }
.udaje-stitek dd { font-size: 2.1rem; }
.klid-radek { margin: 0; padding: 0 0 0 var(--mezera-3); border-left: 0.3rem solid var(--klid-barva); line-height: 1.4; font-size: var(--text-sm); color: var(--barva-hluboka); }
.klid-radek .klid-nazev { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--barva-zula); }
.klid-radek strong { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; }
.klid-pozn { display: block; }
.udaje-stitek.bez-udaju { padding-top: var(--mezera-5); }

/* ================= 7. čtený text článku ================= */

.clanek-telo { position: relative; z-index: 3; padding: 0 0 var(--mezera-7); }
.clanek-sloupce { display: grid; gap: var(--mezera-5); }
.clanek-sloupce .udaje-stitek { margin-top: -7.5rem; }
.text-clanku { padding-top: var(--mezera-2); min-width: 0; }

@media (min-width: 64rem) {
  .clanek-sloupce { grid-template-columns: minmax(0, var(--sirka-textu)) 19rem; justify-content: space-between; column-gap: var(--mezera-6); align-items: start; }
  .clanek-sloupce .udaje-stitek { grid-column: 2; grid-row: 1; position: sticky; top: var(--mezera-4); margin-top: -8rem; }
  .clanek-sloupce .udaje-stitek .udaje { flex-direction: column; gap: var(--mezera-3); }
  .clanek-sloupce .udaje-stitek .udaj { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: var(--mezera-3); padding: 0 0 var(--mezera-3); border-left: 0; border-bottom: 1px solid var(--barva-linka); }
  .clanek-sloupce .udaje-stitek .udaj dt { margin-left: auto; }
  .clanek-sloupce .udaje-stitek .udaj dd { font-size: 2.4rem; }
  .text-clanku { grid-column: 1; grid-row: 1; padding-top: var(--mezera-4); }
}

.text-clanku > * { max-width: var(--sirka-textu); }
.text-clanku p { margin: 0 0 var(--mezera-3); }
.text-clanku > p:first-child { font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.28rem); line-height: 1.6; margin-bottom: var(--mezera-4); }
.text-clanku h2 { font-size: var(--text-h2); margin: var(--mezera-7) 0 var(--mezera-3); padding-top: var(--mezera-3); position: relative; }
.text-clanku h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 4px; background: var(--barva-modrin); border-radius: 2px; }
.text-clanku > h2:first-child { margin-top: 0; }
.text-clanku h3 { font-size: var(--text-h3); margin: var(--mezera-5) 0 var(--mezera-2); color: var(--barva-slat); }
.text-clanku strong { font-weight: 700; }
.text-clanku a { color: var(--barva-jezero); font-weight: 500; text-decoration-line: underline; }
.text-clanku a:hover { color: var(--barva-slat); }
.text-clanku ul { list-style: none; margin: 0 0 var(--mezera-4); padding: 0; }
.text-clanku ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.45rem; }
.text-clanku ul li::before { content: ""; position: absolute; left: 0.25rem; top: 0.72em; width: 0.5rem; height: 0.5rem; background: var(--barva-modrin); transform: rotate(45deg); }
.text-clanku ol { margin: 0 0 var(--mezera-4); padding-left: 1.6rem; }
.text-clanku ol li { margin-bottom: 0.45rem; padding-left: 0.3rem; }
.text-clanku ol li::marker { font-family: var(--font-display); font-weight: 700; color: var(--barva-slat); }
.text-clanku li > ul, .text-clanku li > ol { margin-top: 0.45rem; margin-bottom: 0; }
.text-clanku blockquote:not(.citace) { margin: var(--mezera-4) 0; padding: var(--mezera-2) 0 var(--mezera-2) var(--mezera-4); border-left: 4px solid var(--barva-linka-vyr); font-style: italic; color: var(--barva-zula); }
.text-clanku hr { border: 0; height: 1px; background: var(--barva-linka-vyr); margin: var(--mezera-6) 0; }
.text-clanku table { display: block; overflow-x: auto; margin: var(--mezera-4) 0; }

/* ================= 8. FAQ, výzva, citace, tabulka ================= */

.vyzva { position: relative; background: var(--barva-papir); border: 1px solid var(--barva-linka); border-left: 0.35rem solid var(--barva-modrin); border-radius: 0 var(--radius-karta) var(--radius-karta) 0; padding: var(--mezera-4) var(--mezera-4) var(--mezera-4) 4.2rem; margin: var(--mezera-4) 0; box-shadow: var(--stin-karta); }
.vyzva::before { content: "!"; position: absolute; left: var(--mezera-3); top: var(--mezera-4); width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--barva-modrin); color: var(--barva-hluboka); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.vyzva p { margin: 0; }
.vyzva p + p { margin-top: 0.75em; }
.text-clanku .vyzva p { margin: 0; }
.text-clanku .vyzva p + p { margin-top: 0.75em; }

.citace { position: relative; margin: var(--mezera-6) 0 var(--mezera-6); padding: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.15rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--barva-slat); max-width: 22ch; }
.citace::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: var(--mezera-3); border-radius: 2px; background: var(--barva-modrin); }

.dotaz { border-bottom: 1px solid var(--barva-linka-vyr); }
.dotaz:first-of-type { border-top: 1px solid var(--barva-linka-vyr); }
.dotaz summary { display: flex; align-items: center; justify-content: space-between; gap: var(--mezera-3); min-height: 3.5rem; padding: 0.75rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.dotaz summary::-webkit-details-marker { display: none; }
.dotaz summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1.5px solid var(--barva-linka-vyr); border-radius: 50%; font-size: 1.3rem; line-height: 1; font-weight: 500; color: var(--barva-slat); transition: transform var(--doba-stredni), background-color var(--doba-stredni); }
.dotaz[open] summary::after { content: "−"; background: var(--barva-modrin); border-color: var(--barva-modrin); color: var(--barva-hluboka); }
.dotaz summary:hover { color: var(--barva-slat); }
.dotaz p, .text-clanku .dotaz p { margin: 0 0 var(--mezera-3); padding-right: var(--mezera-5); color: var(--barva-hluboka); }
.text-clanku .dotaz { max-width: var(--sirka-textu); }

table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { text-align: left; padding: 0.7em 1em 0.7em 0; border-bottom: 1px solid var(--barva-linka); vertical-align: top; }
th { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--barva-zula); border-bottom-color: var(--barva-linka-vyr); }

/* ================= 9. patička ================= */

.paticka { position: relative; isolation: isolate; overflow: hidden; background: var(--barva-hluboka); color: var(--barva-na-tmave-tlumena); padding: var(--mezera-7) 0 var(--mezera-5); font-size: var(--text-sm); }
.paticka-obsah { position: relative; z-index: 1; display: grid; gap: var(--mezera-5) var(--mezera-7); }
.paticka a { color: var(--barva-na-tmave); text-decoration-color: var(--barva-linka-tm); }
.paticka a:hover { color: var(--barva-modrin); }
.paticka .wordmark { color: var(--barva-na-tmave); text-decoration: none; }
.paticka-znacka p { margin-top: var(--mezera-2); max-width: 32ch; font-size: 1rem; }
.paticka-menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0; }
.paticka-menu a { display: inline-flex; align-items: center; min-height: var(--min-dotyk); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.paticka-dole { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mezera-2) var(--mezera-5); padding-top: var(--mezera-4); border-top: 1px solid var(--barva-linka-tm); }
.paticka .sit { max-width: 52ch; }
.paticka-ai { grid-column: 1 / -1; margin: 0; max-width: 70ch; font-size: .875em; opacity: .85; }
@media (min-width: 48rem) { .paticka-obsah { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }

/* ================= 10. pohyb ================= */

@keyframes mlha-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(22%, -6%, 0); } }
@keyframes mlha-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16%, 8%, 0); } }
@keyframes vrstevnice-pojev { from { opacity: 0; } to { opacity: 1; } }

.vrstevnice-kresli .v { animation: vrstevnice-pojev 1400ms ease-out both; animation-delay: calc(var(--i) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .karta-clanek:hover, .karta-pilir:hover, .btn-primarni:hover { transform: none; }
}

/* Box "Kde přespat" pod článkem */
.kde-spat { margin-top: var(--mezera-6); padding: var(--mezera-4); background: var(--barva-papir); border: 1px solid var(--barva-linka); border-radius: var(--radius-karta); }
.text-clanku .kde-spat h2 { margin: 0 0 var(--mezera-2); padding-top: 0; font-size: var(--text-h3); }
.kde-spat h2::before { display: none; }
.kde-spat p { margin: 0; }

/* Odkaz „Klidové území“ ve štítku údajů vede na vysvětlení */
.klid-radek .klid-nazev a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
.klid-radek .klid-nazev a:hover { color: var(--barva-hluboka); }

/* Fotografie v článku */
.foto-clanku { margin: var(--mezera-5) 0 0; }
.foto-clanku img { width: 100%; height: auto; border-radius: var(--radius-karta); box-shadow: var(--stin-karta); background: var(--barva-papir); }
.foto-clanku figcaption { margin-top: var(--mezera-2); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--barva-zula); }
.foto-clanku { margin-bottom: var(--mezera-5); }
.clanek-telo.s-fotem .clanek-sloupce .udaje-stitek { margin-top: 0; }

/* Fotografie na kartách a na úvodní stránce */
.karta-miniatura .karta-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-cest-mrizka { display: grid; gap: var(--mezera-4); grid-template-columns: 1fr; margin: 0; }
.z-cest-mrizka figure { margin: 0; }
.z-cest-mrizka a { display: block; border-radius: var(--radius-karta); overflow: hidden; box-shadow: var(--stin-karta); transition: transform var(--doba-stredni), box-shadow var(--doba-stredni); }
.z-cest-mrizka a:hover { transform: translateY(-4px); box-shadow: var(--stin-zvednuta); }
.z-cest-mrizka img { width: 100%; height: auto; background: var(--barva-papir); }
.z-cest-mrizka figcaption { margin-top: var(--mezera-2); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; color: var(--barva-zula); }
@media (min-width: 48rem) { .z-cest-mrizka { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .z-cest-mrizka a:hover { transform: none; } }

/* Souhlas s mapou ubytování (Stay22) */
.souhlas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--barva-hluboka); color: var(--barva-na-tmave); border-top: 3px solid var(--barva-modrin); box-shadow: 0 -8px 30px rgba(0,0,0,.28); padding: 1.1rem 0; }
.souhlas[hidden] { display: none; }
.souhlas-obsah { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.souhlas-text { margin: 0; flex: 1 1 28rem; font-size: var(--text-sm); line-height: 1.55; color: var(--barva-na-tmave); }
.souhlas-text a { color: var(--barva-jezero-svetle); }
.souhlas-tlacitka { display: flex; gap: .75rem; flex-wrap: wrap; }
.souhlas-tlacitka .btn { min-width: 9.5rem; }
.souhlas-misto { border: 2px dashed var(--barva-zula-svetla); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; background: var(--barva-papir); text-align: center; }
.souhlas-misto p { margin: 0 0 1rem; color: var(--barva-hluboka); }
.paticka-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.paticka-btn:hover { color: var(--barva-jezero-svetle); }
@media (max-width: 40rem) { .souhlas-tlacitka { width: 100%; } .souhlas-tlacitka .btn { flex: 1 1 0; } }
.partner-upozorneni { font-size: var(--text-sm); color: var(--barva-zula); margin: 0 0 .75rem; padding: .6rem .9rem; border-left: 4px solid var(--barva-modrin); background: var(--barva-papir); }