/* fraunces-latin-ext-opsz-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fraunces-latin-ext-opsz-normal.a2930b27d1.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;
}
/* fraunces-latin-opsz-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fraunces-latin-opsz-normal.7234ed860a.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;
}
/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal.34b9c504ca.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;
}
/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal.3100e775e8.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;
}
/* ==========================================================
   GLAMLIFE / varianta A — "Film"
   Víkend jako jedna souvislá scéna řízená scrollem.
   Značkové barvy zachovány. Oranžová = světlo ohně, tedy akcent.
   ========================================================== */
:root{
  /* značkové tokeny */
  --ink:#080B08;
  --ink-2:#0F140E;
  --bark:#181E16;
  --bark-2:#232A20;
  --paper:#F0EBE1;
  --paper-2:#E2DACB;
  --dim:#A9A395;
  --ember:#C97A46;
  --ember-lt:#E5A16B;
  --moss:#7E8C68;
  --line:rgba(240,235,225,.15);
  --line-s:rgba(240,235,225,.08);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,4.6vw,72px);
  --maxw:1600px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Plovoucí hlavička (18 px od horní hrany, vysoká 64 px) ani spodní lišta
   nesmí zakrýt prvek s fokusem nebo cíl kotvy (WCAG 2.4.11). Horní míra
   je stejná, jakou dřív měly kotvy #galerie a #rezervace přes scroll-margin,
   takže skoky z tlačítek v heru sedí jako dřív. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:clamp(96px,13vh,124px);scroll-padding-bottom:96px}
/* Kotvy z menu homepage (#vikend, #mista, #mapa, #vybaveni, #kontakt) vedou
   na celou sekci a ta má nahoře velké odsazení. K scroll-padding-top by se
   přičetlo a nad nadpisem by zůstalo až 270 px prázdna. Záporný
   scroll-margin-top to odsazení přesně odečte (hodnoty jako padding-block
   sekcí níž), nadpis pak stojí těsně pod hlavičkou. Záporný je záměrně:
   kladný by se se scroll-padding-top sečetl. */
.places,.mapsec,.kit,.book{scroll-margin-top:calc(-1 * clamp(70px,11vh,150px))}
.film{scroll-margin-top:calc(-1 * clamp(70px,12vh,150px))}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ---------- struktura tmavého pozadí ----------
   Nemá to být fotka lesa, ale jen nepravidelnost, aby čerň nebyla plochá.
   Krytí přes tři procenta a rozostření 6 px: zbude tonální kresba
   a náznak zeleně, motiv rozpoznat nejde.
   Inset je záporný, aby rozostřené okraje zůstaly mimo obrazovku.
   Fixed, takže sekce jedou přes ni a pozadí zůstává klidné. */
body::after{
  content:"";position:fixed;inset:-24px;z-index:-1;pointer-events:none;
  background:url("/img/DSC02107-89-1600.17b0f6be78.webp")
    center/cover no-repeat;
  opacity:.022;filter:blur(9px) saturate(1.7) brightness(1.05);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ember);color:#140D07}
:focus-visible{outline:2px solid var(--ember-lt);outline-offset:3px}
/* Odkaz „Přeskočit na obsah“ (WCAG 2.4.1). Stojí nad oknem a při fokusu
   sjede vlevo nahoru přes hlavičku: z-index nad hlavičkou (1100), pod
   modálem (1200). Barvy jako hlavní tlačítko. */
.skip{position:fixed;top:18px;left:var(--gut);z-index:1150;
  padding:12px 20px;border-radius:100px;background:var(--ember);color:#160D06;
  font-size:14px;font-weight:500;line-height:1.2;
  transform:translateY(calc(-100% - 40px));transition:transform .3s var(--ease)}
.skip:focus{transform:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---------- typografie ----------
   Fraunces z prototypu na titulky, Inter na text. Proklad řádků je proti
   prototypu vyšší: čeština potřebuje nad řádkem místo na háčky a čárky,
   jinak si lezou do dolních dotažnic řádku nad sebou. */
.dsp{font-family:var(--display);font-weight:300;letter-spacing:-.015em;line-height:1.12}
h1.dsp{font-size:clamp(44px,7.4vw,116px);line-height:1}
h2.dsp{font-size:clamp(32px,4.6vw,68px);line-height:1.12}
h3{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,38px);line-height:1.2;
  letter-spacing:-.012em}
h4{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.6vw,24px);line-height:1.28}
p{max-width:60ch}
/* Sirotci. `balance` rozdělí krátký nadpis na podobně dlouhé řádky,
   takže na posledním nezůstane jedno slovo. `pretty` hlídá totéž
   u odstavců, ale zalomení jinak nechává být. Prohlížeč, který to
   neumí, se zachová jako dřív, nic se nerozbije. */
h1,h2,h3,h4,.dsp,.pk-name,.mi-nm{text-wrap:balance}
p,.lede,.place-desc,.mapnote{text-wrap:pretty}
.lede{font-size:clamp(16.5px,1.3vw,20px);line-height:1.6;color:var(--paper-2)}
.meta{font-size:12.5px;letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- ovládání ---------- */
.btn{font-family:var(--sans);font-size:14px;font-weight:500;padding:15px 28px;
  border-radius:100px;display:inline-block;border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
/* Ztučnění na hover přes obtah písma, ne přes font-weight. Vyšší řez má
   jiné šířky znaků, takže by tlačítko na hover poskočilo. Obtah kreslí
   po obrysu glyfu a do metrik nesahá, šířka zůstává na chlup stejná. */
.btn:hover{-webkit-text-stroke:.32px currentColor}
.btn-primary{background:var(--ember);color:#160D06}
.btn-primary:hover{background:var(--ember-lt)}
.btn-ghost{border-color:rgba(240,235,225,.3);color:var(--paper);
  background:rgba(240,235,225,.025);backdrop-filter:blur(5px)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(240,235,225,.08)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--bark-2)}

/* ---------- hlavička ----------
   Plovoucí prvek jako spodní lišta, ne pruh přes celé okno. Drží šířku
   obsahu sekcí: šířka okna bez okrajů --gut, nejvýš --maxw bez okrajů,
   tedy přesně to, co má .wrap uvnitř. Sklo, ne tmavá deska: čitelnost
   drží ztmavení uvnitř backdrop-filtru, ne krytí podkladu. */
.hdr{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1100;
  width:calc(100% - var(--gut) * 2);max-width:calc(var(--maxw) - var(--gut) * 2);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:9px 9px 9px 26px;
  background:rgba(15,20,14,.42);
  backdrop-filter:blur(24px) saturate(1.3) brightness(.74);
  border:1px solid var(--line);border-radius:100px;
  box-shadow:0 22px 60px -26px rgba(0,0,0,.85);
  transition:top .5s var(--ease)}
/* Po odscrollování z hera se jen přisune blíž k hraně. */
.hdr.solid{top:12px}
/* Při úvodní sekvenci je hlavička schovaná a přijede až s textem hera,
   se stejným zpožděním jako perex a tlačítka. */
.hdr{opacity:0;transform:translate(-50%,-12px);
  transition:top .5s var(--ease),opacity 1s var(--ease) 1s,transform 1s var(--ease) 1s}
body.ready .hdr{opacity:1;transform:translate(-50%,0)}
@media(max-width:620px){.hdr{top:14px;width:calc(100% - 28px);padding:8px 8px 8px 20px}
  .hdr .btn{padding:12px 18px;font-size:12.5px}}
/* GlamLife je jedno slovo, bez tečky uprostřed a bez barevného dělení. */
.logo{font-family:var(--display);font-size:20px;letter-spacing:.02em}
.hnav{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--paper-2)}
.hnav > a,.hnav-dd > a{position:relative;padding-block:3px;display:inline-flex;align-items:center;gap:6px}
.hnav > a::after,.hnav-dd > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.hnav > a:hover::after,.hnav-dd:hover > a::after,.hnav-dd:focus-within > a::after{
  transform:scaleX(1);transform-origin:left}

/* ---------- rozbalovací nabídka glampingů ----------
   Odkaz „Glampingy" vede dál na sekci s výběrem, nabídka pod ním
   nabízí rovnou čtyři místa. Otevírá se najetím a klávesnicí přes
   focus-within. Mezi odkazem a panelem je neviditelný můstek z paddingu,
   aby nabídka nezhasla, když kurzor přejíždí mezeru. */
.hnav-dd{position:relative}
.hnav-dd > a svg{width:9px;height:9px;stroke:currentColor;stroke-width:1.8;fill:none;
  transition:transform .35s var(--ease)}
.hnav-dd:hover > a svg,.hnav-dd:focus-within > a svg{transform:rotate(180deg)}
.dd{position:absolute;left:-10px;top:100%;padding-top:16px;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.hnav-dd:hover .dd,.hnav-dd:focus-within .dd{opacity:1;visibility:visible;transform:none}
/* Plné pozadí, ne sklo: přes nabídku by prosvítala fotka a text by
   se v ní ztrácel. */
.dd-in{min-width:250px;padding:8px;border-radius:16px;
  background:var(--bark);
  border:1px solid var(--line);box-shadow:0 22px 60px -26px rgba(0,0,0,.85)}
.dd a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;
  color:var(--paper);transition:background .25s var(--ease)}
.dd a:hover,.dd a:focus-visible{background:rgba(240,235,225,.08)}
.dd img{width:38px;height:38px;border-radius:7px;object-fit:cover;flex:0 0 auto;background:var(--bark)}
.dd b{display:block;font-family:var(--display);font-weight:300;font-size:16px;line-height:1.2;
  letter-spacing:-.01em}
.hright{display:flex;align-items:center;gap:18px}

/* ---------- přepínač jazyků ----------
   Tři segmenty v jedné pilulce, aktivní má světlou výplň. */
.langs{display:flex;padding:2px;border:1px solid var(--line);border-radius:100px;
  background:rgba(240,235,225,.04);font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1}
.langs a{padding:5px 9px;border-radius:100px;color:var(--dim);
  transition:color .3s var(--ease),background .3s var(--ease)}
.langs a:hover{color:var(--paper)}
.langs a.on{background:rgba(240,235,225,.14);color:var(--paper)}
/* Klikací plocha aspoň 24 px na výšku (WCAG 2.5.8) bez změny vzhledu:
   11 px písma s paddingem dá 21 px, neviditelný přesah dorovná zbytek
   do vnitřního okraje pilulky. */
.langs a{position:relative}
.langs a::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
@media(max-width:1000px){.hnav{display:none}}
@media(max-width:560px){.langs{display:none}}

/* ==========================================================
   HERO — jediná orchestrovaná sekvence při načtení
   ========================================================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transition:transform 2.4s var(--ease)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,11,8,.92) 0%,rgba(8,11,8,.38) 42%,rgba(8,11,8,.18) 100%)}
/* clona: dvě poloviny se rozjedou od středu */
.curtain{position:absolute;inset:0;z-index:3;pointer-events:none}
.curtain i{position:absolute;left:0;right:0;height:50%;background:var(--ink);
  transition:transform 1.5s var(--ease)}
.curtain i:first-child{top:0}
.curtain i:last-child{bottom:0}
.hero-in{position:relative;z-index:4;width:100%;padding:0 var(--gut) clamp(40px,7vh,84px)}
.hero h1{margin-bottom:30px;max-width:16ch}
/* Ořezové okno pro vyjíždějící řádek. Padding ho rozšíří nahoru na háčky
   a hlavně dolů na dotažnice (y, j, p), jinak je overflow:hidden usekne.
   Záporný margin ten přesah zase odečte z layoutu. */
.hero h1 .ln{display:block;overflow:hidden;padding:.1em 0 .28em;margin:-.1em 0 -.28em}
.hero h1 .ln em{display:block;font-style:normal;transform:translateY(142%);
  transition:transform 1.15s var(--ease)}
.hero h1 .ln:nth-child(1) em{transition-delay:.5s}
.hero h1 .ln:nth-child(2) em{transition-delay:.63s}
.hero-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);
  flex-wrap:wrap}
.hero-bot p{max-width:68ch}
/* Ruční zlom perexu vloženým znakem nového řádku. Přes <br> to nejde:
   musel by se mu přepínat display a s jinou než výchozí hodnotou ho část
   prohlížečů přestane brát jako zlom. Na úzkém okně se místo zlomu vloží
   mezera, jinak by první řádek zůstal viset krátký. */
.nl::before{content:" "}
@media(min-width:900px){.nl::before{content:"\A";white-space:pre}}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Rozsvícení po prvcích, ne přes společný obal.
   Předek s opacity nebo transform zakládá backdrop root, a backdrop-filter
   uvnitř něj pak nemá co snímat, dokud animace neskončí. Proto si každý
   prvek nese svoje opacity sám a sklo na tlačítku funguje od začátku.
   Zpoždění jde přes --d, aby nezdržovalo i přechody na hover. */
.h-rv{opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),
    background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.h-rv.d1{--d:.9s}.h-rv.d2{--d:1s}.h-rv.d3{--d:1.07s}.h-rv.d4{--d:1.16s}
body.ready .h-rv{opacity:1;transform:none}

/* ---------- hodnocení v heru ----------
   Bez rámu a podkladu, ať to nepřebije tlačítka. Čitelnost na fotce
   drží stín textu, ne karta. */
.proof{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  text-shadow:0 1px 14px rgba(8,11,8,.75)}
.faces{display:flex;flex:0 0 auto}
.face{position:relative;display:block;margin-left:-11px;border-radius:50%;
  transition:transform .3s var(--ease)}
.face:first-child{margin-left:0}
.face:hover,.face:focus-visible{transform:translateY(-4px)}
.faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(240,235,225,.45);background:var(--bark);
  transition:border-color .3s var(--ease)}
.face:hover img{border-color:var(--paper)}
.proof-score{display:flex;align-items:center;gap:9px}
.proof-score b{font-family:var(--display);font-weight:300;font-size:23px;line-height:1;
  letter-spacing:-.015em;color:var(--paper)}
.stars{display:flex;gap:2.5px}
.stars svg{width:10px;height:10px;display:block;fill:var(--dim)}
.proof-sub{font-size:12px;color:var(--dim);margin-top:3px}
@media(max-width:560px){.proof{width:100%}}

body.ready .curtain i:first-child{transform:translateY(-100%)}
body.ready .curtain i:last-child{transform:translateY(100%)}
body.ready .hero-media img{transform:scale(1)}
body.ready .hero h1 .ln em{transform:translateY(0)}

/* ==========================================================
   VÍKEND — lišta vlevo, kapitoly vpravo (podle prototypu šéfa)
   Bez zachytávání scrollu. Vlevo přilepená lišta s dnem, časem, krátkým
   popiskem, linkou postupu a pořadím. Vpravo devět kapitol pod sebou,
   každá je fotka s textem přes ni a malou deskou v rohu. Kapitoly nejsou
   přes celé okno, sedí v šířce obsahu, takže kolem prosvítá pozadí.
   ========================================================== */
.film{background:none}
/* Úvod sekce je hlavička na střed jako u mapy a vybavení. */
.film-intro{position:relative;z-index:5;padding-block:clamp(70px,12vh,150px) clamp(30px,6vh,70px)}
.film-intro .chead{margin-bottom:0}

/* Mřížka není v .wrap, aby kapitoly dojely až k pravé hraně okna. Lišta
   vlevo se drží jen okraje okna (--gut), ne hrany obsahu: na širokém
   monitoru by jinak vlevo zbyl velký prázdný pruh. */
.weekend{display:grid;grid-template-columns:clamp(150px,12vw,180px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);align-items:start;padding-left:var(--gut)}
@media(max-width:1000px){.weekend{grid-template-columns:1fr;padding-left:0}}

/* ---------- lišta vlevo ---------- */
.hud{position:sticky;top:clamp(100px,15vh,150px);
  display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.hud-day{font-size:13.5px;font-weight:500;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ember-lt);margin-bottom:7px}
/* Hodiny se přesazují po číslicích jako odometr: sloupec číslic se
   protočí a doskočí na cíl. Tabulární číslice drží šířku, jinak by se
   čas při přesazení kýval. Jednotka ch je přesně šířka nuly, takže se
   do slotu vejde každá číslice a všechny stojí ve stejném rastru. */
.hud-time{display:flex;align-items:flex-start;
  font-family:var(--display);font-weight:300;font-size:clamp(40px,4.6vw,66px);
  line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.t-slot{display:block;width:1ch;height:1.1em;overflow:hidden;text-align:center}
.t-sep{display:block;height:1.1em}
.t-track{display:block;will-change:transform;
  transition:transform .68s cubic-bezier(.2,.85,.25,1.07)}
.t-track span{display:block;height:1.1em}
/* Výplň se přepisuje při každém scrollu, proto bez transition. */
.hud-rail{margin-top:30px;width:2px;height:clamp(140px,24vh,220px);border-radius:2px;
  background:rgba(240,235,225,.16);position:relative}
.hud-rail i{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;
  background:var(--ember)}
.hud-count{margin-top:14px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
@media(max-width:1000px){.hud{display:none}}

/* ---------- kapitoly ---------- */
/* Kapitola je přes celou výšku okna a jede až k pravé hraně. Mezi
   kapitolami jen tenká linka, žádná mezera ani zaoblení. */
.beats{display:grid;gap:0}
.beat{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--bark);border-bottom:1px solid rgba(240,235,225,.07)}
/* Fotka přesahuje rám o 6 %, aby měla kam jet a nevykoukly okraje. */
/* Pohyb fotky stejný jako v prototypu šéfa: žádný pan a zoom, jen
   parallax se scrollem. Fotka je o 12 % vyšší než rám a posouvá se
   podle polohy kapitoly v okně (viz onScroll), takže má kam jet
   a nikdy neodhalí okraj. */
.beat-img{position:absolute;inset:0;z-index:0;overflow:hidden}
.beat-img img{width:100%;height:112%;object-fit:cover;will-change:transform}
/* Závoj patří kapitole, ne fotce. Kdyby seděl na fotce, hýbal by se
   s ní a text by pod ním chvílemi ztrácel podklad. */
.beat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,11,8,.93) 4%,rgba(8,11,8,.46) 40%,rgba(8,11,8,.08) 76%)}
.beat-txt{position:relative;z-index:3;padding:clamp(24px,3.4vw,52px);max-width:640px}
@media(min-width:901px){.beat-txt{max-width:min(640px,66%)}}
.beat-when{display:none;font-size:12.5px;letter-spacing:.06em;color:var(--ember-lt);
  margin-bottom:14px;font-variant-numeric:tabular-nums}
@media(max-width:1000px){.beat-when{display:block}}
.beat-txt h3{margin-bottom:14px;max-width:16ch}
.beat-txt p{color:var(--paper-2);font-size:clamp(15.5px,1.15vw,18px)}
.beat-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
/* Labely leží na fotce, takže si musí čitelnost nést samy.
   Podklad je proto dost tmavý na to, aby fungoval i na světlém snímku. */
.beat-tags span,.place-labels span,.pk-label{font-size:12px;color:var(--paper);
  border:1px solid rgba(240,235,225,.22);border-radius:100px;padding:7px 14px;
  background:rgba(8,11,8,.62)}
/* Druhá fotka: menší deska vpravo dole. Stojí, jen se při najetí
   zvětší, jako v prototypu. */
.beat-inset{position:absolute;right:clamp(20px,3vw,44px);bottom:clamp(24px,3.4vw,52px);z-index:2;
  width:clamp(130px,16%,220px);aspect-ratio:3/4;overflow:hidden;border-radius:3px;
  border:1px solid rgba(240,235,225,.16);box-shadow:0 30px 70px -22px rgba(0,0,0,.85)}
.beat-inset img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.beat-inset:hover img{transform:scale(1.07)}
@media(max-width:900px){
  .beat-inset{display:none}
  .beat{min-height:80svh}
}

/* ==========================================================
   MÍSTA
   ========================================================== */
.places{padding-block:clamp(70px,11vh,150px)}
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(22px,4vw,70px);align-items:end;margin-bottom:clamp(30px,5vh,64px)}
@media(max-width:860px){.shead{grid-template-columns:1fr;gap:18px}}
.shead p{color:var(--paper-2);font-size:16px;max-width:44ch}
/* Karty glampingů: text pod fotkou, ne přes ni. Čitelnost tak nezávisí
   na tom, jak vyjde konkrétní snímek, a zbude místo na skutečná fakta.
   Na hover se fotka prohodí z exteriéru na interiér téhož glampingu. */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.2vw,52px)}
@media(max-width:820px){.pgrid{grid-template-columns:1fr}}
.place{display:block}
.place-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bark);
  border-radius:4px}
/* Vršek fotky se ztmaví jen tolik, aby na něm udržely labely. */
.place-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,8,.72) 0%,rgba(8,11,8,.16) 30%,rgba(8,11,8,0) 54%)}
.place-labels{position:absolute;left:0;top:0;right:0;z-index:2;
  display:flex;gap:8px;flex-wrap:wrap;padding:clamp(14px,1.6vw,20px)}
.place-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--ease),opacity .8s var(--ease)}
.place-media .alt{opacity:0}
.place:hover .place-media .alt,.place:focus-visible .place-media .alt{opacity:1}
.place:hover .place-media img{transform:scale(1.04)}

.place-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-top:20px;padding-bottom:15px;border-bottom:1px solid var(--line-s);
  transition:border-color .5s var(--ease)}
.place:hover .place-head{border-bottom-color:var(--ember)}
.place-head h3{margin:0}
.place-price{font-size:13px;color:var(--dim);white-space:nowrap}
.place-price b{font-family:var(--display);font-weight:300;font-size:21px;color:var(--paper)}
/* Popis vlevo, tlačítko vedle něj vpravo, srovnané spodními hranami. */
.place-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:15px}
.place-desc{font-size:15px;line-height:1.55;color:var(--paper-2);max-width:44ch}
.place-btn{padding:11px 20px;font-size:13px;flex:0 0 auto}
.place:hover .place-btn{border-color:var(--paper);background:rgba(240,235,225,.08)}

/* ==========================================================
   MAPA — Leaflet s tmavými dlaždicemi, piny jsou naše
   ========================================================== */
.mapsec{padding-block:clamp(70px,11vh,150px);border-top:1px solid var(--line-s)}
/* Nadpis na střed. Levý nadpis a pravý odstavec má na stránce každá
   druhá sekce, tady to rozbíjí monotónnost a zároveň to dá mapě
   celou šířku pod sebou. */
.chead{text-align:center;max-width:56ch;margin:0 auto clamp(30px,5vh,58px)}
.chead h2{margin-bottom:16px}
.chead p{font-size:16px;color:var(--paper-2);margin-inline:auto;max-width:64ch}

/* Výšku řádku určuje sloupec s kartami, mapa se k němu natáhne. */
.mapgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(14px,1.8vw,24px);align-items:stretch}
@media(max-width:960px){.mapgrid{grid-template-columns:1fr}}
/* Mapa má světlé dlaždice CARTO Voyager (od 18. 9. 2026, tmavé byly
   nepřehledné a bez viditelných hranic). Pozadí do načtení dlaždic je proto
   světlé, uvedení zdroje světlé s tmavým písmem. Tlačítka zoomu a popisky
   špendlíků zůstávají tmavé, na světlé mapě jsou dobře vidět. */
.mapbox{display:flex;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;background:var(--paper)}
#map{flex:1;min-height:0;width:100%;background:var(--paper)}
@media(max-width:960px){#map{min-height:clamp(320px,50vh,440px)}}
.leaflet-container{font-family:var(--sans);background:var(--paper)}
.leaflet-control-attribution{background:rgba(240,235,225,.82)!important;color:rgba(8,11,8,.72)!important;
  font-size:10px}
.leaflet-control-attribution a{color:rgba(8,11,8,.72)!important}
.leaflet-bar a{background:var(--ink-2);color:var(--paper);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--bark);color:var(--paper)}
.leaflet-tooltip.pin-tip{background:rgba(8,11,8,.92);border:1px solid var(--line);
  color:var(--paper);font-size:12.5px;padding:6px 12px;border-radius:100px;box-shadow:none}
.leaflet-tooltip.pin-tip::before{display:none}
/* Pin je značkový, ne výchozí modrá kapka. Tmavý okraj ho na světlé mapě
   odliší od silnic, které má Voyager v podobně teplých barvách. */
.pin{display:block;width:13px;height:13px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(201,122,70,.25);transition:box-shadow .35s var(--ease)}
.pin.on{background:var(--ember);box-shadow:0 0 0 2px var(--ink),0 0 0 10px rgba(201,122,70,.32)}

/* Čtyři karty se rovnoměrně rozdělí o výšku sloupce přes flex:1,
   takže mají všechny stejnou výšku a spolu určují výšku mapy. */
.maplist{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px)}
.mapitem{flex:1;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:clamp(12px,1.3vw,17px);border:1px solid var(--line-s);border-radius:5px;
  background:var(--ink-2);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.mapitem:hover{border-color:var(--line);background:var(--bark)}
.mapitem.on{border-color:var(--ember);background:var(--bark)}
.mi-img{flex:0 0 auto;width:clamp(54px,5vw,72px);aspect-ratio:1;
  border-radius:4px;overflow:hidden;background:var(--bark-2)}
.mi-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mapitem:hover .mi-img img{transform:scale(1.06)}
.mi-txt{flex:1;min-width:0}
.mi-nm{display:block;font-family:var(--display);font-weight:300;line-height:1.2;
  font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em;margin-bottom:4px;
  transition:color .3s var(--ease)}
.mapitem.on .mi-nm{color:var(--ember-lt)}
.mi-sb{display:block;font-size:12.5px;color:var(--dim)}
.mi-pr{flex:0 0 auto;font-size:12.5px;color:var(--paper-2);white-space:nowrap}
/* Jeden řádek, bez omezení šířky. */
.mapnote{margin-top:clamp(16px,2.2vh,24px);font-size:11.5px;color:var(--dim);
  line-height:1.5;max-width:none}

/* ==========================================================
   VYBAVENÍ — světlý pás, kvůli rytmu
   ========================================================== */
.kit{padding-block:clamp(70px,11vh,150px)}
/* Slider místo mřížky. Osm položek v mřížce byla stěna informací,
   takhle je vidět pár karet a zbytek se dotáhne. Text je zkrácený
   na jeden řádek, detaily patří na stránku glampingu. */

/* Kolejnice jde přes celou šířku okna, ne jen přes obsah. Karty tak
   odjíždějí až za hranu displeje a nikde se neuřízne rám.
   Sedí mimo .wrap, protože zevnitř obalu se šířka okna nespočítá.
   Vnitřní odsazení kopíruje levou hranu obsahu: dokud je okno užší než
   --maxw, je to jen --gut, na širokém monitoru k tomu přibude půlka
   toho, co zbývá po stranách. Procenta se tu berou z šířky sekce, tedy
   z těla stránky bez posuvníku, proto ne vw. */
/* Šířka karty se počítá z vnitřní šířky kolejnice, a ta je stejná jako
   šířka obsahu v .wrap. Na řádek se tak vejde přesně celý počet karet
   a mřížka sedí do sekce, zbytek pokračuje vedle za hranu okna. */
.kitrail{--kit-gap:clamp(12px,1.5vw,20px);--kit-cols:4;
  --rail-pad:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));
  display:flex;gap:var(--kit-gap);overflow-x:auto;
  padding:0 var(--rail-pad) 8px;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--rail-pad);
  scrollbar-width:none;-ms-overflow-style:none}
.kitrail::-webkit-scrollbar{display:none}
.kitcard{flex:0 0 calc((100% - (var(--kit-cols) - 1) * var(--kit-gap)) / var(--kit-cols));
  scroll-snap-align:start}
@media(max-width:1100px){.kitrail{--kit-cols:3}}
@media(max-width:820px){.kitrail{--kit-cols:2}}
/* Na mobilu záměrně necelý počet, ať je vidět, že seznam pokračuje. */
@media(max-width:560px){.kitrail{--kit-cols:1.15}}
/* Rám drží zaoblení a ořez, zvětšuje se jen fotka uvnitř. Kdyby mělo
   zaoblení samo <img> a zvětšovalo se celé, přeteče přes vlastní rohy
   a ty při najetí zmizí. */
.kc-img{display:block;overflow:hidden;border-radius:10px;background:var(--bark);
  aspect-ratio:4/5;margin-bottom:15px}
.kc-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.kitcard:hover .kc-img img{transform:scale(1.05)}
.kitcard h4{margin-bottom:5px}
.kitcard p{font-size:13.5px;line-height:1.5;color:var(--dim);max-width:40ch}
/* Puntíky ukazují, kde v seznamu jsi, a dají se použít k přeskočení. */
/* Ovládání pod kolejnicí: šipka, puntíky, šipka. Šipky jsou kreslené
   jako SVG, ne znaky z fontu. Na kraji seznamu šipka zhasne. */
.kitnav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,24px);
  margin-top:clamp(20px,2.6vh,30px)}
.kitarrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--paper);
  transition:border-color .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease)}
.kitarrow svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}
.kitarrow:hover{border-color:var(--ember);background:rgba(240,235,225,.05)}
.kitarrow[aria-disabled="true"]{opacity:.28;pointer-events:none}
/* Puntík je vidět 7 px, klikací plocha je ale 24 px vysoká a sahá do půlky
   mezery k sousedům (WCAG 2.5.8). Mezeru proto nedělá gap, ale šířka
   tlačítka, a záporný okraj řady ji na krajích odečte, takže puntíky stojí
   přesně tam, kde dřív. Širší plocha nejde bez rozestoupení puntíků.
   Kritérium to pouští, stejnou funkci mají šipky vedle (40 px).
   Puntík kreslí ::before. */
.kitdots{display:flex;justify-content:center;margin-inline:-4.5px}
.kitdot{--dot:7px;--gap:9px;position:relative;height:24px;width:calc(var(--dot) + var(--gap));
  border-radius:100px;transition:width .35s var(--ease)}
.kitdot::before{content:"";position:absolute;left:calc(var(--gap) / 2);top:calc(50% - var(--dot) / 2);
  width:calc(100% - var(--gap));height:var(--dot);border-radius:100px;
  background:rgba(240,235,225,.2);transition:background .35s var(--ease)}
.kitdot:hover::before{background:rgba(240,235,225,.45)}
.kitdot.on{width:calc(26px + var(--gap))}
.kitdot.on::before{background:var(--ember)}
/* Obecné :focus-visible (nahoře v souboru) by kreslilo kroužek kolem
   celé 24px klikací plochy, ne kolem 7px tečky. Kroužek proto nese
   ::before, tam, kde je tečka doopravdy vidět. */
.kitdot:focus-visible{outline:none}
.kitdot:focus-visible::before{outline:2px solid var(--ember-lt);outline-offset:3px}

/* ==========================================================
   HODNOCENÍ
   ========================================================== */
.revs{padding-block:clamp(70px,11vh,150px)}
/* Sloupec se skóre je jen tak široký, jak potřebuje číslo a text pod
   ním, všechno ostatní dostane stěna recenzí. Mezera mezi nimi je tak
   pořád stejná, ať je monitor jakkoli široký. S podílovými sloupci rostla
   s oknem a na velkém displeji zela prázdná. */
.revgrid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,4vw,72px);align-items:start}
@media(max-width:900px){.revgrid{grid-template-columns:1fr}}
/* Skóre zůstává na očích, zatímco stěna recenzí projíždí kolem. */
.revscore{position:sticky;top:clamp(96px,15vh,150px)}
@media(max-width:900px){.revscore{position:static}}
/* Nadpis stojí nad celou mřížkou, ne ve sloupci se skóre. V úzkém
   sloupci by se v plné velikosti lámal po dvou slovech. */
.revhead{margin-bottom:clamp(30px,5vh,58px)}
/* Číslo roste s oknem dál než dřív, aby na velkém monitoru nezůstalo
   malé vedle široké stěny recenzí. */
.score{font-family:var(--display);font-size:clamp(58px,8vw,150px);line-height:.9;
  color:var(--ember-lt);letter-spacing:-.03em}
.score-sub{font-size:13.5px;color:var(--dim);margin-top:16px;max-width:26ch}

/* Stěna recenzí. Každý sloupec jede sám od sebe a jiným směrem, takže
   je pořád vidět jiné hodnocení. Obsah je v každém sloupci dvakrát,
   aby se dal posun zacyklit bez viditelného švu. Maska nahoře a dole
   schová, kde sloupce vjíždějí do rámu a vyjíždějí z něj. */
.revwall{--g:clamp(12px,1.4vw,18px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);
  height:clamp(520px,74vh,780px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 87%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 87%,transparent)}
.revcol{display:flex;flex-direction:column;gap:var(--g);will-change:transform}
.revset{display:flex;flex-direction:column;gap:var(--g)}
/* Posun o jednu sadu i s mezerou, která ji dělí od kopie. Samotných
   -50 % by minulo o půl mezery a na každé otočce by to cuklo. */
@keyframes marqUp{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,calc(-50% - var(--g) / 2),0)}
}
@keyframes marqDown{
  from{transform:translate3d(0,calc(-50% - var(--g) / 2),0)}
  to{transform:translate3d(0,0,0)}
}
.revcol[data-dir="up"]  {animation:marqUp   var(--dur,80s) linear infinite}
.revcol[data-dir="down"]{animation:marqDown var(--dur,80s) linear infinite}
/* Stěna stojí pod myší a při fokusu uvnitř. Plynule ji zastavuje
   easeHover v a11y.js (obal pak má data-ease), tohle skokové zastavení
   platí jen bez skriptu. Tlačítko pauzy uživatel 18. 9. 2026 nechtěl,
   s omezeným pohybem se stěna nehýbe vůbec. */
.revwall:not([data-ease]):hover .revcol,.revwall:not([data-ease]):focus-within .revcol{animation-play-state:paused}
@media(max-width:1150px){
  .revwall{grid-template-columns:repeat(2,1fr)}
  .revcol:nth-child(3){display:none}
}
@media(max-width:900px){
  .revwall{grid-template-columns:1fr;height:auto;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .revcol:nth-child(2){display:none}
  .revcol{animation:none}
  .revcol .revset[aria-hidden]{display:none}
}
/* Hvězdy a text nahoře, jméno a zdroj dole. Na kolejnici (mobil) mají
   karty stejnou výšku podle nejvyšší a podpis se drží spodní hrany. */
.rev{border:1px solid var(--line-s);border-radius:10px;background:var(--ink-2);
  padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column}
.rev figcaption{margin-top:auto}
.rev .st{display:flex;gap:2.5px;margin-bottom:12px}
.rev .st svg{width:11px;height:11px;display:block;fill:var(--ember-lt)}
.rev q{quotes:none;display:block;font-size:15px;line-height:1.55;
  color:var(--paper-2);margin-bottom:13px}
.rev .who{font-size:12.5px;color:var(--paper)}
.rev .src{font-size:11.5px;color:var(--dim);margin-top:3px}
/* Pod stěnou: odkud recenze jsou. Jen když je na stěně skutečná recenze. */
.revnote{margin-top:clamp(18px,3vh,30px);font-size:12.5px;line-height:1.55;color:var(--dim);max-width:72ch}
/* Místo bez souhrnného hodnocení: stěna dostane celou šířku mřížky. */
.revgrid:not(:has(> .revscore)){grid-template-columns:minmax(0,1fr)}

/* ==========================================================
   REZERVACE
   ========================================================== */
.book{padding-block:clamp(70px,11vh,150px)}
.bgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,90px);align-items:start}
@media(max-width:900px){.bgrid{grid-template-columns:1fr}}

/* ---------- levý sloupec: kontakty ---------- */
.ctline{display:grid;gap:4px;padding:17px 0;border-bottom:1px solid var(--line-s)}
.ctline:first-child{padding-top:0}
.ctline .k{font-size:12px;color:var(--dim)}
.ctline .v{font-family:var(--display);font-weight:300;letter-spacing:-.012em;
  font-size:clamp(19px,1.7vw,25px);line-height:1.25;
  transition:color .3s var(--ease)}
a.v:hover{color:var(--ember-lt)}

/* ---------- formulář ---------- */
.form{display:grid;gap:clamp(14px,1.6vw,19px)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,19px)}
@media(max-width:560px){.f2{grid-template-columns:1fr}}

/* Plovoucí popisek. Dokud je pole prázdné, sedí popisek uvnitř místo
   placeholderu. Jakmile se do pole klikne nebo se něco napíše, vyjede
   nahoru a uvolní místo textu. Popisek je v HTML až za polem, aby na
   něj šlo cílit sousedním selektorem podle stavu pole. */
.field{position:relative}
.field input,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--paper);
  background:var(--ink-2);border:1px solid var(--line-s);border-radius:7px;
  padding:23px 15px 9px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{min-height:140px;resize:vertical;line-height:1.55;padding-top:26px}
.field input:hover,.field textarea:hover{border-color:var(--line)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(201,122,70,.14)}
/* Popisek má kontrast aspoň 4,5 : 1 i v klidu (WCAG), proto --dim místo
   dřívější tmavší šedé. Poznámka „nepovinné“ je o fous tlumenější, ale
   pořád nad hranicí. */
.field label{position:absolute;left:16px;top:15px;pointer-events:none;
  font-size:15px;color:var(--dim);
  transition:top .2s var(--ease),font-size .2s var(--ease),color .2s var(--ease)}
.field label em{font-style:normal;opacity:.8;margin-left:5px}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field-sel label{top:9px;font-size:11.5px;color:var(--dim)}
.field input:focus ~ label,.field textarea:focus ~ label{color:var(--ember-lt)}

/* Věta o osobních údajích místo zaškrtávátka se souhlasem. Podtržení
   odkazu je trvalé, ne až na hover: v odstavci textu by odkaz bez něj
   nešlo od zbytku rozeznat. */
.fnote{font-size:14px;line-height:1.5;color:var(--paper-2);max-width:46ch}
.fnote a{color:var(--paper);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(240,235,225,.4);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.fnote a:hover{color:var(--ember-lt);text-decoration-color:var(--ember)}

/* ---------- chyby a stav odeslání ----------
   Texty chyb jsou v HTML a schované atributem hidden. Bez skriptu je
   ukáže :target (odeslat.php vrátí adresu s #chyba-…), se skriptem
   (form má data-js) je přepíná form.js. Vlastní display by hidden
   přebil, proto u .form, .fform a .fdone výslovné [hidden]. */
.form[hidden],.fform[hidden],.fdone[hidden]{display:none}
.ferr{margin-top:7px;padding-left:2px;font-size:13px;line-height:1.45;color:var(--ember-lt)}
.ferr-box{margin-top:0}
.form:not([data-js]) .ferr:target{display:block}
.form:not([data-js]) .fform:target{display:grid}
.field [aria-invalid="true"]{border-color:var(--ember)}
.fsend{display:flex;align-items:center;gap:14px}
.btn[aria-disabled="true"]{opacity:.6;cursor:progress}
.fstatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Náhradní kontakt: místo formuláře (FORMULAR vypnutý) nebo uvnitř něj,
   když odeslání selže. Tlačítka bez rozostření: obal se odkrývá přes
   opacity a sklo by po animaci naskočilo. */
.fform{display:grid;gap:18px;padding:clamp(20px,2.4vw,30px);
  background:var(--ink-2);border:1px solid var(--line-s);border-radius:10px}
.fform-lead{font-family:var(--display);font-weight:300;letter-spacing:-.012em;
  font-size:clamp(19px,1.7vw,25px);line-height:1.25;color:var(--paper)}
.fform-btns{display:flex;flex-wrap:wrap;gap:12px}
.fform .btn-ghost{backdrop-filter:none}
.fdone{display:grid;gap:14px;align-content:start}
.fdone p{color:var(--paper-2)}

/* ---------- výběr tématu ----------
   Nativní <select>: funguje bez skriptu, s klávesnicí i se čtečkou a na
   telefonu otevře systémový výběr. Zavřený vypadá stejně jako dřívější
   vlastní tlačítko. Otevřený seznam kreslí systém, jen prohlížeče
   s appearance:base-select (Chrome a Edge) dostanou náš vzhled. */
.sel{position:relative}
.sel select{display:block;width:100%;appearance:none;-webkit-appearance:none;
  font-family:var(--sans);font-size:15px;line-height:1.25;color:var(--paper);color-scheme:dark;
  background:var(--ink-2);border:1px solid var(--line-s);border-radius:7px;
  padding:23px 42px 9px 15px;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.sel select:hover{border-color:var(--line)}
.sel select:focus-visible{outline:none;border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(201,122,70,.14)}
.sel select option{background:var(--bark);color:var(--paper)}
/* Šipka je vytažená z toku a vycentrovaná na výšku pole, ne podle textu,
   který kvůli plovoucímu popisku sedí níž než uprostřed. */
.sel-ico{position:absolute;right:15px;top:50%;width:11px;height:11px;pointer-events:none;
  stroke:var(--dim);stroke-width:1.8;fill:none;
  transform:translateY(-50%);transition:transform .3s var(--ease)}
.sel select:open + .sel-ico{transform:translateY(-50%) rotate(180deg)}
@supports (appearance:base-select){
  .sel select,.sel select::picker(select){appearance:base-select}
  .sel select::picker-icon{display:none}
  .sel select::picker(select){margin-top:7px;padding:6px;
    background:var(--bark);border:1px solid var(--line);border-radius:9px;
    box-shadow:0 26px 54px -22px rgba(0,0,0,.85)}
  .sel select option{gap:12px;padding:11px 12px;border-radius:6px;background:transparent;
    font-size:14.5px;color:var(--paper-2);
    transition:background .18s var(--ease),color .18s var(--ease)}
  .sel select option:hover,.sel select option:focus-visible{outline:none;
    background:rgba(240,235,225,.07);color:var(--paper)}
  .sel select option:checked{color:var(--ember-lt)}
  .sel select option::checkmark{display:none}
  .sel select option:checked::after{content:"";flex:0 0 auto;margin-left:auto;
    width:6px;height:6px;border-radius:50%;background:var(--ember)}
}

/* Karta sama je ten poukaz. Vnořený obdélník uvnitř obdélníku kartu
   zbytečně natahoval, takže fotka je pozadím celé karty a obsah leží
   na ní. Rozměrem se tím vrátila tam, kde byla původně. */
.vouch{position:relative;overflow:hidden;border-radius:10px;
  border:1px solid rgba(201,122,70,.32);margin-top:clamp(20px,2.6vh,30px)}
.vouch > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.42) saturate(1.05)}
.vouch::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(8,11,8,.5),rgba(8,11,8,.82))}
.vouch-in{position:relative;z-index:2;padding:clamp(17px,1.9vw,22px)}
.vouch h4{margin-bottom:7px}
.vouch p{font-size:14px;line-height:1.55;color:var(--paper-2);max-width:none}
/* Přerušovaná linka je jediná narážka na to, že jde o útržek. */
.vouch-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:clamp(14px,2vh,18px);padding-top:clamp(13px,1.8vh,16px);
  border-top:1px dashed rgba(240,235,225,.3)}
.vouch-amt{font-size:12.5px;color:var(--dim)}
.vouch-amt b{font-family:var(--display);font-weight:300;font-size:17px;color:var(--paper)}
.vouch .btn{padding:11px 20px;font-size:13px}

/* ==========================================================
   PATIČKA
   ========================================================== */
.foot{background:rgba(15,20,14,.72);border-top:1px solid var(--line-s);
  padding-block:clamp(56px,8vh,110px) 28px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,54px)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.foot h5{font-size:13px;font-weight:500;margin-bottom:16px}
.foot li{list-style:none;margin-bottom:10px;font-size:15px;color:var(--paper-2)}
.foot li a:hover{color:var(--ember-lt)}
.foot .blurb{font-size:15px;color:var(--paper-2);max-width:34ch}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(34px,5vh,64px);padding-top:22px;border-top:1px solid var(--line-s);
  font-size:12.5px;color:var(--dim)}
/* Právní odkazy vedle sebe s mezerou, ne oddělené prostředníkem. */
.flegal{display:flex;gap:18px;flex-wrap:wrap}
.flegal a:hover{color:var(--ember-lt)}

/* Povinné údaje o provozovateli (§ 435 občanského zákoníku), drobně pod
   popisem GlamLife v prvním sloupci patičky (uživatel 18. 9. 2026, dřív
   pod právními odkazy). Na stránce Hrubé Skály dva řádky. */
.fident{margin-top:14px;font-size:12px;line-height:1.6;color:var(--dim);max-width:40ch}
.fident p + p{margin-top:4px}

/* sticky lišta */
/* O kousek širší, než by chtěl samotný obsah: větší mezera mezi textem
   a tlačítkem a víc vzduchu po stranách. Žádná minimální šířka. */
.sticky{position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);z-index:1090;
  display:flex;align-items:center;gap:clamp(34px,3.4vw,58px);background:rgba(15,20,14,.42);
  backdrop-filter:blur(24px) saturate(1.3) brightness(.74);
  border:1px solid var(--line);border-radius:100px;
  padding:9px 12px 9px 34px;visibility:hidden;
  transition:transform .7s var(--ease),visibility 0s .7s;max-width:calc(100vw - 28px);
  box-shadow:0 22px 60px -26px rgba(0,0,0,.85)}
/* Skrytá lišta stála přes transform mimo obraz, ale odkazy a tlačítko
   uvnitř zůstaly v pořadí Tab a pro čtečku existovaly, i když nebyly
   vidět (WCAG 2.4.3, 4.1.2). visibility:hidden ji odtamtud vyřadí, delay
   .7s ale nechá, dokud doběhne skrývací transform, ať mezitím nezmizí
   ještě viditelná lišta pod rukama. Při show naskočí bez zpoždění. */
.sticky.show{transform:translate(-50%,0);visibility:visible;transition-delay:0s}
/* Hlavní řádek je popis, cena pod ním jako doplněk. */
.sb-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-main{font-size:14px;font-weight:500;color:var(--paper);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sb-price{font-size:11.5px;color:var(--dim);white-space:nowrap}
.sb-price b{font-weight:500;color:var(--paper-2)}
/* Na mobilu jde lišta přes celou šířku, ale zůstává plně zakulacená jako
   hlavička. Text si bere zbytek místa, tlačítko sedí u pravé hrany. */
@media(max-width:620px){
  .sticky{left:14px;right:14px;transform:translateY(150%);max-width:none;
    border-radius:100px;padding:8px 8px 8px 22px;gap:14px;justify-content:space-between}
  .sticky.show{transform:translateY(0)}
  .sticky .sb-txt{flex:1 1 auto}
  .sticky .btn{flex:0 0 auto;margin-left:auto;padding:12px 18px;font-size:12.5px}
}

/* ==========================================================
   VÝBĚR GLAMPINGU — modál pod hlavními tlačítky
   ========================================================== */
.picker{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:var(--gut);background:rgba(6,9,6,.84);backdrop-filter:blur(20px) saturate(1.1);
  opacity:0;transition:opacity .35s var(--ease)}
.picker[hidden]{display:none}
.picker.open{opacity:1}
.picker-box{width:100%;max-width:1120px;max-height:88svh;overflow-y:auto}
.picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  margin-bottom:clamp(20px,3vh,32px)}
.picker-head h2{max-width:14ch;margin-bottom:10px}
.picker-sub{font-size:14.5px;color:var(--dim);max-width:42ch}
.pk-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--paper);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.pk-close:hover{border-color:var(--ember);transform:rotate(90deg)}
.pk-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}

/* Volbu nesou dlaždice s fotkou, ne řádky seznamu. Modál tak mluví
   stejným jazykem jako film: obraz napřed, text až na něm. */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,15px)}
@media(max-width:900px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pk-grid{grid-template-columns:1fr}}
.pk{position:relative;display:block;overflow:hidden;border-radius:5px;aspect-ratio:3/4;
  background:var(--bark);border:1px solid var(--line-s);
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s),
    border-color .4s var(--ease)}
.picker.open .pk{opacity:1;transform:none}
.pk:nth-child(1){--d:.06s}.pk:nth-child(2){--d:.13s}
.pk:nth-child(3){--d:.2s}.pk:nth-child(4){--d:.27s}
@media(max-width:520px){.pk{aspect-ratio:16/10}}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.76);transition:transform 1.2s var(--ease),filter .5s var(--ease)}
.pk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,11,8,.95) 4%,rgba(8,11,8,.36) 46%,rgba(8,11,8,0) 76%)}
.pk:hover,.pk:focus-visible{border-color:var(--ember)}
.pk:hover img,.pk:focus-visible img{transform:scale(1.05);filter:brightness(1)}
.pk-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(14px,1.6vw,20px)}
.pk-name{display:block;font-family:var(--display);font-weight:300;line-height:1.15;
  font-size:clamp(20px,1.7vw,26px);letter-spacing:-.015em;margin-bottom:6px}
.pk-label{position:absolute;top:0;left:0;z-index:2;margin:clamp(11px,1.2vw,15px);
  font-size:11px;padding:5px 11px}
.pk-price{display:block;font-size:13px;color:var(--paper-2)}
.pk-price b{color:var(--ember-lt);font-weight:500}
.picker-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-s);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim)}
/* Modál sám rozostřuje pozadí. Kdyby si tlačítko rozostřovalo znovu,
   vykreslí se jako tmavší obdélník. Uvnitř modálu tedy jen obrys. */
.picker .btn-ghost{background:transparent;backdrop-filter:none}
.picker .btn-ghost:hover{background:rgba(240,235,225,.08)}
body.lock{overflow:hidden}

/* jemné odkrytí sekcí */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}

/* Přeskočená úvodní sekvence (načtení doprostřed stránky): bez clony,
   bez zpoždění, prvky hera i hlavička jsou hned na místě. */
body.skip-intro .curtain{display:none}
body.skip-intro .hero-media img{transition:none;transform:scale(1)}
body.skip-intro .hero h1 .ln em{transition:none;transform:none}
body.skip-intro .h-rv{transition:none;opacity:1;transform:none}
body.skip-intro .hdr{transition:top .5s var(--ease);opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .curtain{display:none}
  .hero h1 .ln em{transform:none}
  .h-rv{opacity:1;transform:none}
  .hdr{opacity:1;transform:translate(-50%,0)}
  .rv{opacity:1;transform:none}
  /* Bez pohybu by ve stěně recenzí zůstala vidět jen horní část sloupců,
     proto se rozbalí na plnou výšku a kopie sad se schovají. */
  .revwall{height:auto;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .revset[aria-hidden]{display:none}
}

/* ==========================================================
   MOBIL
   Na telefonu nese navigaci tlačítko tří linek a menu přes celou
   obrazovku. Hlavička na to musí uvolnit místo, proto z ní mizí
   Rezervovat i přepínač jazyků: obojí je uvnitř menu.
   ========================================================== */
/* Tři linky v kruhu. Při otevření se krajní přeloží na křížek a prostřední
   zhasne, takže tlačítko zůstane přesně na svém místě. Menu proto nemá
   vlastní hlavičku ani vlastní zavírací tlačítko: obojí by po otevření
   poskočilo, protože by sedělo v jiné mřížce než plovoucí hlavička. */
.burger{display:none;width:44px;height:44px;flex:0 0 auto;padding:0;
  border:1px solid var(--line);border-radius:50%;background:rgba(240,235,225,.04);
  cursor:pointer;position:relative;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.burger span{position:absolute;left:calc(50% - 8.5px);top:calc(50% - .75px);
  width:17px;height:1.5px;border-radius:2px;background:var(--paper);
  transition:transform .42s var(--ease),opacity .2s var(--ease)}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px)}
/* Najetí jen s myší. Na dotyku zůstane :hover viset i po ťuknutí, takže
   by otevřený křížek zůstal s oranžovým okrajem. */
@media(hover:hover) and (pointer:fine){
  .burger:hover{border-color:var(--ember);background:rgba(201,122,70,.12)}
}
/* Otevřený křížek je vždy neutrální, i když nad ním zůstal kurzor. */
.burger.on,.burger.on:hover{border-color:var(--line);background:rgba(240,235,225,.04)}
/* Obrys po kliknutí myší pryč, pro ovládání klávesnicí zůstává. */
.burger:focus:not(:focus-visible){outline:none}
/* Otevřeno: krajní linky do kříže, prostřední pryč. */
.burger.on span:nth-child(1){transform:translateY(0) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.on span:nth-child(3){transform:translateY(0) rotate(-45deg)}

@media(max-width:1000px){
  /* Tlačítko i jazyky žijí dál v menu, tady by se do lišty nevešly. */
  .hright .btn,.hright .langs{display:none}
  .burger{display:block}
}

/* Menu přes celou obrazovku. Leží pod plovoucí hlavičkou (z-index 1100),
   takže hlavička zůstane viditelná a nic v ní se otevřením nepohne.
   Horní odsazení drží obsah menu pod ní. */
.mnav{position:fixed;inset:0;z-index:1095;display:flex;flex-direction:column;
  overflow-y:auto;
  /* Nahoře končí obsah přesně pod spodní hranou plovoucí hlavičky
     (top 18 px a výška 64 px, na telefonu 14 a 62). Odkazy pak mají
     auto okraje, takže sedí na středu mezi hlavičkou a spodní lištou
     menu, ne na středu celého displeje. */
  padding:82px var(--gut) clamp(28px,5vh,46px);
  background:rgba(6,9,6,.96);backdrop-filter:blur(20px) saturate(1.1);
  opacity:0;transition:opacity .35s var(--ease)}
@media(max-width:620px){.mnav{padding-top:76px}}
.mnav[hidden]{display:none}
.mnav.open{opacity:1}
/* Odkazy jsou hlavní obsah, proto serif a velký stupeň. Vodorovně jsou
   u pravé hrany pod tlačítkem, svisle na středu volné plochy. Vnitřní
   odsazení drží stejnou mezeru nahoře i dole, když se obsah nevejde. */
.mnav-links{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
  margin-block:auto;padding-block:clamp(18px,3vh,30px)}
.mnav-links > a{font-family:var(--display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(29px,8vw,42px);line-height:1.14;padding:6px 0;
  transition:color .3s var(--ease)}
.mnav-links > a:hover,.mnav-links > a:focus-visible{color:var(--ember-lt)}
/* Čtyři místa jsou podřízené odkazy pod Glampingy, ne dlaždice s fotkou.
   Linka stojí vpravo, na straně, ke které je menu zarovnané. */
.mnav-sub{display:flex;flex-direction:column;align-items:flex-end;
  margin:6px 0 12px;padding-right:16px;border-right:1px solid var(--line-s)}
.mnav-sub a{font-size:15.5px;color:var(--paper-2);padding:8px 0;
  transition:color .3s var(--ease)}
.mnav-sub a:hover,.mnav-sub a:focus-visible{color:var(--ember-lt)}
/* Spodní lišta menu: jazyky vlevo, telefon vpravo. Odsazení od odkazů
   nahoře dělají auto okraje odkazů, ne tahle lišta. */
.mnav-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(14px,2.4vh,22px);border-top:1px solid var(--line-s)}
/* Přepínač jazyků je v menu vidět vždycky, i pod 560 px. O stupeň větší
   než v hlavičce (11 px), ať se na něj dá pohodlně ťuknout, ale ne tolik,
   aby přebil odkazy nad sebou. */
.mnav-foot .langs{display:flex;font-size:12.5px;padding:2px}
.mnav-foot .langs a{padding:7px 13px}
.mnav-tel{font-size:14.5px;color:var(--paper-2);
  transition:color .3s var(--ease)}
.mnav-tel:hover{color:var(--ember-lt)}
@media(min-width:1001px){.mnav{display:none}}
@media(max-width:380px){
  .mnav-foot{flex-direction:column;align-items:flex-start;gap:14px}
}
/* Sklo přes sklo: hlavička stojí nad menu a rozostřovala by plochu, která
   je sama rozostřená. Dvě rozostření nad sebou vykreslí tmavší obdélník,
   proto při otevřeném menu hlavička přejde na plnou výplň. */
body.mnav-open .hdr{backdrop-filter:none;background:rgba(17,22,16,.92)}

/* ---------- hero na mobilu ----------
   Všechno na střed a titulek co největší. Velikost je odvozená od šířky
   okna, ne z clampu se spodní hranicí 44 px: ta by na úzkém displeji
   nechala řádek přetéct. Oba řádky mají zákaz zalomení, protože rozdělení
   vět je autorské („Dva dny, kdy tě / nikdo nenajde.") a přirozený zlom
   by z nadpisu udělal čtyři řádky. */
@media(max-width:620px){
  .hero-in{text-align:center}
  .hero h1{max-width:none;font-size:10.8vw;margin-bottom:24px}
  .hero h1 .ln{white-space:nowrap}
  .hero-bot{flex-direction:column;align-items:center;gap:26px}
  .hero-bot > div{width:100%}
  .hero-bot p{margin-inline:auto}
  .hero-act{justify-content:center;margin-top:22px}
  .proof{justify-content:center}
}

/* ==========================================================
   MOBILNÍ SLIDERY
   Víkend, vybavení i recenze se na telefonu listují do strany stejně:
   aktivní karta stojí na středu, sousední vykukují z obou stran a pod
   kolejnicí jsou šipky s puntíky (.kitnav). Šířka karty je společná.
   Odsazení kolejnice je spočítané tak, aby šla na střed i první a
   poslední karta. Procenta v paddingu se berou z rodiče, který je na
   mobilu široký jako okno, takže to sedí i s posuvníkem na desktopu.
   ========================================================== */
@media(max-width:900px){:root{--rail-card:min(80vw,440px)}}

/* Víkend: devět kapitol pod sebou byl na telefonu tunel, vedle sebe je
   to listování. Karta je stavěná jako u vybavení: fotka nahoře, text pod
   ní na pozadí sekce. Text přes fotku byl na malém displeji těžký a štítky
   na něm špatně čitelné. Lišta ani parallax se sem nepletou, obojí se pod
   1001 px vypíná samo (hudOn() ve skriptu). */
@media(max-width:820px){
  .beats{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;position:relative;
    scroll-snap-type:x mandatory;padding-inline:calc((100% - var(--rail-card)) / 2);
    scrollbar-width:none;-ms-overflow-style:none}
  .beats::-webkit-scrollbar{display:none}
  .beat{flex:0 0 var(--rail-card);min-height:0;display:block;background:none;
    border:0;scroll-snap-align:center}
  .beat::after{display:none}
  .beat-img{position:relative;inset:auto;aspect-ratio:4/3;border-radius:10px;background:var(--bark)}
  .beat-img img{height:100%;transform:none!important}
  .beat-txt{padding:16px 2px 0;max-width:none}
  .beat-when{margin-bottom:8px}
  .beat-txt h3{max-width:none;margin-bottom:10px}
  .beat-txt p{font-size:14.5px;line-height:1.55}
  /* Štítky vždy na jeden řádek a jen celé. Řádek má pevnou výšku jednoho
     štítku, co se nevejde, zalomí se do druhého řádku a ten je ořízlý.
     Posun do strany uvnitř karty dřív uřízl poslední štítek v půlce.
     Výška 28 px = řádek 14 + odsazení 12 + rámeček 2. */
  .beat-tags{flex-wrap:wrap;align-content:flex-start;height:28px;row-gap:28px;
    overflow:hidden;margin-top:14px}
  .beat-tags span{font-size:10.5px;line-height:14px;padding:6px 11px;white-space:nowrap}

  /* Vybavení: stejná karta na střed místo dvou sloupců zarovnaných doleva. */
  .kitrail{scroll-snap-type:x mandatory;scroll-padding-inline:0;
    padding-inline:calc((100% - var(--rail-card)) / 2)}
  .kitcard{flex:0 0 var(--rail-card);scroll-snap-align:center}
}

/* Recenze: místo svislé stěny kolejnice se všemi recenzemi, co stěna má,
   ze všech tří sloupců. Sloupce i sady se rozpustí přes display:contents,
   takže karty jsou přímo položky kolejnice. Kopie sad pro nekonečnou
   smyčku zůstávají schované. Recenze, které stěna opakuje kvůli doplnění
   sloupce, skript označí .is-dup a na mobilu se neukážou. Kolejnice
   přetéká přes okraje .wrap až k hraně okna. */
/* Při víc než devíti položkách jsou puntíky menší a hustší, jinak by se
   dvacet recenzí i se šipkami nevešlo na úzký telefon. Třídu dává skript. */
.kitdots.dense{margin-inline:-2px}
.kitdots.dense .kitdot{--dot:5px;--gap:4px}
.kitdots.dense .kitdot.on{width:calc(16px + var(--gap))}
@media(max-width:900px){
  .revwall{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;position:relative;
    scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gut));
    padding-inline:calc((100% + 2 * var(--gut) - var(--rail-card)) / 2);
    scrollbar-width:none;-ms-overflow-style:none}
  .revwall::-webkit-scrollbar{display:none}
  .revwall > .revcol,.revwall > .revcol > .revset:not([aria-hidden]){display:contents}
  .revwall .rev.is-dup{display:none}
  /* Na kolejnici jen výběr podobně dlouhých recenzí (railPick v reviews.mjs). */
  .revwall .rev[data-jen-stena]{display:none}
  .revwall .rev{flex:0 0 var(--rail-card);scroll-snap-align:center}
  /* Skóre 4,9 s hvězdami a průměrem se na mobilu schová, zůstává nadpis
     a karty. Mřížka pak má jen kolejnici a navigaci pod ní, mezeru mezi
     nimi dělá sama navigace. */
  .revscore{display:none}
  .revgrid{gap:0}
}
/* Na telefonu bere každá recenze celou šířku obsahu. Kolejnice má po
   stranách stejný okraj jako zbytek stránky a mezera mezi kartami je
   stejně velká, takže soused nevykukuje a na obrazovce je vždy jedna. */
@media(max-width:620px){
  .revwall{padding-inline:var(--gut);gap:var(--gut)}
  .revwall .rev{flex-basis:100%}
}
/* Navigace pod kolejnicí je jinde schovaná atributem hidden, skript ji
   ukáže jen tam, kde se listuje. */
.railnav[hidden]{display:none}

/* ---------- mapa ----------
   Poznámka patří pod mapu, ne pod celou sekci: na mobilu je pod mapou
   seznam míst a poznámka by od ní odjela. Mapa je na telefonu nižší,
   hned pod ní je seznam se stejnými místy. */
.mapcol{display:flex;flex-direction:column;min-width:0}
.mapcol .mapbox{flex:1 1 auto}
.mapcol .mapnote{margin-top:10px}
/* Na desktopu je mapa stejně vysoká jako karty vpravo a poznámka visí pod
   ní v dalším řádku mřížky. Sloupec se proto rozpustí (display:contents),
   jinak by s kartami končila poznámka, ne mapa. */
@media(min-width:961px){
  .mapgrid{row-gap:10px}
  .mapcol{display:contents}
  .mapcol .mapbox{grid-column:1;grid-row:1}
  .mapgrid > .maplist{grid-column:2;grid-row:1}
  .mapcol .mapnote{grid-column:1;grid-row:2;margin-top:0}
}
@media(max-width:620px){#map{min-height:clamp(230px,34vh,290px)}}

/* ---------- kontakt na mobilu ----------
   Na desktopu je formulář vpravo, kontakty s voucherem vlevo. Když se
   sloupce složí pod sebe, jde formulář první: kdo sjel až sem, chce se
   zeptat. Kontakty a voucher jsou jeden blok a pořadí mezi nimi zůstává. */
@media(max-width:900px){.bgrid .form,.bgrid > .fform,.bgrid > .fdone{order:-1}}

/* ---------- chata v záběru ----------
   Kde na venkovní fotce stojí chata, v procentech šířky a výšky fotky.
   Stejná fotka se ořezává pokaždé jinak (karta ve výběru, hero pobytu na
   mobilu, karta místa, náhled u mapy, lístek voucheru) a object-position
   drží chatu v záběru všude. Hodnoty jsou odečtené z fotek. Kdo přidá
   novou venkovní fotku, přidá sem i její bod, jinak se na telefonu ořízne
   na střed a chata z ní může zmizet (u Českého ráje zmizela celá). */
img[src*="Hruba-skala-GlampingClarushie-85-"]{object-position:66% 58%}
img[src*="Hruba-skala-GlampingClarushie-10-2-"]{object-position:42% 57%}
img[src*="Hruba-skala-GlampingClarushie-2-2-"]{object-position:57% 51%}
img[src*="Glamlife-jaro-clarushie-48-"]{object-position:76% 55%}
img[src*="DSC01918-36-"]{object-position:22% 53%}
img[src*="Glamlife-Cvikov-Clarushie-70-"]{object-position:58% 44%}
img[src*="Glamlife-Cvikov-leto-"]{object-position:46% 60%}
img[src*="Glamlife-Cvikov-Clarushie-109-"]{object-position:48% 66%}
img[src*="zandov-1-"]{object-position:44% 47%}

/* Hero homepage na telefonu: fotka je na šířku, obrazovka na výšku, a
   osvícené okno chaty by skončilo v polovině výšky, tedy za textem hera,
   který na mobilu zabírá spodních zhruba 55 %. Fotka se proto přiblíží od
   spodní hrany, okno vyjede do horní třetiny nad text (51 % → 30 %)
   a vodorovně se drží na něm. Úvodní dojezd z většího měřítka zůstává,
   jen končí na 1,43 místo 1. */
@media(max-width:620px){
  .hero-media img{transform-origin:57% 100%;transform:scale(1.6)}
  body.ready .hero-media img,body.skip-intro .hero-media img{transform:scale(1.43)}
}

/* Názvy glampingů vždy na jeden řádek. „Lužické hory" a „České
   středohoří" se na úzkém displeji lámaly do dvou řádků a vypadalo to
   zvláštně. Když se vedle názvu v kartě místa nevejde cena, spadne pod
   něj cena, ne půlka názvu. */
.place-head{flex-wrap:wrap;row-gap:4px}
.place-head h3,.pk-name,.mi-nm{white-space:nowrap}

/* Sekce se stejným rytmem jako na homepage. */
.sec{padding-block:clamp(70px,11vh,150px)}
.more.four .pk-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.more.four .pk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.more.four .pk-grid{grid-template-columns:1fr}}

/* ==========================================================
   PODSTRÁNKY — komponenty navíc k CSS z homepage
   Tokeny, písma, tlačítka, hlavička, hero, formulář, modál, lišta
   a patička jsou převzaté z varianty A beze změny (viz build.mjs).
   ========================================================== */

/* ---------- hero podstránky ----------
   Nižší než na homepage, ať je hned pod ním vidět, že stránka pokračuje. */
.hero.hero-page{height:88svh;min-height:560px}
.hero-page h1{max-width:18ch}
.back{display:inline-block;margin-bottom:22px;font-size:13px;color:var(--paper-2);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(240,235,225,.35);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.back:hover{color:var(--paper);text-decoration-color:var(--ember)}
.hero-price{display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 14px rgba(8,11,8,.75)}
.hero-price b{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.4vw,34px);
  line-height:1;letter-spacing:-.015em}
.hero-price span{font-size:12.5px;color:var(--dim)}

/* ---------- fakta ----------
   Šest čísel v jednom pásu. Hodnota je velká v serifu, popis malý pod ní.
   Žádné labely nad nadpisy, tohle jsou data, ne nadpisy. */
.facts{display:grid;grid-template-columns:repeat(6,1fr);
  border-block:1px solid var(--line-s)}
.fact{padding:clamp(22px,3.2vh,36px) 18px clamp(22px,3.2vh,36px) 0;
  border-right:1px solid var(--line-s)}
.fact:last-child{border-right:none}
.fact b{display:block;font-family:var(--display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(26px,2.6vw,40px);line-height:1;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.fact span{font-size:12.5px;color:var(--dim)}
@media(max-width:1000px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3n){border-right:none}
  .fact:nth-child(n+4){border-top:1px solid var(--line-s)}
}
@media(max-width:560px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3n){border-right:1px solid var(--line-s)}
  .fact:nth-child(2n){border-right:none}
  .fact:nth-child(n+3){border-top:1px solid var(--line-s)}
  .fact:nth-child(n+4){border-top:1px solid var(--line-s)}
}

/* ---------- to hlavní ----------
   Jeden záběr přes celou šířku s pomalým panem a zoomem. Homepage tenhle
   pohyb už nemá (kapitoly víkendu mají jen parallax jako prototyp),
   proto jsou keyframes tady. */
@keyframes drift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(var(--dz,1.13)) translate3d(var(--dx,-2%),var(--dy,-2%),0)}
}
.pano{position:relative;height:clamp(440px,74vh,780px);overflow:hidden;
  margin-top:clamp(70px,11vh,150px)}
.pano img{width:100%;height:100%;object-fit:cover;
  animation:drift 28s var(--ease) infinite alternate;--dx:-1.8%;--dy:-1.4%;--dz:1.12}
.pano::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,11,8,.9) 0%,rgba(8,11,8,.42) 40%,rgba(8,11,8,.06) 76%)}
.pano-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(40px,7vh,80px);z-index:2;
  max-width:660px}
.pano-cap h2{margin-bottom:14px;max-width:14ch}
.pano-cap p{color:var(--paper-2);font-size:clamp(15.5px,1.15vw,18px)}
@media(prefers-reduced-motion:reduce){.pano img{animation:none}}

/* ---------- dvojice fotka a text ----------
   Střídá se strana, ať stránka nejede v jednom rytmu. Text sedí
   na střed výšky fotky. */
.splits{padding-block:clamp(40px,7vh,90px) 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,96px);align-items:center;
  padding-block:clamp(36px,6vh,80px)}
.split-img{overflow:hidden;border-radius:5px;background:var(--bark);aspect-ratio:4/5}
.split-img.wide{aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split:hover .split-img img{transform:scale(1.03)}
.split.flip .split-img{order:2}
/* Nadpis dvojice je h3, nad celou sekcí stojí h2 „Co tě čeká." */
.split-txt h3{max-width:none;margin-bottom:16px}
.split-txt p{color:var(--paper-2);font-size:clamp(15.5px,1.15vw,18px);max-width:52ch}
.split-txt p + p{margin-top:14px}
.split-txt p a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(240,235,225,.4);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.split-txt p a:hover{color:var(--ember-lt);text-decoration-color:var(--ember)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tags span{font-size:12px;color:var(--paper);border:1px solid rgba(240,235,225,.22);
  border-radius:100px;padding:7px 14px;background:rgba(8,11,8,.62)}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:22px}
  .split.flip .split-img{order:0}
  .split-img{aspect-ratio:4/3}
}

/* ---------- galerie ----------
   Mřížka tří sloupců, fotky na výšku zaberou dva řádky. `dense` nechá
   prohlížeč zaplnit díry, takže spodní hrana vyjde rovná. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(170px,24vw,300px);grid-auto-flow:dense;
  gap:clamp(10px,1.2vw,16px)}
.gal figure{overflow:hidden;border-radius:4px;background:var(--bark);margin:0}
.gal figure.tall{grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
@media(max-width:700px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,260px)}
}

/* ---------- okolí ----------
   Řádky: vzdálenost velká v serifu, vedle název a popis. */
.around{border-top:1px solid var(--line-s)}
.ar{display:grid;grid-template-columns:minmax(110px,.32fr) 1fr;gap:20px;align-items:baseline;
  padding:clamp(16px,2.2vh,22px) 0;border-bottom:1px solid var(--line-s)}
.ar b{font-family:var(--display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(22px,2vw,30px);line-height:1.1;font-variant-numeric:tabular-nums}
.ar .n{display:block;font-size:16.5px;margin-bottom:3px}
.ar .s{display:block;font-size:13.5px;color:var(--dim)}

/* ---------- rezervace ----------
   Vlevo ceník jako řádky, vpravo karta s tlačítkem. Kalendář tu není,
   termín a dostupnost řeší rezervační systém. */
.pricelist{border-top:1px solid var(--line-s)}
.pr{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line-s)}
.pr .k{font-size:14.5px;color:var(--paper-2)}
.pr .v{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.5vw,22px);
  letter-spacing:-.012em;white-space:nowrap}
.incl{margin-top:clamp(26px,4vh,40px)}
.incl h4{margin-bottom:12px}
.incl ul{list-style:none;display:grid;gap:9px}
.incl li{position:relative;padding-left:20px;font-size:14.5px;color:var(--paper-2)}
.incl li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;
  background:var(--ember)}
/* ==========================================================
   STRÁNKA GLAMPINGU — hlavička, bento galerie, dva sloupce
   Stejný půdorys jako detail na Airbnb nebo Kayaku: název a cena,
   pod tím mřížka fotek, pod ní obsah vlevo a přilepená rezervační
   karta vpravo. Žádné hero přes celou obrazovku.
   ========================================================== */
/* ---------- načtení stránky glampingu ----------
   Stejná sekvence jako v heru homepage: titulek vyjede zpod linky, místo,
   hodnocení a cena se rozsvítí za ním (.h-rv s d2 a d3 z homepage) a dlaždice
   galerie naskočí jedna po druhé (d5 až d9). Každý prvek si nese opacity
   sám, společný obal by založil backdrop root a rozbil sklo hlavičky. */
.ptitle h1 .ln{display:block;overflow:hidden;padding:.1em 0 .28em;margin:-.1em 0 -.28em}
.ptitle h1 .ln em{display:block;font-style:normal;transform:translateY(142%);
  transition:transform 1.15s var(--ease) .15s}
body.ready .ptitle h1 .ln em{transform:none}
.h-rv.d5{--d:.55s}.h-rv.d6{--d:.65s}.h-rv.d7{--d:.75s}.h-rv.d8{--d:.85s}.h-rv.d9{--d:.95s}
/* Pořadí na stránce glampingu: fotky první, text mezi posledními. Nejdřív
   dlaždice galerie (na mobilu hlavní fotka hera), pak hlavička webu, název,
   štítky, cena a počítadlo. Dřív šel text první a fotky až po něm, šéf
   chtěl obráceně: text přijíždí na fotku, ne na prázdnou plochu.
   Perex a sekce pod herem pouští site.js až po počítadle. Celé to doběhne
   zhruba za 1,3 s. Platí na všech šířkách. */
body.page-glamping .hdr{transition:top .5s var(--ease),opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s}
body.page-glamping .bento .d5{--d:0s}
body.page-glamping .bento .d6{--d:.06s}
body.page-glamping .bento .d7{--d:.12s}
body.page-glamping .bento .d8{--d:.18s}
body.page-glamping .bento .d9{--d:.24s}
body.page-glamping .ptitle h1 .ln em{transition-duration:.9s;transition-delay:.35s}
body.page-glamping .ptitle-labels{--d:.5s}
body.page-glamping .ptitle-price{--d:.56s}
body.page-glamping .phero-count{--d:.62s}
/* Přechody úvodu jsou na podstránkách kratší než na homepage (1 s). Bez
   clony a filmového otevření by sekvence působila pomalu. Přechody barev
   pro najetí zůstávají, jak jsou. */
body:is(.page-glamping,.page-voucher):not(.skip-intro) .h-rv{
  transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s),
    background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
/* Název glampingu vždy na jeden řádek. */
body.page-glamping .ptitle h1{white-space:nowrap}
.bento .h-rv{transform:translateY(14px) scale(.985)}
body.ready .bento .h-rv{transform:none}
body.skip-intro .ptitle h1 .ln em{transition:none;transform:none}
body.skip-intro .bento .h-rv{transition:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ptitle h1 .ln em{transform:none}
  .bento .h-rv{opacity:1;transform:none}
}

/* Vlevo název, pod ním místo a hodnocení jako jeden řádek s hvězdami.
   Vpravo stojí cena sama: velké číslo a malý popisek pod ním. */
.ptitle{padding-top:clamp(110px,16vh,150px);margin-bottom:clamp(18px,2.6vh,28px)}
.ptitle-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.ptitle h1{font-size:clamp(38px,5.2vw,74px);line-height:1.04;margin-bottom:10px}
/* Pod názvem labely jako na fotkách: hodnocení s hvězdami a vzdálenost
   z Prahy. Vpravo stojí cena sama. */
.ptitle-labels{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ptitle-labels > span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--paper);
  border:1px solid rgba(240,235,225,.22);border-radius:100px;padding:7px 14px;background:rgba(8,11,8,.62)}
.ptitle-labels .stars{display:flex;gap:2px}
.ptitle-labels .stars svg{width:10px;height:10px;fill:var(--ember-lt)}
.ptitle-price{text-align:right}
.ptitle-price > b{display:block;font-family:var(--display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(28px,2.6vw,38px);line-height:1}
/* „od" je malé a sedí níž, číslo zůstává velké. */
.ptitle-price i{font-style:normal;font-size:.45em;color:var(--dim);margin-right:2px;vertical-align:0}
.ptitle-price small{display:block;font-size:12.5px;color:var(--dim);margin-top:6px}
@media(max-width:700px){.ptitle-price{text-align:left}}

/* ---------- rezervační widget GlampSys v pravém sloupci ----------
   Stejný iframe jako na starém webu (glampsys.cz/booking/<slug>), jen
   s našimi barvami přes parametry. Widget si drží světlý podklad, na
   tmavé stránce stojí jako papírový lístek. Výšku mu po načtení dorovná
   zpráva glampsys:height (viz site.js), do té doby drží místo 520 px. */
/* Cíl odkazů Rezervovat. Odsazení kotvy pod plovoucí hlavičku drží
   scroll-padding-top na html (home.css). */
.gsys{position:sticky;top:clamp(100px,14vh,130px)}
.gsys-frame{overflow:hidden;border-radius:14px;border:1px solid var(--line);
  background:var(--paper);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.gsys-frame iframe{display:block;width:100%;height:520px;border:0}
.gsys-note{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.55;max-width:none}
/* Otázka pod rezervací i pod voucherem: na střed a vždy na dva řádky,
   první je otázka, druhý kontakt. Třída .nl zlamuje z homepage jen nad
   900 px, tady platí na všech šířkách. */
.gsys-ask{text-align:center}
.gsys-ask .nl::before{content:"\A";white-space:pre}
.gsys-note a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(240,235,225,.4)}
.gsys-note a:hover{color:var(--ember-lt)}

/* ---------- bento galerie ----------
   Jedna velká fotka vlevo, čtyři menší vpravo. V pravém dolním rohu
   tlačítko „Všechny fotky" s přesným počtem. Každá dlaždice otevírá lightbox. */
.bento{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,12px);
  height:clamp(380px,58vh,640px)}
/* Zaoblení má každá dlaždice sama, ne jen rohy celé mřížky. */
.bento button{position:relative;display:block;overflow:hidden;background:var(--bark);
  padding:0;border:0;cursor:pointer;width:100%;height:100%;border-radius:6px}
.bento button:first-child{grid-row:span 2}
.bento img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bento button:hover img{transform:scale(1.04)}
.bento button:focus-visible{outline:2px solid var(--ember-lt);outline-offset:-3px}
/* Tlačítko v pravém dolním rohu mřížky, na poslední dlaždici. Klik obslouží
   dlaždice sama, štítek jen ukazuje, co se stane. */
.bento-all{position:absolute;right:14px;bottom:14px;z-index:2;padding:10px 16px;font-size:12.5px;
  background:rgba(8,11,8,.62);border:1px solid rgba(240,235,225,.22);border-radius:100px;
  color:var(--paper);display:inline-flex;align-items:center;gap:8px;pointer-events:none}
.bento-all svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ==========================================================
   HERO POBYTU NA MOBILU
   Na desktopu jsou název s cenou a galerie dvě patra pod sebou. Na
   telefonu je z toho jeden záběr přes celou obrazovku: fotky jdou přes
   celou šířku i výšku a listují se prstem, název, štítky a cena leží
   dole na cloně přes fotku, jako hero na homepage. Počítadlo vedle ceny
   ukazuje pozici a otevře galerii na právě zobrazené fotce. Inspirace
   Vrbo, Expedia a Peerspace na Mobbinu. Obal .phero má jen stránka
   glampingu, voucher s vlastní .ptitle se tohle netýká.
   ========================================================== */
/* Galerie má v HTML všechny fotky kvůli listování na mobilu. Desktopová
   mřížka ukazuje prvních pět, zbytek je v lightboxu. */
.bento button:nth-child(n+6){display:none}
.phero-count{display:none}
@media(max-width:820px){
  /* Celá výška okna. svh je výška bez lišt prohlížeče: s holým 100vh by
     v mobilním Safari spodek hera s cenou zajel pod lištu. 100vh zůstává
     jako pojistka pro starší prohlížeče. Spodní hranice drží místo pro
     text na telefonu otočeném na šířku. */
  .phero{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:var(--bark)}
  .phero #galerie{position:absolute;inset:0;max-width:none;padding:0}
  .phero .bento{display:flex;height:100%;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .phero .bento::-webkit-scrollbar{display:none}
  /* ID ve výběru přebije mobilní mřížku níž, která třetí a čtvrtou fotku
     schovává, i desktopové pravidlo pro fotky od šesté. */
  .phero #galerie .bento button{display:block;flex:0 0 100%;height:100%;
    border-radius:0;scroll-snap-align:start}
  .phero .bento-all{display:none}
  /* Clona dole pod textem a slabší nahoře pod plovoucí hlavičkou. */
  /* Clona sahá jen tam, kde je text (spodních zhruba 30 %), a nad ním
     rychle mizí. Chata na hlavní fotce stojí mezi 44 a 58 % výšky
     a pod delší clonou byla zbytečně ztmavená. */
  .phero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to top,rgba(8,11,8,.94) 4%,rgba(8,11,8,.72) 24%,rgba(8,11,8,0) 46%),
      linear-gradient(to bottom,rgba(8,11,8,.45),rgba(8,11,8,0) 22%)}
  /* Text leží na fotce, ale tah prstem propouští na fotky pod sebou.
     Kliknout jde jen na počítadlo. */
  .phero .ptitle{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
    padding:0 0 clamp(18px,3vh,26px);pointer-events:none}
  .phero .ptitle-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "price count";align-items:end;gap:14px 16px}
  .phero .ptitle-row > div:first-child{grid-area:name}
  /* Velikost podle nejdelšího názvu, „České středohoří", aby se vešel
     na jeden řádek i na telefonu širokém 360 px. Dřív 11vw a lámal se. */
  .phero .ptitle h1{font-size:min(9.4vw,58px);margin-bottom:12px}
  .phero .ptitle-price{grid-area:price;text-align:left}
  .phero .phero-count{grid-area:count;display:inline-flex;align-items:center;gap:8px;
    pointer-events:auto;cursor:pointer;padding:9px 14px;font-size:12.5px;color:var(--paper);
    background:rgba(8,11,8,.62);border:1px solid rgba(240,235,225,.22);border-radius:100px;
    font-variant-numeric:tabular-nums}
  .phero-count svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}
}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:minmax(0,1.4fr) minmax(0,1fr);
    height:clamp(320px,56vh,520px)}
  .bento button:first-child{grid-column:span 2;grid-row:auto}
  .bento button:nth-child(3),.bento button:nth-child(4){display:none}
}

/* ---------- lightbox ----------
   Šipky a počítadlo jsou vždy dole na střed obrazovky (lišta .lb-nav),
   nezávisle na tom, jestli je fotka na výšku nebo na šířku. */
.lb{position:fixed;inset:0;z-index:1300;background:rgba(6,9,6,.94);display:flex;
  align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-img{max-width:min(94vw,1500px);max-height:calc(100vh - 160px);max-height:calc(100svh - 160px);
  object-fit:contain;border-radius:4px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transition:opacity .25s var(--ease)}
.lb-img.swap{opacity:0}
.lb-cap{display:none}
.lb-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--paper);
  background:rgba(15,20,14,.6);transition:border-color .3s var(--ease),background .3s var(--ease)}
.lb-btn:hover{border-color:var(--ember);background:var(--bark)}
.lb-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}
.lb-close{position:absolute;top:20px;right:20px}
.lb-close:hover svg{transform:rotate(90deg)}
.lb-close svg{transition:transform .35s var(--ease)}
/* spodní lišta: předchozí, počítadlo, další, vždy na střed dole */
.lb-nav{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(14px,2.5vw,26px)}
.lb-cnt{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:5ch;text-align:center}
@media(max-width:820px){
  .lb-btn{width:44px;height:44px}
  .lb-img{max-width:calc(100vw - 24px)}
  .lb-close{top:14px;right:14px}
}

/* ---------- dva sloupce pod galerií ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,32vw,440px);
  gap:clamp(32px,5vw,90px);align-items:start;padding-block:clamp(36px,6vh,64px) clamp(60px,9vh,120px)}
@media(max-width:1000px){.detail{grid-template-columns:1fr}}
/* Když se sloupce složí pod sebe, jde rezervační okno hned za perex:
   kdo si přečte, co to je, má hned kde rezervovat. Levý sloupec se
   rozpustí přes display:contents, jeho bloky jsou pak přímo položky
   mřížky a pořadí určuje order. Přilepení okna tu nemá smysl, pod ním
   pokračuje obsah a okno by jel přes něj. Mezery drží okraje bloků, ne
   gap, jinak by se mezi „Co tu máš" a „Co je v ceně" sečetly. */
@media(max-width:1000px){
  .detail{row-gap:0}
  .detail > div:first-child{display:contents}
  .detail-lede{order:1}
  .detail > .gsys{order:2;position:static;margin-top:clamp(26px,4vh,40px)}
  .detail .dblock{order:3}
}
.detail-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--paper-2);max-width:58ch}
.dblock{margin-top:clamp(34px,5vh,56px);padding-top:clamp(26px,3.6vh,36px);border-top:1px solid var(--line-s)}
.dblock h3{margin-bottom:clamp(18px,2.6vh,26px)}

/* Výbava: kreslené ikony, název a jeden řádek. Dva sloupce. */
.hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vh,24px) clamp(20px,3vw,40px)}
@media(max-width:560px){.hl{grid-template-columns:1fr}}
/* Jen položka, ne obal textu uvnitř ní. Bez potomkovského zápisu dostal
   flex i vnitřní div a název s popisem se postavily vedle sebe. */
.hl > div{display:flex;gap:14px;align-items:flex-start}
.hl svg{flex:0 0 auto;width:26px;height:26px;stroke:var(--ember-lt);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-top:-1px}
.hl b{display:block;font-weight:500;font-size:15px;margin-bottom:3px}
.hl span{display:block;font-size:13.5px;color:var(--dim);line-height:1.5;margin-top:1px}
/* Varianta bez popisu pod názvem: jeden řádek, ikona na jeho ose. */
.hl-flat > div{align-items:center}
.hl-flat b{margin-bottom:0}

/* Co je v ceně: dva sloupce, každá položka s ikonou jako u výbavy. */
.incl ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vh,18px) clamp(20px,3vw,40px)}
@media(max-width:560px){.incl ul{grid-template-columns:1fr}}
.dblock .incl{margin-top:0}
.dblock .incl li{display:flex;align-items:center;gap:14px;padding-left:0;font-size:14.5px;color:var(--paper-2)}
.dblock .incl li::before{display:none}
.dblock .incl svg{flex:0 0 auto;width:24px;height:24px;stroke:var(--ember-lt);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- rezervační karta vpravo, přilepená ---------- */
.bcard{position:sticky;top:clamp(100px,14vh,130px);padding:clamp(20px,2vw,28px);
  border:1px solid var(--line);border-radius:14px;background:var(--ink-2)}
.bcard-price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.bcard-price b{font-family:var(--display);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(28px,2.4vw,36px);line-height:1}
.bcard-price span{font-size:13px;color:var(--dim)}
.bcard-rows{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-s);border-radius:9px;
  overflow:hidden;margin-bottom:14px}
.bcard-rows div{padding:11px 13px}
.bcard-rows div:first-child{border-right:1px solid var(--line-s)}
.bcard-rows small{display:block;font-size:11px;color:var(--dim);margin-bottom:3px;letter-spacing:.03em}
.bcard-rows b{font-weight:500;font-size:14px}
.bcard .btn{width:100%;text-align:center}
.bcard .btn + .btn{margin-top:8px}
.bcard-note{margin-top:16px;font-size:12.5px;color:var(--dim);line-height:1.55}
.bcard-note a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(240,235,225,.4)}
.bcard-note a:hover{color:var(--ember-lt)}
.bcard ul{list-style:none;display:grid;gap:8px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line-s)}
.bcard li{position:relative;padding-left:18px;font-size:13.5px;color:var(--paper-2)}
.bcard li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--ember)}
/* Na desktopu je karta přilepená, spodní lišta by ji duplikovala. */
/* Spodní lišta zůstává i na desktopu: nese název a cenu daného glampingu
   a vede na jeho widget, stejně jako Rezervovat v hlavičce. */

/* Příběhové dvojice mají vlastní nadpis sekce. */
.story-head{padding-top:clamp(60px,9vh,120px);border-top:1px solid var(--line-s)}

/* ---------- co je za plotem: mapa a místa ----------
   Jako „Where you'll be" na Airbnb: vlevo mapa se špendlíkem glampingu
   a okolních míst, vpravo seznam míst se vzdáleností. Najetí na řádek
   rozsvítí špendlík, klik mapu posune. Mapa je stejný Leaflet jako
   na homepage, styly špendlíků a ovládání jsou v CSS homepage. */
.aroundsec{padding-block:clamp(60px,9vh,120px);border-top:1px solid var(--line-s)}
.aroundgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,48px);align-items:stretch;margin-top:clamp(28px,4vh,44px)}
@media(max-width:900px){.aroundgrid{grid-template-columns:1fr}}
.gmapbox{display:flex;min-height:clamp(340px,46vh,520px);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--paper)}
.gmapbox .gmap{flex:1;width:100%;min-height:0;background:var(--paper)}
/* Špendlík glampingu je větší a plný, místa v okolí jen obrys. Obrys je
   v tmavší --ember, světlá --ember-lt na světlé mapě (Voyager) zaniká. */
.pin.home{width:17px;height:17px;box-shadow:0 0 0 2px var(--ink),0 0 0 8px rgba(201,122,70,.25)}
.pin.poi{background:rgba(240,235,225,.9);border:2px solid var(--ember);box-shadow:none}
.pin.poi.on{background:var(--ember);box-shadow:0 0 0 7px rgba(201,122,70,.28)}
/* Karty ze seznamu u mapy na homepage (.maplist, .mapitem), bez fotky.
   Vzdálenost sedí vpravo v serifu. Karta bez špendlíku nereaguje. */
.aroundgrid .mapitem{font:inherit;color:inherit;cursor:default}
.aroundgrid button.mapitem{cursor:pointer}
.aroundgrid div.mapitem:hover{border-color:var(--line-s);background:var(--ink-2)}
.aroundgrid .mi-pr{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.4vw,21px);
  letter-spacing:-.012em;color:var(--paper)}
.aroundnote{margin-top:16px;font-size:12px;color:var(--dim);max-width:none}

/* ---------- recenze na podstránce ----------
   Tři karty a skóre v hlavičce. Stěna s pohybem patří jen na homepage. */
.revline{display:flex;align-items:baseline;gap:clamp(16px,2vw,28px);flex-wrap:wrap;
  margin-bottom:clamp(26px,4vh,44px)}
.revline .score{font-size:clamp(46px,5.4vw,80px)}
.revline .stars svg{width:13px;height:13px;fill:var(--ember-lt)}
.revline .cnt{font-size:13.5px;color:var(--dim)}
.rev3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
@media(max-width:900px){.rev3{grid-template-columns:1fr}}

/* ---------- další glampingy ----------
   Dlaždice z modálu, tady stojí v běžném toku, takže bez zpožděného
   rozsvěcení, které patří k otevírání modálu. */
.more .pk{opacity:1;transform:none;transition:border-color .4s var(--ease)}
.more .pk-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.more .pk-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.more .pk-grid{grid-template-columns:1fr}}

/* ==========================================================
   STRÁNKA VOUCHERU
   Vlevo je vidět, co dárek je, vpravo se kupuje. Hodnotu ani
   příjemce neřešíme my, to je uvnitř okna GlampSys.
   ========================================================== */
/* ---------- načtení stránky voucheru ----------
   Stejně jako u glampingu fotky první a text mezi posledními: lístek
   s fotkou, nákupní okno, hlavička webu, text na lístku, nadpis, štítky
   a cena. Perex pod lístkem („Voucher na pobyt…") a bloky pod ním pouští
   site.js až po ceně, plovoucí lišta přijede úplně poslední. */
body.page-voucher .hdr{transition:top .5s var(--ease),opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s}
body.page-voucher .vshow{--d:0s}
body.page-voucher .vbuy{--d:.1s}
body.page-voucher .ptitle h1 .ln em{transition-duration:.9s;transition-delay:.35s}
body.page-voucher .ptitle-labels{--d:.5s}
body.page-voucher .ptitle-price{--d:.56s}
/* Text lístku naskočí až na fotce, ne současně s ní. */
.vcard figcaption{opacity:0;transition:opacity .6s var(--ease) .35s}
body.ready .vcard figcaption{opacity:1}
body.skip-intro .vcard figcaption{transition:none;opacity:1}
@media(prefers-reduced-motion:reduce){.vcard figcaption{opacity:1;transition:none}}
/* Lišta je tu vidět od načtení, ne až po odscrollování: stránka nemá hero
   ani závěrečný pás s výzvou, takže výzvu k nákupu nese jenom ona.
   Zobrazení řídí site.js, u patičky se schová jako všude jinde. */

/* ---------- voucher: obsah a nákup vedle sebe ----------
   Okno GlampSys je vysoké, takže levý sloupec nese kromě ukázky i všechno,
   co je o voucheru potřeba vědět. Krátký sloupec by vedle okna nechal prázdno. */
.vstage{margin-bottom:clamp(40px,7vh,90px)}
.vlay{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,33vw,470px);
  gap:clamp(28px,3.6vw,60px);align-items:start}
.vmain{min-width:0}
@media(max-width:1000px){.vlay{grid-template-columns:1fr;gap:clamp(34px,5vh,50px)}}

/* Lístek, který přijde do e-mailu. Fotka pod clonou, text přes ni,
   dole linka s platností a místem pro kód. */
.vcard{position:relative;margin:0;overflow:hidden;aspect-ratio:1.58;
  border-radius:14px;border:1px solid var(--line);background:var(--bark);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease)}
.vcard.swap img{opacity:0}
.vcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(8,11,8,.88) 0%,rgba(8,11,8,.66) 44%,rgba(8,11,8,.2) 100%)}
.vcard figcaption{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:clamp(22px,2.8vw,40px)}
.vc-brand{font-family:var(--display);font-weight:400;letter-spacing:.005em;
  font-size:clamp(15px,1.25vw,19px);color:var(--paper)}
.vc-kind{margin-top:auto;font-size:12.5px;color:var(--ember-lt)}
.vc-place{font-family:var(--display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(26px,3.3vw,46px);line-height:1.12;color:var(--paper);margin-top:5px}
.vc-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  margin-top:clamp(14px,2vh,22px);padding-top:13px;font-size:12px;color:var(--dim);
  border-top:1px solid rgba(240,235,225,.22)}
.vc-code{font-variant-numeric:tabular-nums;letter-spacing:.2em;color:var(--paper-2)}
/* Horní řádek lístku: značka vlevo, na mobilu cena vpravo. */
.vc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.vc-price{display:none;font-family:var(--display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(28px,8.6vw,40px);line-height:1;color:var(--paper);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.vc-price i{font-style:normal;font-size:.42em;color:var(--dim);margin-right:3px;vertical-align:.18em}

/* Voucher na mobilu: lístek je hlavní věc. Nadpis na střed, štítky a cena
   z hlavičky zmizí (platnost říká lístek sám, cena se přesune na něj), takže
   pod nadpisem jde rovnou lístek s cenou velkým písmem. Dřív byla cena malá
   vlevo pod štítky a vpravo zbylo prázdno. Vzor Lyft a Honest Greens. */
@media(max-width:700px){
  body.page-voucher .ptitle{margin-bottom:clamp(16px,2.4vh,22px)}
  body.page-voucher .ptitle-row{justify-content:center;text-align:center}
  body.page-voucher .ptitle h1{margin-bottom:0}
  body.page-voucher .ptitle-labels,body.page-voucher .ptitle-price{display:none}
  /* Rozložení lístku: nahoře značka a vpravo platnost, dole vlevo druh,
     místo a kód, vpravo cena. Obaly horního a spodního řádku se rozpustí
     a jejich části se rozloží do mřížky, HTML zůstává jako na desktopu. */
  /* Název místa má celou šířku, aby se nelámal: když stál vedle ceny,
     zbylo mu kolem 120 px a „Lužické hory" i „České středohoří" šly na dva
     řádky. Cena je dole na řádku s kódem a drží pravou hranu. Sloupec
     vpravo má šířku podle delší platnosti, proto justify-self:end. */
  body.page-voucher .vcard figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr auto auto auto;column-gap:14px;
    grid-template-areas:"brand valid" ". ." "kind kind" "place place" "code price"}
  body.page-voucher .vc-top,body.page-voucher .vc-bot{display:contents}
  body.page-voucher .vc-brand{grid-area:brand;align-self:center}
  body.page-voucher .vc-valid{grid-area:valid;align-self:center;justify-self:end;text-align:right;
    font-size:11.5px;line-height:1.35;color:var(--paper-2)}
  body.page-voucher .vc-kind{grid-area:kind;margin-top:0}
  body.page-voucher .vc-place{grid-area:place;font-size:clamp(22px,6.4vw,30px);white-space:nowrap}
  body.page-voucher .vc-code{grid-area:code;align-self:end;margin-top:10px;font-size:11px}
  body.page-voucher .vc-price{grid-area:price;align-self:end;justify-self:end;text-align:right;
    display:block;margin-top:10px;font-size:clamp(26px,7.4vw,34px)}
}

/* Právní stránky a cookies nemají hero. Hlavička na nich jde hned jako
   u glampingu, ne se zpožděním z homepage, kde čeká na text hera. */
body.page-legal .hdr{transition:top .5s var(--ease),opacity .9s var(--ease) .05s,transform .9s var(--ease) .05s}
@media(max-width:560px){
  .vcard{aspect-ratio:1.3}
  .vc-bot{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Přepínač fotek. Průzkum produktu, ne konfigurace objednávky: mění jen
   to, co je na ukázce vidět. Aktivní dlaždice má obrys, ne záři pod sebou. */
.vpick{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,.9vw,12px);
  margin-top:clamp(10px,1.4vh,16px)}
.vp{position:relative;display:block;overflow:hidden;width:100%;padding:0;border:0;
  cursor:pointer;border-radius:6px;aspect-ratio:1.5;background:var(--bark);opacity:.4;
  transition:opacity .4s var(--ease)}
.vp img{display:block;width:100%;height:100%;object-fit:cover}
.vp:hover{opacity:.72}
.vp.on{opacity:1;outline:1px solid var(--ember);outline-offset:-1px}
.vp:focus-visible{outline:2px solid var(--ember-lt);outline-offset:2px}
/* Perex navazuje na ukázku, proto větší mezera než mezi bloky pod ním. */
.vmain .detail-lede{margin-top:clamp(30px,4.4vh,46px)}

/* Nákupní okno stojí, nescrolluje s obsahem. Rám a popisek pod ním jsou
   stejné jako u rezervace glampingu (.gsys-frame, .gsys-note). Výchozí
   výška je nižší než u rezervace, voucherové okno je kratší (starý web
   mu dával 400 px). Skutečnou výšku pošle glampsys:height. Odsazení
   kotvy #koupit pod hlavičku drží scroll-padding-top na html (home.css). */
.vbuy .gsys-frame iframe{height:420px}

/* Split na podstránce nese vlastní h2. Homepage počítá v téhle komponentě
   jen s h3 a dává mu spodní mezeru, takže velký nadpis seděl textu na
   hlavě. Mezera roste s nadpisem. */
.split-txt h2{max-width:none;margin-bottom:clamp(18px,2.4vh,26px)}

/* ---------- voucher: kroky ----------
   Číslo je velké v serifu nad nadpisem, ne label se spacovanou pomlčkou.
   Ve dvou sloupcích uvnitř levého sloupce je číslo menší, jinak přebije text. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.steps.two{grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}
@media(max-width:520px){.steps.two{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:22px}
.step i{display:block;font-style:normal;font-family:var(--display);font-weight:300;
  font-size:clamp(36px,3.6vw,56px);line-height:1;color:var(--ember-lt);margin-bottom:18px}
.step h4{margin-bottom:8px}
.step p{font-size:15px;color:var(--paper-2);max-width:36ch}
.steps.two .step{padding-top:18px}
.steps.two .step i{font-size:clamp(27px,2.3vw,37px);margin-bottom:12px}
.steps.two .step p{font-size:14px;max-width:none}

/* ---------- voucher: časté dotazy ----------
   Dva samostatné sloupce, ne jedna mřížka s otázkami v buňkách. V mřížce
   by otevřená odpověď vytáhla celý řádek a otázka vedle by poskočila. */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);
  align-items:start}
@media(max-width:820px){.faq{grid-template-columns:1fr}}
.faq-col{min-width:0}
.faq details{border-top:1px solid var(--line-s)}
.faq-col details:last-child{border-bottom:1px solid var(--line-s)}
@media(max-width:820px){.faq-col:first-child details:last-child{border-bottom:none}}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:300;font-size:clamp(18px,1.5vw,22px);
  line-height:1.3;letter-spacing:-.01em;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ember-lt)}
.faq summary svg{flex:0 0 auto;width:14px;height:14px;stroke:currentColor;stroke-width:1.6;
  fill:none;transition:transform .35s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
/* Odpověď jde téměř přes celou šířku sloupce. Zděděné omezení (globálně
   60ch, tady dřív 52ch) lámalo řádek zhruba v polovině místa, které
   sloupec má. Vpravo zůstává 30 px, což je ikona plus její mezera
   v otázce: odpověď tak končí na stejné svislici jako text otázky. */
.faq details p{padding:0 30px 20px 0;font-size:15px;color:var(--paper-2);max-width:none}

/* Plynulé otevírání. Výška jede přes grid-template-rows z 0fr na 1fr,
   takže se nemusí nikde měřit v pixelech a funguje i na dlouhou odpověď.
   Třídu .faq-js přidává site.js, bez skriptu zůstává nativní chování
   a odpověď se prostě ukáže. Ikona se pak řídí stavem, ne atributem open:
   ten při zavírání ještě chvíli platí, dokud dobíhá přechod. */
.faq-js .faq-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease)}
.faq-js details.on .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;min-height:0}
.faq-js details:not(.on) summary svg{transform:none}
@media(prefers-reduced-motion:reduce){
  .faq-js .faq-a{transition:none}
  .faq summary svg{transition:none}
}

/* ---------- pás s výzvou ---------- */
.band{position:relative;overflow:hidden;padding-block:clamp(90px,16vh,190px)}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.45) saturate(1.05)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,11,8,.86),rgba(8,11,8,.4))}
.band .wrap{position:relative;z-index:2}
.band h2{max-width:12ch;margin-bottom:18px}
.band p{color:var(--paper-2);font-size:clamp(15.5px,1.15vw,18px);max-width:48ch;margin-bottom:26px}

/* ---------- právní stránky ----------
   Tmavá čtecí stránka. Sloupec 68 znaků, nadpisy v serifu, číslování
   počítadlem. Přepínač provozovatele je stejný přepínač jako dlaždice
   voucheru, jen užší. */
.legal{padding-block:clamp(120px,18vh,200px) clamp(70px,11vh,150px)}
.legal-head{max-width:68ch;margin-bottom:clamp(30px,5vh,56px)}
.legal-head h1{font-size:clamp(38px,5.6vw,80px);line-height:1.04;margin-bottom:18px}
.legal-head .meta{font-size:13px}
.doc{counter-reset:sec}
.doc-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.doc-chooser{margin-bottom:clamp(30px,5vh,52px)}
.doc-chooser .lbl{display:block;font-size:13px;color:var(--dim);margin-bottom:12px}
.doc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px}
@media(max-width:600px){.doc-cards{grid-template-columns:1fr}}
.doc-card{display:block;padding:16px 18px;border:1px solid var(--line-s);border-radius:9px;
  background:var(--ink-2);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.doc-card:hover{border-color:var(--line)}
.doc-card-name{display:block;font-family:var(--display);font-weight:300;font-size:19px;
  line-height:1.25;letter-spacing:-.01em;margin-bottom:4px}
.doc-card-op{display:block;font-size:12.5px;color:var(--dim)}
#vop-a:checked ~ .doc-chooser label[for=vop-a],
#vop-b:checked ~ .doc-chooser label[for=vop-b],
#gdpr-a:checked ~ .doc-chooser label[for=gdpr-a],
#gdpr-b:checked ~ .doc-chooser label[for=gdpr-b]{border-color:var(--ember);background:var(--bark)}
#vop-a:focus-visible ~ .doc-chooser label[for=vop-a],
#vop-b:focus-visible ~ .doc-chooser label[for=vop-b],
#gdpr-a:focus-visible ~ .doc-chooser label[for=gdpr-a],
#gdpr-b:focus-visible ~ .doc-chooser label[for=gdpr-b]{box-shadow:0 0 0 3px rgba(201,122,70,.16)}
.doc-panel{display:none}
#vop-a:checked ~ .doc-panel--a,#vop-b:checked ~ .doc-panel--b{display:block}
.doc-ident--a,.doc-ident--b{display:none}
#gdpr-a:checked ~ .doc-body .doc-ident--a,#gdpr-b:checked ~ .doc-body .doc-ident--b{display:block}
.doc-panel,.doc-body{max-width:68ch;font-size:16px;line-height:1.7;color:var(--paper-2)}
.doc h2{counter-increment:sec;margin:clamp(40px,6vh,64px) 0 18px;padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--line-s);font-family:var(--display);font-weight:300;
  font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.012em;color:var(--paper)}
.doc h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:8px;
  font-family:var(--sans);font-size:12px;color:var(--ember-lt);font-variant-numeric:tabular-nums}
.doc h3{margin:26px 0 8px;font-family:var(--display);font-weight:300;font-size:20px;
  line-height:1.3;color:var(--paper)}
.doc h2 + h3{margin-top:0}
.doc p{margin:0 0 14px;max-width:none}
.doc-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--paper);margin-bottom:18px}
.doc a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(240,235,225,.4);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.doc a:hover{color:var(--ember-lt);text-decoration-color:var(--ember)}
.doc-ident{margin:0 0 20px;padding:18px 20px;border-left:2px solid var(--ember);
  background:var(--ink-2);border-radius:0 8px 8px 0}
.doc-ident p{margin:0}
.doc-ident p + p{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-s)}
.doc-ident strong{display:inline-block;margin-bottom:4px;font-family:var(--display);
  font-weight:300;font-size:20px;color:var(--paper)}
.doc-ident-label{font-size:12px;color:var(--dim)}
.doc-basis{margin:-4px 0 20px;padding:10px 14px;border-left:2px solid var(--ember);
  background:var(--ink-2);border-radius:0 8px 8px 0;font-size:14.5px;color:var(--paper)}
.doc ul{list-style:none;margin:0 0 18px;padding:0}
.doc li{position:relative;margin-bottom:9px;padding-left:22px}
.doc li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--ember)}
.doc-effective{margin-top:clamp(30px,5vh,48px);padding-top:18px;border-top:1px solid var(--line-s);
  font-size:13px;color:var(--dim)}

/* ==========================================================
   STRÁNKA GLAMPINGU NA PLNOU ŠÍŘKU (body.page-full)
   Blíž prototypu šéfa: full-bleed hero přes celou výšku okna, pás faktů,
   "To hlavní", "Co tě čeká" a galerie na plnou šířku, mapa a recenze
   z našeho stylu, rezervace na střed na konci. Přebíjí starší pravidla
   výš (phero, ptitle, detail se už negenerují).
   ========================================================== */

/* ---------- full-bleed hero, celá výška okna ---------- */
.ghero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--bark)}
.ghero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ghero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,11,8,.88) 0%,rgba(8,11,8,.5) 30%,rgba(8,11,8,.06) 64%),
    linear-gradient(to bottom,rgba(8,11,8,.42),rgba(8,11,8,0) 22%)}
.ghero-inner{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-bottom:clamp(44px,8vh,92px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ghero-labels{display:flex;gap:8px;flex-wrap:wrap}
.ghero-labels > span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--paper);
  border:1px solid rgba(240,235,225,.28);border-radius:100px;padding:7px 14px;background:rgba(8,11,8,.5);
  backdrop-filter:blur(6px)}
.ghero-labels .rating{font-weight:500;gap:6px}
/* Hvězdy o 1 px výš, opticky pak sedí na ose čísla (uživatel 18. 9. 2026). */
.ghero-labels .rating .stars{display:inline-flex;gap:2px;position:relative;top:-1px}
.ghero-labels .rating .stars svg{width:11px;height:11px;fill:var(--ember-lt)}
.ghero h1.ghero-h1{color:var(--paper);margin:0;max-width:15ch;white-space:nowrap;
  font-size:clamp(42px,7vw,104px);line-height:1.04;text-shadow:0 2px 34px rgba(8,11,8,.5)}
.ghero-lede{color:var(--paper-2);max-width:54ch;font-size:clamp(15.5px,1.25vw,19px);line-height:1.55;
  text-shadow:0 1px 18px rgba(8,11,8,.6)}
/* Cena jako řádek hned nad tlačítky (varianta 1), celý obsah vlevo. */
.ghero-price{display:flex;align-items:baseline;gap:10px;color:var(--paper)}
.ghero-price b{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.015em;line-height:1}
.ghero-price small{font-size:13px;color:var(--dim)}
.ghero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:600px){
  .ghero h1.ghero-h1{font-size:min(10.5vw,58px)}
}

/* ---------- pás faktů: celá šířka okna, obsah na střed buňky ---------- */
.page-full .factsec .facts{max-width:none}
.page-full .factsec .fact{padding:clamp(22px,3.4vh,38px) clamp(14px,1.6vw,26px);text-align:center}

/* ---------- "To hlavní" hned pod fakty, nadpis na řádek, text ~2 řádky ---------- */
.page-full .pano{margin-top:0}
.page-full .pano-cap{max-width:960px}
.page-full .pano-cap h2{max-width:none}
.page-full .pano-cap p{text-wrap:balance}
@media(min-width:900px){.page-full .pano-cap h2{white-space:nowrap}}

/* ---------- "Co tě čeká": na desktopu plná šířka (edge-to-edge), text na
   střed výšky. Na mobilu zůstává starý contained vzhled (základní .split
   v .wrap se stackuje). ---------- */
.page-full .splits{padding-block:clamp(40px,5vh,72px) 0}
/* nadpis "Co tě čeká." bez horní čáry a bez zdvojeného odsazení (sekce už odsazuje) */
.page-full .story-head{border-top:none;padding-top:0;margin-bottom:clamp(18px,2.6vh,30px)}
@media(min-width:900px){
  .page-full .splits > .wrap{max-width:none;padding-inline:0}
  .page-full .story-head{padding-inline:var(--gut)}
  .page-full .split{grid-template-columns:1fr 1fr;gap:0;padding-block:0;align-items:stretch;
    min-height:clamp(380px,50vh,560px)}
  .page-full .split-img{border-radius:0;aspect-ratio:auto;height:100%}
  .page-full .split-img img{height:100%}
  .page-full .split-txt{padding:clamp(34px,5vw,88px);display:flex;flex-direction:column;justify-content:center}
}

/* mapa hned po "Co tě čeká" bez dělící čáry (plynulý přechod) a s menším odsazením */
.page-full .aroundsec{border-top:none;padding-block:clamp(48px,7vh,88px)}

/* Menší rozestupy v sekcích podstránky (homepage má vlastní, větší). */
.page-full .revs{padding-block:clamp(48px,7vh,88px)}
.page-full .sec{padding-block:clamp(48px,7vh,88px)}
.page-full .shead{margin-bottom:clamp(20px,3vh,34px)}
.page-full .revhead{margin-bottom:clamp(20px,3vh,34px)}

/* Skok tlačítkem (Rezervovat -> #rezervace, Prohlédnout fotky -> #galerie)
   pod plovoucí hlavičku drží scroll-padding-top na html (home.css). Dřív
   tu byl scroll-margin-top, se scroll-padding by se sečetl. */

/* ---------- galerie: samo-posuvný pás fotek (jako tenspace) ----------
   Jeden řádek fotek jede sám, bez šipek a puntíků. Fotky si drží svůj poměr
   (výška pevná, šířka podle fotky, na výšku úzká, na šířku široká, bez ořezu).
   Klik otevře lightbox. Pás pod myší plynule zastaví (easeHover v a11y.js,
   obal pak má data-ease), skokové zastavení níž platí jen bez skriptu.
   Tlačítko pauzy uživatel 18. 9. 2026 nechtěl. Sada je v HTML dvakrát,
   posun o půlku šířky = plynulá nekonečná smyčka. */
.page-full #galerie.wrap{max-width:none;padding-inline:0;padding-block:clamp(48px,7vh,88px)}
.page-full .gmarquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.page-full .gtrack{display:flex;width:max-content;
  animation:gscroll var(--gdur,60s) linear infinite;will-change:transform}
.page-full .gmarquee:not([data-ease]):hover .gtrack{animation-play-state:paused}
/* Fokus z klávesnice pauzu na místě nestačí: pás v tu chvíli může stát
   kdekoli v nekonečné smyčce a fotka s fokusem je mimo okno, neviditelná.
   animation:none proto pás vrátí na začátek (transform se vrátí na
   výchozí, žádný), kde jsou tabovatelné originály, a nativní scroll do
   pohledu (WCAG 2.4.7) uvnitř doladí zbytek. Klik myší :focus-visible
   nesplní, pás mu proto nepřeskočí. */
.page-full .gmarquee:has(:focus-visible) .gtrack{animation:none}
/* mezera přes margin (ne flex gap), ať posun o půlku šířky sedí přesně a smyčka nehopsá */
.page-full .gtrack button{flex:0 0 auto;height:clamp(220px,36vh,400px);overflow:hidden;
  border:0;padding:0;margin:0 clamp(8px,1vw,16px) 0 0;cursor:pointer;border-radius:6px;background:var(--bark)}
.page-full .gtrack img{height:100%;width:auto;display:block}
.page-full .gtrack button:focus-visible{outline:2px solid var(--ember-lt);outline-offset:-3px}
@keyframes gscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .page-full .gtrack{animation:none}
  .page-full .gmarquee{overflow-x:auto;scrollbar-width:none}
  .page-full .gmarquee::-webkit-scrollbar{display:none}
}

/* ---------- rezervace jako vlastní sekce na střed (na konci) ---------- */
.page-full .bookfull{padding-block:clamp(48px,7vh,88px)}
.page-full .bookfull .gsys{position:static;top:auto;max-width:760px;margin:0 auto}
.page-full .bookfull .shead{display:block;text-align:center;margin-bottom:clamp(20px,3vh,34px)}