/* ==========================================================================
   Vinařství Starý vrch: prototyp nového webu
   Implementuje docs/design.md. Ne produkční kód, jen náhled pro schválení.
   ========================================================================== */

/* ---------- Fonty ---------- */
/* Ambroise má jediný řez: Demi (R-32). ExtraBold a Light italic se nenasazují.
   Jeden soubor znamená, že se typografie nemá jak rozejít, a ušetří dva requesty. */
@font-face {
  font-family: 'Ambroise';
  src: url('fonty/AmbroiseStd-Demi.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* V produkci přes Adobe Fonts, tady lokální .otf, aby prototyp fungoval offline */
@font-face {
  font-family: 'Basic Sans';
  src: url('fonty/BasicSans-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basic Sans';
  src: url('fonty/BasicSans-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basic Sans';
  src: url('fonty/BasicSans-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}

/* ---------- Tokeny ---------- */
:root {
  --white:  #FFFFFF;
  --cream:  #F3EFEA;
  --sand:   #ECE4D8;
  --orange: #ED6D3E;
  --ink:    #161313;
  --bronze-light: #FC9A62;
  --bronze:       #DD8051;

  --ink-70: rgb(22 19 19 / .70);
  --ink-12: rgb(22 19 19 / .12);
  --ink-06: rgb(22 19 19 / .06);
  /* Tenké oranžové prvky: obrysy, linky, značky. Proti krému 3,81 : 1, tedy nad prahem
     WCAG 1.4.11 pro UI komponenty (3 : 1). Brandová --orange má na tenkých tvarech jen 2,68 : 1.
     Není to druhá brandová barva, je to ztmavená varianta pro místa, kde tenký tvar musí být vidět. */
  --orange-line: #C9552A;

  --font-display: 'Ambroise', 'Times New Roman', serif;
  --font-body: 'Basic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 3.6vw, 4rem);
  --fs-h2:      clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  /* Nadpis uvnitř bloku jede Basic Sans Light (R-41). Sans potřebuje míň bodů než
     serif, proto 24 → 36 px místo 28 → 48 px, stejný přepočet jako u citace a u H3. */
  --fs-h2-blok: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  /* H3 a níž jede Basic Sans Bold (R-28), a ten při stejné optické váze potřebuje
     míň bodů než serif, proto 22 → 26 px, ne 24 → 36 px jako dřív v Ambroise. */
  --fs-h3:      clamp(1.375rem, 1.2rem + .55vw, 1.625rem);
  /* Citace jede Basic Sans Light (R-32). Sans potřebuje míň bodů než serif, proto
     20 → 32 px místo 24 → 40 px. Spodní hranice je to, na co si klient stěžoval:
     citace v Ambroise Light italic byla na mobilu ve 24 px špatně čitelná. */
  --fs-quote:   clamp(1.25rem, 1rem + .9vw, 2rem);
  --fs-lead:    clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  --fs-body:    clamp(1.0625rem, 1rem + .2vw, 1.125rem);

  /* Dvě šířky, ne jedna. Starý web to má stejně a je to hlavní zdroj jeho vzdušnosti:
     obsah běží v úzkém kontejneru (.container, 129.8rem = 1298 px), zatímco hlavička
     dostává plnou šířku (.container--full, 1562 px, na celé homepage jedinkrát).
     Změřeno na živém webu při 1440 px: text v obsahu i v patičce začíná 133 px
     od kraje okna, logo v hlavičce 23 px.
     ⚠️ Dosavadních 1560 px pro všechno bylo přepsané .container--full, tedy hlavička.
     Obsah se tím roztáhl přes celou šířku a boční okraj spadl ze 118 px na 7 px. */
  --container: 1300px;
  --container-siroky: 1560px;
  /* Boční okraj roste se šířkou okna. Starý web toho dosahuje jinak (zmenšuje kořenový
     rem na 58 % pod 1500 px, takže se mu kontejner sám sráží), výsledek je stejný:
     na širokém okně je kolem textu vzduch, na úzkém se nemrhá místem. */
  --gutter: clamp(20px, 5vw, 64px);
  --gutter-siroky: 25px;
  /* 8,4vw dosedne při 1440 px na 121 px a na strop 130 px vyjede v 1548 px.
     Je to křivka starého webu: 13rem při kořenovém remu 9,28 px = 120,6 px. */
  --section: clamp(4rem, 8.4vw, 8.125rem);
  /* Předěl drží 80 px z design.md, sekce 8. Při 4vw z něj při 1440 px vycházelo 58 px. */
  --section-band: clamp(3rem, 5.6vw, 5rem);
  /* Odstup nadpisu od textu pod ním, 24 → 32 px. Starý web měl vzdušnost z `p { margin: 3rem 0 }`,
     tady ji nese nadpis, aby se odstupy nesčítaly mezi odstavci. */
  --gap-nadpis: clamp(1.5rem, 1.1rem + .8vw, 2rem);
  /* Odstup hlavičky od obsahu, který k ní patří, 40 → 58 px. Platí pro hlavičku sekce
     i pro hlavičku stránky. Nesmí se plést s `--section` (121 px): ten odděluje dvě
     různá témata, tohle drží pohromadě nadpis a jeho vlastní obsah. */
  --gap-hlavicka: clamp(2.5rem, 4vw, 4rem);

  --header-h: 88px;
}

/* --gutter si spodní hranici hlídá clampem sám, tady se sráží jen ten pro hlavičku. */
@media (max-width: 640px) { :root { --gutter-siroky: 20px; --header-h: 72px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Otevřené menu zamkne scroll a posuvník zmizí. Bez rezervy by se stránka o jeho
   šířku roztáhla a hamburger by při proměně v křížek uskočil doprava. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Kdyby se skript načetl pozdě, navigace ať radši zmizí za okraj stránky,
     než aby udělala vodorovný posuvník (viz „Hlavička“). */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Fotky mají ostré rohy (brand.md, sekce 6) */
img { border-radius: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Jen pro čtečky. Nese to, co jinak sděluje pouze barva (oranžová hvězdička u povinných polí). */
.sr-jen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%) translateY(-200%);
  background: var(--ink); color: var(--cream); padding: 12px 24px; z-index: 200;
  border-radius: 24px; text-decoration: none; font-size: 15px;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* ---------- Typografie ---------- */
/* CELÝ TYPOGRAFICKÝ SYSTÉM (R-42). Nadpis má tři role a řídí se rolí, ne úrovní.
   Úroveň nadpisu (h1…h4) patří osnově dokumentu, tedy čtečkám a vyhledávačům.
   Písmo patří roli. Míchat obojí do jedné osy nešlo: patička má tři `h2`, které
   se sázejí jako 15px verzálkový sans, a to platilo dávno před R-41.

     .nadpis-sekce   Ambroise Demi   otevírá sekci (h1 stránky, hlavička sekce, předěl, panel)
     (bez třídy)     Basic Sans      nadpis uvnitř bloku
     .rubrika        Basic Sans      verzálkový popisek, sloupce patičky, štítky

   🔴 Ambroise je opt-in, nikdy výchozí. Nadpis, u kterého se role zapomene,
   spadne do Basic Sans: čitelný, s kompletní češtinou, jen opticky slabší.
   Opačný default by tiše rozbíjel `ň ť Ň Ť`, které Ambroise Std neumí (R-29),
   a nikdo by si toho nemusel všimnout. Chyba má padat na bezpečnou stranu.
   ⚠️ Ze stejného důvodu je `.nadpis-sekce` v CMS jediné pole s validací na ty
   čtyři znaky: co je Ambroise a co se validuje, je jeden a týž seznam (R-33). */
h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
/* Ambroise. `h1` ho má bez třídy: je jeden na stránku a je to vždycky nadpis stránky. */
h1, .nadpis-sekce {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
}
h1 { font-size: var(--fs-display); }
/* Výchozí h2 je nadpis uvnitř bloku, tedy Basic Sans Light (R-41). */
h2 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-h2-blok);
  line-height: 1.2;
}
h2.nadpis-sekce { font-size: var(--fs-h2); line-height: 1.1; }
h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
}
h3 { font-size: var(--fs-h3); }

/* Nadpis nikdy nelepí na text pod sebou. Karty a patička si odstup přebíjejí vlastním pravidlem. */
h1, h2 { margin-bottom: var(--gap-nadpis); }

/* 1,45em = 26 px při 18px textu. Starý web má mezi odstavci 28 px (3rem při kořenovém
   remu 9,28 px) a je to znát: 1,1em drželo odstavce v jednom šedém bloku.
   Karty, řady a dlaždice si odstup přebíjejí vlastním pravidlem, tohle je běžný text. */
p { margin: 0 0 1.45em; max-width: 68ch; }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; max-width: 60ch; }

.rubrika {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-70);
  margin: 0 0 20px;
}

.podtrzeno {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.podtrzeno:hover { text-decoration-thickness: 2px; }

/* ---------- Layout ---------- */
.obal {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Plná šířka jen pro hlavičku a oznamovací lištu. Všechno ostatní včetně patičky
   a galerií běží v úzkém kontejneru, přesně jak to má starý web: na jeho homepage
   je .container--full jedinkrát, a to na hlavičce.
   Hlavička musí zůstat široká i provozně: měří si, kolik místa navigace potřebuje
   (R-31), a v úzkém kontejneru by se sedm položek sbalilo do hamburgeru už kolem 1250 px. */
.obal--siroky,
.hlavicka .obal,
.lista .obal {
  max-width: var(--container-siroky);
  padding-inline: var(--gutter-siroky);
}
.sekce { padding-block: var(--section); }
.sekce--pas { padding-block: var(--section-band); }
/* Poslední prvek v sekci nepřidává svůj spodní margin k paddingu sekce. Bez tohohle
   se odstupy sčítají: hlavička stránky (`hero-page`) je vlastní sekce a obsah je sekce
   další, takže mezi nadpis stránky a jeho vlastní obsah padne padding sekce (121 px)
   plus margin perexu (30 px). Změřeno na starém webu: má tam 121 px, tedy jen padding.
   ⚠️ Je to `:last-child`, ne `p:last-child`: poslední bývá i seznam nebo blok tlačítek. */
.sekce > .obal > :last-child { margin-bottom: 0; }
/* Hlavička stránky (`hero-page`): rubrika, H1, perex. Obsah pod ní k ní patří, není to
   další téma, takže mezi ně nepatří odstup sekcí (121 px), ale odstup hlavičky (58 px).
   Je to stejná vazba jako `.hlavicka-sekce` → obsah, jen o úroveň výš, proto stejný token.
   ⚠️ Starý web tu má plných 121 px, tohle je vědomě míň: obě sekce mají stejné pozadí,
   takže tam není žádný vizuální předěl, který by tak velkou mezeru odůvodnil. */
.sekce--hlavicka-stranky { padding-bottom: 0; }
.sekce--hlavicka-stranky + .sekce { padding-top: var(--gap-hlavicka); }
/* Spojený blok: stejné pozadí jako ten nad ním a užší mezera, aby se obojí
   četlo jako jedna sekce (R-43). Je to táž vzdálenost jako u hlavičky stránky:
   58 px drží pohromadě, 121 px odděluje. */
/* Spojený blok (R-43): jedna mezera --gap-hlavicka, ne dvě padnutá na sebe.
   🔴 Srazit jen horní padding nestačí: sekce nad ním si drží svůj spodní,
   takže by mezi „spojenými" bloky zůstalo 121 + 58 px, tedy víc, než mají
   oddělené sekce. `:has` je jediný způsob, jak se v CSS podívat dopředu. */
.sekce--spojena { padding-top: var(--gap-hlavicka); }
.sekce:has(+ .sekce--spojena) { padding-bottom: 0; }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-white { background: var(--white); }
.bg-ink   { background: var(--ink); color: var(--cream); }
.bg-orange{ background: var(--orange); color: var(--ink); }

.hlavicka-sekce { max-width: 62ch; margin-bottom: var(--gap-hlavicka); }
.hlavicka-sekce.stred { margin-inline: auto; text-align: center; }
/* Potomci si nesou vlastní max-width (`p` 68ch, `.lead` 60ch) a u drobných stupňů
   je užší než 62ch rodiče: rubrika ve 13 px se vejde do zhruba 470 px. Bez auto
   marginu jim box zůstane vlevo a text se vycentruje sám v sobě, ne pod nadpisem,
   takže rubrika visí ~100 px vedle osy. Centruje se blok, ne jen řádek. */
.hlavicka-sekce.stred > * { margin-inline: auto; }

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 34px;
  /* Dlouhý popisek v úzkém sloupci se zalomí (balíčky degustací na 1024 px,
     tlačítko přes celou šířku telefonu). Pak má zůstat na středu a pill narůst,
     ne se roztáhnout na řádkování odstavce. */
  text-align: center; line-height: 1.3; padding-block: 8px;
  border-radius: 24px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 18px; font-weight: 400;
  text-decoration: none; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, transform .18s ease-out;
}
.btn:active { transform: translateY(1px); }

/* Hover = prostá inverze, přesně jako na stávajícím webu.
   Ověřeno v CSS staré šablony (stary-vrch-theme/css/style.css):
     .btn--with-border:hover  { background: #161313; color: #F2EEE9; }
     header.header a.btn:hover{ background: transparent; color: #161313; }
   Stejné chování, stejných 0,3 s. Žádná oranžová v tlačítkách, ani v klidu, ani na hover. */
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Hlavní CTA: inkoustová výplň, 16,14:1. Na hover se převrátí na obrys. */
.btn--tmave { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn--tmave:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Uvnitř tmavé sekce se inverze otočí: krémová plocha, inkoustový text */
.btn--svetle { border-color: var(--cream); color: var(--cream); }
.btn--svetle:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* Na oranžové předělové sekci: tmavé tlačítko se převrací na inkoustový obrys.
   Hover na krém by na oranžové ztratil kontrast (krém na oranžové = 2,84 : 1). */
.bg-orange .btn--tmave:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.btn--maly { min-height: 40px; padding: 0 22px; font-size: 15px; }

/* Šipka ↗ u odkazu, který se otevře v novém okně (e-shop). Barvu bere z textu,
   takže se při hoveru převrací spolu s tlačítkem. */
/* Posun dolů optický: flex centruje podle výšky řádku, ale text má těžiště
   níž (malá písmena bez horních dotahů), takže šipka na středu působí vysoko. */
.btn__ven { flex: none; width: .6em; height: .6em; margin-left: .5em; position: relative; top: .08em; }

@media (max-width: 640px) { .btn { min-height: 52px; width: 100%; } .btn--maly { width: auto; min-height: 44px; } }

.btn-radek { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ---------- Oznamovací lišta ---------- */
.lista {
  background: var(--ink); color: var(--cream);
  font-size: 15px; line-height: 1.4;
}
.lista .obal {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding-block: 8px;
}
.lista__info { display: flex; gap: 24px; }
.lista a { text-decoration: none; }
.lista a:hover { text-decoration: underline; }
@media (max-width: 900px) { .lista__info { display: none; } .lista .obal { justify-content: center; text-align: center; } }

/* ---------- Hlavička ---------- */
.hlavicka {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  transition: box-shadow .2s, background-color .2s;
}
.hlavicka--scrolled { box-shadow: 0 1px 0 var(--ink-12); }
.hlavicka .obal {
  display: flex; align-items: center; gap: 32px;
  min-height: var(--header-h);
  transition: min-height .2s;
  /* 🔴 Žádný `overflow` tady ani na `.hlavicka`. Safari 27 ořízne rozbalené
     podmenu na výšku hlavičky i při `overflow-x: clip` (jinde to dělá
     `hidden`) a menu po náběhu zmizí. Pojistka proti vodorovnému posuvníku
     proto visí na `body`, ze kterého podmenu svisle nepřečnívá. */
}
.hlavicka--scrolled .obal { min-height: 68px; }

.logo { flex: none; }
.logo img { width: 160px; height: auto; transition: width .2s; }
.hlavicka--scrolled .logo img { width: 140px; }
@media (max-width: 640px) { .logo img, .hlavicka--scrolled .logo img { width: 132px; } }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a {
  font-size: 16px; text-decoration: none; position: relative; padding-block: 6px;
  white-space: nowrap;
}
/* Linka pod aktivní položkou je inkoustová, ne oranžová (R-84). Jen 1 px a kousek
   nad spodní hranou odkazu: 2 px černé byly těžší než písmo a u spodní hrany
   visely asi 10 px pod textem, takže se od slova odlepily. */
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease-out;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 700; }
/* Na podstránce z podmenu (třeba /nase-vina/sad) se zvýrazní její rodič,
   jinak by v hlavičce nesvítilo nic, dokud na něj nenajede myš. */
.nav__skupina:has(.nav__podmenu a[aria-current="page"]) > a { font-weight: 700; }
.nav__skupina:has(.nav__podmenu a[aria-current="page"]) > a::after { transform: scaleX(1); }


/* Rozbalovací podmenu (ia.md, sekce 2.1): Naše vína a Služby.
   Bez JavaScriptu: otevírá se na hover i na :focus-within, takže to jde
   ovládat klávesnicí (design.md, sekce 9).
   ⚠️ Svislé odsazení skupiny je hoverovací most k menu. Bez něj by mezi
   odkazem a menu byla mezera, ve které kurzor ztratí hover a menu zmizí. */
.nav__skupina {
  position: relative; display: flex; align-items: center;
  padding-block: 14px; margin-block: -14px;
}
.nav__podmenu {
  /* 🔴 Zavřené menu musí být `display: none`, ne jen průhledné. Hlavička si měří,
     kolik místa navigace potřebuje, a bere na to `nav.scrollWidth` (R-31,
     assets/skript.js). Absolutně pozicované menu, které jen není vidět, by do
     té šířky počítalo a hamburger by naskakoval dřív, než je potřeba. */
  display: none;
  position: absolute; top: 100%; left: -24px; z-index: 60;
  min-width: 220px; margin: 0; padding: 12px 0; list-style: none;
  background: var(--cream);
  /* Bez rámečku, jen stín dolů. Panel sedí přesně pod hlavičkou a šedá hrana
     kolem dokola ho četla jako systémový rozbalovací seznam, ne jako hlavičku,
     která se prodloužila dolů. Záporné rozprostření drží stín pod panelem,
     takže nahoru na hlavičku nepadá. Rohy zůstávají ostré: zaoblení je na webu
     vyhrazené ovládacím prvkům (tlačítka, pole, štítky), plochy ho nemají
     (design.md, sekce 6). */
  box-shadow: 0 18px 32px -14px rgb(22 19 19 / .22);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.nav__skupina:hover .nav__podmenu,
.nav__skupina:focus-within .nav__podmenu { display: block; opacity: 1; transform: none; }
/* Náběh z `display: none`: výchozí hodnoty pro první snímek po zobrazení.
   Prohlížeč bez `@starting-style` menu jen ukáže, bez animace. */
@starting-style {
  .nav__skupina:hover .nav__podmenu,
  .nav__skupina:focus-within .nav__podmenu { opacity: 0; transform: translateY(-6px); }
}
/* Šipka říká, že položka má podpoložky, ještě před rozbalením. Je to
   `<svg aria-hidden>` uvnitř odkazu, ne pseudoprvek: `::after` na odkazu
   drží podtržení a znak v `content` by se četl čtečkou. */
.nav__sipka {
  flex: none; margin-left: 7px; width: 10px; height: 6px;
  transition: transform .2s ease-out;
}
.nav__skupina > a { display: inline-flex; align-items: center; }
.nav__skupina:hover > a .nav__sipka,
.nav__skupina:focus-within > a .nav__sipka { transform: rotate(180deg); }

.nav__podmenu li { margin: 0; }
/* Hover jako na hlavní úrovni: inkoustová linka (R-84), která se vysune zleva, žádná šedá
   plocha. Odkaz je přes celou šířku panelu (ať se trefí i myš vpravo od textu),
   linka má ale být jen pod textem, proto visí na `.nav__text`, ne na odkazu. */
.nav__podmenu a { display: block; padding: 6px 24px; font-size: 15px; white-space: nowrap; }
.nav__podmenu a::after { display: none; }
.nav__podmenu .nav__text { position: relative; display: inline-block; padding-block: 4px; }
.nav__podmenu .nav__text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease-out;
}
.nav__podmenu a:hover .nav__text::after,
.nav__podmenu a:focus-visible .nav__text::after,
.nav__podmenu a[aria-current="page"] .nav__text::after { transform: scaleX(1); }

.hlavicka__akce { display: flex; align-items: center; gap: 18px; flex: none; }
.jazyk { font-size: 15px; display: flex; gap: 6px; }
.jazyk > a { text-decoration: none; color: var(--ink-70); }
/* Aktivní jazyk je `<span>`, ne odkaz: na sebe sama nevede. Proto selektor bez `a`. */
.jazyk [aria-current="true"] { font-weight: 700; color: var(--ink); }
/* Jazyk, ve kterém stránka není: vypadá jako ostatní odkazy, ale otevře bublinu. */
.jazyk__nedostupne {
  font: inherit; color: var(--ink-70); background: none; border: 0; padding: 0; cursor: pointer;
}
.jazyk__nedostupne:hover { color: var(--ink); }
/* Bublina žije v top layer, ne v hlavičce. Na desktopu visí pod přepínačem
   zarovnaná k pravému okraji hlavičky (široký kontejner), v mobilním menu nad
   patou, kde je přepínač. Výšku pod tlačítkem doladí skript (skript.js). */
.jazyk__bublina {
  inset: auto; margin: 0;
  top: calc(var(--header-h) - 8px);
  right: calc(max(0px, (100vw - var(--container-siroky)) / 2) + var(--gutter-siroky));
  width: min(320px, calc(100vw - 2 * var(--gutter-siroky)));
  padding: 20px 24px; border: 1px solid var(--ink-12); background: var(--white); color: var(--ink);
  font-size: 15px; box-shadow: 0 18px 32px -14px rgb(22 19 19 / .22);
}
.jazyk__bublina p { margin: 0 0 12px; }
.jazyk__bublina p:last-child { margin-bottom: 0; }
.mobil-menu .jazyk__bublina { top: auto; bottom: 96px; left: var(--gutter-siroky); right: var(--gutter-siroky); width: auto; }

.hamburger {
  display: none; background: none; border: 0; padding: 13px 10px; cursor: pointer;
  margin-left: auto; margin-right: -10px;
}
/* Křížek v mobilním menu je z týchž tří čar, viz „Mobilní menu“ níž. */
.hamburger span, .mobil-menu__zavrit span { display: block; width: 26px; height: 2px; background: var(--ink); }
.hamburger span + span, .mobil-menu__zavrit span + span { margin-top: 6px; }

/* Zlom navigace je daný obsahem, ne pevnou šířkou. Třídu .hlavicka--sbalena
   nasazuje skript.js ve chvíli, kdy se logo, položky a pravý blok přestanou
   vejít na jeden řádek. Sedmá položka, delší anglické názvy i jiný font si tím
   zlom posunou samy, v CSS není žádné magické číslo. */
.hlavicka--sbalena .nav,
.hlavicka--sbalena .hlavicka__akce {
  /* Schované přes visibility, ne display: takhle zůstane navigace vysázená
     a měřitelná i ve sbaleném stavu, takže se rozhodnutí nezacyklí.
     Z pořadí tabulátoru i ze čtečky visibility: hidden položky vyřadí. */
  position: absolute; visibility: hidden; pointer-events: none;
}
.hlavicka--sbalena .hamburger { display: block; }

/* Pojistka, než skript změří (a pro případ, že by neběžel): pod 900 px
   se navigace nevejde v žádném jazyce. */
@media (max-width: 900px) {
  .nav, .hlavicka__akce { display: none; }
  .hamburger { display: block; }
}

/* Mobilní menu */
.mobil-menu {
  position: fixed; inset: 0; z-index: 150; background: var(--cream);
  /* Horní okraj a výšku pruhu s logem dosadí skript podle hlavičky při otevření:
     křížek pak leží přesně na hamburgeru a proměna jednoho v druhý nepoposkočí. */
  padding: var(--menu-odsazeni, 0px) var(--gutter-siroky) 48px;
  display: flex; flex-direction: column; overflow-y: auto;
  /* V nízkém okně se menu posouvá, ale bez viditelného posuvníku: ten by si
     vzal místo vpravo a křížek by vedle hamburgeru uskočil doleva. */
  scrollbar-width: none;
  /* Zavřené menu je `visibility: hidden`, ne `display: none`, jinak by se nedalo
     animovat. Visibility zároveň vyřadí odkazy z tabulátoru i ze čtečky;
     při zavírání se přepne až po doběhnutí prolnutí. Prolnutí čeká, až se
     křížek složí zpátky do hamburgeru, jinak by se proměna ztratila v mizení. */
  visibility: hidden; opacity: 0;
  transition: opacity .3s ease .3s, visibility 0s linear .6s;
}
.mobil-menu[data-open="true"] { visibility: visible; opacity: 1; transition: opacity .3s ease; }
/* Po otevření dotykem dostane fokus samotné menu (kvůli čtečce), obrys by tu byl jen šum. */
.mobil-menu:focus { outline: none; }
.mobil-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: var(--menu-radek, var(--header-h)); }
.mobil-menu__zavrit { background: none; border: 0; cursor: pointer; padding: 13px 10px; margin-right: -10px; }
/* Zavírání: čáry se rozejdou hned, prostřední se vrátí, až ji krajní minou. */
.mobil-menu__zavrit span { transition: transform .3s ease, opacity .2s ease .1s; }
.mobil-menu[data-open="true"] .mobil-menu__zavrit span { transition: transform .3s ease .1s, opacity .2s ease .1s; }
.mobil-menu[data-open="true"] .mobil-menu__zavrit span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobil-menu[data-open="true"] .mobil-menu__zavrit span:nth-child(2) { opacity: 0; }
.mobil-menu[data-open="true"] .mobil-menu__zavrit span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobil-menu nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
/* Regular, ne Bold (R-76): sedm tučných řádků pod sebou bylo těžké a tučné písmo
   pak nemohlo říkat „tady jsi“. Aktuální stránka je proto Bold + inkoustová linka (R-84),
   stejně jako na desktopu. */
.mobil-menu nav a {
  font-family: var(--font-body); font-weight: 400; font-size: 24px;
  text-decoration: none; padding-block: 12px;
  border-bottom: 1px solid var(--ink-06);
}
.mobil-menu nav a[aria-current="page"] {
  font-weight: 700;
  /* 2 px, ne 1 px jako na desktopu: pod 24px tučným textem se tenká linka ztrácela
     a četla se jako chyba. Pořád je tenčí než tahy písma (R-84). */
  text-decoration: underline 2px var(--ink); text-underline-offset: 8px;
}
.mobil-menu__pata { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
/* Přepínač jazyka v patě: na dotyk potřebuje větší plochu než 15px text v hlavičce. */
.mobil-menu__pata .jazyk { align-items: center; gap: 4px; }
.mobil-menu__pata .jazyk > :not([aria-hidden], [popover]) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.mobil-menu__pata .jazyk > :first-child { margin-left: -8px; }

/* Položky po otevření naskočí jedna po druhé. */
.mobil-menu nav > *, .mobil-menu__pata {
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.mobil-menu[data-open="true"] nav > *,
.mobil-menu[data-open="true"] .mobil-menu__pata {
  opacity: 1; transform: none;
  transition-delay: calc(.08s + var(--poradi, 0) * .04s);
}
.mobil-menu nav > :nth-child(2) { --poradi: 1; }
.mobil-menu nav > :nth-child(3) { --poradi: 2; }
.mobil-menu nav > :nth-child(4) { --poradi: 3; }
.mobil-menu nav > :nth-child(5) { --poradi: 4; }
.mobil-menu nav > :nth-child(6) { --poradi: 5; }
.mobil-menu nav > :nth-child(n+7) { --poradi: 6; }
.mobil-menu__pata { --poradi: 7; }

/* Rozbalovací skupina: odkaz na rozcestník vlevo, šipka na rozbalení vpravo. */
.mobil-menu__radek { display: flex; align-items: center; border-bottom: 1px solid var(--ink-06); }
.mobil-menu nav .mobil-menu__radek > a { flex: 1; border-bottom: 0; }
.mobil-menu__rozbal {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  margin-right: -12px; background: none; border: 0; color: var(--ink); cursor: pointer;
}
.mobil-menu__rozbal .nav__sipka { width: 16px; height: 10px; margin: 0; transition: transform .3s ease; }
.mobil-menu__skupina[data-otevrena="true"] .nav__sipka { transform: rotate(180deg); }
/* Výška se animuje přes `grid-template-rows` 0fr → 1fr: `height: auto` animovat nejde
   a pevná `max-height` by u různě dlouhých podmenu jela různě rychle. */
.mobil-menu__podmenu {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
/* 🔴 `inherit`, ne `visible`: potomek s `visible` se ukáže i v zavřeném (skrytém)
   menu. Rozbalené podmenu pak neviditelně leželo přes stránku a chytalo kliknutí. */
.mobil-menu__skupina[data-otevrena="true"] .mobil-menu__podmenu {
  grid-template-rows: 1fr; visibility: inherit;
  transition: grid-template-rows .3s ease;
}
.mobil-menu__podmenu ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 20px; }
.mobil-menu__podmenu li { margin: 0; }
.mobil-menu nav .mobil-menu__podmenu a { display: block; font-size: 18px; padding-block: 10px; }

/* ---------- Hero ---------- */
/* Výšku drží obal, ne fotka: snímky v rotaci leží přes sebe a prolínají se. */
.hero__vizual { position: relative; height: min(78vh, 720px); overflow: hidden; background: var(--sand); }
@media (max-width: 640px) { .hero__vizual { height: 54vh; } }
.hero__snimek { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__snimek--aktivni { opacity: 1; }
.hero__media { width: 100%; height: 100%; object-fit: cover; }
/* Ovládání leží na fotce, proto krémový podklad: světlá i tmavá fotka pod ním
   by jinak inkoustové tečky i text spolkla. */
.hero__ovladani {
  position: absolute; inset-inline: 0; bottom: 20px;
  display: flex; justify-content: flex-end;
}
.hero__ovladani-obal {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 10px; background: rgb(243 239 234 / .92); color: var(--ink);
}
.hero__tecky { display: flex; }
/* Tlačítko 24 × 24 kvůli velikosti cíle (WCAG 2.5.8), tečka v něm má 8 px. */
.hero__tecka {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.hero__tecka::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--ink); transition: background-color .3s;
}
.hero__tecka[aria-current="true"]::before { background: var(--ink); }
/* Pauzu hero s rotací mít musí (WCAG 2.2.2), ale ikonou ve měřítku teček:
   verzálkové „POZASTAVIT“ bylo nejvýraznější věc na fotce. Dvě čárky = běží,
   trojúhelník = stojí. Cíl 24 × 24 jako tečky. */
.hero__pauza {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.hero__pauza::before {
  content: ''; box-sizing: border-box; width: 8px; height: 10px;
  border-inline: 2px solid var(--ink);
}
.hero__pauza[data-stoji]::before {
  width: 0; height: 0; border: 0;
  border-left: 9px solid var(--ink); border-block: 5px solid transparent;
}
.hero__pauza:hover { opacity: .6; }
.hero__text { padding-block: clamp(2.5rem, 5vw, 5rem); }
.hero__text .lead { margin-top: 24px; }

/* ---------- text-media ---------- */
.text-media {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.text-media--obraceny .text-media__media { order: -1; }
.text-media__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Na mobilu jde fotka vždycky nad text, i bez `--obraceny`. Pod textem začínala
   až pod první obrazovkou a stránky s hlavičkou bez fotky se otevíraly stěnou textu (R-81). */
@media (max-width: 900px) {
  .text-media { grid-template-columns: 1fr; }
  .text-media__media { order: -1; }
}

/* ---------- numbers ---------- */
.cisla { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.cislo__hodnota {
  /* `margin: 0`, jinak dědí okraj odstavce (1,45em, tedy 58 px pod číslem)
     a mezeru mezi číslem a popisem pak určuje ten, ne `.cislo__popis`. */
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1;
}
.cislo__popis { font-size: 15px; color: var(--ink-70); margin-top: 12px; max-width: 22ch; }
/* Nadpis kroku je nepovinný. Když je, popis se k němu přitáhne, aby se
   nadpis četl jako jeho titulek, ne jako další odstavec. */
.cislo__nadpis { margin: 20px 0 0; }
.cislo__nadpis + .cislo__popis { margin-top: 8px; }
@media (max-width: 900px) { .cisla { grid-template-columns: repeat(2, 1fr); } }
/* I na telefonu dva sloupce: v jednom by čtyři čísla zabrala přes výšku displeje. */
@media (max-width: 480px) { .cisla { column-gap: 20px; } }
/* Kroky ale nesou celou větu, ne tři slova pod číslem. Ve 160px sloupci se
   rozpadly do pěti řádků po dvou slovech, v jednom se čtou jako postup. */
@media (max-width: 560px) {
  .cisla--kroky { grid-template-columns: 1fr; }
  .cisla--kroky .cislo__popis { max-width: 46ch; }
}

/* ---------- feature-panel (Wine bar na HP) ---------- */
.panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.panel__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel__mrizka img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.panel__mrizka img:first-child { grid-column: span 2; aspect-ratio: 16/10; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }

/* ---------- series-grid ---------- */
.rady { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
/* Sloupcový flex kvůli odkazu: popisy řad jsou různě dlouhé a odkaz hned za
   textem pak v řadě skákal o řádek nahoru a dolů. */
.rada { position: relative; display: flex; flex-direction: column; }
.rada__tvar { height: 96px; display: flex; align-items: flex-end; margin-bottom: 24px; }
.rada__tvar svg { height: 84px; width: auto; }
.rada h3 { margin-bottom: 12px; }
.rada p { font-size: 17px; color: var(--ink-70); margin-bottom: 20px; }
.rada__odkaz { margin-top: auto; align-self: flex-start; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .rady { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rady { grid-template-columns: 1fr; } }

/* Hlavička stránky řady: geometrie vedle nadpisu, ne nad ním. Tvar je značka řady,
   ne dekorace, a na jednom řádku s H1 mají oba stejnou váhu. Nad ním by se četl
   jako ikona, tedy jako něco, co nadpis jen doprovází. */
.hlavicka-rady {
  display: grid; grid-template-columns: 132px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.hlavicka-rady svg { width: 132px; height: auto; }
@media (max-width: 640px) {
  .hlavicka-rady { grid-template-columns: 1fr; }
  .hlavicka-rady svg { width: 88px; }
}

/* ---------- feature-list ---------- */
/* 2–4 sloupce, každý pod tenkou inkoustovou linkou. Dřív byla oranžová,
   ve výčtu se ale opakovala a přebíjela nadpis (R-80). */
.vlastnosti { display: grid; grid-template-columns: repeat(var(--sloupce, 3), 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
/* Linka je pseudoprvek, ne `border-top`: rámeček se vykreslit neumí (R-79).
   Stejnou linku má i `.tip`. */
.vlastnost { position: relative; padding-top: 24px; }
.vlastnost::before, .tip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--ink-12); transform-origin: left;
}
.vlastnost h3 { margin-bottom: 12px; }
.vlastnost p { font-size: 17px; color: var(--ink-70); margin-bottom: 0; }
@media (max-width: 900px) { .vlastnosti { --sloupce: 2 !important; } }
@media (max-width: 560px) { .vlastnosti { --sloupce: 1 !important; } }

/* ---------- cards ---------- */
.karty { display: grid; grid-template-columns: repeat(var(--sloupce, 3), minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.karta { display: flex; flex-direction: column; position: relative; }
/* Celá karta je odkaz: na telefonu se ťuká na fotku, ne na řádek textu pod ní.
   Plochu roztáhne pseudoprvek odkazu, v HTML zůstává jeden `<a>` s čitelným textem. */
.karta__odkaz::after, .rada__odkaz::after { content: ''; position: absolute; inset: 0; }
.karta__media { overflow: hidden; margin-bottom: 24px; }
.karta__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease-out; }
.karta:hover .karta__media img { transform: scale(1.03); }
.karta h3 { margin-bottom: 12px; }
.karta p { font-size: 17px; color: var(--ink-70); margin-bottom: 20px; }
.karta__odkaz { margin-top: auto; text-decoration: underline; text-underline-offset: 4px; font-size: 17px; }
.karta:hover .karta__odkaz { text-decoration-thickness: 2px; }
.karta--portret .karta__media img { aspect-ratio: 3/4; }
/* Portréty týmu zatím nemáme. Než dorazí, drží místo pískový blok s iniciálami:
   na místo obličeje se tak nedostane fotka sudu, která by vypadala jako chyba. */
.portret { aspect-ratio: 3/4; background: var(--sand); display: grid; place-items: center; }
.portret span { font-family: var(--font-display); font-weight: 600; font-size: 72px; line-height: 1; color: var(--ink-12); }
@media (max-width: 900px) { .karty { --sloupce: 2 !important; } }
/* V jednom sloupci splývala karta s další: 24 px mezi odkazem a fotkou pod ním
   je méně než mezery uvnitř karty, takže nebylo poznat, kde jedna končí. */
@media (max-width: 560px) { .karty { --sloupce: 1 !important; row-gap: 64px; } }

/* ---------- menu-gallery (sortiment Wine baru) ---------- */
/* Galerie, kde má každá položka popisek. `gallery` popisky nemá vůbec, `cards` má fotku 4:3
   a odkaz pryč. Tohle je mezi tím: čtvercová fotka, název a věta, co to je.
   ⛔ Bez cen. Nabídka se mění podle sezóny a ceník na webu zastará dřív, než ho někdo přečte. */
/* `auto-fit` místo pevného počtu sloupců: kolik položek klient v CMS zadá, tolik jich
   na řádku bude, bez zásahu do CSS. Prázdné dráhy se sbalí, takže tři položky vyplní šířku. */
.menu-mrizka {
  display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.menu-polozka img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 20px; }
.menu-polozka h3 { margin-bottom: 8px; }
.menu-polozka p { font-size: 17px; color: var(--ink-70); margin-bottom: 0; }
/* Poznámka o sezónnosti nabídky. Je to doplněk mřížky, ne vlastní sdělení, proto malý
   stupeň a ne nadpis. Ze stejného důvodu jako „bez cen": nabídka na webu zastará. */
.menu-pozn { font-size: 15px; color: var(--ink-70); max-width: 60ch; margin: 32px 0 0; }

/* Callout: krátká poznámka uvnitř sekce, ne vlastní sekce. Tenká oranžová linka
   místo boxu, stejný princip jako u .vlastnost: rámeček ne, tvar ano. */
/* Krémová karta místo oranžové linky vlevo (R-80). Světlejší než sekce, ne tmavší:
   tmavší plocha se na písku četla jako šedý panel. Na krémové sekci je karta bílá. */
/* Uvnitř rubrika s nadpisem a vedle text (R-83): karta s jediným odstavcem
   působila prázdně. Mřížka má tři sloupce jako výčet nad ní, text zabírá dva,
   takže nadpis sedí pod prvním sloupcem. Žádné linky, výčet jich má dost. */
.callout {
  background: var(--cream);
  padding: clamp(2rem, 4vw, 3.5rem);
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  font-size: 18px;
  color: var(--ink-70);
}
.callout__text { grid-column: 2 / -1; }
/* Poznámka bez nadpisu se roztáhne přes celou šířku. */
.callout__text:only-child { grid-column: 1 / -1; }
/* Nadpis uvnitř bloku: Basic Sans Light jako výchozí h2, ne tučné h3 sloupců (R-42). */
.callout__nadpis {
  font-weight: 300; font-size: var(--fs-h2-blok); line-height: 1.2;
  color: var(--ink); margin: 0; max-width: 14ch;
}
.callout strong { color: var(--ink); }
/* Poznámka může přijít z rich textu, tedy jako odstavce. Bez tohohle by si
   přinesly vlastní spodní margin a callout by měl dole prázdné místo.
   ⚠️ Potomek, ne přímé dítě: RichText odstavce obaluje do `.payload-richtext`. */
.callout p { margin: 0; max-width: 52ch; }
.callout p + p { margin-top: .8em; }
.callout .callout__odkaz { margin-top: 20px; }
.callout__hlava .rubrika { margin-bottom: 20px; }
.bg-cream .callout { background: var(--white); }
@media (max-width: 760px) {
  .callout { grid-template-columns: 1fr; gap: 20px; }
  .callout__text { grid-column: auto; }
}

/* ---------- tips (tipy na výlety) ---------- */
/* Celá dlaždice je odkaz, ne jen text na konci: kliká se na ni celou. Linka nahoře
   je stejná jako u `.vlastnost` (R-80). */
.tipy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.tip {
  display: block; text-decoration: none;
  position: relative; padding-top: 24px;
}
/* Fotka je povinná, ne volitelná: tip na výlet prodává místo, a to se ukazuje, ne popisuje.
   Linka zůstává nad fotkou, protože je to jediné, čím se dlaždice liší od `cards`. */
.tip__media { overflow: hidden; margin-bottom: 20px; }
.tip__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s ease-out; }
.tip:hover .tip__media img { transform: scale(1.03); }
.tip__meta {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70);
  margin: 0 0 12px;
}
.tip h3 { margin-bottom: 12px; }
.tip p { font-size: 17px; color: var(--ink-70); margin-bottom: 16px; }
.tip__odkaz { font-size: 17px; }
.tip:hover .tip__odkaz { text-decoration-thickness: 2px; }
@media (max-width: 900px) { .tipy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tipy { grid-template-columns: 1fr; } }

/* Tři položky ve dvou sloupcích nechají třetí samotnou a vedle ní prázdnou půlku
   řádku. Na tabletu na výšku (iPad 768–834 px) se proto tři položky vejdou
   vedle sebe. Pod 720 px by sloupce byly moc úzké, tam zůstávají dva. */
@media (min-width: 720px) and (max-width: 900px) {
  .karty:has(> :nth-child(3):last-child),
  .vlastnosti:has(> :nth-child(3):last-child) { --sloupce: 3 !important; }
  .tipy:has(> :nth-child(3):last-child),
  .menu-mrizka:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- partners ---------- */
/* Doplněk kontaktu, ne samostatná sekce. Odtud ta drobná velikost a odsazení linkou.
   ⚠️ Veškeré srovnávání velikostí je v ASSETU, ne tady. Každé logo je vysázené na
   společné plátno 480 × 320 a uvnitř zvětšené tak, aby všechna měla stejnou plochu
   kresby (ne stejnou výšku: plný zelený čtverec o stejné výšce jako kolečko působí
   výrazně větší). Proto je v CSS jen jedna šířka a funguje to i pro logo na šířku:
   obdélník se na stejné plátno vejde a dostane stejnou váhu jako čtverec. */
.partneri-blok {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--ink-12);
}
.partneri-blok .rubrika { margin-bottom: 12px; }
.partneri { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.partner { display: block; }
.partner img { width: 104px; height: auto; }
@media (max-width: 400px) { .partner img { width: 84px; } }

/* ---------- quote ---------- */
.citace { position: relative; max-width: 90ch; margin-inline: auto; text-align: center; }
/* Dekorativní „ jako podklad za začátkem citace. Text citace jede sansem (R-32),
   ale tenhle znak zůstává v Ambroise: je to kresba, ne text, a drží v bloku značku.
   ⚠️ Ambroise má uvozovky opticky velmi malé: vlastní kresba měří zlomek stupně písma
   a leží těsně u účaří, proto ten nezvykle velký font-size. „160 px" v design.md je
   výška kresby, ne velikost písma.
   Přeměřeno pro Demi (dřív to sedělo na ExtraBold, který se už nenasazuje):
   kresba začíná 0,868 em pod horní hranou řádku a měří 0,220 em na výšku,
   proti 0,827 em a 0,277 em u ExtraBoldu. Odtud posun usazení i zvětšení stupně
   z 400 na 500 px, aby značka zůstala opticky stejně velká. */
.citace__znak {
  font-family: var(--font-display); font-weight: 600; font-size: 500px; line-height: 1;
  color: var(--ink-06);
  /* -0,956em = -0,868em (kde kresba začíná) - 0,088em (posun nad první řádek citace).
     Protože je to v em, drží usazení i po změně font-size, zlom níž mění jen stupeň. */
  position: absolute; top: -.956em; left: 50%; transform: translateX(-50%);
  pointer-events: none; user-select: none;
}
@media (max-width: 640px) { .citace__znak { font-size: 330px; } }
/* Recenze v Basic Sans Light (R-32). V Ambroise Light italic byla na mobilu ve 24 px
   špatně čitelná, což je stejné zjištění, ke kterému došel práh „nic v Ambroise pod 36 px". */
.citace blockquote {
  margin: 0; position: relative;
  font-family: var(--font-body); font-weight: 300;
  font-size: var(--fs-quote); line-height: 1.45;
}
.citace figcaption { margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }

/* ---------- cta-band ---------- */
.pas-cta { text-align: center; position: relative; overflow: hidden; }
.pas-cta__vzor {
  position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background: url('img/vzor.svg') center/cover no-repeat;
  mix-blend-mode: multiply;
}
.pas-cta .obal { position: relative; }
.pas-cta h2 { max-width: 22ch; margin-inline: auto; }
/* perex drží šířku a střed z CSS, ne z inline stylu: renderer bloku žádný nepíše */
.pas-cta .lead { max-width: 52ch; margin: 20px auto 0; }
.pas-cta .btn-radek { justify-content: center; }
/* globální `p { max-width: 68ch }` jinak rubriku ve vystředěném předělu nevystředí */
.pas-cta .rubrika { max-width: none; }
/* oranžová jako akcent na inkoustové ploše, 6,03 : 1 */
.bg-ink.pas-cta .rubrika { color: var(--orange); opacity: 1; }
.pas-cta__linka { width: 64px; height: 2px; background: var(--orange); border: 0; margin: 0 auto 28px; }

/* ---------- gallery ---------- */
.galerie {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 26vw, 400px);
  gap: 16px; overflow-x: auto;
  scroll-snap-type: x proximity;
  /* aby kolečko nad karuselem neblokovalo svislý scroll stránky */
  overscroll-behavior-x: contain;
  padding-bottom: 12px;
  /* Poslední dlaždice utíká za okraj okna (brand.md, sekce 7). Nad šířkou
     kontejneru nestačí jen okap: fotka by končila uprostřed prázdného pruhu. */
  --pretok: calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2));
  margin-right: calc(var(--pretok) * -1);
  /* Na konci pásu zůstane za poslední fotkou stejná mezera jako před první. */
  padding-right: var(--pretok);
}
/* `100vw` počítá i klasický posuvník (Windows), karusel by tak o pár pixelů
   přetekl a stránka dostala vodorovný posuvník. Ořízne ho sekce, ne okno. */
.sekce:has(> .obal > .galerie:not(.galerie--mrizka)) { overflow-x: clip; }
.galerie img { width: 100%; aspect-ratio: 4/5; object-fit: cover; scroll-snap-align: start; }
.galerie--mrizka {
  grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
  grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-right: 0;
}
.galerie--mrizka img { aspect-ratio: 1; }
@media (max-width: 900px) { .galerie--mrizka { grid-template-columns: repeat(2, 1fr); } }

.hlavicka-sekce--karusel {
  display: flex; justify-content: space-between; align-items: flex-end;
  max-width: none; gap: 32px;
}
.sipky { display: flex; gap: 12px; flex: none; }
/* Šipky jako na stávajícím webu: kruh z tenké linky, hover jen zeslabí šipku,
   na konci pásu celé tlačítko zešedne na půl. Barvu bere z textu sekce. */
.sipka {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center;
  transition: opacity .3s;
}
.sipka svg { width: 48px; height: 48px; }
.sipka path { transition: opacity .3s; }
.sipka[data-smer="vzad"] svg { transform: rotate(180deg); }
.sipka:not([aria-disabled="true"]):hover path { opacity: .5; }
/* Konec pásu (nastavuje skript). Hover nic nedělá: tlačítko nic neudělá. */
.sipka[aria-disabled="true"] { opacity: .5; cursor: default; }
/* Pás řízený skriptem (slick): sám se neposouvá, jen se táhne. Přetažení
   za krajem dorovnává skript posunem fotek. */
.galerie--slider {
  overflow: hidden; scroll-snap-type: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.galerie--slider > * { translate: var(--pretazeni, 0) 0; }
/* Pod 800 px šipky mizí a zbývá swipe, stejně jako na stávajícím webu. */
@media (max-width: 800px) {
  .hlavicka-sekce--karusel .sipky { display: none; }
}

/* ---------- pricing ---------- */
/* Mezeru mezi sloupci nese `column-gap`, ne odsazení sloupců. Dokud ji nesl padding,
   měl prostřední sloupec odsazení z obou stran, kdežto krajní jen z jedné (aby jejich
   text zůstal zarovnaný s nadpisem sekce), takže byl o 36 px užší: 355 · 318 · 354 px.
   Tlačítko „Chci rezervovat malou degustaci" potřebuje 330 px, do 318 se nevešlo o 12 px
   a zalomilo se na dva řádky, zatímco sousední „velkou" na řádku zůstala. Teď mají
   všechny tři sloupce stejnou vnitřní šířku a krajní text pořád dosedá na okraj obalu. */
.balicky {
  --balicky-mezera: clamp(2.5rem, 3.4vw, 4.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--balicky-mezera);
}
.balicek { position: relative; }
/* Dělicí linka jde doprostřed mezery, ne na okraj sloupce. Kdyby ji nesl `border-left`
   na sloupci, vrátí se tím rozdíl šířek, protože krajní sloupec ji mít nesmí. */
.balicek + .balicek::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--balicky-mezera) / -2);
  border-left: 1px solid var(--ink-12);
}
.stitek {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 16px;
  border-radius: 15px; border: 1px solid var(--ink-12);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 24px;
}
/* Rozdíl nese tečka, ne obrys: tlustý oranžový rám se četl jako tlačítko
   nebo pole ve fokusu. Štítek je popisek jako rubrika, ne nadpis: text i tečka
   jedou v --ink-70, v plném inkoustu přebíjel název degustace pod sebou (R-82). */
.stitek--nutna::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 10px; flex: none;
}
/* Název vede tučně, cena je fakt pod ním, hierarchii nese váha, ne velikost.
   Obojí tučně by se četlo jako dva nadpisy nad sebou. */
.balicek__cena { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-h3); margin: 12px 0 24px; }
.balicek ul { list-style: none; padding: 0; margin: 0 0 28px; font-size: 17px; color: var(--ink-70); }
.balicek li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.balicek li::before { content: '·'; position: absolute; left: 6px; font-weight: 700; color: var(--orange-line); }
@media (max-width: 900px) {
  .balicky { grid-template-columns: 1fr; gap: 48px; }
  .balicek { border-top: 1px solid var(--ink-12); padding-top: 40px; }
  .balicek + .balicek::before { display: none; }
  .balicek:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- 404 a hledání ---------- */
/* Jeden úzký sloupec: nadpis, věta, pole, seznam. Nic vedle, nic pod tím navíc. */
.chyba { max-width: 640px; }
.chyba .lead { margin-bottom: 40px; }
.hledani__pole { margin-bottom: 48px; }
/* Křížek na vymazání: výchozí je modrý a do brandu nepatří. */
.hledani__pole input::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 12px; height: 12px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23161313' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hledani__seznam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-12); }
.hledani__seznam a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--ink-12);
  color: var(--ink); text-decoration: none; font-size: 18px;
}
.hledani__seznam a:hover .hledani__nazev,
.hledani__seznam a:focus-visible .hledani__nazev { text-decoration: underline; text-underline-offset: 4px; }
.hledani__druh { font-size: 13px; color: var(--ink-70); }
.hledani__sipka { margin-left: auto; color: var(--ink-70); transition: transform .2s, color .2s; }
.hledani__seznam a:hover .hledani__sipka { transform: translateX(4px); color: var(--ink); }
.hledani__nic { color: var(--ink-70); }
.chyba__kontakt { margin-top: 32px; font-size: 15px; color: var(--ink-70); }
.chyba__kontakt a { color: var(--ink); }

/* ---------- form (design.md, sekce 5.4) ---------- */
.formular { max-width: 780px; }
.formular__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pole {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 56px; padding: 8px 24px;
  background: var(--white); border: 1px solid var(--ink-12); border-radius: 28px;
}
.pole--siroke { grid-column: 1 / -1; }
/* Zpráva je víceřádková, pill radius by na ní vypadal jako chyba sazby */
.pole--zprava { border-radius: 24px; }
.pole label { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: var(--ink-70); }
.pole input, .pole textarea, .pole select {
  width: 100%; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--ink); resize: vertical;
}
/* `appearance: none` vzal výběru i šipku a pole se nedalo rozeznat od textového.
   Šipka je pozadí, ne pseudoprvek: `select` žádný `::after` nemá. Dlouhá volba
   končí výpustkou těsně před ní, ne useknutím. */
.pole select {
  appearance: none; cursor: pointer;
  padding-right: 28px; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23161313' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center;
}
/* Nápověda nese příklad, který má člověk napodobit, takže musí být čitelná.
   Výchozí šedá prohlížeče je pod prahem kontrastu; --ink-70 dává na bílé
   ~5,7 : 1 a přitom je znatelně světlejší než vyplněná hodnota. */
.pole ::placeholder { color: var(--ink-70); opacity: 1; }
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: none; }
.pole:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Povinnost nesmí nést jen barva: hvězdička je oranžová, ale hned vedle ní stojí slovo. */
.povinne { color: var(--orange-line); }
/* Turnstile stojí hned pod mřížkou. Bez odstupu do něj zasahoval obrys pole se zaměřením. */
.formular .cf-turnstile { margin-top: 16px; }
.formular .btn { width: 100%; margin-top: 24px; }
.formular__pozn { font-size: 15px; color: var(--ink-70); margin-top: 20px; max-width: 60ch; }

/* Chybový stav (design.md, 5.4): obrys 2 px, hláška 15 px inkoustem. Druhý pixel
   obrysu dělá stín, ne `border`, aby pole při chybě neposkočilo. Barva nese jen
   tvar, chybu vždycky říká i text. */
.pole--chyba { border-color: var(--orange-line); box-shadow: inset 0 0 0 1px var(--orange-line); }
.pole__chyba { font-size: 15px; line-height: 1.4; color: var(--ink); margin-top: 4px; }
.formular__chyba {
  margin-bottom: 24px; padding: 20px 24px; background: var(--white);
  border: 1px solid var(--orange-line); box-shadow: inset 0 0 0 1px var(--orange-line);
  border-radius: 24px;
}
.formular__chyba p { margin: 0; }
.formular__chyba .formular__kod { margin-top: 6px; font-size: 13px; color: var(--ink-70); }
/* Fokus sem předává skript, stejně jako u potvrzení. */
.formular__chyba:focus { outline: none; }
.formular__chyba:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Potvrzení po odeslání: nastupuje na místo formuláře, nestojí nad ním.
   Řádek nad vyresetovanými poli se přehlédl a prázdná pole se navíc četla
   jako „nic se neodeslalo". Panel má váhu formuláře, který nahradil. */
.formular__hotovo {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 32px; background: var(--white);
  border: 1px solid var(--ink-12); border-radius: 24px;
}
/* Fokus sem předává skript, aby ho čtečka přečetla. Prstenec u toho nesvítí,
   klávesnicí se na panel nedá dostat (tabindex -1), takže není co značit. */
.formular__hotovo:focus { outline: none; }
.formular__hotovo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.formular__znak {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
}
.formular__hotovo-text h3 { margin-bottom: 8px; }
.formular__hotovo-text p { margin: 0; max-width: 52ch; }
@media (max-width: 640px) { .formular__hotovo { padding: 24px; gap: 16px; } }
@media (max-width: 640px) { .formular__mrizka { grid-template-columns: 1fr; } }

/* ---------- downloads ---------- */
.stazeni { max-width: 90ch; }
.stazeni__polozka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 24px 0; border-top: 1px solid var(--ink-12);
}
.stazeni__polozka:last-child { border-bottom: 1px solid var(--ink-12); }
.stazeni__nazev { font-weight: 700; margin: 0; }
.stazeni__meta { font-size: 15px; color: var(--ink-70); margin: 0 auto 0 0; }

/* ---------- map ---------- */
.mapa-blok { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.mapa-nahled {
  position: relative; background: var(--sand); aspect-ratio: 16/10;
  display: grid; place-items: center; text-align: center; padding: 32px;
}
.mapa-nahled p { font-size: 15px; color: var(--ink-70); max-width: 32ch; margin-bottom: 20px; }
.mapa-nahled iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hodiny { width: 100%; border-collapse: collapse; font-size: 17px; margin: 24px 0 32px; }
.hodiny th { text-align: left; font-weight: 400; color: var(--ink-70); padding: 6px 0; }
.hodiny td { text-align: right; padding: 6px 0; font-variant-numeric: tabular-nums; }
.hodiny tr + tr th, .hodiny tr + tr td { border-top: 1px solid var(--ink-06); }
@media (max-width: 900px) { .mapa-blok { grid-template-columns: 1fr; } }

/* ---------- street-view: virtuální prohlídka ---------- */
/* Převzato ze staré stránky /cs/o-nas/, kde sekce visela pod týmem. Na novém webu
   sedí u příjezdu: mapa říká, kde to je, prohlídka, jak to poznáte.
   Je to Google embed jako mapa, takže se načítá až po souhlasu (R-21).
   Do té doby je tu placeholder s tlačítkem, ne prázdné místo. */
.prohlidka { position: relative; aspect-ratio: 16/9; background: var(--sand); }
.prohlidka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prohlidka__nahled {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center; padding: 32px;
}
.prohlidka__nahled p { font-size: 15px; color: var(--ink-70); max-width: 44ch; margin-bottom: 20px; }
@media (max-width: 640px) { .prohlidka { aspect-ratio: 4/3; } }

/* ---------- latest-posts ---------- */
.clanek__fotka {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  margin-bottom: var(--gap-hlavicka);
}
.aktualita__datum { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 12px; }

/* ---------- FAQ ---------- */
.faq { max-width: 90ch; }
.faq details { border-top: 1px solid var(--ink-12); }
.faq details:last-of-type { border-bottom: 1px solid var(--ink-12); }
/* Otázka je text ke čtení, ne nadpis k obdivu, proto Basic Sans Bold (R-28). */
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 48px 24px 0; position: relative;
  font-family: var(--font-body); font-weight: 700; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
/* Stejný chevron jako u rozbalovacích skupin v menu (`.nav__sipka`, 16 × 10 px
   jako v mobilním menu), otevřený se otočí nahoru. Maska místo znaku v `content`,
   aby ho čtečka nečetla a barvu bral z `currentColor`. */
.faq summary::after {
  content: ''; position: absolute; right: 0; top: calc(24px + .7em - 5px);
  width: 16px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s ease;
}
.faq details[open]:not([data-zavira]) summary::after { transform: rotate(180deg); }
.faq details p { padding-bottom: 24px; margin: 0; }

/* ---------- rich-text ---------- */
/* Volný text: články, program akce, právní stránky. Nadpisy uvnitř jsou nadpisy uvnitř
   bloku, tedy Basic Sans bez třídy (R-42), takže se jich netýká ani validace na ň ť Ň Ť.
   Šířka 68ch je stejná jako u běžného odstavce, jen ji tady drží obal, aby stejně
   zalamovaly i seznamy a tabulky. */
.text-blok { max-width: 68ch; }
.text-blok > :first-child { margin-top: 0; }
.text-blok h2 { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.text-blok h3 { margin-top: 2rem; margin-bottom: 12px; }
.text-blok ul, .text-blok ol { margin: 0 0 1.45em; padding-left: 20px; }
.text-blok li { margin-bottom: 8px; }
.text-blok li::marker { color: var(--orange-line); }

/* ---------- tabulka (seznam cookies) ---------- */
/* Bez rámečků, jen vodorovné linky, stejně jako otevírací doba v bloku `map`.
   Na úzkém displeji se posouvá uvnitř svého obalu, ne celá stránka. */
.tabulka-obal { overflow-x: auto; margin-bottom: 1.45em; }
.tabulka { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tabulka th, .tabulka td {
  text-align: left; vertical-align: top;
  padding: 14px 20px 14px 0; border-top: 1px solid var(--ink-12);
}
.tabulka thead th {
  border-top: 0; border-bottom: 1px solid var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-70);
}

/* ---------- Patička ---------- */
.paticka { background: var(--ink); color: var(--cream); padding-block: clamp(3rem, 5vw, 5rem) 32px; }
.paticka a { text-decoration: none; }
.paticka a:hover { text-decoration: underline; text-underline-offset: 4px; }
.paticka__mrizka { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
/* Sloupce patičky nesou roli `rubrika`, ne roli nadpisu (R-42). Dřív to obstarával
   descendant override `.paticka h2`, což byla přesně ta neviditelná výjimka, kvůli které
   se pravidlo nedalo odvodit z úrovně nadpisu. Teď je role napsaná v HTML.
   Barvu dědí z patičky (krém), základní `.rubrika` má --ink-70 a na inkoustu by zmizela. */
.paticka .rubrika { font-size: 15px; color: inherit; opacity: .7; }
.paticka ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.paticka__logo a { display: inline-block; }
.paticka__logo img { width: 180px; margin-bottom: 24px; }
.paticka__claim { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 1.3; }
.paticka__spodek {
  margin-top: clamp(3rem, 5vw, 5rem); padding-top: 28px;
  border-top: 1px solid rgb(243 239 234 / .18);
  display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; opacity: .8;
}
.paticka__spodek span { margin-right: auto; }
/* Tři právní odkazy se vedle copyrightu nevejdou a poslední padal pod něj,
   odtržený od zbylých dvou vpravo. Copyright proto dostane vlastní řádek. */
@media (max-width: 900px) { .paticka__spodek span { flex-basis: 100%; } }
@media (max-width: 900px) { .paticka__mrizka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* Blok s logem přes celou šířku, skupiny odkazů po dvou vedle sebe:
     v jednom sloupci byla patička delší než celý displej. */
  .paticka__mrizka { column-gap: 20px; }
  .paticka__mrizka > :first-child { grid-column: 1 / -1; }
  /* Odkazy pod sebou potřebují výšku na palec, ne na kurzor. */
  .paticka ul { gap: 0; }
  .paticka li a { display: inline-block; padding-block: 9px; }
}

/* ---------- Pohyb ---------- */
/* 🔴 Sekce se skrývají jen pod `.ma-js`, tedy jen když skript opravdu běží.
   Dokud to viselo natvrdo na `.reveal`, znamenala jakákoli chyba v JS prázdný
   web, ne vynechanou animaci: sekce zůstaly na `opacity: 0` a nikdo je neodhalil.
   Třídu nasazuje inline skript v hlavičce a zase ji sundá, když se `skript.js`
   nerozběhne. **Chyba tím padá na bezpečnou stranu**, stejně jako u nadpisů (R-42). */
.ma-js .reveal { opacity: 0; transform: translateY(16px); }
.reveal.je-videt { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s ease-out; }

/* Položky mřížky naskočí po sobě, stejně jako položky mobilního menu (R-79).
   Pořadí nese CSS, ne skript: od sedmé položky už čekají všechny stejně,
   jinak by se poslední karta v dlouhém výpisu objevila až za vteřinu. */
.ma-js .reveal :is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky) > * {
  opacity: 0; transform: translateY(16px);
}
.reveal.je-videt :is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky) > * {
  opacity: 1; transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
  transition-delay: calc(.1s + var(--poradi, 0) * .08s);
}
:is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky, .panel__mrizka) > :nth-child(2) { --poradi: 1; }
:is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky, .panel__mrizka) > :nth-child(3) { --poradi: 2; }
:is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky, .panel__mrizka) > :nth-child(4) { --poradi: 3; }
:is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky, .panel__mrizka) > :nth-child(5) { --poradi: 4; }
:is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky, .panel__mrizka) > :nth-child(n+6) { --poradi: 5; }

/* Oranžová linka se vykreslí, stejně jako podtržení v navigaci (R-79). Linka ve
   výčtu vlastností jede zleva, linka v předělu je na středu, a tak roste od středu. */
.ma-js .reveal .vlastnost::before,
.ma-js .reveal .tip::before,
.ma-js .reveal .pas-cta__linka { transform: scaleX(0); }
.reveal.je-videt .vlastnost::before,
.reveal.je-videt .tip::before,
.reveal.je-videt .pas-cta__linka {
  transform: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--poradi, 0) * .08s);
}

/* Fotka se odkryje zespodu jako opona a přitom se usadí z mírného přiblížení (R-79).
   Ořez nese obal, zvětšení fotka, jinak by se přiblížená fotka vylila přes okraj.
   Ve Wine baru obal chybí, tam se jen odkrývá. */
.text-media__media { overflow: hidden; }
.ma-js .reveal .text-media__media { clip-path: inset(100% 0 0 0); }
.ma-js .reveal .text-media__media img { transform: scale(1.06); }
.ma-js .reveal .panel__mrizka > * { clip-path: inset(100% 0 0 0); }
.reveal.je-videt .text-media__media,
.reveal.je-videt .panel__mrizka > * {
  clip-path: inset(0);
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1) calc(.1s + var(--poradi, 0) * .12s);
}
.reveal.je-videt .text-media__media img {
  transform: none;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .1s;
}

/* Šipky při najetí popojedou ve směru, kam vedou (R-79). U karuselu se hýbe jen
   šipka, kruh zůstává. Šipka „zpět“ má otočené celé SVG, tak jede sama doleva. */
.btn__ven { transition: transform .3s ease-out; }
.btn:hover .btn__ven { transform: translate(2px, -2px); }
.sipka path { transition: opacity .3s, transform .3s ease-out; }
.sipka:not([aria-disabled="true"]):hover path { transform: translateX(3px); }

/* Prolnutí mezi stránkami (R-79). Umí ho Chrome a Safari, jinde se stránka
   prostě načte jako dřív. Hlavička má vlastní jméno, takže při přechodu stojí
   a prolíná se jen obsah pod ní. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hlavicka { view-transition-name: hlavicka; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .ma-js .reveal,
  .ma-js .reveal :is(.karty, .rady, .vlastnosti, .cisla, .tipy, .menu-mrizka, .balicky) > * { opacity: 1; transform: none; }
  .ma-js .reveal .vlastnost::before,
  .ma-js .reveal .tip::before,
  .ma-js .reveal :is(.pas-cta__linka, .text-media__media img) { transform: none; }
  .ma-js .reveal :is(.text-media__media, .panel__mrizka > *) { clip-path: none; }
}