/* uvod.css · GENEROVÁNO tools/stavba.mjs 23. 10. 2026 9:40:03. Needitovat: zdroj je src/stranky/uvod/*.css.
   Soubory: 10-uvod.css, 20-kostka.css, 30-rozcestnik.css, 40-nejlepsi.css, 50-hoste.css, 60-galerie.css, 70-vikendy.css, 80-kam-dal.css, 90-galerie-prohlizec.css */

/* ===== src/stranky/uvod/10-uvod.css ===== */
/* Úvod · 10 · planeta obýváku → obývák z výšky očí (S1 subtle, 21. 10. 2026). HTML: 10-uvod.html, JS: js/uvod.js
   (+ planeta-gl.js), média media/uvod/uvod.json.

   Scéna (.uvod-scena) nese text, planetu a okno (.uvod-okno, fotka z výšky očí a plátno WebGL přes celou scénu).
   S JS a oknem aspoň 540 px vysokým je lepivá pod hlavičkou po dobu připnutí .uvod-pin (--uvod-delka × výška scény)
   a uvod.js podle posunu nastavuje průběh: text zprůhlední, kruh se rozevře přes celou šířku, konec je obývák z výšky
   očí. Vrstvy: planeta (1) < okno (2) < text (3); .uvod-telo netvoří vlastní kontext vrstvení.
   - desktop a tablet ≥ 699 px: text vlevo (6/12), planeta vpravo uprostřed výšky;
   - telefon ≤ 698 px: titul, věta, Poptat termín a cena, pod nimi celý kruh planety (co se nevejde, ořízne spodní
     hrana scény);
   - bez JS a v nízkém okně: bez připnutí, fotka z výšky očí leží pod úvodem jako obyčejná fotka. */

.uvod {
  --uvod-h: calc(100svh - var(--hlavicka-vyska));   /* výška lepivé scény */
  --uvod-delka: 1.45;                                /* délka připnutí jako násobek výšky scény */
  position: relative;
}
.uvod-pin { position: relative; }
.uvod-scena { position: relative; }

/* ---------- text ---------- */
.uvod-telo { position: relative; padding-block: clamp(24px, 4svh, 48px); }
.uvod-text { position: relative; z-index: 3; display: grid; justify-items: start; align-content: center; }
.uvod-hlava h1 { max-inline-size: 11.5em; text-wrap: balance; }
.uvod-perex { margin-top: var(--h-perex); max-inline-size: 31em; }
.uvod-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2vw, 32px); }
/* cena (fakt-štítek) a hodnocení na jedné řádce */
.uvod-fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: clamp(14px, 0.6rem + 0.8vw, 22px); font-size: var(--t-text); color: var(--cokolada-2); }
.uvod-cena-radek { display: inline-flex; align-items: center; gap: 2px; }
.uvod-cena { font-size: 0.9375rem; }
.uvod-duvera { display: inline-block; padding-block: 12px; color: var(--cokolada-2); text-decoration: underline solid var(--linka-2); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.uvod-duvera:hover { color: var(--cokolada); text-decoration-color: currentColor; }
.uvod-duvera b { color: var(--cokolada); font-weight: var(--w-ui); }

/* ---------- planeta: jediný kruh webu, tenký lem a měkký stín (.lem-planeta) ---------- */
.uvod-planeta { position: relative; z-index: 1; margin: 0; }
.uvod-kupole { position: relative; aspect-ratio: 1; }
.uvod-lem { inline-size: 100%; block-size: 100%; transform-origin: 50% 50%; }
.uvod-planeta-kruh {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--vlna-tmava);
  -webkit-tap-highlight-color: transparent;
}
.uvod-planeta-kruh picture, .uvod-planeta-kruh img { inline-size: 100%; block-size: 100%; }
.uvod-planeta-kruh img { object-fit: cover; }
.uvod-planeta-kruh:focus-visible { outline-offset: 6px; }
.uvod-planeta-popis { position: relative; z-index: 3; margin-top: 16px; font-size: var(--t-male); line-height: 1.45; color: var(--cokolada-2); max-inline-size: 26em; }
.uvod-napoveda { display: none; }
.js .uvod-napoveda { display: inline; color: var(--cokolada); }

/* ---------- okno: fotka z výšky očí (náhradní přechod a ostrý konec) a plátno WebGL ---------- */
.uvod-pohled { display: block; inline-size: 100%; block-size: 100%; }
.uvod-pohled img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; }
.uvod-platno { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 220ms var(--ease); }
.uvod-gl .uvod-platno { opacity: 1; }
/* t = 1: plátno odkryje pod sebou ostrý statický obraz (v t = 1 pixel na pixel stejný) */
.uvod-gl .uvod-platno.uvod-platno-konec { opacity: 0; }
/* popisek fotky z výšky očí: drobně pod fotkou (s připnutím pod scénou, bez něj pod fotkou v toku) */
.uvod-pohled-popisek { padding-top: 12px; font-size: var(--t-male); line-height: 1.45; color: var(--cokolada-2); }

/* bez JS a v nízkém okně: fotka z výšky očí jako obyčejná fotka pod úvodem */
.uvod-okno { position: relative; z-index: 2; aspect-ratio: 16 / 9; inline-size: min(100% - 2 * var(--okraj), var(--obsah)); margin: 8px auto 0; overflow: hidden; border-radius: var(--r-foto); background-color: var(--vlna-tmava); box-shadow: var(--stin-foto); }

/* ---------- připnutá scéna (JS a okno aspoň 540 px vysoké) ---------- */
@media (min-height: 540px) {
  .js .uvod-pin { block-size: calc(var(--uvod-h) * (1 + var(--uvod-delka))); }
  .js .uvod-scena { position: sticky; top: var(--hlavicka-vyska); block-size: var(--uvod-h); overflow: hidden; }
  .js .uvod-telo { block-size: 100%; }
  .js .uvod-okno { position: absolute; inset: 0; inline-size: auto; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; pointer-events: none; }
  /* fotka z výšky očí: do prvního posunu (nebo chvíle po načtení) se nestahuje; průhlednost a masku řídí uvod.js */
  .js .uvod-pohled { display: none; opacity: 0; }
  .js .uvod-pohled-nacist .uvod-pohled { display: block; }
  .js .uvod-pohled img { transform-origin: 50% 50%; }
  /* WebGL převzal planetu: statický obraz zmizí až po prolnutí (uvod.js → .uvod-gl-hotovo), odkaz zůstává */
  .uvod-gl-hotovo .uvod-planeta-kruh picture { visibility: hidden; }
  .uvod-gl-hotovo .uvod-planeta-kruh { background: none; }
  .uvod-text-pryc :is(.uvod-text, .uvod-planeta-popis) { visibility: hidden; }
  .uvod-rozevreno .uvod-planeta-kruh { pointer-events: none; }
  .js :is(.uvod-text, .uvod-planeta-popis, .uvod-lem) { will-change: opacity; }
}

/* ---------- desktop ≥ 900 px a tablet na šířku: text vlevo, planeta vpravo uprostřed výšky ---------- */
@media (min-width: 900px), (min-width: 699px) and (orientation: landscape) {
  .uvod-telo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: var(--mezera);
    min-block-size: calc(100svh - var(--lista-vyska) - var(--hlavicka-vyska));
  }
  .uvod-hlava { grid-column: 1 / span 6; grid-row: 2; }
  .uvod-akce-blok { grid-column: 1 / span 6; grid-row: 3; margin-top: clamp(24px, 1rem + 1.4vw, 40px); }
  .uvod-planeta {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    inline-size: min(100%, calc(var(--uvod-h) - 156px), 680px);
  }
}
@media (min-width: 900px) and (min-height: 540px), (min-width: 699px) and (orientation: landscape) and (min-height: 540px) {
  .js .uvod-telo { min-block-size: 0; }
}
/* nízká okna (1 280 × 720 a podobná): hustší text, aby Poptat termín i cena zůstaly v první obrazovce */
@media (min-width: 900px) and (max-height: 800px) {
  .uvod-hlava h1 { font-size: min(var(--t-h1), 8.4svh); }
  .uvod-akce-blok { margin-top: 20px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .uvod-hlava, .uvod-akce-blok { grid-column: 1 / span 7; }
  .uvod-planeta { grid-column: 8 / -1; }
}
/* tablet na šířku 699–899 px: text 7/12, planeta 5/12 */
@media (min-width: 699px) and (max-width: 899px) and (orientation: landscape) {
  .uvod-hlava, .uvod-akce-blok { grid-column: 1 / span 7; }
  .uvod-hlava h1 { font-size: clamp(2.375rem, 0.9rem + 3.6vw, 2.875rem); }
  .uvod-planeta { grid-column: 8 / -1; inline-size: 100%; }
}

/* ---------- telefon ≤ 698 px a tablet na výšku: text nahoře, pod ním velký kruh planety ---------- */
@media (max-width: 698px), (max-width: 899px) and (orientation: portrait) {
  .uvod-telo { display: flex; flex-direction: column; padding-top: clamp(20px, 5vw, 40px); padding-bottom: 16px; }
  .uvod-akce-blok { margin-top: clamp(20px, 3vw, 32px); }
  .uvod-fakta { margin-top: 10px; }
  .uvod-planeta { margin-top: clamp(20px, 3vw, 36px); }
  .uvod-kupole { inline-size: min(100%, 520px); margin-inline: auto; }
  .uvod-planeta-popis { display: none; }
  .uvod-okno { aspect-ratio: 4 / 5; }
}
@media (max-width: 698px) {
  .uvod-hlava h1 { font-size: clamp(2.125rem, 1.2rem + 4.6vw, 2.5rem); line-height: 1.06; }
  .uvod-perex { margin-top: 12px; font-size: 1.0625rem; }
  .uvod-kupole { inline-size: min(100%, 360px); }
}
@media (max-width: 698px) and (min-height: 540px), (max-width: 899px) and (orientation: portrait) and (min-height: 540px) {
  /* zbytek výšky scény pod textem patří planetě: kruh tak velký, jak se vejde, nejmíň 64 % šířky (pak ho ořízne
     spodní hrana scény jako kupoli) */
  .js .uvod-planeta { flex: 1 1 0; min-block-size: 0; container-type: size; }
  .js .uvod-kupole { inline-size: max(min(100cqi, 100cqb - 8px), 64cqi); }
}

/* ===== src/stranky/uvod/20-kostka.css ===== */
/* Úvod · 20 · Dům v kostce: léto × zima (koordinátor, 23. 10. 2026). Vzor G „nadpis na okraji“ vpravo: od 900 px fotka
   přes 8 sloupců vlevo a oba řádky, vpravo nahoře nadpis a věta, pod nimi tipy podle roční doby; pod 900 px nadpis,
   fotka, tipy. Rám fotky 4 : 3 (pod 700 px 4 : 5); obě fotky v něm leží na sobě (object-fit cover s ohniskem na domě)
   a vidět je ta z html[data-sezona] (bez JS léto). Plátno přechodu (js/sezona-gl.js) leží nad nimi jen během přechodu.
   Přepínač Léto / Zima vlevo nahoře na fotce: rovná vápenná cedulka se švestkovým jezdcem (--poloha 0 léto … 1 zima),
   jezdec jde táhnout. Bez WebGL se fotky prolnou tady v CSS (s omezeným pohybem hned). */

/* roční doba: bez JS a v létě je zimní obsah skrytý, v zimě letní */
html:not([data-sezona='zima']) .sezona-jen[data-sezona='zima'],
html[data-sezona='zima'] .sezona-jen[data-sezona='leto'] { display: none; }

/* ---------- rám a fotky ---------- */
.sezona-obraz { --pomer: 4 / 3; max-block-size: calc(100svh - var(--hlavicka-vyska) - 32px); isolation: isolate; }
.sezona-foto { position: absolute; inset: 0; transition: opacity 900ms var(--ease), visibility 0s linear 0s; }
.sezona-foto img { object-position: var(--ohnisko, 50% 50%); }
/* ohnisko = výřez, který vidí stránka i plátno (js/sezona.js čte object-position): léto štít a přízemí, zima celý dům */
.sezona-foto-leto { --ohnisko: 19% 50%; }
.sezona-foto-zima { --ohnisko: 50% 20%; }
html:not([data-sezona='zima']) .sezona-foto-zima,
html[data-sezona='zima'] .sezona-foto-leto { opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 0s linear 900ms; }

.sezona-platno { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; opacity: 0; pointer-events: none; transition: opacity 160ms linear; }
.sezona-platno.je-videt { opacity: 1; }

/* ---------- cedulky na fotce: kotva z data-u / data-v (js/sezona.js), bez JS z --xd/--yd ---------- */
.sezona-body { z-index: 2; transition: opacity 320ms var(--ease); }
.sezona-bod { --x: var(--xd); --y: var(--yd); max-inline-size: none; }
.sezona.sezona-bezi .sezona-body { opacity: 0; transition-duration: 140ms; }
.sezona-cedulka { display: grid; gap: 2px; max-inline-size: 15em; padding: 0.55em 0.95em 0.6em; text-align: left; text-wrap: balance; }
.sezona-cedulka b { font: var(--w-titul) 1.0625rem / 1.2 var(--f-titul); letter-spacing: -0.01em; }
.sezona-cedulka span { font-size: 0.875rem; font-weight: 400; line-height: 1.3; color: var(--cokolada-2); }

/* ---------- přepínač Léto / Zima ---------- */
.sezona-prepinac {
  --poloha: 0;
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: var(--vapno);
  border-radius: var(--r);
  box-shadow: var(--stin-karta);
  touch-action: pan-y;
  user-select: none;
}
html[data-sezona='zima'] .sezona-prepinac { --poloha: 1; }
.sezona-jezdec {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  inline-size: calc(50% - 4px);
  background: var(--svestka);
  border-radius: 2px;
  translate: calc(var(--poloha) * 100%) 0;
  transition: translate 420ms var(--ease);
}
.sezona-prepinac.sezona-tazeni .sezona-jezdec { transition: none; }
.sezona-volba {
  position: relative;
  z-index: 1;
  min-block-size: 44px;
  min-inline-size: 80px;
  padding: 0 18px;
  font: var(--w-ui) 1rem / 1 var(--f-text);
  letter-spacing: 0.01em;
  color: var(--cokolada);
  background-color: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: color 200ms var(--ease), background-color 0s linear 0s;
}
/* vybraná volba má švestku i sama (čitelnost bez jezdce); podklad naskočí, až pod ni jezdec dojede */
.sezona-volba[aria-checked='true'] { color: var(--vapno); background-color: var(--svestka); transition: color 200ms var(--ease), background-color 0s linear 420ms; }
.sezona-prepinac.sezona-tazeni .sezona-volba { background-color: transparent; transition: none; }
.sezona-volba:focus-visible { outline: 2px solid var(--svestka); outline-offset: 3px; }
.sezona-prepinac.sezona-tazeni, .sezona-prepinac.sezona-tazeni .sezona-volba { cursor: grabbing; }

/* ---------- popisek a tipy podle roční doby ---------- */
.sezona-popisek .sezona-jen { animation: sezona-objevit 420ms var(--ease) both; }
.kostka-hlava > .perex { max-inline-size: 26em; }
.sezona-tipy { display: grid; min-inline-size: 0; }
.sezona-sada { display: grid; gap: 14px; justify-items: start; animation: sezona-objevit 420ms var(--ease) both; }
.sezona-nadpis { font: var(--w-titul) var(--t-h4) / 1.2 var(--f-titul); letter-spacing: -0.01em; }
.sezona-seznam { list-style: none; display: grid; inline-size: 100%; border-top: 1px solid var(--linka); }
.sezona-seznam > li { border-bottom: 1px solid var(--linka); }
.sezona-tip { display: grid; gap: 2px; padding: 11px 0 12px; color: inherit; text-decoration: none; }
.sezona-tip b { font: 600 1.0625rem / 1.3 var(--f-text); text-decoration: underline transparent; text-underline-offset: 3px; transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease); }
.sezona-tip > span { font-size: var(--t-text); line-height: 1.4; color: var(--cokolada-2); }
.sezona-tip:hover b { color: var(--svestka); text-decoration-color: currentColor; }
.sezona-tip:focus-visible { outline-offset: 2px; }
.sezona-cena { margin-top: 2px; white-space: normal; }
@keyframes sezona-objevit { from { opacity: 0; } }

@media (min-width: 900px) {
  .kostka-okraj { grid-template-rows: auto 1fr; }
  .kostka-okraj[data-strana='vpravo'] > .sezona { grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .kostka-okraj[data-strana='vpravo'] > .sezona-tipy { grid-column: 9 / -1; grid-row: 2; }
  .kostka-okraj > .kostka-hlava { position: static; }
}
@media (max-width: 699px) {
  .sezona-obraz { --pomer: 4 / 5; }
  .sezona-bod { --x: var(--xm); --y: var(--ym); }
  .sezona-prepinac { top: 10px; left: 10px; }
  .sezona-volba { min-inline-size: 72px; padding-inline: 14px; }
  .sezona-cedulka { max-inline-size: 11.5em; padding: 0.45em 0.8em 0.5em; }
  .sezona-cedulka b { font-size: 1rem; }
  .sezona-delsi { display: none; }
}

/* ===== src/stranky/uvod/30-rozcestnik.css ===== */
/* Úvod · 30 · Rozcestník (agent H, 21. 10. 2026; 16-ROZCESTNIK-WOW-ZADANI). Čtyři velké fotodlaždice: fotka, pod ní
   vápenný štítek s názvem stránky (H3) a živým údajem, pod ním tři fakta oddělená vlasovou linkou. Jedna úprava
   (radius 3 px, stín fotky, žádné natočení ani látka). Celá dlaždice je odkaz: odkaz názvu je roztažený přes dlaždici
   (::after), kredit Commons leží nad ním. Fokus = švestkový rámeček kolem celé dlaždice.
   - telefon pod 700 px: pod sebou, fotka 4 : 3, fakta vidět;
   - 700–1 099 px: 2 × 2, fotka 3 : 2; od 1 100 px čtyři vedle sebe, fotka 1 : 1;
   - myš od 700 px (js/rozcestnik.js přidá sekci .rozc-js): dlaždice drží stejnou výšku, fotka sahá přes fakta
     a najetí nebo fokus celý list vysune o výšku faktů nahoru, fotka uvnitř jede pomaleji (paralax). Posun nastavuje
     JS po snímcích, takže běží i s omezeným pohybem (globální pravidlo omezeného pohybu by CSS přechod vypnulo). */

.rozc-mrizka { list-style: none; display: grid; gap: var(--mezera); }
.rozc-dlazdice {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--vapno);
  border-radius: var(--r);
  box-shadow: var(--stin-foto);
  transition: box-shadow var(--d-pokoj) var(--ease);
}
.rozc-list { display: flex; flex-direction: column; flex: 1 0 auto; background-color: var(--vapno); }
.rozc-foto { position: relative; flex: none; overflow: hidden; aspect-ratio: 4 / 3; background-color: var(--vlna-tmava); }
.rozc-foto picture { inline-size: 100%; block-size: 100%; }
.rozc-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--ohnisko, 50% 50%); }
.rozc-stitek { display: grid; gap: 6px; padding: 18px 20px 6px; }
.rozc-nazev { font-size: var(--t-h3); line-height: 1.12; }
.rozc-odkaz { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--cokolada); text-decoration: none; }
.rozc-odkaz::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.rozc-odkaz:focus-visible { outline: none; }
.rozc-dlazdice:has(.rozc-odkaz:focus-visible) { outline: 2px solid var(--svestka); outline-offset: 4px; }
.rozc-udaj { font-size: 1rem; line-height: 1.4; color: var(--cokolada-2); }
.rozc-udaj b { color: var(--cokolada); }
.rozc-fakty { list-style: none; display: grid; padding: 8px 20px 18px; }
.rozc-fakty > li { padding-block: 8px; border-top: 1px solid var(--linka); font-size: 1rem; line-height: 1.35; color: var(--cokolada-2); }
.rozc-kredit { z-index: 2; }

@media (hover: hover) {
  .rozc-dlazdice:hover { box-shadow: var(--stin-foto-zvednuta); }
  .rozc-dlazdice:hover .rozc-odkaz { color: var(--svestka); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
}
.rozc-dlazdice:has(.rozc-odkaz:focus-visible) .rozc-odkaz { color: var(--svestka); }

@media (min-width: 700px) {
  .rozc-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rozc-foto { aspect-ratio: 3 / 2; }
}
@media (min-width: 1100px) {
  .rozc-mrizka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rozc-foto { aspect-ratio: 1; }
}

/* vysouvací list (jen myš od 700 px, s JS): výšku dlaždice a fotky drží JS v px, posun listu a fotky taky */
.rozc-js .rozc-dlazdice { display: block; }
.rozc-js .rozc-list { position: relative; }
.rozc-js .rozc-foto { aspect-ratio: auto; }
.rozc-js .rozc-fakty > li:first-child { border-top-color: var(--linka-2); }

/* ===== src/stranky/uvod/40-nejlepsi.css ===== */
/* Úvod · 40 · To nejlepší z chaty (agent H, 21. 10. 2026). Čtyři velké skutečné fotky s názvem (H3) a jednou větou,
   editoriálně v různých velikostech (žádná mřížka stejných karet, žádná karta): fotky leží přímo na vlně, jedna
   úprava fotek (.foto-obraz: radius 3 px, stín). Celá položka je odkaz do průvodce na Chatě; najetí zvedne stín
   a podtrhne název švestkou, nic se nehýbe.
   - od 700 px mřížka 12 sloupců ve dvou řadách: velký krb 16 : 9 (8/12) a vedle menší sauna 4 : 5 (4/12), pod
     nimi ložnice s postýlkou 3 : 2 (5/12) a louka s lesem jako panorama 21 : 9 (7/12); výšky v řadě vycházejí
     skoro stejně, velikosti a poměry se střídají (velká–malá, malá–velká);
   - telefon: pod sebou, les ve výřezu 4 : 3 (střed panoramatu: okraj lesa a louka). */

.nejlepsi-mrizka { list-style: none; display: grid; gap: clamp(40px, 4.4vw, 64px) var(--mezera); align-items: start; }
.nejlepsi-odkaz { display: grid; gap: clamp(14px, 1.2vw, 18px); color: var(--cokolada); text-decoration: none; }
.nejlepsi-obraz img { object-position: var(--ohnisko, 50% 50%); }
.nejlepsi-text { display: grid; gap: 6px; max-inline-size: 34em; }
.nejlepsi-nazev { font-size: var(--t-h3); transition: color var(--d-cedulka) var(--ease); }
.nejlepsi-veta { color: var(--cokolada-2); text-wrap: pretty; }
.nejlepsi-odkaz:focus-visible { outline-offset: 6px; }
@media (hover: hover) {
  .nejlepsi-odkaz:hover .foto-obraz { box-shadow: var(--stin-foto-zvednuta); }
  .nejlepsi-odkaz:hover .nejlepsi-nazev { color: var(--svestka); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
}

.nejlepsi-sauna .foto-obraz { aspect-ratio: 4 / 5; }
.nejlepsi-krb .foto-obraz { aspect-ratio: 16 / 9; }
.nejlepsi-deti .foto-obraz { aspect-ratio: 3 / 2; }
.nejlepsi-les .foto-obraz { aspect-ratio: 4 / 3; }

@media (min-width: 700px) {
  .nejlepsi-mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nejlepsi-krb { grid-column: 1 / span 8; }
  .nejlepsi-sauna { grid-column: 9 / -1; }
  .nejlepsi-deti { grid-column: 1 / span 5; }
  .nejlepsi-les { grid-column: 6 / -1; }
  .nejlepsi-les .foto-obraz { aspect-ratio: 21 / 9; }
}

/* ===== src/stranky/uvod/50-hoste.css ===== */
/* Úvod · 50 · hosté (S1 subtle, střídmě): nadpis H2, pod ním jedna citace Hahmletem přímo na vlně a pod ní jedna
   řádka hodnocení za vlasovou linkou. Bez fotky a bez karty. Od 900 px v prvních 9 sloupcích mřížky. */

/* kotva #hoste (řádek důvěry v úvodu): nadpis dopadne 16–40 px pod hlavičku */
.hoste { scroll-margin-top: calc(10px - var(--rytmus)); }
.hoste-telo { display: grid; justify-items: start; }
.hoste-citace { margin-top: var(--h-obsah); max-inline-size: 24em; text-wrap: pretty; }
.hoste-radka { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--linka); }
@media (min-width: 900px) {
  .hoste-telo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
  .hoste-telo > * { grid-column: 1 / span 9; }
}

/* ===== src/stranky/uvod/60-galerie.css ===== */
/* Úvod · 60 · Fotogalerie Dům a zahrada (agent H, 21. 10. 2026). Nadpis s větou vlevo, vpravo dvě šipky pásu
   (cedulky jako šipky okna do pokoje, jen s JS). Pás fotek stejné výšky (telefon 210 px, jinak 240–380 px) a šířky podle poměru fotky
   začíná u levého okraje obsahu a běží až ke kraji okna; posouvá se do strany se snapem. Fotka = jedna úprava
   (radius 3 px, stín, najetí zvedne stín, kurzor lupa), pod ní drobně datum. Prohlížeč: 90-galerie-prohlizec.css. */

.galerie-hlava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px var(--mezera); }
.galerie-hlava > .hlava { flex: 1 1 24em; }
.galerie-hlava .perex { max-inline-size: 42em; }
.galerie-ovladani { display: flex; gap: 10px; }
.galerie-posun { display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; }
.galerie-posun svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galerie-posun[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.galerie-posun[aria-disabled='true']:hover { --c-podklad: var(--vapno); }
.galerie-ovladani[hidden] { display: none; }
/* dotyk: pás se posouvá prstem a další fotka vykukuje, šipky by jen zabíraly místo */
@media (hover: none) and (pointer: coarse) { .galerie-ovladani { display: none; } }

.galerie-pas {
  --galerie-v: clamp(240px, 26vw, 380px);
  --galerie-kraj: max(var(--okraj), (100% - var(--obsah)) / 2);
  list-style: none;
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: var(--h-obsah);
  padding: 6px var(--galerie-kraj) 18px;
  scroll-padding-inline: var(--galerie-kraj);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--lnena) transparent;
}
.galerie-pas:focus-visible { outline-offset: -3px; }
.galerie-polozka { flex: none; scroll-snap-align: start; }
.galerie-fotka { margin: 0; }
.galerie-odkaz {
  position: relative; /* drží i skrytý text .sr (jinak by ho absolutní pozice vynesla mimo pás a stránka by přetékala) */
  display: block;
  block-size: var(--galerie-v);
  aspect-ratio: var(--pomer);
  overflow: hidden;
  background-color: var(--vlna-tmava);
  border-radius: var(--r);
  box-shadow: var(--stin-foto);
  cursor: zoom-in;
  transition: box-shadow var(--d-pokoj) var(--ease);
}
.galerie-odkaz picture { block-size: 100%; }
.galerie-odkaz img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* telefon: nižší pás, ať z další fotky vykukuje kraj */
@media (max-width: 699px) { .galerie-pas { --galerie-v: 210px; } }
.galerie-odkaz:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .galerie-odkaz:hover { box-shadow: var(--stin-foto-zvednuta); } }
.galerie-datum { margin-top: 10px; font-size: var(--t-male); line-height: 1.35; color: var(--cokolada-2); }

/* ===== src/stranky/uvod/70-vikendy.css ===== */
/* Úvod · 70 · nejbližší volné víkendy (S1 subtle): čistý pruh dvou měsíců na jedné kartě. Měsíce vedle sebe oddělené
   vlasovou linkou, víkendy jako stejně široké buňky s vlasovou linkou mezi sebou: volný = odkaz s datem a cenou
   (najetí světlá švestka), obsazený = tlumený text „obsazeno“. Žádné stehy, látka ani natočení. Telefon a tablet:
   pruh se posouvá do strany se snapem a další víkend vykukuje. Kreslí js/vikendy.js. */

.vikendy-pruh { padding: 0; overflow: hidden; }
.vikendy-mapa {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--lnena) transparent;
}
.vikendy-mapa:focus-visible { outline-offset: -3px; }
/* měsíc roste podle počtu víkendů (--vikendu z vikendy.js), takže jsou všechny buňky stejně široké */
.vikendy-mesic { flex: var(--vikendu, 1) 0 auto; display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; }
.vikendy-mesic + .vikendy-mesic { border-left: 1px solid var(--linka-2); }
.vikendy-mesic-nazev { padding: 14px 18px 0; font: var(--w-ui) var(--t-male) / 1.2 var(--f-text); color: var(--cokolada-2); }
.vikendy-mesic-nazev::first-letter { text-transform: uppercase; }
.vikendy-rada { list-style: none; display: flex; }
.vikendy-vikend { flex: 1 0 auto; display: flex; scroll-snap-align: start; }
.vikendy-vikend + .vikendy-vikend { border-left: 1px solid var(--linka); }
.vikendy-polozka {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 4px;
  min-block-size: 76px;
  min-inline-size: 7.5rem;
  padding: 10px 18px 16px;
  color: var(--cokolada);
  text-decoration: none;
  white-space: nowrap;
}
.vikendy-datum { font: var(--w-titul) clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem) / 1.15 var(--f-titul); letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.vikendy-cena, .vikendy-stav { font-size: 0.875rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.vikendy-volno .vikendy-cena { font-weight: var(--w-ui); color: var(--svestka); }
.vikendy-volno .vikendy-polozka { transition: background-color var(--d-cedulka) var(--ease); }
.vikendy-volno .vikendy-polozka:hover { background-color: var(--svestka-svetla); }
.vikendy-volno .vikendy-polozka:focus-visible { outline-offset: -4px; }
.vikendy-obsazeno .vikendy-polozka, .vikendy-silvestr .vikendy-polozka { color: var(--cokolada-2); }
.vikendy-obsazeno .vikendy-stav, .vikendy-silvestr .vikendy-stav { color: var(--cokolada-2); }
@media (min-width: 1100px) { .vikendy-mesic { flex: var(--vikendu, 1) 1 0; } .vikendy-vikend { flex: 1 1 0; } .vikendy-polozka { min-inline-size: 0; } }

.vikendy-pata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 28px; margin-top: 14px; color: var(--cokolada-2); }
.vikendy-bezjs { padding: 20px 22px; font-size: var(--t-perex); }

/* telefon: měsíc je jen u prvního víkendu, pruh se posouvá do strany */
@media (max-width: 698px) {
  .vikendy-mapa { scroll-padding-inline: 0; }
  .vikendy-mesic-nazev { padding-inline: 16px; }
  .vikendy-polozka { min-inline-size: 0; min-block-size: 70px; padding: 8px 16px 14px; }
  .vikendy-datum { font-size: 1.0625rem; }
}

/* ===== src/stranky/uvod/80-kam-dal.css ===== */
/* Úvod · 80 · Kam dál (agent H, 21. 10. 2026). Jedna výzva na konci stránky: nadpis na okraji (.hlava-okraj,
   4/12 s vlasovou linkou) a vedle jedna věta Hahmletem se čtyřmi odkazy na podstránky. Odkazy podtržené švestkou
   (jsou to akce), najetí švestkový text. Bez karty a tlačítka. */

.dal-telo { align-items: start; }
/* krátká sekce: nadpis na okraji tu nelepí (jinak by při posunu sjížděl pod větu) */
.dal-telo > .hlava-okraj-hlava { position: static; }
.dal-veta { max-inline-size: 22em; padding-top: 14px; font: 400 var(--t-citace) / 1.32 var(--f-titul); letter-spacing: -0.014em; color: var(--cokolada); text-wrap: pretty; }
.dal-veta a { text-decoration-color: var(--svestka); text-decoration-thickness: 1.5px; text-underline-offset: 0.16em; }
.dal-veta a:hover { color: var(--svestka); }
.dal-veta a:focus-visible { outline-offset: 3px; }

/* ===== src/stranky/uvod/90-galerie-prohlizec.css ===== */
/* Úvod · 90 · Prohlížeč fotogalerie přes celou obrazovku (agent H, 21. 10. 2026). js/galerie.js.
   Čokoládové pozadí jako prohlížeč 360° na Chatě. Nahoře název a pořadí (vápno), vpravo Zavřít (.tl); uprostřed
   fotka celá (bez ořezu) a co největší; dole popisek s datem a šipky (od 900 px šipky po stranách fotky, výš od
   palce na telefonu dole). Fokus na tmavém podkladu vápenný. Pohyb (zvětšení z pásu, listování, tažení) dělá JS
   přes Web Animations, CSS tu má jen klidové stavy. */

.galerie-prohlizec {
  position: fixed;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  color: var(--vapno);
  background: none;
  border: 0;
  overflow: hidden;
  touch-action: pinch-zoom;
  overscroll-behavior: contain;
}
.galerie-prohlizec[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.galerie-prohlizec::backdrop { background: none; }
.galerie-prohlizec :focus-visible { outline-color: var(--vapno); }
.galerie-pr-pozadi { position: absolute; inset: 0; z-index: -1; background-color: var(--cokolada); }

.galerie-pr-hlava { display: flex; align-items: center; gap: 8px 20px; padding: 12px var(--okraj); }
.galerie-pr-nazev { font-size: var(--t-h4); line-height: 1.2; color: var(--vapno); }
.galerie-pr-pocet { font-size: var(--t-male); color: var(--na-tmave-2); font-variant-numeric: tabular-nums; }
.galerie-pr-zavrit { margin-left: auto; }

.galerie-pr-plocha { position: relative; container-type: size; margin-inline: var(--okraj); cursor: grab; }
.galerie-pr-plocha:active { cursor: grabbing; }
.galerie-pr-snimek {
  --galerie-r: 1.5;
  position: absolute;
  inset: 0;
  inline-size: min(100cqi, 100cqb * var(--galerie-r));
  block-size: min(100cqb, 100cqi / var(--galerie-r));
  margin: auto;
  overflow: hidden;
  border-radius: var(--r);
  user-select: none;
}
.galerie-pr-snimek img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; -webkit-user-drag: none; }
.galerie-pr-velka { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms var(--ease); }
.galerie-pr-snimek.je-nactena .galerie-pr-velka { opacity: 1; }

.galerie-pr-pata {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: 10px var(--okraj) max(16px, env(safe-area-inset-bottom));
}
.galerie-pr-popisek { min-block-size: 2.9em; display: grid; place-items: center; text-align: center; font-size: var(--t-male); line-height: 1.45; color: var(--na-tmave-2); text-wrap: balance; }
.galerie-pr-sipka {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  color: var(--vapno);
  background: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color var(--d-cedulka) var(--ease);
}
.galerie-pr-sipka svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.galerie-pr-sipka:hover { background-color: var(--na-tmave-hover); }

@media (min-width: 900px) {
  .galerie-pr-plocha { margin-inline: calc(var(--okraj) + 72px); }
  .galerie-pr-pata { grid-template-columns: minmax(0, 1fr); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .galerie-pr-sipka { position: absolute; top: 50%; inline-size: 56px; block-size: 88px; translate: 0 -50%; }
  .galerie-pr-sipka svg { inline-size: 30px; block-size: 30px; }
  .galerie-pr-zpet { left: var(--okraj); }
  .galerie-pr-dal { right: var(--okraj); }
}