/* ═══════════════════════════════════════════════════════════════════════════
Vinařství Medek — jeden stylopis pro celý web.
Zdroj: schválený náhled /home/tyrell/share/medek-preview/a.html (2026-08-04),
tokeny z redesignu 2026-07-27 (docs/navrhy/base.css + Layout.astro).
Publikuje se na stabilní cestu /css/main.css — na stejný soubor se odkazuje
i služba, která zpracovává objednávky, takže cesta se NESMÍ verzovat hashem.
POZOR na past, která tenhle projekt už jednou pokousala: `padding: X 0 Y`
na prvku, který má zároveň třídu .wrap, přebije wrapperův padding-inline
a obsah spadne na hranu okna (ceny se odřežou). Na všem, co má .wrap,
se používá výhradně `padding-block`.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ Fonty (self-hosted, dělené latin / latin-ext — čeština potřebuje ext) ═══ */
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin-ext-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif-4-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F}
/* ═══ Tokeny ═══ */
:root{
--bg:#f7f3ec; --bg-sunk:#efe8dd; --card:#fffdf9;
--ink:#241a10; --ink-soft:#3a2c1c; --meta:#665645;
--accent:#8a2b1c; --accent-deep:#591a10; --accent-line:#c79a86; --on-accent:#f7f3ec;
--vine:#406049;
--line:#c9bfb3; --line-soft:#ddd6cc;
/* Teple šedá plocha pásu partnerů pod patičkou. Vlastní token, protože žádná
stávající plocha nesedí: --bg-sunk je krém patičky (pás by s ní splynul) a
--line-soft je barva linek, ne plochy. Šedá je teplá (odbarvený krém, ne
neutrální šedá), aby nespadla mimo paletu. */
--bg-band:#e4e0d8;
/* --line-ui je JEN pro obrysy ovládacích prvků (stepper): 3,4:1 na --card,
WCAG 1.4.11. --line/--line-soft zůstávají dekorativní, neměnit. */
--line-ui:#8f8171;
--hairline:rgba(36,26,16,.12);
--shadow:0 1px 2px rgba(90,62,36,.05),0 8px 24px -12px rgba(90,62,36,.16);
--font-display:'Newsreader',Georgia,serif;
--font-body:'Source Serif 4',Georgia,serif;
--font-ui:'Inter',system-ui,sans-serif;
/* ── Stupnice velikostí ──
Nadpisy jdou po stupních: --fs-display (plakát) → --fs-h2 (titulek stránky
a nadpisy sekcí) → --fs-h3 → --fs-h4. Poměr mezi stupni drží 1,2–1,3 i na
mobilu; dřív se na úzké obrazovce h1 a h2 stáhly na 25,6 a 22,4 px, tedy
poměr 1,14, a hierarchie se skoro slila. */
--fs-display:clamp(2.5rem,5.6vw,5rem);
--fs-h2:clamp(1.6rem,3.1vw,2.5rem);
--fs-h3:clamp(1.3rem,2.4vw,1.9rem);
--fs-h4:clamp(1.1875rem,1.05rem + .55vw,1.25rem);
/* Název vína má vlastní stupeň MEZI --fs-h3 a --fs-h2, a je to jediná
výjimka ze škály nadpisů. Důvod: je to nejdůležitější údaj na vinném
lístku (vlastníkova zpětná vazba 2026-08-04), ale opakuje se 27x pod
sebou, takže na --fs-h2 (na desktopu 2,5rem) by z listu byl plakát a
stránka by se natáhla o obrazovky. --fs-h3 byl zase o vlásek málo.
Strop 2,05rem místo 2,5rem drží řádek vína kompaktní i na šířce. */
--fs-wine:clamp(1.45rem,2.6vw,2.05rem);
--fs-lead:clamp(1.2rem,1.5vw,1.4rem);
--fs-eyebrow:.8125rem; --ls-eyebrow:.18em;
/* Drobný tisk, který se OPRAVDU čte (zákonné údaje u vína, nápovědy pod
poli). Na mobilu o stupeň větší: 13 px se na telefonu drženém na délku
paže čte špatně, a zákonné údaje u každého vína jsou to poslední, co má
být nečitelné. Pouhé POPISKY (jednotka u počtu lahví, popisek pod
hodnotou v analytice) zůstávají na --fs-eyebrow i na mobilu — nečtou se
jako text, jen se identifikují, a jejich zvětšení by jen nafouklo řádek
vína. */
--fs-fine:.8125rem;
/* ── Vedení řádku (line-height) ──
JEDNA sada tokenů pro celý web. Výška řádku nadpisu plyne z jeho stupně,
ne z toho, které pravidlo v kaskádě vyhrálo: dřív bylo sedm ručně
rozesetých hodnot (.97 / 1.12 / 1.14 / 1.2 / 1.25 / 1.3 a .85 u ročníku)
a stejně velké nadpisy měly každý jiné vedení.
Na úzkých obrazovkách se všechna vedení nadpisů uvolní — viz
@media (max-width:48rem) na konci souboru. Důvod je český text: slova jsou
delší než v angličtině, takže nadpis se láme na víc řádků, a háčky s
čárkami (á ě ř ů) přidávají k tahu nahoru i dolů. Plakátově těsné vedení,
které na šířce funguje, se pak na telefonu dotýká řádku pod sebou. */
--lh-display:1; /* plakátový claim v hero — nejtěsnější stupeň */
--lh-h1:1.14; /* --fs-h2: titulek stránky, nadpis lístku, objednávka */
--lh-h2:1.2; /* --fs-h3 */
--lh-h3:1.28; /* --fs-h4: karty, skupiny vín, ročník, h3 v próze */
--lh-body:1.7;
--lh-lead:1.6;
--lh-fine:1.5;
--lh-ui:1.35; /* Inter: popisky, tlačítka, položky menu */
--lh-tight:1.25; /* verzálky a čísla v textu — téměř bez dotažnic */
--lh-flush:1; /* jednořádkové ovládací prvky, kde vzduch dělá padding */
/* Prostrkání: čím větší stupeň, tím víc se stahuje. Na mobilu se stahuje
méně (viz @media níž) — v malé velikosti se diakritika slévá do sebe. */
--ls-display:-.021em;
--ls-h1:-.015em;
--ls-h2:-.008em;
--s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
--wrap:74rem;
/* Boční okraje obsahu. Plynulé, bez skoku: 16 px na telefonu (do ~414 px),
odtud lineárně na 24 px při 768 px a výš. Pevných 24 px na 360px displeji
spolykalo 13 % šířky, takže se sloupec zbytečně zužoval a dlouhá česká
slova se lámala dřív, než musela. */
--gutter:clamp(1rem,.4rem + 2.3vw,1.5rem);
--measure:64ch; /* běžný text — v pásmu 45–75 znaků */
--measure-narrow:56ch; /* perex a vedlejší text */
--tap:2.75rem; /* 44 px — minimální dotyková plocha */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/var(--lh-body) var(--font-body);
-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* Nadpisy: balance vyrovná délku řádků a nenechá poslední slovo samotné.
NEPLATÍ pro plakátový claim v hero — tam je krátký poslední řádek
("přirozeně." kurzivou) záměr schváleného návrhu, ne sirotek. */
h1,h2,h3,h4{text-wrap:balance}
.hero h1,.hero-prose h1{text-wrap:wrap}
.eyebrow{font:500 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--meta);margin:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ═══ Titulní logo ═══
Logo nese kresbu i nápis, takže v malé velikosti je nečitelné — ale ve velké
funguje (základ redesignu s ním počítá kolem 140 px). Proto stojí tady, na začátku
stránky, s hodně vzduchem kolem. Odscrolluje se samo: hlavička je v DOMu POD ním
a je sticky, takže se přilepí nahoru teprve ve chvíli, kdy logo odjede. Bez JS.
Pod logem není adresní řádek — vlastník to výslovně zamítl. */
/* Horni pas ma barvu paticky (--bg-sunk): web tim dostane stejny ton nahore
i dole a ctena cast mezi nimi zustava na svetlejsim --bg. */
/* Pas jde pres celou sirku okna, proto .masthead NENI .wrap — pozadi na
wrapperu by skoncilo na jeho max-width (74rem) a na sirokem monitoru by
pruh nedosahl k hranam. Vnitrni odsazeni si proto dela sam. */
.masthead{padding-block:var(--s-8) var(--s-7);padding-inline:var(--gutter);
text-align:center;background:var(--bg-sunk)}
.mast-link{display:block;text-decoration:none}
/* Dolní hranice 7rem, ne 5rem: prostřední člen (13vw) je na telefonu tak malý,
že se clamp vždycky opřel o minimum, takže mobil dostával nejmenší možné logo
(80 px na 360px displeji). A protože logo nese i nápis, malé logo = nečitelný
nápis. 112 px je na telefonu čitelné a nic to nestojí: masthead si na úzké
obrazovce ubere z vlastního odsazení (viz @media (max-width:40rem)), takže je
ve výsledku NIŽŠÍ než dřív a hero i CTA vyjedou nahoru.
Nad ~861 px se hodnota vrací na starou křivku (13vw) a strop 9.5rem drží,
takže desktop zůstává beze změny. */
.logo{display:block;height:clamp(7rem,13vw,9.5rem);aspect-ratio:.8709;background:var(--accent);margin-inline:auto;
-webkit-mask:url('/logo.svg') center/contain no-repeat;mask:url('/logo.svg') center/contain no-repeat}
/* ═══ Hlavička ═══ */
/* Plná krytí (ne .92 průhlednosti): tělo stránky pod lepivou hlavičkou skrz ni
prosvítalo. backdrop-filter zůstává — kromě rozostření nadbytečného pozadí
pod plným krytím dělá containing block pro position:fixed potomky (viz nav
ul níž), na tom nic nesmí sáhnout. */
/* Odjíždějící text má zmizet o řádek dřív, než dojede ke značce MEDEK. Ten
odstup NENÍ součástí lišty — je to pruh v barvě obsahu (--bg), ne v barvě
lišty, protože jinak lišta jen vypadá o čtvrtinu vyšší a hlavička se rozváží.
Dělá ho tvrdý box-shadow: kryje stejně jako pozadí (maluje se v stackovacím
kontextu .top, tedy nad obsahem stránky), ale NEZVĚTŠUJE box hlavičky —
takže lišta zůstává svých 4,25rem, panel nabídky na ni doléhá bez mezery a
nad nabídkou žádný pruh nevzniká.
Dvě zavržené cesty, ať se k nim nikdo nevrací: vyšší .wrap (je
align-items:center, takže polovina přidané výšky padne NAD wordmark, kde je
k ničemu — měřeno 99 px, tj. 14,8 % displeje telefonu), a padding-block-end
na .top (vybarví se pozadím lišty a přesně ten pruh nad nabídkou udělá).
Plné krytí místo dřívějších .92: tělo stránky pod hlavičkou skrz ni
prosvítalo. backdrop-filter zůstává — kromě rozostření dělá containing block
pro position:fixed potomky (viz nav ul níž), na tom nic nesmí sáhnout. */
/* Jen SPODNÍ rámeček, ne border-block. Horní čára stála mezi titulním logem a
navigací a krájela plochu, která je celá jedna barva (#efe8dd) — vlastník ji
nechtěl (2026-08-04). Spodní zůstává: ta odděluje hlavičku od odjíždějícího
obsahu, což je jiná práce. */
.top{position:sticky;top:0;z-index:50;background:rgba(239,232,221,1);backdrop-filter:blur(8px);
border-bottom:1px solid var(--hairline);box-shadow:0 1rem 0 var(--bg)}
.top .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:4.25rem}
/* Textový wordmark, ne logo: logo.svg nese kresbu i nápis, takže v hlavičce je
nápis dvakrát a v malé velikosti nečitelný. Vrátit až bude verze pro malé rozměry. */
/* Wordmark je teď obrázek: /logo-wordmark.svg jsou samotné litery MEDEK vytažené
z loga (viewBox 0 0 127.415 19.95 → aspect-ratio 6.3867). Kreslí se maskou, ne
(drobečkovou navigaci
vykresluje obsluha objednávek na /rezervace a linkuje TENHLE stylopis), takže
drobečky dostávaly `margin-left:auto` a na desktopu odjely od levé hrany
obsahu doprava, na mobilu se z nich stal panel nabídky (position:absolute,
width:0 → nebyly vidět vůbec, a jejich odkazy se sázely Newsreaderem 1,375rem
na střed). Nalezeno 2026-08-04. */
.top nav{margin-left:auto}
.top nav>ul{display:flex;gap:var(--s-5);list-style:none;margin:0;padding:0}
/* nowrap: zalomený popisek podtrhne aria-current jen druhý řádek. Když se navigace
nevejde, ať je to vidět, ne aby se tiše rozlámala. */
.top nav a{font:500 .875rem/var(--lh-flush) var(--font-ui);color:var(--ink-soft);text-decoration:none;padding:.4rem 0;
border-bottom:1.5px solid transparent;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
/* ═══ Přepínač jazyka ═══════════════════════════════════════════════════════
Jazyky stojí jako JEDNA poslední položka téhož seznamu jako nabídka a vlastní
vnořený seznam si sází do řádky (viz komentář v Layout.astro: sourozenecký
by na mobilu otevřel druhý panel, a samostatná na položku by v
panelu zabrala čtyři řádky). Potišené a oddělené vlasovou linkou, aby řádek
nečetl jako deset rovnocenných položek nabídky. */
.top nav .lang-row>ul{display:flex;gap:var(--s-3);list-style:none;margin:0;padding:0}
.top nav .lang-row{margin-left:var(--s-3);padding-left:var(--s-4);
border-left:1px solid var(--hairline)}
.top nav .lang-row a{font-size:.875rem;letter-spacing:.06em;color:var(--meta)}
.top nav .lang-row a:hover{color:var(--accent)}
/* Navigace nestojí u pravé hrany pořád. Dokud je vidět titulní logo, je wordmark
v liště skrytý a hlavička je tedy JEN nabídka — ta pak patří do osy okna,
přesně pod logo. Ve chvíli, kdy logo odscrolluje a v liště se rozsvítí MEDEK,
nabídka odjede doprava a udělá mu místo. Jeden pohyb, jeden okamžik: řídí ho
stejné přepnutí .past-masthead jako prolnutí wordmarku, takže se značka
nikdy nerozsvítí do místa, kde ještě stojí nabídka.
Proč je nav v desktopu z toku (position:absolute): posun jde animovat na
`left`/`translate`, kdežto flexové zarovnání (margin-left:auto → střed)
přechod nemá — mezi dvěma zarovnáními prohlížeč neinterpoluje.
Střed je 50 % padding boxu .wrapu (odsazení je symetrické, takže je to
současně střed obsahu i okna), pravá poloha je o --gutter zpět, tedy přesně
tam, kde nav stával ve flexu.
Jen nad hamburgerovým breakpointem: pod ním je nav sám position:absolute o
nulové velikosti a jeho je vytahovací panel (viz @media max-width:58rem),
takže tam se nehýbe nic — pilulka hamburgeru drží svou pozici, jak vyžaduje
pravidlo o shodě mobilní lišty. */
@media (min-width:58.0625rem){
.top .wrap{position:relative}
.top nav{position:absolute;top:50%;left:calc(100% - var(--gutter));translate:-100% -50%}
html.js .top nav{transition:left .32s cubic-bezier(.4,0,.2,1),translate .32s cubic-bezier(.4,0,.2,1)}
html.js:not(.past-masthead) .top nav{left:50%;translate:-50% -50%}
/* Bez JS totéž scroll-driven animací nad view-timeline masthead — stejná
dvojice cest jako u wordmarku výš. Prohlížeč bez podpory (dnes Firefox bez
JS) nechá nabídku vpravo, tedy v chování před touhle změnou. */
@supports (animation-timeline: view()){
@keyframes nav-to-right{
from{left:50%;translate:-50% -50%}
to{left:calc(100% - var(--gutter));translate:-100% -50%}
}
html:not(.js) .top nav{animation:nav-to-right linear both;animation-timeline:--masthead;
animation-range:exit 0% exit 100%}
}
/* Kdo si vypnul animace, dostane obě polohy skokem (s JS), respektive žádný
pohyb vůbec (bez JS, kde je pohyb navázaný na scroll a plynulý být musí). */
@media (prefers-reduced-motion:reduce){
html.js .top nav{transition:none}
html:not(.js) .top nav{animation:none}
}
}
/* Hned nad hamburgerovým breakpointem je to na dva pixely: navigace potřebuje 914 px
a klasický posuvník ukrojí z 928 px okna dalších 15. Menší mezera to vyřeší, aniž
by se hýbalo breakpointem (ten je výsledek auditu). */
@media (min-width:58.0625rem) and (max-width:64rem){
.top nav>ul{gap:var(--s-4)}
.top .wrap{gap:var(--s-4)}
}
.burger{display:none}
/* Nad breakpointem hamburger neexistuje, takže přepínač jde úplně mimo tab order —
jinak tam zůstane jeden Tab bez viditelného rámečku. V @media níž se vrací jako
fokusovatelný (1px + opacity:0), NIKDY atributem hidden. Obě poloviny musí zůstat. */
#navtoggle{display:none}
#navtoggle:focus-visible~.top .burger{outline:2px solid var(--accent);outline-offset:2px}
/* Stinitko: viditelne jen s rozbalenou nabidkou. Mimo nabidku je to ,
takze klepnuti mimo ji zavre. Vychozi display:none znamena, ze zavrene menu
nikdy nechyta kliky. */
.nav-scrim{display:none}
.skip{position:absolute;left:-9999px}
/* Cíle skip linku a obou CTA — bez tohohle přistane nadpis pod lepivou hlavičkou.
Doplňuje tabindex="-1" v šablonách, jinak fokus zůstane na BODY.
6,15rem = skutečná výška hlavičky (.wrap 4,25rem + krycí pruh 1rem přes
box-shadow + 1px spodního rámečku = 85px) plus .75rem rezerva.
Drží se společně s .top výše a s nav ul inset/max-height níž — všechny tři
počítají s jednou a tou samou skutečnou výškou hlavičky, takže měnit jen
jednu z nich rozbije zarovnání. */
#listek,#obsah,#objednavka{scroll-margin-top:6.15rem}
#obsah:focus,#listek:focus{outline:none}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:99;background:var(--accent);color:var(--on-accent);padding:.7rem 1rem;border-radius:2px}
/* ═══ Drobečková navigace ═══
Na stránkách z tohohle repa není — jediná stránka webu, která cestu nad
titulkem má, je /rezervace, a tu vykresluje obsluha objednávek
(roles/medek-order v repu ansible), ne Hugo. Styl přesto patří sem: ta služba
linkuje TENHLE stylopis na stabilní cestě /css/main.css, takže druhá kopie
pravidel by se s tokeny rozešla při prvním doteku.
Oddělovač je v ::before, ne v HTML: čtečka nemá předčítat znak mezi
položkami, patří k dekoraci, ne k obsahu cesty. */
.breadcrumbs{margin:0 0 var(--s-5)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-2);
list-style:none;margin:0;padding:0;
font:400 var(--fs-fine)/var(--lh-ui) var(--font-ui);color:var(--meta)}
.breadcrumbs li{display:inline-flex;align-items:baseline;gap:var(--s-2)}
.breadcrumbs li+li::before{content:"\203A";color:var(--line)}
.breadcrumbs a{color:var(--meta);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.breadcrumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Aktuální stránka není odkaz — tmavší než zbytek cesty, aby bylo poznat, kde
člověk stojí, ale ne tak tmavá, aby soupeřila s titulkem pod sebou. */
.breadcrumbs [aria-current]{color:var(--ink-soft)}
/* ═══ Hero — claim jako plakát ═══
Fotka rodiny jde VEDLE textu, ne pod nej: prava polovina hero byla prazdna,
takze slot nestoji ani pixel svisle a nic netlaci pod ohyb. Na mobilu se sklada. */
.hero{padding-block:var(--s-9) var(--s-7)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-7);align-items:start}
.hero-col{min-width:0}
.hero-solo .hero-grid{grid-template-columns:minmax(0,1fr)}
/* Uvodni fotka: Jaromir a Jozka. Stoji vedle textu, takze nic netlaci pod ohyb. */
.portrait{margin:0}
.portrait img{width:100%;border-radius:2px}
.portrait figcaption{margin:var(--s-3) 0 0;font:400 .9375rem/var(--lh-lead) var(--font-ui);color:var(--meta)}
.hero h1,.hero-prose h1{font:400 var(--fs-display)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display);margin:var(--s-4) 0 var(--s-5);max-width:22ch}
.hero h1 em,.hero-prose h1 em{font-style:italic;color:var(--accent)}
.lead,.hero-prose>p:first-of-type{font:400 var(--fs-lead)/var(--lh-lead) var(--font-body);color:var(--ink-soft);max-width:var(--measure-narrow);margin:0 0 var(--s-6)}
.lead-tight{font:400 1.0625rem/var(--lh-body) var(--font-body);color:var(--ink-soft);max-width:var(--measure-narrow);margin:0 0 var(--s-6)}
.hero-prose>p{max-width:var(--measure-narrow);color:var(--ink-soft)}
.hero-prose a{text-underline-offset:.2em}
/* Náhradní nadpis z názvu stránky — menší než plakátový claim, aby nesoutěžil
s logem nad sebou. Viz komentář v layouts/index.html. */
.hero-prose-plain h1{font:400 var(--fs-h2)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);margin:0 0 var(--s-5);max-width:28ch}
/* Grid s rovnými stopami, ne flex: ve flexu si každé tlačítko vzalo šířku podle
délky svého popisku, takže tři CTA v hero ("Vinný lístek a ceny" /
"Rezervace degustací" / "Upozornění do e-mailu") byla viditelně nestejná a
naskládaná pod sebou na telefonu vypadala jako tři různé prvky. auto-fit +
1fr = všechny stopy stejně široké, ať jich na řádek vyjde kolik chce;
min(12rem,100%) drží tři vedle sebe na desktopu a zároveň nepřeteče na 320 px
(stejný vzorec jako .cards a .foot-grid — pevná hodnota by přetékala). */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:var(--s-3)}
/* --lh-ui, ne 1: popisek tlačítka se na úzkém displeji láme (odesílací tlačítko
objednávky na 320 px), a při vedení 1 se pak dva řádky textu překryly.
text-align:center — jako položka gridu se tlačítko roztáhne na celou stopu,
takže popisek už není zarovnán šířkou obsahu. */
.btn{display:inline-block;font:500 .9375rem/var(--lh-ui) var(--font-ui);padding:.85rem 1.4rem;border-radius:2px;text-decoration:none;
border:1px solid var(--accent);min-height:var(--tap);cursor:pointer;text-align:center}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}
.btn-ghost{color:var(--accent);background:transparent}
.btn-ghost:hover{background:rgba(138,43,28,.06)}
/* Konverzní tlačítko uvnitř obsahové stránky (rezervace degustace, ubytování).
Stojí samo v textu, takže potřebuje jen vzduch kolem sebe; na telefonu jde
přes celou šířku, aby byl cíl dost velký na palec. */
.page-cta{margin:var(--s-6) 0}
@media (max-width:40rem){.page-cta .btn{display:block;width:100%}}
/* ═══ Obsahové stránky ═══ */
.page-head{padding-block:var(--s-8) var(--s-5)}
.page-head h1{font:400 var(--fs-h2)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);margin:0;max-width:28ch}
.page-head .lead{margin-top:var(--s-4)}
/* POZOR: zadne max-width:none. Do 2026-08-04 tady bylo a rusilo .wrap
(max-width:74rem + margin-inline:auto), takze na sirokem monitoru zacinal
text 24 px od hrany okna misto na hrane obsahoveho sloupce. Mericko rady
drzi .prose>* nize, kontejner ho drzet nemusi. */
.prose{padding-block:0 var(--s-9)}
/* .prose-top: obsah nese vlastní h1, takže žádná .page-head nad ním nestojí
a vzduch pod hlavičkou musí dodat sám. */
.prose-top{padding-block:var(--s-8) var(--s-9)}
.prose>*{max-width:var(--measure)}
/* h1 z těla obsahu se chová jako titulek stránky (přenesené stránky si ho nesou samy). */
.prose h1{font:400 var(--fs-h2)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);margin:0 0 var(--s-5);max-width:28ch}
.prose h1+p,.prose h1+ul{margin-top:0}
.prose h2{font:400 var(--fs-h3)/var(--lh-h2) var(--font-display);letter-spacing:var(--ls-h2);margin:var(--s-7) 0 var(--s-3)}
.prose h3{font:600 var(--fs-h4)/var(--lh-h3) var(--font-display);margin:var(--s-6) 0 var(--s-2)}
/* Čtvrtý stupeň v obsahu zbyl jeden jediný (uvození vzorového formuláře pro
odstoupení v obchodních podmínkách); adresní blok u "Kdo jde s kůží na trh"
býval taky h4 a od 2026-08-04 je to + (viz .seller níž), takže
pravidlo h4+h4 už nic nedrží pohromadě a stojí tu jen jako pojistka. Bez
tohohle pravidla prohlížeč h4 vysadí jako tučný BĚŽNÝ text: Source Serif 4 v
řezu 700, který hostovaný není (máme 400 a 600), takže ho tuční syntheticky.
h5/h6 v obsahu nejsou, ale ať nikdy nezůstanou nenastylované. */
.prose h4,.prose h5,.prose h6{font:600 1.0625rem/var(--lh-h3) var(--font-display);color:var(--ink);margin:var(--s-5) 0 var(--s-2)}
.prose h4+h4,.prose h5+h5,.prose h6+h6{margin-top:0}
/* ── Definiční seznamy: kontakty a identifikace prodejce ───────────────────
Web do 2026-08-04 neměl jediný . Kontaktní stránka byla 25 místo textu — odečítačka tam hlásila šest nadpisů, které
nadpisy nejsou, a osnova právní stránky byla špatně. Obojí je pár
popisek→hodnota, takže . Vizuál drží ten původní. */
.prose address{font-style:normal} /* prohlížeč sází kurzívou */
.prose dl{margin:0 0 var(--s-4)}
.prose dt{font-weight:600;color:var(--ink)}
.prose dd{margin:0}
/* Prodejce: popisek a hodnota na JEDNOM řádku, tedy jeden řádek na údaj přesně
jako dřív se šesti h4 — jen tučný je teď popisek, ne celý řádek. */
.seller .seller-name{font:600 1.0625rem/var(--lh-h3) var(--font-display);color:var(--ink);margin:0 0 var(--s-2)}
.seller dl{margin:0}
.seller dt,.seller dd{display:inline}
.seller dt::after{content:":\00a0"}
.seller dd::after{content:"";display:block}
/* ── Contact page ─────────────────────────────────────────────────────────
/kontakt was one 64ch column of same-weight blocks: five contact records,
three sets of walking directions and the invoicing block all sat in the
reading flow at identical visual weight, so nothing could be found by
scanning and the right half of a desktop window stayed empty.
The page is now four bands - what a visitor wants, in the order they want
it: where/write/book, who to ring, how to get here, small print. The three
wide bands opt out of the reading measure (.prose>* caps everything at
--measure) because they hold data, not prose. */
.prose>.contact-top,.prose>.contact-people,.prose>.contact-fine{max-width:none}
/* Band 1 and band 2 sit side by side: the address and "which way to us" answer
one question between them, so splitting them by a screenful of person cards
made the visitor scroll back up to check the address (Jaromír, 2026-08-07).
Two equal columns rather than a wide/narrow split - the stacked contact panel
and the five closed disclosures happen to run to about the same height, so
neither column leaves a hole under it. */
.contact-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s-7);align-items:start;margin:var(--s-6) 0 var(--s-8)}
.contact-top .contact-key{grid-template-columns:minmax(0,1fr);margin:0}
.contact-ways>h2{margin-top:0}
/* Band 1: address, e-mail, booking. One panel split by hairlines rather than
separate cards - bordered boxes read as unrelated things, and these are one
answer to "how do I reach you". The dividers are a 1px grid gap over the
panel's own background, not borders on the items: that draws the line on
whichever edge the cells actually meet, so the same rule survives the Czech
page's stacked column, a locale with two cells instead of three, and the
phone layout. */
.contact-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
gap:1px;margin:var(--s-6) 0 var(--s-8);background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:2px}
.contact-key-item{padding:var(--s-5);background:var(--card)}
/* Labels are eyebrows, same as the footer's column headings: they name a
field, they are not sections competing with the page's own h2s. */
.contact-key h2{font:500 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--meta);margin:0 0 var(--s-3)}
.contact-key address{font-style:normal;margin:0}
.contact-key p{margin:var(--s-2) 0 0}
.contact-key-strong{font:400 var(--fs-h4)/var(--lh-h3) var(--font-body);margin:0}
.contact-key-note{font:400 var(--fs-fine)/var(--lh-fine) var(--font-ui);color:var(--meta)}
/* Band 2: who to ring for what. Cards, because each is a separate decision -
the visitor picks one and stops reading the others. Shares its surface with
.cards li above rather than restating the same four values. */
.contact-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
gap:var(--s-5);margin:0 0 var(--s-6)}
.cards li,.person{background:var(--card);border:1px solid var(--line-soft);border-radius:2px;padding:var(--s-5)}
.person h3{font:600 var(--fs-h4)/var(--lh-h3) var(--font-display);margin:0}
.person-role{font:500 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--meta);margin:var(--s-2) 0 0}
.person-scope{margin:var(--s-3) 0 0;color:var(--ink-soft)}
/* The number is what the card exists for: Inter (numerals), and a full 44px
tap target, which an inline link inside a paragraph does not have. */
.person-tel{margin:var(--s-2) 0 0}
.person-tel a{display:inline-flex;align-items:center;min-height:var(--tap);
font:500 1.0625rem/var(--lh-ui) var(--font-ui)}
/* Band 3: directions. Two of the three are step-by-step walking instructions
that only matter to someone actually travelling today, and they were most of
the page's text. Collapsed by default: the text stays in the HTML (a curl
returns it in full), it just no longer stands between the visitor and the
phone numbers. */
/* Closes the directions block: the walking routes answer "which way", the
timetable answers "when", and it belongs to none of the five rows above it
(Jaromír 2026-08-10 — it opened the block and read as the first instruction).
Meta weight; the space above it is the last row's own margin. */
.ways-note{font:400 var(--fs-fine)/var(--lh-fine) var(--font-ui);color:var(--meta);
max-width:var(--measure);margin:0}
.way{border-top:1px solid var(--line-soft)}
.way:last-of-type{border-bottom:1px solid var(--line-soft);margin-bottom:var(--s-6)}
.way summary{display:flex;align-items:center;gap:var(--s-3);cursor:pointer;list-style:none;
min-height:var(--tap);padding:var(--s-2) 0;
font:600 var(--fs-h4)/var(--lh-h3) var(--font-display);color:var(--ink)}
.way summary::-webkit-details-marker{display:none}
/* Chevron: right when closed, down when open. Drawn from two borders so it
costs no icon file and inherits the accent colour. */
.way summary::before{content:"";flex:none;width:.45rem;height:.45rem;margin-left:.15rem;
border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
transform:rotate(-45deg);transition:transform .18s ease}
.way[open] summary::before{transform:rotate(45deg)}
.way summary:hover{color:var(--accent)}
.way summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The rows span the content column so they read as one band with the cards
above; the directions inside go back to the reading measure. */
.way>:not(summary){max-width:var(--measure)}
.way>:last-child{margin-bottom:var(--s-5)}
/* Band 4: invoicing and press downloads. Real content, but reference material
nobody reads on the way in, so it sits below a rule at meta weight. */
.contact-fine{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
gap:var(--s-5) var(--s-7);margin-top:var(--s-8);padding-top:var(--s-5);
border-top:1px solid var(--line-soft);font-size:1rem;color:var(--meta)}
.contact-fine h2{font:500 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--meta);margin:0 0 var(--s-3)}
.contact-fine address{font-style:normal}
.contact-fine p{margin:0 0 var(--s-3)}
/* Verzálky nese stylopis, ne text: v obsahu stojí "Obchodní podmínky" normálně,
protože nadpis vysázený verzálkami ve zdroji může čtečka hláskovat po
literách. Cílí se přes data-page, ne přes třídu v obsahu — nadpis musí zůstat
markdownový, jinak ho Astro nenajde v `headings`, PageBody usoudí, že stránka
vlastní h1 nemá, a dopíše druhý (přesně to se 2026-08-04 stalo). */
[data-page="obchodni-podminky"] h1{text-transform:uppercase}
.prose p,.prose ul,.prose ol{margin:0 0 var(--s-4)}
/* pretty: nenechá poslední řádek odstavce na jedno slovo. */
.prose p,.prose li,.wine-desc,.lead,.lead-tight,.terms{text-wrap:pretty}
/* Řez 600, ne výchozích 700: Source Serif 4 hostujeme jen ve 400 a 600, takže
se do teď tučnil syntheticky (rozmazaná, opticky přetažená kresba). */
.prose strong,.prose b{font-weight:600}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.35rem}
/* Fotka v próze se drží textové míry, ne šířky okna. Bez horní hranice by se
vysázela přes celou .wrap (74rem), protože .prose img přebíjí specificitou
.prose>*{max-width:var(--measure)} nad sebou — a fotka na výšku 1067x1600 by
pak byla skoro 1800 px vysoká, tedy tři obrazovky telefonu na jeden obrázek.
min(): drobné odznaky v próze (mapy.cz, Google Maps, Kudyznudy — všechny 150 px
se zapsanou šířkou) tím nikdo nezvětšuje, ty zůstávají svoje.
Fotky na výšku měla navíc .na-vysku (strop 20rem, protože na šířce fotky na
šířku jsou o polovinu vyšší). Pravidlo odešlo 2026-08-04 s posledními dvěma
fotkami na výšku: obě jsou dnes v galerii na /ubytovani, kde je výšku drží
mřížka. Až se v próze objeví další, je v historii (git log tohoto řádku). */
.prose img{margin:var(--s-5) 0;border-radius:2px;max-width:min(100%,var(--measure));height:auto}
.prose figure{margin:var(--s-5) 0}
.prose figcaption{font:400 .9375rem/var(--lh-lead) var(--font-ui);color:var(--meta);margin-top:var(--s-3)}
.prose blockquote{margin:var(--s-5) 0;padding-left:var(--s-4);border-left:2px solid var(--accent-line);color:var(--ink-soft);font-style:italic}
.prose table{width:100%;border-collapse:collapse;font:400 1rem/var(--lh-fine) var(--font-ui)}
.prose th,.prose td{text-align:left;padding:.6rem var(--s-3);border-bottom:1px solid var(--line-soft)}
.prose .table-scroll{overflow-x:auto;max-width:100%}
/* ═══ Galerie fotek ═══
Následující blok až po značku KONEC VENDOROVANÉHO BLOKU je KOPIE
~/projects/myapps/gallery/src/gallery.css. Neopravuj ho tady: kanonické
řešení je tam a už jednou se rozešlo do tří vlastních verzí na třech webech
(viz README toho projektu). Oprava patří do něj a odtud se kopíruje sem.
Naše vlastní věci (mřížka náhledů, přebití z .prose) jsou ZA blokem. */
:root {
--gl-backdrop: rgba(0, 0, 0, 0.92);
--gl-control-color: #fff;
--gl-radius: 6px;
--gl-gutter-min: 0.25rem;
}
.gallery-lightbox {
/* --gl-ratio: widest photo's width/height in THIS gallery, set inline by
the caller (or omitted — falls back to "assume full width"). One fixed
value per gallery, not per photo: the arrows then park at one spot for
every photo in it, instead of sliding to chase each photo's own edge —
a constant target beats one that moves under the cursor on every click. */
--gl-ratio: 99;
--gl-w: min(100vw - 10rem, 90vh * var(--gl-ratio));
--gl-gutter: max(var(--gl-gutter-min), (100vw - var(--gl-w)) / 2 - 3.25rem);
display: none;
position: fixed;
inset: 0;
z-index: 200;
align-items: center;
justify-content: center;
}
.gallery-lightbox:target { display: flex; }
.gl-backdrop { position: absolute; inset: 0; background: var(--gl-backdrop); }
.gl-fig {
position: relative;
z-index: 1;
margin: 0;
max-width: min(90vw, calc(100vw - 10rem));
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.gl-fig img {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
border-radius: var(--gl-radius);
display: block;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.gl-close {
position: fixed;
top: 1.25rem;
right: var(--gl-gutter);
z-index: 2;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
color: var(--gl-control-color);
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
opacity: 0.75;
}
.gl-close:hover { opacity: 1; }
.gl-prev, .gl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
color: var(--gl-control-color);
font-size: 2.5rem;
line-height: 1;
text-decoration: none;
opacity: 0.7;
user-select: none;
}
.gl-prev { left: var(--gl-gutter); }
.gl-next { right: var(--gl-gutter); }
.gl-prev:hover, .gl-next:hover { opacity: 1; }
@media (max-width: 600px) {
.gl-fig { max-width: 94vw; }
.gl-prev { left: 0.25rem; }
.gl-next { right: 0.25rem; }
.gl-close { top: 6.75rem; }
}
/* Once gallery-init.js successfully mounts PhotoSwipe on a gallery, this
class goes on its container so the CSS overlays never engage even if a
stale #lb-... hash is still in the URL (e.g. back-navigation) — PhotoSwipe
owns the open/close state from here on for that gallery. */
[data-gallery].gl-enhanced .gallery-lightbox { display: none !important; }
/* ═══ KONEC VENDOROVANÉHO BLOKU ═══ */
/* Ours: one stage photo with a thumbnail row under it (the canonical project
deliberately leaves thumbnail layout to each site and shares only the
overlay). Ported from vinarisady.cz on the owner's request, 2026-08-04.
Which photo is on the stage is decided by native radio inputs and
thumbnails, wired positionally below - no JavaScript, and arrow keys work
because that is what a radio group does. */
.gallery{margin:var(--s-5) 0 var(--s-6)}
/* ═══ Přepínač Fotky / 360° nad jednou galerií ══════════════════════════════
Port z vinarisady.cz (vlastník 2026-08-05): dřív stály obě galerie pod sebou,
takže kdo si chtěl jen číst dál, scrolloval u každého bytu přes dva
680px bloky. Přepínání je nativní CSS, v cestě není JavaScript.
`position:fixed` u radia JE NOSNÉ, ne libovolná volba. Skryté em se při kliknutí zaostří a prohlížeč zaostřený prvek roluje do
viewportu; absolutně pozicovaný input stojí na začátku dokumentu, takže by
stránka při každém přepnutí tabu vyskočila nahoru. Fixed je vždycky ve
viewportu, takže není kam rolovat. Je to pravidlo „ovládání nikdy nepohne
stránkou" z web-development.md a na tomhle webu už jednou jako chyba jelo
(mobilní menu, 2026-08-04). Skrývá se pixelem a opacity, NIKDY `display:none`
ani `hidden` - to by taby odebralo klávesnici. */
/* Self-hosted video (Video.astro). Sits in the prose at the text measure, no
caption under it (owner 2026-08-08). The frame is the encoded 16:9 shape and
is reserved up front, so nothing under it jumps when the poster lands; the
dark fill is what shows until then - a page-coloured box would flash. */
.video{display:block;width:100%;height:auto;aspect-ratio:16/9;
margin:var(--s-5) 0 var(--s-6);background:var(--ink);border-radius:2px}
.ptabs{margin:var(--s-5) 0 var(--s-6)}
.pt-radio{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0}
.pt-labels{display:flex;gap:var(--s-4);margin-bottom:var(--s-3);
border-bottom:1px solid var(--hairline)}
.pt-label{display:inline-block;padding:.45rem 0;cursor:pointer;
font:500 .875rem/var(--lh-flush) var(--font-ui);letter-spacing:.06em;
color:var(--meta);border-bottom:2px solid transparent;margin-bottom:-1px;
touch-action:manipulation}
.pt-label:hover{color:var(--ink)}
/* Vybraný tab: barvou a podtržením. Poziční `nth-of-type` jako u galerie, aby do
stylopisu nelezla id a fungoval libovolný počet instancí na stránce. Pořadí
je Video, Fotky, 360°, stejné jako na vinarisady.cz. */
.pt-radio:nth-of-type(1):checked~.pt-labels .pt-label:nth-of-type(1),
.pt-radio:nth-of-type(2):checked~.pt-labels .pt-label:nth-of-type(2),
.pt-radio:nth-of-type(3):checked~.pt-labels .pt-label:nth-of-type(3){
color:var(--ink);border-bottom-color:var(--accent)}
.pt-radio:focus-visible~.pt-labels .pt-label{outline:2px solid var(--accent);outline-offset:2px}
.pt-panel{display:none}
.pt-radio:nth-of-type(1):checked~.pt-panel-video,
.pt-radio:nth-of-type(2):checked~.pt-panel-photos,
.pt-radio:nth-of-type(3):checked~.pt-panel-360{display:block}
/* Pokoj bez klipu: tab Video se nenabízí a jeho radio je `disabled`, takže
pozice ostatních dvou zůstávají, kde jsou, a pravidla výš platí beze změny. */
.ptabs-novideo .pt-label-video{display:none}
/* V tabu si video vlastní vnější okraj neřeší - panel už odsazený je. */
.pt-panel .video{margin:0}
/* Galerie i prohlídka si vlastní vnější okraj řeší samy; v tabu by zdvojoval. */
.pt-panel .gallery,.pt-panel .tour{margin-top:0}
/* Bez JS se 360° tab NENABÍZÍ vůbec: prohlídku vykresluje Photo Sphere Viewer a
`html:not(.js) .tour` ji už schovává, takže tab by otevíral prázdný panel.
Fotky jsou výchozí tab a ukazují tytéž pokoje, takže se nic neztrácí. */
html:not(.js) .pt-label-360{display:none}
/* The radios must stay reachable by keyboard, so they are made invisible rather
than hidden: `display:none` or `hidden` would take the whole gallery away from
keyboard users. */
.ps-radio{position:absolute;opacity:0;pointer-events:none}
.ps-stage{position:relative;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:var(--bg-sunk)}
.ps-stage-link{position:absolute;inset:0;display:none;touch-action:manipulation}
/* max-width:none and margin:0 override `.prose img` above: that rule binds a
photo in running text to the measure and gives it vertical space, which is
right there and wrong inside a fixed-ratio stage. Portrait photos are cropped
to fill it (their full shape shows in the lightbox), because a stage that
changes height with every photo makes the page jump under the thumbnails. */
.ps-stage-link img{width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;cursor:zoom-in}
/* A single scrolling line, never wrapping: a wrapped row would move the stage up
and down as the number of visible rows changes. */
.ps-thumbs{display:flex;gap:var(--s-2);overflow-x:auto;margin-top:var(--s-2);padding-bottom:.25rem;
scroll-snap-type:x proximity;scrollbar-width:none}
.ps-thumbs::-webkit-scrollbar{display:none}
.ps-thumb{flex:0 0 4.5rem;aspect-ratio:1/1;overflow:hidden;cursor:pointer;line-height:0;border-radius:2px;
border:2px solid transparent;scroll-snap-align:start;touch-action:manipulation}
.ps-thumb img{width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover}
.ps-thumb:hover{border-color:var(--accent-line)}
/* Positional wiring, up to 12 photos per gallery (today: 5 and 6). Generic on
purpose - a per-instance id here would mean editing the stylesheet every time
a page gains a gallery. */
.ps-radio:nth-of-type(1):checked~.ps-stage .ps-stage-link:nth-of-type(1),
.ps-radio:nth-of-type(2):checked~.ps-stage .ps-stage-link:nth-of-type(2),
.ps-radio:nth-of-type(3):checked~.ps-stage .ps-stage-link:nth-of-type(3),
.ps-radio:nth-of-type(4):checked~.ps-stage .ps-stage-link:nth-of-type(4),
.ps-radio:nth-of-type(5):checked~.ps-stage .ps-stage-link:nth-of-type(5),
.ps-radio:nth-of-type(6):checked~.ps-stage .ps-stage-link:nth-of-type(6),
.ps-radio:nth-of-type(7):checked~.ps-stage .ps-stage-link:nth-of-type(7),
.ps-radio:nth-of-type(8):checked~.ps-stage .ps-stage-link:nth-of-type(8),
.ps-radio:nth-of-type(9):checked~.ps-stage .ps-stage-link:nth-of-type(9),
.ps-radio:nth-of-type(10):checked~.ps-stage .ps-stage-link:nth-of-type(10),
.ps-radio:nth-of-type(11):checked~.ps-stage .ps-stage-link:nth-of-type(11),
.ps-radio:nth-of-type(12):checked~.ps-stage .ps-stage-link:nth-of-type(12){display:block}
.ps-radio:nth-of-type(1):checked~.ps-thumbs .ps-thumb:nth-of-type(1),
.ps-radio:nth-of-type(2):checked~.ps-thumbs .ps-thumb:nth-of-type(2),
.ps-radio:nth-of-type(3):checked~.ps-thumbs .ps-thumb:nth-of-type(3),
.ps-radio:nth-of-type(4):checked~.ps-thumbs .ps-thumb:nth-of-type(4),
.ps-radio:nth-of-type(5):checked~.ps-thumbs .ps-thumb:nth-of-type(5),
.ps-radio:nth-of-type(6):checked~.ps-thumbs .ps-thumb:nth-of-type(6),
.ps-radio:nth-of-type(7):checked~.ps-thumbs .ps-thumb:nth-of-type(7),
.ps-radio:nth-of-type(8):checked~.ps-thumbs .ps-thumb:nth-of-type(8),
.ps-radio:nth-of-type(9):checked~.ps-thumbs .ps-thumb:nth-of-type(9),
.ps-radio:nth-of-type(10):checked~.ps-thumbs .ps-thumb:nth-of-type(10),
.ps-radio:nth-of-type(11):checked~.ps-thumbs .ps-thumb:nth-of-type(11),
.ps-radio:nth-of-type(12):checked~.ps-thumbs .ps-thumb:nth-of-type(12){border-color:var(--accent)}
/* The focus ring goes on the whole row, not on one thumb: the radio that holds
focus is invisible, so without this a keyboard user sees nothing move. Which
photo is selected is already said by the accent border above, and in a radio
group focus always sits on the checked input, so both point at the same thumb.
One rule instead of twelve pairs, because CSS cannot AND two sibling
relations. */
.ps-radio:focus-visible~.ps-thumbs{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* The overlay lives inside .prose, where `.prose>*` binds children to the text
measure. On a position:fixed element with inset:0 that would mean a 64ch-wide
window pinned to the left edge, so the backdrop, the photo and the arrows
would all end up in a strip down the left of the screen. */
.prose>.gallery-lightbox{max-width:none}
/* ═══ Panoramata 360° (src/components/Tour.astro) ═══
Celý blok je bez JavaScriptu SKRYTÝ: prohlížeč panoramat bez skriptu být
nemůže a prázdný rám s výzvou "rozhlédněte se" je horší než nic. Třídu `js`
sází inline skript v hlavičce a při jakékoli chybě ji odebírá, takže tohle
je tentýž přepínač, na kterém visí wordmark. Ploché fotky téhož bytu jsou
nad tím v galerii a fungují vždy, takže se tím nic neschovává. */
html:not(.js) .tour{display:none}
.tour{margin:0 0 var(--s-6)}
/* Rám drží 16:9 v obou stavech — plakát i prohlížeč — takže spuštění prohlídky
stránkou pod ní nepohne. */
.tour-frame{position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:var(--bg-sunk)}
.tour-viewer{position:absolute;inset:0}
.tour-start{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
padding:var(--s-4);border:0;background:none;cursor:pointer;touch-action:manipulation}
.tour-start img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0}
/* Popisek stojí na vlastní ploše, ne přímo na fotce: panoramata jsou světlá i
tmavá podle místnosti, takže bílý text na fotce by někde spadl pod čitelný
kontrast. Tmavá plocha s krytím .82 drží proti bílému textu 8:1 na kterékoli
z nich. */
.tour-start-label{position:relative;background:rgba(28,26,24,.82);color:#fff;border-radius:2px;
padding:.55rem var(--s-4);font:500 1rem/var(--lh-ui) var(--font-ui)}
.tour-start:hover .tour-start-label{background:rgba(28,26,24,.92)}
.tour.is-loading .tour-start-label::after{content:' …'}
/* Řádek náhledů se nikdy nezalomí, posouvá se do strany: šest panoramat v
mřížce by zabralo víc místa než prohlížeč sám. */
.tour-thumbs{display:flex;gap:var(--s-2);overflow-x:auto;margin-top:var(--s-2);padding-bottom:.25rem;
scroll-snap-type:x proximity;scrollbar-width:none}
.tour-thumbs::-webkit-scrollbar{display:none}
.tour-thumb{position:relative;flex:0 0 8rem;aspect-ratio:16/9;padding:0;line-height:0;cursor:pointer;overflow:hidden;
background:none;border:2px solid transparent;border-radius:2px;scroll-snap-align:start;touch-action:manipulation}
.tour-thumb img{width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0}
/* The 360° badge: the preview is a normal-looking photo, so without this nothing
tells the visitor that this thumbnail turns. 13px is the floor for UI text on
this site, and the dark plate holds 8:1 against white on any of the photos. */
.tour-thumb-badge{position:absolute;right:.25rem;bottom:.25rem;
background:rgba(28,26,24,.82);color:#fff;border-radius:2px;padding:.1rem .3rem;
font:500 .8125rem/1.2 var(--font-ui);letter-spacing:.01em}
.tour-thumb:hover{border-color:var(--accent-line)}
.tour-thumb.is-active{border-color:var(--accent)}
/* Rozcestník (výpis sekce) */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--s-5)}
.cards li{background:var(--card);border:1px solid var(--line-soft);border-radius:2px;padding:var(--s-5)}
.cards h2{font:600 var(--fs-h4)/var(--lh-h3) var(--font-display);margin:0 0 var(--s-2)}
.cards h2 a{text-decoration:none;color:var(--ink)}
.cards h2 a:hover{color:var(--accent)}
.cards p{margin:0;font:400 1rem/var(--lh-lead) var(--font-body);color:var(--ink-soft);text-wrap:pretty}
/* ═══ Vinný lístek ═══ */
.list{padding-block:var(--s-7) var(--s-9);border-top:1px solid var(--hairline);margin-top:0}
.list-head{margin-bottom:var(--s-7)}
.list-head h2{font:400 var(--fs-h2)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);margin:0 0 var(--s-3)}
/* Podmínky dopravy patří sem, ne do lepivého pruhu: rozhodují o tom, kolik lahví
člověk nasype do košíku, takže je musí vidět dřív, než začne vybírat. */
.terms{font:400 .9375rem/var(--lh-lead) var(--font-ui);color:var(--meta);margin:0;max-width:var(--measure)}
.terms b{color:var(--ink);font-weight:500}
.terms+.terms{margin-top:var(--s-3)}
.tier{margin-top:var(--s-8)}
.tier:first-of-type{margin-top:0}
.tier-head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5)}
.tier-head .roman{font:600 var(--fs-eyebrow)/var(--lh-flush) var(--font-ui);letter-spacing:var(--ls-eyebrow);color:var(--accent);
border:1px solid var(--accent-line);padding:.35rem .5rem;border-radius:2px;flex:none}
.tier-head h3{font:400 var(--fs-h4)/var(--lh-h3) var(--font-display);margin:0;color:var(--ink)}
.tier-head::after{content:"";flex:1;height:1px;background:var(--line-soft)}
/* Ročník je nízkohodnotná informace, ne "podpis návrhu" — vlastníkova zpětná
vazba (2026-08-04): ročník je přes stránku nejnápadnější prvek a zaslouží si
být menší a tišší, název vína naopak větší. Ročník proto dostává stupeň
--fs-h4/--lh-h3 (dřív jím byl vysázen právě název vína) a název vína jde o
stupeň výš na --fs-h3/--lh-h2 — tokeny drží zavedené párování stupňů
velikosti a řádkování (--fs-h3 vždy s --lh-h2, --fs-h4 vždy s --lh-h3, viz
komentář u :root). */
.wine{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft)}
/* min-width: ročník je teď v gridu (auto 1fr) užší sloupec než dřív, takže bez
téhle pojistky by se první sloupec u kratších/chybějících ročníků zužoval
nekonzistentně mezi řádky. 3rem sedí i na to nejdelší běžné čtyřčíslí
v tabulkových číslicích. Rozmezí ročníků (dárkový poukaz) proto stojí na dvou
řádcích a bez pomlčky, viz .year-line — jednořádkové "2026-2027" by ten
sloupec rozšířilo pro celý seznam a názvy všech ostatních vín by se od něj
odsadily (vlastníkova zpětná vazba 2026-08-05). */
/* Ročník je svisle vystředěný na řádek s názvem vína, ne zarovnaný na horní
hranu ani na jeho účtaří (vlastníkova zpětná vazba 2026-08-04, ve dvou
krocích: horní hrana působila opticky výš, účtaří naopak nízko). Odsazení je
dopočítané, ne odhadnuté — půlka rozdílu obou řádkových výšek, takže drží samo
i po změně stupně názvu nebo ročníku. Středí se na ŘÁDEK s názvem, ne na celý
řádek vína: pod názvem stojí ještě popis, analytika a zákonné údaje, takže
align-items:center by ročník poslalo doprostřed celého bloku.
Na mobilu se odsazení ruší (viz @media max-width:40rem) — tam se grid láme na
jeden sloupec a ročník stojí NAD názvem. */
.year{font:400 var(--fs-h4)/var(--lh-h3) var(--font-display);color:var(--accent);font-variant-numeric:lining-nums tabular-nums;min-width:3rem;
margin-top:calc((var(--fs-wine)*var(--lh-h2) - var(--fs-h4)*var(--lh-h3))/2)}
.year-line{display:block}
.wine-body{min-width:0}
.wine-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem var(--s-4)}
.wine-name{font:600 var(--fs-wine)/var(--lh-h2) var(--font-display);margin:0}
/* lining-nums stejně jako u ročníku: obojí je číslo na stejném účtu a nemá se
střídat verzálková a minuskulní kresba číslic. */
.wine-price{font:600 1.35rem/var(--lh-flush) var(--font-body);font-variant-numeric:lining-nums tabular-nums;margin-left:auto;white-space:nowrap}
.wine-attrs{font:400 .875rem/var(--lh-ui) var(--font-ui);color:var(--meta);margin:.3rem 0 0}
.wine-desc{margin:.7rem 0 0;color:var(--ink-soft);max-width:var(--measure)}
/* Zakonne udaje: povinne u kazdeho vina (znaceni vina + vyzivove udaje).
Male a tise, ale vzdy videt - nikdy schovane pod rozbalovatkem.
Míra 64 znaků, ne 82: drobný tisk je z celé stránky nejtěžší na sledování
řádku, takže potřebuje kratší řádek než běžný text, ne delší. */
.law{margin:var(--s-4) 0 0;font:400 var(--fs-fine)/var(--lh-fine) var(--font-ui);color:var(--meta);max-width:var(--measure);overflow-wrap:anywhere}
.analytics{display:flex;flex-wrap:wrap;gap:.4rem var(--s-5);list-style:none;margin:var(--s-4) 0 0;padding:0}
.analytics li{font:400 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);color:var(--meta)}
/* Řez 600, ne 500: Source Serif 4 hostujeme ve 400 a 600, a požadavek na 500
se podle pravidel CSS propadne na 400 — hodnota tedy do teď vůbec nebyla
odlišená od popisku pod ní (ověřeno měřením šířky textu v prohlížeči). */
.analytics b{display:block;font:600 1rem/var(--lh-tight) var(--font-body);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.stepper{display:flex;align-items:center;gap:.15rem;margin-top:var(--s-4)}
.stepper button{width:var(--tap);height:var(--tap);border:1px solid var(--line-ui);background:var(--card);color:var(--ink);
font:400 1.25rem/var(--lh-flush) var(--font-ui);cursor:pointer;border-radius:2px}
.stepper button:hover{border-color:var(--accent);color:var(--accent)}
.stepper input{width:3.5rem;height:var(--tap);text-align:center;border:1px solid var(--line-ui);border-radius:2px;background:var(--card);
font:500 1rem/var(--lh-flush) var(--font-ui);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .unit{font:400 var(--fs-eyebrow)/var(--lh-flush) var(--font-ui);color:var(--meta);margin-left:.5rem}
/* ═══ Objednávka — kontaktní část formuláře ═══
Bez JS funguje celý formulář: čísla se dají napsat rukou a odeslat tímhle
tlačítkem. JS přidává jen šipky u množství a živý součet. */
.order{margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--hairline)}
.order h3{font:400 var(--fs-h2)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);margin:0 0 var(--s-5)}
.field{margin-bottom:var(--s-5);max-width:36rem}
.field>label,.fieldset>legend{display:block;font:500 .875rem/var(--lh-ui) var(--font-ui);color:var(--ink-soft);margin-bottom:var(--s-2);padding:0}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
/* --line-ui, ne --line: obrys je jediné, co vstupní pole identifikuje (WCAG 1.4.11). */
width:100%;min-height:var(--tap);padding:.7rem .8rem;border:1px solid var(--line-ui);border-radius:2px;
background:var(--card);color:var(--ink);font:400 1rem/var(--lh-fine) var(--font-ui)}
.field textarea{min-height:6rem;resize:vertical}
.field .hint{display:block;font:400 var(--fs-fine)/var(--lh-fine) var(--font-ui);color:var(--meta);margin-top:var(--s-2)}
.fieldset{border:0;padding:0;margin:0 0 var(--s-5)}
.choice{display:flex;align-items:flex-start;gap:.6rem;min-height:var(--tap);padding:.4rem 0;
font:400 1rem/var(--lh-fine) var(--font-ui);color:var(--ink-soft);cursor:pointer}
.choice input{width:1.15rem;height:1.15rem;margin:.35rem 0 0;flex:none;accent-color:var(--accent)}
.choice b{color:var(--ink);font-weight:500}
/* Popisek a vysvětlivka pod ním. Obal je potřeba proto, že .choice je flexový
řádek — dva sourozenci by si sedli vedle sebe, ne pod sebe. */
.choice-text{display:block}
.choice-hint{display:block;font:400 var(--fs-fine)/var(--lh-fine) var(--font-ui);color:var(--meta);margin-top:var(--s-2)}
.order-actions{margin-top:var(--s-6)}
.order-actions p{font:400 .9375rem/var(--lh-lead) var(--font-ui);color:var(--meta);margin:0 0 var(--s-4);max-width:var(--measure-narrow)}
.order-warn{color:var(--accent)!important;font-weight:500;border-left:2px solid var(--accent);padding-left:var(--s-3)}
.order-actions .btn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
font:500 1rem/var(--lh-ui) var(--font-ui);padding:1rem 1.6rem}
.order-actions .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* ═══ Košík — lepivý pruh na mobilu, panel na desktopu.
Skrytý, dokud není v košíku první lahev (třídu přidává JS). ═══ */
.basket:not(.has-items){display:none}
.basket{position:sticky;bottom:0;z-index:40;background:var(--ink);color:var(--bg);margin-top:var(--s-8);
padding-bottom:env(safe-area-inset-bottom)}
.basket .wrap{display:flex;align-items:center;gap:var(--s-5);padding-block:var(--s-4);flex-wrap:wrap}
.basket .sum{font:400 1.125rem/var(--lh-flush) var(--font-body);font-variant-numeric:lining-nums tabular-nums}
.basket .sum b{font-weight:600;font-size:1.35rem}
.basket .btn{margin-left:auto;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.basket .btn:hover{background:#a33422;border-color:#a33422}
/* ═══ Patička ═══ */
footer{background:var(--bg-sunk);border-top:1px solid var(--hairline);padding-block:var(--s-8);margin-top:0}
/* minmax(min(15rem,100%),...) — pevných 15rem přetékalo vodorovně při 200% textu. */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:var(--s-6)}
.foot-grid h2{font:500 var(--fs-eyebrow)/var(--lh-tight) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--meta);margin:0 0 var(--s-3)}
.foot-grid p,.foot-grid ul{margin:0;font-size:1rem}
.foot-grid ul{list-style:none;padding:0}
.foot-grid li{margin-bottom:.3rem}
/* Právní řádek pod patičkou. Tichý schválně: obchodní podmínky mají být k
nalezení, ne k přečtení — kdo je hledá, ví, co hledá. Vlasová linka nad ním
ho odděluje od kontaktních sloupců, aby nečetl jako pátý sloupec. */
.foot-legal{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--hairline);
font-size:var(--fs-fine);color:var(--meta)}
.foot-legal a{color:inherit}
.foot-legal a:hover{color:var(--accent)}
/* ═══ Pás partnerů pod patičkou ═══
Vzor i obrázky přenesené z vinarisady.cz (viz partials/partners.html). Tam pás
leží na světlejší ploše než tmavá patička; tady je patička sama --bg-sunk,
takže pás pokračuje ve stejné ploše a odděluje ho jen hairline. Jinak by pod
patičkou vznikl třetí pruh v jiné barvě, což je o pruh víc, než web unese.
Loga jsou jednobarevná (brightness(0)) ve všech stavech, hover včetně —
barevné verze nemáme ke všem šesti, takže obarvení na hover by rozsvítilo jen
některé. Zpětnou vazbu dělá zvýšené krytí a nadzvednutí.
Krytí .45 je DOLNÍ hranice, ne estetická volba: černá na .45 dává proti
--bg-band kontrast 3,2:1, tedy nejnižší hodnotu, která ještě splní WCAG 1.4.11
pro grafiku nesoucí informaci (loga partnerů informaci nesou — je z nich
poznat, o koho jde). Vlastník chtěl loga výrazně tišší (2026-08-04) a tohle je
nejtišší dovolený stupeň; kdo půjde níž, propadne přístupností, a proto se
spolu s krytím nesmí zesvětlit ani pozadí pásu. */
.partner-band{background:var(--bg-band);border-top:1px solid var(--hairline);padding-block:var(--s-6)}
.partner-label{text-align:center;margin-bottom:var(--s-5)}
.partner-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-4) var(--s-7)}
.partner-item{display:inline-flex;filter:brightness(0);opacity:.45;
transition:opacity .18s ease,transform .18s ease}
.partner-item:hover,.partner-item:focus-visible{opacity:.8;transform:scale(1.04)}
.partner-item img{height:24px;width:auto;object-fit:contain}
.partner-item img.partner-logo-medium{height:36px}
@media (prefers-reduced-motion:reduce){.partner-item{transition:opacity .18s ease}
.partner-item:hover,.partner-item:focus-visible{transform:none}}
/* Pod jeden řádek jdou loga do mřížky, ne do zalomeného flexu na střed.
Šest log o šesti různých šířkách se ve flex-wrap zalomí nerovně (4+2, na
telefonu 2+2+2 jen náhodou) a poslední osamělé logo stojí na střed pod
mezerou mezi dvěma nad ním — vypadá to jako chyba sazby, ne jako sazba.
Mřížka drží stejné buňky, takže logo sedí pod logem.
Do jednoho řádku se šestice vejde až od 61rem (potřebuje 906 px plus
odsazení), takže mezi telefonem a tou hranicí stojí tři sloupce (3+3) a na
telefonu dva (2+2+2).
Výška je tady vedlejší rozměr: v jedné buňce se potkají loga široká 79 až
145 px, takže se omezuje ŠÍŘKA na buňku a výška se dopočítá — s pevnou výškou
by se nejširší logo z buňky vylilo. Poměr stran drží atributy width/height
v HTML. */
@media (max-width:61rem){
.partner-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5) var(--s-4);
justify-items:center;align-items:center}
.partner-item{max-width:100%}
.partner-item img{max-width:100%;height:auto;max-height:24px}
.partner-item img.partner-logo-medium{max-height:36px}
}
@media (max-width:34rem){
.partner-logos{grid-template-columns:1fr 1fr}
.partner-item img{max-height:22px}
.partner-item img.partner-logo-medium{max-height:32px}
}
/* 928px: navigace potřebuje 916px, při 52rem zbýval mrtvý pás 833-915px, kde se
každý popisek lámal na dva řádky a aria-current podtrhl jen ten druhý. */
@media (max-width:58rem){
/* position:FIXED, ne absolute - jinak menu odscrolluje stránku na začátek.
Kliknutí na zaostří tenhle checkbox a prohlížeč zaostřený prvek
posune do viewportu; absolutně umístěný stojí na začátku dokumentu, takže
otevření i zavření menu skočilo na scrollY 0 (naměřeno 1500 -> 0 na 375px).
Fixed prvek je ve viewportu vždy, takže není kam scrollovat. Skrývá se dál
jedním pixelem a opacity, NIKDY display:none nebo hidden - musí zůstat
dosažitelný klávesnicí (viz Layout.astro). Obecné pravidlo, které z toho
vzniklo: ovládací prvek nesmí měnit polohu stránky pod rukama uživatele
(shared-claude-rules/web-development.md). */
#navtoggle{display:block;position:fixed;top:0;left:0;width:1px;height:1px;opacity:0}
/* backdrop-filter na .top z ní dělá containing block pro position:fixed potomky,
takže se inset měří od hlavičky, ne od viewportu — schovávat posunem proto
nefunguje a zavřené menu kreslilo přes logo. Skrýváme visibility, což zároveň
vyřadí odkazy z tab orderu. Nevracet se ke skrývání posunem.
Containing blockem je tedy .top, a to jeho PADDING box — takže 4,25rem je
přesně výška lišty a panel na ni doléhá bez mezery. .top žádné vnitřní
odsazení nemá (odstup pod lištou dělá box-shadow, který do boxu nepatří),
takže tady se nic dopočítávat nemusí. */
/* Boční odsazení panelu jde z --gutter, ne z --s-5: panel není .wrap, ale
stojí přesně pod hlavičkou, která .wrap je — s pevnými 24 px by položky
menu na telefonu začínaly o 8 px jinde než wordmark nad nimi. */
/* `>` JE NOSNÉ. Přepínač jazyka je vnořený uvnitř poslední , takže na
holý selektor `.top nav ul` odpovídal taky - a stal se z něj DRUHÝ fixní panel
na stejném insetu a s vlastním neprůhledným pozadím, který lehl na položky 2-6
a v nabídce zbylo vidět jen "Koupit víno" a jazyky. Nahlásil to vlastník
2026-08-05, změřeno na 375, 412 i 768 px (2 ze 7 položek klikatelné).
Je to přesně ta past, kterou komentář v Layout.astro popisuje u sourozeneckého
- jen si ji vnořený seznam zavedl znovu. Každé pravidlo panelu proto míří
na PŘÍMÉHO potomka; vnitřní řádku jazyků stylují jen `.lang-row>ul` pravidla. */
.top nav>ul{position:fixed;inset:4.25rem 0 auto;flex-direction:column;gap:0;background:var(--bg-sunk);
border-bottom:1px solid var(--line);padding:var(--s-3) var(--gutter) var(--s-5);
/* Kolik místa pod lištou opravdu zbývá, počítá skript v Layout.astro do
--nav-panel-max. Záloha bez JS odečítá i celé logo nad lištou (změřeno
228 px na 300 i 360 px širokém okně, 16rem má rezervu), protože panel
začíná pod ním - radši menší panel, který roluje, než delší, jehož spodek
je mimo obrazovku a nedá se k němu dostat (vlastník 2026-08-08, telefon
se zvětšením 120 %). */
max-height:var(--nav-panel-max,calc(100dvh - 16rem));overflow-y:auto;overscroll-behavior:contain;
visibility:hidden;transform:translateY(-120%);
transition:transform .28s cubic-bezier(.2,0,0,1),visibility .28s;box-shadow:var(--shadow)}
#navtoggle:checked~.top nav>ul{transform:translateY(0);visibility:visible}
#navtoggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:45;
background:rgba(36,26,16,.32);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
/* Titulní logo NEPATŘÍ pod stínítko. Stínítko je inset:0 z-index:45 s tmavým
závojem a blur(1px), a .masthead žádný z-index neměl — takže se na začátku
stránky logo při rozbalení nabídky rozmazalo a ztmavilo, jako by patřilo ke
zaclonělé stránce pod ní. Patří k nabídce: vytahujeme ho nad stínítko
(46 je pod .top s 50, takže hlavička zůstává nejvýš). Důsledek, který je
správný: kliknutí na logo s otevřenou nabídkou vede na domovskou stránku —
je to odkaz, ne zavírací plocha. */
.masthead{position:relative;z-index:46}
/* Čáry kolem hlavičky při rozbalené nabídce pryč — OBĚ, ne jen ta pod ní.
Masthead, .top i panel nabídky mají všechny stejnou plochu #efe8dd
(--bg-sunk), takže logo, hlavička a nabídka jsou jedna plocha a krájely ji
jenom dva hairline rámečky .top. Spodní stál přímo nad nabídkou. Horní by
po jeho odstranění zůstal osiřelý mezi logem a prázdným pruhem hlavičky
(na začátku stránky je wordmark ještě skrytý, takže hlavička je tam jen
vzduch) a dál by logo od nabídky odděloval — což je přesně to, co má
zmizet. Zavřená hlavička si oba rámečky nechává: tam oddělují hlavičku od
odjíždějícího obsahu, což je jejich původní práce.
Panel si svůj vlastní border-bottom (--line) drží — ten nabídku zdola
zavírá a je jediná čára, která tu má co dělat. */
#navtoggle:checked~.top{border-block-color:transparent}
/* Vedení 1,35 místo 1: tady je odkaz blok s dělicí linkou pod sebou, takže
dolní dotažnice písmen sedla přímo na linku — a výška položky byla 44,19 px,
tedy dotyková plocha přesně na hraně minima. Patří to sem, ne do bloku pro
telefony: rozbalovací menu existuje až do tohohle breakpointu. */
/* Rozbalená nabídka je sama sobě cílem, ne lišta ovládacích prvků, takže se
sází displejovým písmem (Newsreader), ne UI písmem. Zavřená hlavička dál
používá Inter — tam jde o drobný funkční prvek. Otevřený panel echuje
titulní logo a hero, což je ta „luxusní“ linka, o kterou tady jde, a
zároveň odděluje navigaci od formulářových prvků, které zůstávají v Interu.
Nestojí to ani bajt navíc: Newsreader 400 (latin i latin-ext) se stahuje
už pro hero h1, takže žádná další váha písem. */
/* text-align:center: vlastníkovi vadilo, že rozbalené položky sedí u pravého
okraje. Odkaz i dělicí linka pod ním zůstávají přes celou šířku panelu
(display:block), mění se jen zarovnání textu v nich — hlavička zůstává
beze změny, otevřená i zavřená nabídka na ni nemá vliv. */
/* Nesouměrné vnitřní odsazení je OPTICKÁ korekce, ne omyl. Symetrických
.7rem/.7rem text mezi dělicími linkami sedí o 1,5 px vysoko: prohlížeč
centruje obsahovou oblast písma (ascent+descent z metrik Newsreaderu), a ta
u tohohle řezu není symetrická k em boxu, takže em box vyjde 0,75 px nad
střed. Změřeno na ostrém webu (nad textem 14,2 px, pod textem 15,7 px);
vlastník si toho všiml pohledem 2026-08-05, než to kdokoli měřil. Přerozdělení
0,75 px z dolního do horního odsazení celkovou výšku položky nemění, takže
dotyková plocha zůstává 52,8 px. Platí jen v rozbaleném panelu, kde jsou
linky a displejové písmo; zavřená hlavička sází Inter a linku nemá. */
.top nav a{display:block;padding-block:calc(.7rem + 0.75px) calc(.7rem - 0.75px);
padding-inline:0;border-bottom:1px solid var(--line-soft);
font:400 1.375rem/var(--lh-h3) var(--font-display);letter-spacing:var(--ls-h2);
color:var(--ink);text-align:center}
.top nav a:hover{color:var(--accent)}
/* Aktuální stránka: barvou a tenkou linkou u okraje, ne podtržením celého
řádku — v serifu velkého stupně by podtržení kolidovalo s dotažnicemi. */
.top nav a[aria-current]{color:var(--accent);border-bottom-color:var(--line-soft)}
.top nav a:hover,.top nav a[aria-current]{border-bottom-color:var(--line-soft)}
/* V rozbalené nabídce jazyky nezabírají čtyři další řádky: vnořený seznam je
jedna vystředěná řádka pod položkami. Odděluje ji linka jako ostatní řádky
panelu, ne levý rámeček z desktopu. Dotyková plocha zůstává 44 px vysoká. */
.top nav .lang-row{margin-left:0;padding-left:0;border-left:0}
.top nav .lang-row>ul{justify-content:center;gap:var(--s-2);padding:var(--s-2) 0}
.top nav .lang-row a{display:block;min-height:var(--tap);padding:.7rem;border-bottom:0;
font:500 .9375rem/1.8 var(--font-ui);letter-spacing:.06em;
color:var(--meta);text-align:center}
.top nav .lang-row a:hover{color:var(--accent)}
.burger{display:flex;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;
width:var(--tap);height:var(--tap);padding:.6rem;cursor:pointer;background:none;border:1px solid var(--hairline);border-radius:2px}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
#navtoggle:checked~.top .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#navtoggle:checked~.top .burger span:nth-child(2){opacity:0}
#navtoggle:checked~.top .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* nav ven z toku: jeho je position:fixed, ale samo nav zustavalo
polozkou flexu, takze mezi hamburger a nav padl `gap` a hamburger
koncil 24px pred pravou hranou obsahu. Takhle je hamburger posledni
polozka v toku a margin-left:auto ho posadi presne na hranu wrapu.
Containing block pro fixed je .top (kvuli backdrop-filter),
takze tohle na nabidku nema vliv. */
.top nav{margin-left:0;position:absolute;width:0;height:0}
.hero-grid{grid-template-columns:1fr;gap:var(--s-6)}
.wine{grid-template-columns:1fr;gap:0}
/* Ročník má na mobilu VLASTNÍ, menší stupeň. Bez něj se rozdíl mezi ním a
názvem vína skoro smaže: --fs-h4 se na 375px opře o své minimum 1,1875rem
(19px) a --fs-h3 o své 1,3rem (20,8px), takže by ročník byl 0,9x názvu —
spočítáno, ne odhadnuto. Na desktopu je poměr 20/30,4px, tam je hierarchie
zřejmá sama. 0,9375rem (15px) je stupeň, který soubor používá i jinde
(.terms, figcaption), a proti názvu dává poměr 1,39.
Mezera pod ročníkem zůstává: grid se tady láme na jeden sloupec, takže
ročník stojí NAD názvem vína, ne vedle něj. */
.year{font-size:.9375rem;margin-top:0;margin-bottom:.2rem}
.hero{padding-block:var(--s-7) var(--s-6)}
}
/* ═══ Uvolněné vedení nadpisů na úzkých displejích (≤ 768 px) ═══
Vlastní breakpoint, širší než ten pro rozvržení níž, a je to záměr: hranice
patří tam, kde nadpisy JEŠTĚ leží na spodní hranici své clamp() stupnice,
tedy jsou nejmenší a lámou se na nejvíc řádků. --fs-display se od svých
2,5rem odlepí až na ~714 px, --fs-h2 dokonce až na ~826 px, takže tablet na
768 px má nadpisy stejně malé jako telefon a potřebuje totéž vedení.
Nad 768 px začíná plakátový režim: nadpis roste, řádků ubývá a vedení se
smí stáhnout — přesně to, co dělá schválený návrh na šířce.
Musí stát ZA blokem 58rem: stejná specificita, rozhoduje pořadí. */
@media (max-width:48rem){
:root{
/* Plakátový claim jde z 1 na 1,14: na 360px displeji má 40 px a láme se na
dva až tři řádky, kde čárka a háček z jednoho řádku končily 1,8 px od
verzálky řádku pod sebou (naměřeno na 414 px). Ostatní stupně o ~0,07
výš ze stejného důvodu. */
--lh-display:1.14; --lh-h1:1.22; --lh-h2:1.28; --lh-h3:1.34;
/* Menší stažení: v malé velikosti se diakritika slévá. */
--ls-display:-.012em; --ls-h1:-.008em; --ls-h2:0em;
}
/* Contact page: the top region goes one column under the tablet breakpoint -
side by side, the disclosure labels ("Pěšky z Uherského Hradiště?") start
wrapping to two lines. Band 1 stacks with it; the 1px gap becomes the
horizontal divider on its own. */
.contact-top{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
.contact-key{grid-template-columns:minmax(0,1fr)}
}
/* ═══ Rozvržení pro telefony (≤ 640 px) ═══ */
@media (max-width:40rem){
/* Drobný tisk o stupeň výš: 13 → 14 px. */
:root{--fs-fine:.875rem}
/* Logo je na telefonu větší (viz .logo) a zaplatí si to z vlastního odsazení:
masthead je ve výsledku NIŽŠÍ než dřív, takže hero i CTA jdou nahoru. */
.masthead{padding-block:var(--s-5)}
/* Dělení slov. Na ~36 znacích na řádek je česká sazba bez dělení hodně
roztřepaná a nechává v řádcích děravé mezery — slova jsou dlouhá a chybí
krátké výplňové tvary, které to v angličtině vyrovnají. Vazby
jednoznakových předložek přes tím netrpí: dělení láme VNITŘEK
slova, nikdy mezeru mezi slovy, takže "a hrušky" zůstane pohromadě. */
.prose p,.prose li,.prose td,.wine-desc,.law,.lead,.lead-tight,.terms,
.cards p,.order-actions p,.portrait figcaption{hyphens:auto}
/* Analytika vína na dva sloupce: čtyři údaje = dva řádky, ne čtyři, a hlavně
zarovnané. Ve flexu si každá buňka brala šířku podle svého obsahu, takže
řádky pod sebou nikdy nezačínaly na stejné pozici. minmax(0,1fr) drží stopy
stejné a nejdelší popisek ("zbytkového cukru") sloupec nerozšíří — zlomí se.
U vína se třemi údaji zůstane poslední místo prázdné; buňka se nikam
neroztáhne, protože stopy jsou dané, ne odvozené z obsahu.
Mezera mezi řádky zůstává na původních .35rem: dva sloupce mají smysl jen
když řádek vína nenaroste, a s var(--s-4) byl celý blok o 15 px vyšší než
předtím, tedy přesně naopak, než o co jde. */
.analytics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem var(--s-4)}
/* Jedno chování tlačítek: co na telefonu stojí samo, jde přes celou šířku.
.cta to řeší už v gridu výš, tady zbývá odesílací tlačítko.
Tlačítko v košíku se ZÁMĚRNĚ nemění: není osamocené, stojí v jednom pruhu
vedle součtu, a když se mu vynutí flex-basis, vleze si k součtu na řádek
a popisek se v něm zlomí na dva řádky (naměřeno 196 px / 69,69 px na
360px displeji). Přirozená šířka je tam správná odpověď. */
.order-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}