/* cenik.css · GENEROVÁNO tools/stavba.mjs 23. 10. 2026 9:40:03. Needitovat: zdroj je src/stranky/cenik/*.css.
   Soubory: cenik.css */

/* ===== src/stranky/cenik/cenik.css ===== */
/* Chata Hutisko · Ceník a rezervace (S3 subtle, 21. 10. 2026; dřív builder Okolí + Ceník, kolo 2 a 3).
   Prefixy: rezervace- kal- termin- poptavka- pobyt- cenik- vcene- pravidla- storno- otazky-.
   Barvy, stíny a písma jen z tokenů. Stránka skládá komponenty kap. 10 (12-plan-cozy.md): karta, cedulka, fakt-štítek,
   tlačítko, odkaz, foto, osa, citace. Stehy (čárkovaně) jsou na webu jen tady v kalendáři a jen dva: obsazený den
   (jemný tenký křížek) a vybraný pobyt (švestková linka pod dny). Žádná látka, tkaná textura ani natočení.
   10 · kalendář na čisté kartě, karta Váš pobyt (po výběru švestková), poptávka na kartě s čistými poli;
   20 · ceník jako jemná roční osa s tónovými úseky (vlna, světlá švestka) a cenami na cedulkách;
   40 · 50 · 60 · pravidla, storno (svislá osa) a otázky jednotně s nadpisem na okraji (.hlava-okraj). */

/* ==================== 10 · začátek stránky, 12 · lišta kapitol, 14 · rozvržení kalendáře ==================== */
/* vršek kratší (recenze B5): nadpis, shrnutí a lišta kapitol, kalendář hned pod lištou */
.rezervace-zacatek.kap-tesna { padding-top: clamp(20px, 0.6rem + 1.8vw, 44px); }
.rezervace-shrnuti .pozn { margin-inline-start: 6px; }
.rezervace.kap-tesna { padding-top: clamp(20px, 0.6rem + 1.4vw, 32px); }
@media (min-width: 1080px) and (max-height: 820px) {
  .rezervace-zacatek.kap-tesna { padding-top: 16px; }
  .rezervace.kap-tesna { padding-top: 16px; }
}

.rezervace-mrizka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.4vw, 36px); align-items: start; }
/* od 900 px stojí karta Váš pobyt vedle kalendáře a drží se v okně (R2 B5); mezi 900 a 1 279 px se vedle ní vejde
   jeden měsíc (počet měsíců řídí termin.js podle šířky dne) */
@media (min-width: 900px) {
  .rezervace-mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); row-gap: clamp(36px, 3vw, 52px); }
  .rezervace-kal { grid-column: 1 / span 7; grid-row: 1; }
  .pobyt { grid-column: 8 / span 5; grid-row: 1; align-self: stretch; }
  .pobyt-karta { position: sticky; top: calc(var(--lepivy-vrch) + 22px); }
  .rezervace-poptavka { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1180px) {
  .rezervace-kal { grid-column: 1 / span 8; }
  .pobyt { grid-column: 9 / span 4; }
}

/* ==================== kalendář na čisté kartě ==================== */
/* po skoku na #kalendar (Poptat termín, víkend z Úvodu, lišta kapitol) dopadne karta těsně pod lištu kapitol a její
   nadpis 16–40 px pod ní */
.rezervace-kal { scroll-margin-top: -12px; }
.rezervace-poptavka { scroll-margin-top: calc(12px - clamp(22px, 3vw, 44px)); }
/* kapitoly s nadpisem na okraji: nadpis má nad sebou vlasovou linku a 18 px, kotva z lišty kapitol ho posadí 16–40 px
   pod lištu */
:is(.pravidla, .storno, .otazky).kap { scroll-margin-top: calc(-4px - var(--rytmus)); }
.rezervace-kal.karta {
  padding: clamp(16px, 2vw, 24px) clamp(12px, 2vw, 28px) clamp(16px, 1.8vw, 24px);
  /* obsazený den: jemný tenký křížek (steh) ve čtverci, nikdy se neroztáhne. SVG je obrázek, tokeny do něj nedosáhnou:
     barva je čokoláda 2 z 00-tokeny.css, tlumená průhledností. */
  --kal-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10M10 2 2 10' fill='none' stroke='%235a4a3f' stroke-opacity='.6' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* jen odjezd: jemná půlka (ráno volno, odpoledne přijíždějí další), vlasová úhlopříčka a světlejší spodní trojúhelník */
  --kal-pulka: linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--linka-2) calc(50% - 0.6px) calc(50% + 0.6px), var(--vlna-svetla) calc(50% + 0.6px));
  /* vybraný pobyt: švestková linka pod dny (běžný steh) */
  --kal-linka-pobyt: linear-gradient(90deg, var(--svestka) 0 7px, transparent 7px 11px) repeat-x 0 50% / 11px 2px;
}
@media (max-width: 559px) {
  .rezervace-kal.karta { margin-inline: calc(var(--okraj) * -1 + 6px); padding: 16px 6px 18px; }
  .kal-hlava, .kal-hlaska-misto, .kal-pata, .kal-bez-js { margin-inline: 8px; }
}

.kal-hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.kal-nadpis.karta-nazev { margin-bottom: 0; }
.kal-listovani { display: flex; align-items: center; gap: 6px; }
.kal-sipka {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: var(--cokolada);
  background-color: transparent;
  border: 1px solid var(--linka-pole);
  border-radius: var(--r);
  transition: background-color var(--d-cedulka) var(--ease), opacity var(--d-cedulka) var(--ease);
}
.kal-sipka:hover:not(:disabled) { background-color: var(--svestka-svetla); }
.kal-sipka:disabled { opacity: 0.38; }
.kal-sipka svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kal-mesic-vyber {
  min-block-size: 44px;
  inline-size: 11.5em;
  padding: 0 34px 0 14px;
  font: 500 1rem / 1.2 var(--f-text);
  color: var(--cokolada);
  background-color: var(--vapno);
  background-image: linear-gradient(45deg, transparent 50%, var(--cokolada) 50%), linear-gradient(135deg, var(--cokolada) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--linka-pole);
  border-radius: var(--r);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.kal-mesic-vyber:hover { border-color: var(--cokolada-2); }
@media (max-width: 559px) {
  .kal-listovani { inline-size: 100%; }
  .kal-mesic-vyber { flex: 1; inline-size: auto; min-inline-size: 0; }
}

/* hláška: návod na jednu řádku, nebo důvod, proč termín nejde (místo je rezervované, mřížka neposkočí) */
.kal-hlaska-misto { display: grid; min-block-size: 1.5em; margin-top: 10px; }
.kal-hlaska-misto > .kal-hlaska { grid-area: 1 / 1; }
.kal-hlaska { display: flex; align-items: flex-start; gap: 10px; font: 500 1rem / 1.45 var(--f-text); color: var(--cokolada); }
.kal-hlaska.kal-hlaska-skryta { visibility: hidden; }
.kal-hlaska[data-typ='chyba'] { color: var(--chyba); }
.kal-hlaska[data-typ='chyba']::before { content: ''; flex: none; inline-size: 8px; block-size: 8px; margin: 0.48em 2px 0; background: var(--chyba); rotate: 45deg; }
.kal-hlaska[data-typ='ok'] { color: var(--svestka); }
@media (max-width: 559px) { .kal-hlaska-misto { min-block-size: 2.9em; } }

/* mřížky měsíců (počet nastaví termin.js do --kal-pocet: dva měsíce, když má den aspoň 46 px) */
.kal-mrizky { display: grid; grid-template-columns: repeat(var(--kal-pocet, 1), minmax(0, 1fr)); gap: 16px clamp(22px, 2.8vw, 42px); min-block-size: 404px; margin-top: 8px; }
.kal-mesic { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.kal-mesic caption { caption-side: top; padding: 4px 2px 10px; text-align: left; font: var(--w-ui) 1rem / 1.3 var(--f-text); color: var(--cokolada); }
.kal-mesic caption::first-letter { text-transform: uppercase; }
.kal-mesic th { padding: 0 0 6px; font: 500 0.8125rem / 1 var(--f-text); color: var(--cokolada-2); text-align: center; }
/* buňka má 1 px po stranách: termin.js dává dva měsíce jen při buňce ≥ 46 px, tlačítko dne tak má vždy ≥ 44 px */
.kal-mesic td { position: relative; padding: 3px 1px; block-size: 60px; vertical-align: middle; }
@media (max-height: 820px) and (min-width: 900px) {
  .kal-mesic td { block-size: 51px; padding-block: 2px; }
  .kal-mrizky { min-block-size: 364px; }
}

/* den: volno = políčko s vlasovou linkou a drobnou cenou za noc */
.kal-den {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  inline-size: 100%;
  block-size: 54px;
  padding: 0;
  font: 600 1.0625rem / 1 var(--f-text);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--cokolada);
  background-color: transparent;
  border: 1px solid var(--linka-2);
  border-radius: var(--r);
  transition: background-color var(--d-cedulka) var(--ease), color var(--d-cedulka) var(--ease), border-color var(--d-cedulka) var(--ease);
}
@media (max-height: 820px) and (min-width: 900px) { .kal-den { block-size: 47px; gap: 2px; } }
.kal-den:focus-visible { outline-offset: 2px; z-index: 2; }
@media (hover: hover) {
  .kal-den:not([aria-disabled='true']):hover { background-color: var(--svestka-svetla); border-color: transparent; }
}
.kal-cislo { position: relative; display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; }
.kal-mes { font-size: 0.6875rem; font-weight: 650; color: var(--svestka); }
.kal-cena { font: 500 0.75rem / 1 var(--f-text); letter-spacing: 0.01em; color: var(--cokolada-2); }
@media (max-width: 380px) { .kal-cena { font-size: 0.6875rem; letter-spacing: 0; } }

/* minulý den: jen tlumené číslo */
.kal-den-minuly { color: var(--cokolada-2); border-color: transparent; opacity: 0.45; cursor: default; }

/* obsazená noc: tlumené číslo bez políčka a pod ním jemný tenký křížek (na místě ceny, nic se nepřekrývá) */
.kal-den-obsazeno { color: var(--cokolada-2); border-color: transparent; cursor: not-allowed; }
.kal-den-obsazeno::after { content: ''; inline-size: 12px; block-size: 12px; background: var(--kal-x) center / contain no-repeat; }

/* jen odjezd: jemná půlka, číslo vlevo nahoře (žádná čára přes číslo, aby se den nečetl jako přeškrtnutý, R2 D4) */
.kal-den-odjezd { align-content: start; justify-items: start; padding: 7px 0 0 9px; background-image: var(--kal-pulka); }

/* pobyt: příjezd a odjezd švestkové, noci mezi nimi světlá švestka */
.kal-den-mezi { background-color: var(--svestka-svetla); border-color: transparent; }
.kal-den-od, .kal-den-do { color: var(--vapno); background: var(--svestka); border-color: transparent; }
.kal-den-odjezd.kal-den-do { align-content: center; justify-items: center; padding: 0; }
.kal-den-od .kal-cena, .kal-den-do .kal-cena { color: var(--vapno); opacity: 0.86; }
.kal-den-od .kal-mes, .kal-den-do .kal-mes { color: var(--vapno); }
@media (hover: hover) {
  .kal-den-od:hover, .kal-den-do:hover { background: var(--svestka-tmava); }
}
/* švestková linka pod dny pobytu: kreslí ji buňka, aby šla přes mezery mezi políčky */
.kal-bunka-pobyt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  block-size: 2px;
  background: var(--kal-linka-pobyt);
  pointer-events: none;
}
.kal-bunka-od::after { left: 50%; }
.kal-bunka-do::after { right: 50%; }
.kal-bunka-od.kal-bunka-do::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kal-steh-novy::after { animation: kal-steh 380ms var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
  /* nový pobyt se vybarví po řadě od příjezdu k odjezdu (stejný rytmus jako linka pod dny) */
  .kal-steh-novy > .kal-den-mezi { animation: kal-vypln 260ms var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
  .kal-steh-novy > :is(.kal-den-od, .kal-den-do) { animation: kal-konec 260ms var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
}
@keyframes kal-steh { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kal-vypln { from { background-color: transparent; } }
@keyframes kal-konec { from { background-color: var(--svestka-svetla); color: var(--cokolada); } }

/* dnešek: plná švestková linka pod číslem */
.kal-den-dnes .kal-cislo { padding-bottom: 2px; border-bottom: 2px solid var(--svestka); }
.kal-den-dnes:is(.kal-den-od, .kal-den-do) .kal-cislo { border-bottom-color: var(--vapno); }

/* náhled rozsahu při najetí myší a kolize (plné linky) */
.kal-den-nahled { background-color: var(--svestka-svetla); border-color: transparent; }
.kal-den-nahled-konec { outline: 2px solid var(--svestka); outline-offset: -2px; }
.kal-den-nahled-ne { outline: 2px solid var(--chyba); outline-offset: -2px; }
.kal-den-kolize { outline: 2px solid var(--chyba); outline-offset: -2px; }

/* pata kalendáře: legenda a ukázková obsazenost */
.kal-pata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linka); }
.kal-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: var(--t-male); color: var(--cokolada-2); }
.kal-legenda li { display: flex; align-items: center; gap: 9px; }
.kal-vzor { position: relative; flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 28px; border-radius: var(--r); }
.kal-vzor i { font: normal 500 0.625rem / 1 var(--f-text); color: var(--cokolada-2); padding-top: 11px; }
.kal-vzor-volno { border: 1px solid var(--linka-2); }
.kal-vzor-obsazeno { background: var(--kal-x) center / 13px 13px no-repeat; }
.kal-vzor-odjezd { background-image: var(--kal-pulka); border: 1px solid var(--linka-2); }
.kal-vzor-pobyt { background-color: var(--svestka-svetla); }
.kal-vzor-pobyt::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -6px; block-size: 2px; background: var(--kal-linka-pobyt); }
.kal-ukazka { font-size: var(--t-male); line-height: 1.5; color: var(--cokolada-2); max-inline-size: 30em; }
.kal-bez-js { margin-top: 12px; font-size: var(--t-male); color: var(--cokolada-2); }

/* ==================== karta Váš pobyt (po výběru termínu tmavá švestková .karta-svestka) ==================== */
.pobyt-karta { display: grid; align-content: start; transition: background-color 280ms var(--ease), color 280ms var(--ease); }
.pobyt-nazev { color: inherit; }
.pobyt-prazdno { display: grid; gap: 14px; }
.pobyt-prazdno[hidden] { display: none; }
.pobyt-prazdno-text { color: var(--cokolada-2); }
.pobyt-nejblizsi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding-block: 14px;
  border-block: 1px solid var(--linka);
}
.pobyt-nejblizsi[hidden] { display: none; }
.pobyt-nejblizsi-co { grid-column: 1; font: var(--w-ui) 1rem / 1.3 var(--f-text); color: var(--cokolada-2); }
.pobyt-nejblizsi-kdy { grid-column: 1; font: var(--w-titul) var(--t-h4) / 1.25 var(--f-titul); letter-spacing: -0.01em; color: var(--cokolada); font-variant-numeric: lining-nums; }
.pobyt-nejblizsi-tl { grid-column: 2; grid-row: 1 / span 2; }
.pobyt-nejblizsi-cena { display: block; margin-top: 2px; font: 500 1rem / 1.35 var(--f-text); color: var(--cokolada-2); }
.pobyt-radky[hidden], .pobyt-rozpis[hidden], .pobyt-celkem[hidden], .pobyt-pozn[hidden] { display: none; }
.pobyt-radky dd { text-wrap: balance; }
.pobyt-rozpis { list-style: none; display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linka); }
.pobyt-rozpis li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; font-size: 1rem; line-height: 1.4; }
.pobyt-rozpis-co { font-weight: var(--w-ui); }
.pobyt-rozpis-detail { grid-column: 1; opacity: 0.86; }
.pobyt-rozpis-castka { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: var(--w-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pobyt-celkem { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin-top: 18px; }
.pobyt-celkem-popis { font: 500 1rem / 1.3 var(--f-text); opacity: 0.9; }
.pobyt-celkem-cena { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 2px; }
/* celková cena: plynulý přepočet (js/termin.js) v tabulkových číslicích, ať číslo při počítání neposkakuje */
.pobyt-celkem-cena b { font: var(--w-titul-silny) clamp(2.125rem, 1.6rem + 1.4vw, 3rem) / 1 var(--f-titul); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.pobyt-celkem-od { align-self: baseline; margin-inline-end: 0.3em; font: 500 1rem / 1 var(--f-text); opacity: 0.86; }
.pobyt-celkem-od[hidden] { display: none; }
/* náhled pobytu (najetí nebo fokus na den odjezdu): měnící se údaje švestkově, karta zůstává světlá až do výběru */
.pobyt-karta[data-nahled] :is([data-pobyt-do], [data-pobyt-noci], [data-pobyt-sazba], .pobyt-celkem-cena b) { color: var(--svestka); }
.pobyt-radky dd { transition: color var(--d-cedulka) var(--ease); }
.pobyt-pozn { margin-top: 10px; font-size: 1rem; line-height: 1.45; opacity: 0.92; }
.pobyt-akce { display: grid; gap: 2px; justify-items: start; margin-top: 18px; }
.pobyt-tl { text-align: center; }
/* bez termínu je tlačítko neaktivní: plochá světlá vlna s tlumeným textem, ne vybledlá švestka */
.pobyt-tl:disabled { opacity: 1; color: var(--cokolada-2); background: var(--vlna-svetla); cursor: default; }
.termin-poptano .pobyt-akce { display: none; }
.pobyt-karta.karta-svestka .pobyt-rozpis { border-top-color: var(--na-tmave-hover); }
.pobyt-karta.karta-svestka .pobyt-tl { color: var(--svestka-tmava); background: var(--vapno); }
.pobyt-karta.karta-svestka .pobyt-tl:hover { background: var(--svestka-svetla); }
.pobyt-karta.karta-svestka .pobyt-zrusit { color: var(--vapno); text-decoration-color: var(--na-tmave-2); }
.pobyt-karta.karta-svestka .pobyt-zrusit:hover { color: var(--svestka-svetla); }
@media (prefers-reduced-motion: no-preference) {
  .pobyt-karta.pobyt-nove { animation: pobyt-nove 360ms var(--ease); }
}
@keyframes pobyt-nove { from { translate: 0 6px; } to { translate: 0 0; } }
/* tablet na výšku: karta pod kalendářem na šířku, údaje vlevo, cena a tlačítko vpravo (od 900 px je vedle kalendáře) */
@media (min-width: 700px) and (max-width: 899px) {
  .pobyt-karta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'nazev akce' 'prazdno akce' 'radky celkem' 'radky rozpis' 'radky pozn';
    column-gap: clamp(28px, 4vw, 56px);
  }
  .pobyt-nazev { grid-area: nazev; }
  .pobyt-prazdno { grid-area: prazdno; }
  .pobyt-radky { grid-area: radky; align-self: start; }
  .pobyt-celkem { grid-area: celkem; margin-top: 0; }
  .pobyt-rozpis { grid-area: rozpis; }
  .pobyt-pozn { grid-area: pozn; }
  .pobyt-akce { grid-area: akce; align-self: end; justify-items: stretch; margin-top: 0; }
  /* s termínem: vlevo řádky pobytu, vpravo nahoře celkem, pod ním rozpis, poznámka a tlačítko; zbytek výšky řádků
     dole (vpravo nezůstane díra mezi cenou a tlačítkem) */
  .pobyt-karta[data-stav='hotovo'] { grid-template-areas: 'nazev celkem' 'radky rozpis' 'radky pozn' 'radky akce' 'radky .'; grid-template-rows: auto auto auto auto 1fr; }
  .pobyt-karta[data-stav='hotovo'] .pobyt-akce { margin-top: 14px; }
  .pobyt-karta[data-stav='prijezd'] { grid-template-areas: 'nazev celkem' 'radky pozn' 'radky akce' 'radky .'; grid-template-rows: auto auto auto 1fr; }
  .pobyt-karta[data-stav='prijezd'] .pobyt-akce { margin-top: 14px; }
}

/* ==================== poptávka: karta s čistými poli ==================== */
.rezervace-poptavka.karta { padding: clamp(22px, 3vw, 44px) clamp(18px, 3.4vw, 52px); }
@media (max-width: 559px) { .rezervace-poptavka.karta { margin-inline: calc(var(--okraj) * -1 + 6px); padding-inline: 16px; } }
.poptavka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) {
  .poptavka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 22px; }
  .poptavka > * { grid-column: 1 / -1; }
  .poptavka > .poptavka-kdo { grid-column: 1 / span 6; }
  .poptavka > .poptavka-zprava { grid-column: 7 / -1; }
}
@media (min-width: 1100px) {
  .poptavka > .poptavka-kdo { grid-column: 1 / span 5; }
  .poptavka > .poptavka-zprava { grid-column: 6 / -1; }
  .poptavka > .poptavka-termin { grid-column: 1 / span 8; }
}
.poptavka-nadpis.karta-nazev { margin-bottom: 0; }
.poptavka-past { display: none; }
.poptavka-stav { padding: 12px 16px; font: var(--w-ui) 1rem / 1.4 var(--f-text); color: var(--chyba); border: 1px solid var(--chyba); border-radius: var(--r); }
.poptavka-stav:empty { display: none; }

/* termín ve formuláři: souhrn z kalendáře v jemném rámečku, po výběru světlá švestka */
.poptavka-termin { display: grid; gap: 10px; }
.poptavka-souhrn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  padding: 12px 16px;
  border: 1px solid var(--linka-2);
  border-radius: var(--r);
  transition: background-color var(--d-cedulka) var(--ease), border-color var(--d-cedulka) var(--ease);
}
.poptavka-souhrn-popis { grid-column: 1; font-size: 1rem; color: var(--cokolada-2); }
.poptavka-souhrn-text { grid-column: 1; font: var(--w-ui) 1.0625rem / 1.35 var(--f-text); }
.poptavka-zmenit { grid-column: 2; grid-row: 1 / span 2; font-size: 1rem; }
.poptavka-souhrn-hotovo { background-color: var(--svestka-svetla); border-color: transparent; }
/* přechod z karty Váš pobyt: souhrn termínu krátce zazáří švestkou a usadí se ve světlé švestce (předvyplněno) */
@media (prefers-reduced-motion: no-preference) {
  .poptavka-souhrn.poptavka-souhrn-prenos { animation: poptavka-prenos 900ms var(--ease) 180ms both; }
}
@keyframes poptavka-prenos { from { background-color: var(--svestka); color: var(--vapno); } }
@media (max-width: 420px) {
  .poptavka-souhrn { grid-template-columns: minmax(0, 1fr); }
  .poptavka-zmenit { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* zatržítko: celý řádek je cíl, čtvereček je jen kresba */
.poptavka-zatrzitko { position: relative; display: flex; align-items: center; min-block-size: 44px; justify-self: start; }
.poptavka-zatrzitko input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.poptavka-zatrzitko label { display: flex; align-items: center; gap: 12px; padding-block: 10px; font: 500 1rem / 1.3 var(--f-text); }
.poptavka-ctverec { position: relative; flex: none; inline-size: 24px; block-size: 24px; background-color: var(--vapno); border: 1px solid var(--linka-pole); border-radius: var(--r); }
.poptavka-zatrzitko input:checked + label .poptavka-ctverec { background-color: var(--svestka); border-color: var(--svestka); }
.poptavka-zatrzitko input:checked + label .poptavka-ctverec::after { content: ''; position: absolute; left: 7px; top: 3px; inline-size: 6px; block-size: 12px; border: solid var(--vapno); border-width: 0 2px 2px 0; rotate: 45deg; }
.poptavka-zatrzitko input:focus-visible + label .poptavka-ctverec { outline: 2px solid var(--svestka); outline-offset: 3px; }
.poptavka-zatrzitko input:hover + label .poptavka-ctverec { border-color: var(--cokolada-2); }

/* pole: vápno s obrysem (netextový kontrast ≥ 3 : 1), radius 3 px, fokus švestka, chyba cihlová */
.poptavka-kdo { display: grid; gap: 20px; align-content: start; }
.poptavka-pole { display: grid; gap: 7px; align-content: start; }
.poptavka-pole > label, .poptavka-data legend { font: var(--w-ui) 1rem / 1.3 var(--f-text); color: var(--cokolada); }
.poptavka-nepovinne { font-weight: 400; color: var(--cokolada-2); }
.poptavka-pole :is(input, textarea) {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 13px 14px;
  font: 400 1.0625rem / 1.4 var(--f-text);
  color: var(--cokolada);
  background-color: var(--vapno);
  border: 1px solid var(--linka-pole);
  border-radius: var(--r);
  transition: border-color var(--d-cedulka) var(--ease);
}
.poptavka-pole :is(input, textarea)::placeholder { color: var(--cokolada-2); opacity: 0.85; }
.poptavka-pole :is(input, textarea):hover { border-color: var(--cokolada-2); }
.poptavka-pole :is(input, textarea):focus-visible { border-color: var(--svestka); outline: 2px solid var(--svestka); outline-offset: 2px; }
.poptavka-pole :is(input, textarea)[aria-invalid='true'] { border-color: var(--chyba); outline: 1.5px solid var(--chyba); outline-offset: 0; }
.poptavka-pozn { font-size: 1rem; line-height: 1.4; color: var(--cokolada-2); }
.poptavka-chyba { display: flex; align-items: flex-start; gap: 9px; font: 500 1rem / 1.4 var(--f-text); color: var(--chyba); }
.poptavka-chyba::before { content: ''; flex: none; inline-size: 8px; block-size: 8px; margin-top: 0.45em; background: var(--chyba); rotate: 45deg; }
.poptavka-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; padding: 0; margin: 0; border: 0; }
.poptavka-data legend { padding: 0; margin-bottom: 10px; }
/* zpráva: stejné pole, jen vyšší (žádný papír ani linky sešitu) */
.poptavka-zprava { align-self: stretch; grid-template-rows: auto minmax(0, 1fr); }
.poptavka-zprava textarea { min-block-size: 12rem; line-height: 1.5; resize: vertical; }
@media (max-width: 759px) { .poptavka-zprava textarea { min-block-size: 9rem; } }

/* počet hostů: − číslo + (palcem) */
.poptavka-pocitadlo { display: grid; grid-template-columns: 52px minmax(64px, 1fr) 52px; gap: 6px; max-inline-size: 260px; }
.poptavka-krok {
  min-block-size: 52px;
  padding: 0;
  font: 500 1.375rem / 1 var(--f-text);
  color: var(--cokolada);
  background-color: transparent;
  border: 1px solid var(--linka-pole);
  border-radius: var(--r);
  transition: background-color var(--d-cedulka) var(--ease);
}
.poptavka-krok:hover:not(:disabled) { background-color: var(--svestka-svetla); }
.poptavka-krok:disabled { opacity: 0.4; }
.poptavka-pocitadlo input { text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.poptavka-pocitadlo input::-webkit-inner-spin-button, .poptavka-pocitadlo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* odeslání */
.poptavka-odeslat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.poptavka-tl { min-inline-size: min(100%, 300px); }
.poptavka-tl[aria-busy='true'] { cursor: progress; }
.poptavka-pod { flex: 1 1 18em; font-size: 1rem; line-height: 1.5; color: var(--cokolada-2); max-inline-size: 30em; }
.poptavka-vysledek { flex: 1 1 100%; font-weight: 500; color: var(--chyba); }
.poptavka-vysledek:empty { display: none; }
@media (max-width: 559px) { .poptavka-tl { inline-size: 100%; } }

/* potvrzení: věta, řádky rekapitulace s vlasovou linkou (bez karty v kartě) a dva textové odkazy */
.poptavka-potvrzeni { display: grid; gap: 18px; justify-items: start; }
.poptavka-potvrzeni[hidden] { display: none; }
.poptavka-potvrzeni-text { font-size: var(--t-perex); line-height: 1.5; max-inline-size: 34em; }
.poptavka-potvrzeni-text a { color: var(--svestka); font-weight: var(--w-ui); }
.poptavka-rekap { inline-size: min(100%, 34rem); }
.poptavka-potvrzeni-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }

/* pata formuláře: telefon jednou větou a řádka hodnocení */
.poptavka-pata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--linka-2); }
.poptavka-pata[hidden] { display: none; }
.poptavka-primo { font: 500 var(--t-text) / 1.4 var(--f-text); color: var(--cokolada-2); }
.poptavka-tel { white-space: nowrap; }

/* ==================== 20 · ceník: jemná roční osa s tónovými úseky a cenami na cedulkách ==================== */
.cenik-rok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3px; }
.cenik-mesice, .cenik-mesice > li, .cenik-osa, .cenik-ceny { display: contents; }
.cenik-mesic {
  grid-row: 1;
  grid-column: var(--m);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-block-size: 44px;
  padding: 0 2px 10px;
  font: 500 1.0625rem / 1.2 var(--f-text);
  color: var(--cokolada-2);
  text-decoration: none;
  transition: color var(--d-cedulka) var(--ease);
}
.cenik-mesic:hover { color: var(--svestka); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.cenik-mesic-leto { color: var(--cokolada); font-weight: var(--w-ui); }
/* úsek měsíce: tenký tónový pruh, mimo léto vlna, v červenci a srpnu světlá švestka */
.cenik-usek { grid-row: 2; grid-column: var(--m); block-size: 12px; background-color: var(--vlna-tmava); border: 1px solid var(--linka); border-radius: 2px; }
.cenik-usek-leto { background-color: var(--svestka-svetla); border-color: var(--linka-2); }
.cenik-cena { grid-row: 3; grid-column: var(--od) / var(--do); justify-self: center; margin-top: 20px; list-style: none; }
.cenik-cena-svatky { justify-self: end; display: grid; gap: 10px; justify-items: stretch; }
.cenik-cedulka { display: grid; gap: 3px; justify-items: start; padding: 0.75em 1.1em 0.8em; font-size: 1rem; line-height: 1.3; }
.cenik-cedulka b { font: var(--w-titul-silny) clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem) / 1.05 var(--f-titul); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.cenik-cena-radek { white-space: nowrap; }
.cenik-kdy { font-size: var(--t-male); color: var(--cokolada-2); }
.cenik-svatek { font: var(--w-titul) 1.0625rem / 1.25 var(--f-titul); letter-spacing: -0.01em; }
.cenik-silvestr-odkaz { padding-block: 12px; margin-block: -6px -10px; font-size: 1rem; }
/* pod 1 080 px: nad osou jen leden, červenec a prosinec (pod ní), ceny pod osou vedle sebe, na telefonu pod sebou */
@media (max-width: 1079px) {
  .cenik-mesic { display: none; }
  .cenik-mesic:is([data-kal-skok='mesic:0'], [data-kal-skok='mesic:6'], [data-kal-skok='mesic:11']) {
    display: flex;
    grid-row: 2;
    grid-column: var(--m) / span 3;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 8px 0 0;
    font-size: 1rem;
    white-space: nowrap;
  }
  .cenik-mesic[data-kal-skok='mesic:11'] { grid-column: 10 / -1; justify-content: flex-end; }
  .cenik-usek { grid-row: 1; }
  .cenik-ceny { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .cenik-cena { margin-top: 0; }
  .cenik-cena-svatky { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
}
@media (max-width: 559px) {
  .cenik-ceny, .cenik-cena-svatky { flex-direction: column; align-items: stretch; }
  .cenik-cena-radek { white-space: normal; }
}

/* v ceně je: jedna věta pod osou, vedle hlas hosta o ceně */
.cenik-pod { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(44px, 4vw, 64px); }
@media (min-width: 900px) { .cenik-pod { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.cenik-vcene { font: 400 var(--t-perex) / 1.55 var(--f-text); color: var(--cokolada); max-inline-size: 34em; text-wrap: pretty; }
.cenik-vcene b { font-weight: 650; }
.cenik-citace { padding-top: 4px; }

/* ==================== 40 · pravidla domu: nadpis na okraji s fotkou vstupu, řádky s vlasovou linkou ==================== */
.pravidla-dvere { inline-size: min(52%, 12rem); margin-top: 6px; }
@media (min-width: 900px) { .pravidla-dvere { inline-size: min(100%, 300px); margin-top: 14px; } }
.pravidla-seznam { list-style: none; display: grid; align-content: start; }
.pravidla-seznam > li { padding-block: 16px 18px; font-size: var(--t-perex); line-height: 1.45; text-wrap: pretty; border-top: 1px solid var(--linka-2); }
.pravidla-seznam > li:last-child { border-bottom: 1px solid var(--linka-2); }

/* ==================== 50 · záloha a storno: svislá osa (kdy vlevo na lince, co vpravo) ==================== */
/* lhůty jsou dlouhé, proto osa svisle na všech šířkách: vlasová linka vede za cedulkami jako vodorovná osa za svými
   zastávkami; na telefonu je co pod cedulkou, odsazené vpravo od linky */
.storno-termin b { color: var(--cokolada); font-weight: var(--w-ui); }
.storno-osa.osa { grid-auto-flow: row; gap: 0; padding: 0; }
/* linku kreslí každý úsek od své cedulky k další, takže končí přesně na poslední cedulce (poslední úsek má delší text) */
.storno-osa.osa::before { display: none; }
.storno-usek:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 26px; bottom: -26px; border-left: 1px solid var(--linka-2); pointer-events: none; }
.storno-osa .osa-kdy { position: relative; z-index: 1; top: auto; left: auto; justify-self: start; white-space: nowrap; transition: background-color var(--d-cedulka) var(--ease), color var(--d-cedulka) var(--ease); }
.storno-usek { grid-template-columns: 17rem minmax(0, 1fr); align-items: baseline; column-gap: 24px; padding-block: 12px; }
.storno-co { font: var(--w-titul) var(--t-h4) / 1.25 var(--f-titul); letter-spacing: -0.008em; }
.storno-castka, .storno-pod { margin-top: 4px; font-size: 1rem; line-height: 1.45; color: var(--cokolada-2); max-inline-size: 30em; }
.storno-castka:empty { display: none; }
/* „dnes“: v úseku, ve kterém je dnešek vůči vybranému příjezdu (bez výběru poptávka), švestková cedulka a drobné dnes */
.storno-dnes { display: none; margin-top: 4px; font: var(--w-ui) 1rem / 1.3 var(--f-text); color: var(--svestka); }
.storno-pruh[data-faze='poptavka'] [data-usek='poptavka'] .storno-dnes,
.storno-pruh[data-faze='vratka'] [data-usek='vratka'] .storno-dnes,
.storno-pruh[data-faze='mezi'] [data-usek='mezi'] .storno-dnes,
.storno-pruh[data-faze='propada'] [data-usek='propada'] .storno-dnes { display: block; }
.storno-pruh[data-faze='poptavka'] [data-usek='poptavka'] .osa-kdy,
.storno-pruh[data-faze='vratka'] [data-usek='vratka'] .osa-kdy,
.storno-pruh[data-faze='mezi'] [data-usek='mezi'] .osa-kdy,
.storno-pruh[data-faze='propada'] [data-usek='propada'] .osa-kdy { --c-podklad: var(--svestka); --c-text: var(--vapno); }
/* uplynulé úseky po výběru termínu ztlumené */
.storno-pruh:is([data-faze='mezi'], [data-faze='propada']) [data-usek='vratka'],
.storno-pruh[data-faze='propada'] [data-usek='mezi'] { opacity: 0.5; }
@media (max-width: 599px) {
  .storno-usek { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .storno-osa .osa-kdy { white-space: normal; }
  .storno-text { padding-left: 36px; }
}

/* ==================== 60 · časté otázky: odpověď hned pod otázkou, páry s vlasovou linkou ==================== */
.otazky-seznam { display: grid; margin: 0; }
.otazky-par { display: grid; gap: 8px; padding-block: 18px 22px; border-top: 1px solid var(--linka-2); }
.otazky-par:last-child { border-bottom: 1px solid var(--linka-2); }
.otazky-otazka { font: var(--w-titul) var(--t-h4) / 1.3 var(--f-titul); letter-spacing: -0.008em; color: var(--cokolada); }
.otazky-odpoved { margin: 0; color: var(--cokolada-2); max-inline-size: 36em; text-wrap: pretty; }

/* věty od 1 080 px aspoň 17 px (čitelnost B0-06) */
@media (min-width: 1080px) {
  .pobyt-celkem-popis, .pobyt-pozn, .poptavka-souhrn-popis, .poptavka-pozn, .poptavka-pod, .pobyt-rozpis li,
  .cenik-cedulka, .pobyt-nejblizsi-co, .pobyt-nejblizsi-cena, .poptavka-chyba, .poptavka-stav,
  .storno-castka, .storno-pod, .storno-dnes, .kal-ukazka { font-size: 1.0625rem; }
}