/* =======================================================================
   KOSTRA
   Hodnoty odpovídají CLAUDE.md. Ladí se tam, ne tady.
   V tomto souboru není jediný hex ani jediný název písma — barvy a písma
   dodává vrstva.css přes čtrnáct proměnných z CLAUDE.md.
   ======================================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
	--blok: 1280px;
	--sloupec: 640px;
	--okraj: 24px;
	--sekce: 80px;
	--mezera: 24px;
	--pod-nadpisem: 16px;
	--pod-popiskem: 8px;
	--gap: 16px;

	--karta-radius: 16px;
	--karta-pad: 24px;

	--tl-vyska: 48px;
	--tl-pad-y: 12px;
	--tl-pad-x: 24px;
	--tl-lh: 20px;
	--tl-radius: 24px;

	--fs-h1: 40px;
	--fs-h2: 32px;
	--fs-h3: 24px;
	--fs-text: 16px;
	--fs-popisek: 12px;

	--lh-h1: 1.25;
	--lh-h2: 1.30;
	--lh-h3: 1.33;
	--lh-text: 1.75;
	--lh-navigace: 1.25;
	--lh-popisek: 1.33;

	/* Obsah karet a seznamů — název jídla, otevírací hodiny, údaje. Stojí mezi
	   H3 a H2, aby hlavní obsah karty byl výrazně větší než vedlejší údaje.
	   Věta: pravidla a kroky, delší text, který má být větší než běžný.
	   Cena: číslo na pásu, nejsilnější prvek sekce. */
	--fs-obsah: 24px;
	--lh-obsah: 1.25;
	--fs-veta: 20px;
	--lh-veta: 1.33;
	--fs-cena: 56px;
	--lh-cena: 1.25;

	--ls-h1: -0.02em;
	--ls-h2: -0.01em;
	--ls-h3: 0;
	--ls-popisek: 0.18em;

	/* pohyb */
	--prechod-kratky: 200ms;
	--prechod-dlouhy: 700ms;
	--krivka: cubic-bezier(0.2, 0.7, 0.2, 1);
	--odkryti-posun: 24px;
	--stagger: 80ms;
	--zvetseni: 1.02;
	--stisk: 0.97;
	--scroll-doba: 900;        /* ms, přeskok na kotvu */
	--scroll-doba-nahoru: 600; /* ms, návrat na začátek přes logo */
	--pocitadlo-doba: 2600;    /* ms */
	/* O kolik procent výšky okna se zvedne spodní hrana spouštěcího pruhu —
	   počítadlo naskočí, jakmile se číslo objeví u dolního okraje okna. */
	--pocitadlo-pasmo: 5;
	--stridani-fotek: 5000;    /* ms mezi fotkami v heru, které se střídají */

	/* Obrys karty a stín jsou odvozené z barvy textu, ne z vlastního hexu.
	   Obrys drží kartu rozeznatelnou i tam, kde se její podklad od podkladu
	   sekce liší jen málo — rozdíl světlosti sám nestačí. */
	--karta-obrys: color-mix(in srgb, var(--text) 28%, var(--karta));
	--stin: color-mix(in srgb, var(--text) 20%, transparent);

	/* výška lepivé hlavičky, o kterou se odsazují kotvy */
	--hlavicka: 64px;
}

@media (min-width: 768px) {
	:root { --okraj: 32px; --sekce: 96px; --gap: 24px; --fs-h1: 56px; --fs-h2: 40px; --fs-obsah: 32px; --fs-veta: 24px; --fs-cena: 72px; --hlavicka: 120px; }
}

@media (min-width: 1280px) {
	:root { --okraj: 24px; --sekce: 112px; --fs-h1: 72px; --fs-h2: 48px; --fs-cena: 96px; --hlavicka: 64px; }
}

/* Plynulý přeskok na kotvu řídí skript, aby šla nastavit doba. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--pismo-text);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	background-color: var(--podklad);
	color: var(--text);
}

img { max-width: 100%; }

/* --- stavební bloky --- */

.blok { max-width: var(--blok); margin-inline: auto; padding-inline: var(--okraj); }
.sekce { padding-block: var(--sekce); scroll-margin-top: var(--hlavicka); }

/* Střídání podle pořadí sekce pod herem: lichá základní, sudá odlišená.
   (CLAUDE.md, Rytmus sekcí) */
.sekce--zaklad { background-color: var(--podklad); }
.sekce--odlisena {
	background-color: var(--podklad-odliseny);
	/* Karta se vždy odliší od podkladu sekce: na odlišené sekci bere vlastní
	   polohu karty. Obrys se z ní odvodí sám. */
	--karta: var(--karta-na-odlisenem);
	--karta-vyrazna: var(--karta-na-odlisenem-vyrazna);
}

/* Pás v barvě plochy. Předefinuje text, tlumený text, akcent i zvýraznění —
   hodnoty počítané proti světlému podkladu by tu byly nečitelné.
   Světlé polohy obou barev dodává vrstva. */
.na-plose {
	background-color: var(--plocha);
	--text: var(--plocha-text);
	--text-tlumeny: var(--plocha-text);
	--akcent: var(--plocha-akcent);
	--akcent-text: var(--plocha-akcent-text);
	--akcent-tmavy: var(--plocha-akcent-svetly);
	--zvyrazneni: var(--plocha-zvyrazneni);
	color: var(--text);
}

.stoh > * + * { margin-top: var(--mezera); }
.stoh > .popisek + * { margin-top: var(--pod-popiskem); }
.stoh > :is(h1, h2, h3) + * { margin-top: var(--pod-nadpisem); }

/* --- typografie --- */

h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis, 600); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* Typografický podpis: kurzíva téhož písma v barvě zvýraznění, výška řádku 1,
   optická mezera podle sklonu kurzívy (hodnotu dodává vrstva). */
.podpis {
	font-style: italic;
	color: var(--zvyrazneni);
	line-height: 1;
	margin-inline-start: var(--podpis-mezera);
}

p, ul, ol { margin: 0; max-width: var(--sloupec); text-wrap: pretty; }

/* Hlavní obsah karty v písmu nadpisů. Není to nadpis dokumentu — třída
   se dává na h3, h4 i span podle toho, co prvek znamená. */
.nazev {
	margin: 0;
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis, 600);
	font-size: var(--fs-obsah);
	line-height: var(--lh-obsah);
	letter-spacing: 0;
	text-wrap: balance;
}

.veta { font-size: var(--fs-veta); line-height: var(--lh-veta); }

/* Počítadlo: číslo se vypisuje skriptem, tabulkové číslice a pevná šířka
   drží okolí na místě, když číslo roste. */
.pocitadlo { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.tlumeny { color: var(--text-tlumeny); }

.popisek {
	margin: 0;
	font-family: var(--pismo-text);
	font-size: var(--fs-popisek);
	line-height: var(--lh-popisek);
	letter-spacing: var(--ls-popisek);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--akcent);
}

a { color: var(--akcent); text-underline-offset: 0.2em; transition: color var(--prechod-kratky) var(--krivka); }
a:hover { color: var(--akcent-tmavy); }

/* --- tlačítka --- */

.tlacitko {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tl-vyska);
	min-width: var(--tl-vyska);
	padding: var(--tl-pad-y) var(--tl-pad-x);
	border: 2px solid var(--akcent);
	border-radius: var(--tl-radius);
	font-family: var(--pismo-text);
	font-size: var(--fs-text);
	line-height: var(--tl-lh);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--prechod-kratky) var(--krivka),
		color var(--prechod-kratky) var(--krivka),
		border-color var(--prechod-kratky) var(--krivka),
		transform var(--prechod-kratky) var(--krivka);
}

.tlacitko--primarni { background-color: var(--akcent); color: var(--akcent-text); }
.tlacitko--primarni:hover { background-color: var(--akcent-tmavy); border-color: var(--akcent-tmavy); color: var(--akcent-text); }
.tlacitko--sekundarni { background-color: transparent; color: var(--text); }
.tlacitko--sekundarni:hover { background-color: var(--akcent); color: var(--akcent-text); }
.tlacitko:active { transform: scale(var(--stisk)); }

.tlacitka { display: flex; flex-wrap: wrap; gap: var(--gap); }

/* --- karta a obrázek ---
   Při najetí se ZVĚTŠÍ na místě, nezvedají se. Stín přes opacity pomocné
   vrstvy, ne přes box-shadow (pravidlo 15). Odkrývací posun leží na obalu
   .odkryti, zvětšení na kartě uvnitř — oba zapisují transform. */

.karta,
.obrazek-obal {
	position: relative;
	border-radius: var(--karta-radius);
	transition:
		transform var(--prechod-kratky) var(--krivka),
		background-color var(--prechod-kratky) var(--krivka);
}

.karta {
	display: block;
	background-color: var(--karta);
	border: 1px solid var(--karta-obrys);
	padding: var(--karta-pad);
	color: var(--text);
	text-decoration: none;
}

.karta > * + * { margin-top: var(--pod-nadpisem); }
.karta p, .karta ul, .karta ol { max-width: none; }

.karta::after,
.obrazek-obal::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 24px 48px var(--stin);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--prechod-kratky) var(--krivka);
}

.karta:hover,
.obrazek-obal:hover { transform: scale(var(--zvetseni)); }
.karta:hover { background-color: var(--karta-vyrazna); }
.karta:hover::after,
.obrazek-obal:hover::after { opacity: 1; }

.obrazek-obal { overflow: hidden; background-color: var(--karta); }
/* height: auto je nutné — atribut height je prezentační hint a aspect-ratio
   platí, jen když je jeden rozměr auto. (CLAUDE.md, Pohyb, pravidlo 8) */
.obrazek-obal img { display: block; width: 100%; height: auto; object-fit: cover; }

.mrizka { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.mrizka > * { min-width: 0; }
.mrizka > .odkryti { display: grid; }

@media (min-width: 768px) {
	.mrizka--2, .mrizka--3, .mrizka--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
	.mrizka--3 { grid-template-columns: repeat(3, 1fr); }
	.mrizka--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- zaměření klávesnicí (pravidlo 5) --- */

:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* --- odkrytí při scrollu --- */

html.js .odkryti {
	opacity: 0;
	transform: translateY(var(--odkryti-posun));
	transition:
		opacity var(--prechod-dlouhy) var(--krivka),
		transform var(--prechod-dlouhy) var(--krivka);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

html.js .odkryti.viditelny { opacity: 1; transform: none; }

/* --- pomocné --- */

.skryte-vizualne { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Klidová větev kostry (pravidlo 14). Stojí na konci souboru — stejná
   specificita, rozhoduje pořadí. */
@media (prefers-reduced-motion: reduce) {
	html.js .odkryti { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
	.tlacitko, a, .karta, .obrazek-obal, .karta::after, .obrazek-obal::after { transition: none; }
	.tlacitko:active, .karta:hover, .obrazek-obal:hover { transform: none; }
}