/* ══════════════════════════════════════════════════════════════════════
   CHEFLEX — WEB

   Paleta je motiv Paper appky (`data-tema="nebe"` v `app/styl.css`),
   převzatý beze změny čísel. Cíl je, aby web a appka vypadaly jako jedna
   věc: kdo přijde ze storu, musí poznat, že je na správné stránce.

   Proti appce je web širší a čte se na monitoru, ne v ruce — mění se tedy
   rozměry a rytmus, ne barvy a písma.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/anton-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/archivo-black-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/archivo-black-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonty/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonty/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta Paper — výchozí motiv appky (`data-tema="nebe"` v `app/styl.css`),
     převzatá beze změny čísel. Brand: krémový papír, černý text, jeden
     horký akcent (`brand/BRAND.md`, oddíl Barvy). */
  --papir:      #F5F1E8;
  --papir-2:    #FDFBF6;
  --papir-3:    #EDE7DA;
  --pisek:      #EFE9DC;
  --linka:      #DFD7C7;
  --ramecek:    #C4BAA6;
  --inkoust:    #12120E;
  --inkoust-2:  #5D594F;
  --inkoust-3:  #676258;
  /* Korál značky #FF5A3C má na papíru jen 2,75:1, na text a odkazy je proto
     tmavší odstín z appky (--zlut světlých motivů). Plná plocha je korál
     značky a text na ní Ink — 6,06:1; světlý text by měl jen 2,85:1. */
  --akcent:     #B03619;
  --akcent-tm:  #8F2B14;
  --koral:      #FF5A3C;
  --na-koralu:  #12120E;
  --vzor:       #6E685D;

  /* Písma značky jako v appce: Anton na velké nadpisy verzálkami,
     Archivo Black na nadpisy sekcí a karet, Instrument Sans na text.
     Anton i Archivo Black mají jediný řez 400. */
  --display: 'Anton', 'Instrument Sans', Impact, sans-serif;
  --nadpis: 'Archivo Black', 'Instrument Sans', sans-serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sirka:    1080px;
  --sirka-uz: 68ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Skok na kotvu se zastaví pod lepivou hlavičkou, ne za ní. Bez toho
   nadpis sekce zmizí pod hlavičkou a člověk přistane rovnou v obsahu.
   Hlavička má 62 px minimální výšky a 8 px odsazení nahoře i dole, tedy
   78 px; zbytek je vzduch, aby nadpis nelepil na její spodní linku. */
html { scroll-padding-top: 94px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Kresba motivů leží pod obsahem přes celou výšku okna. Stejná hodnota
   krytí jako v appce: na velkém displeji se ztlumí, aby text nerušila. */
#terrain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .8;
}
/* Krytí se hledalo ve dvou kolech. Nejdřív .45/.34, protože text v pozadí
   zápasí s textem v popředí víc než kresba — jenže lístky pak nebyly
   k přečtení a o štítkování jídel neřekly nic. Text stránky drží halo
   v barvě papíru (viz níž), takže si pozadí může dovolit být sytější. */
@media (min-width: 900px) { #terrain { opacity: .66; } }
@media (max-width: 620px) { #terrain { opacity: .55; } }

/* `overflow-x: clip`, ne `hidden`: `hidden` by z obalu udělalo rolovací
   kontejner a lepivá hlavička uvnitř by se přestala lepit. `clip` jen
   ořízne, co přeteče do stran — typicky závoj pod nadpisem, který má
   `inset: … -6% …` a na 390px obrazovce rozjel stránku o 23 px doprava
   (změřeno 22. 9. 2026 na 320, 390 i 430 px). */
.obal { position: relative; z-index: 1; overflow-x: clip; }

h1, h2, h3 {
  font-family: var(--nadpis);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
}
/* Hlavní nadpis stránky je Anton verzálkami jako v mockupu značky. */
h1 { font-family: var(--display); text-transform: uppercase; letter-spacing: .005em; line-height: 1.3; }

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akcent-tm); }

/* Viditelné zaostření pro klávesnici. Bez tohohle je web pro člověka,
   který nepoužívá myš, neprůchodný — a je to i požadavek WCAG 2.4.7. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Odkaz pro čtečky a klávesnici — přeskočí navigaci rovnou na obsah. */
.preskocit {
  position: absolute; left: -9999px;
  background: var(--papir-2); color: var(--inkoust);
  padding: 10px 16px; border-radius: 8px; z-index: 100;
}
.preskocit:focus { left: 16px; top: 16px; }

/*
 * Postranní okraj celé stránky. Sekce pod ním (`.hero`, `.sekce`,
 * `.pribehVnitrek`, `.dokument`) si smějí nastavit jen `padding-block` —
 * zkratka `padding: 62px 0` má stejnou specificitu a stojí v souboru níž,
 * takže tenhle okraj vynuluje. Změřeno 9. 9. 2026: nadpis pak na 390 i
 * 768 px začínal na souřadnici 0 a text se lepil na obě hrany displeje.
 */
.pas { padding: 0 24px; }
.stred { max-width: var(--sirka); margin: 0 auto; }
.uzky { max-width: var(--sirka-uz); }

/* ── HLAVIČKA ─────────────────────────────────────────────────────── */

.hlava {
  border-bottom: 1px solid var(--linka);
  background: color-mix(in srgb, var(--papir) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.hlavaRada {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px; padding: 8px 0;
}
.znacka {
  color: var(--inkoust); text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
}
.znacka:hover { color: var(--inkoust); }
/* Lockup jako v appce: Anton, CHE v barvě textu, FLEX korálový. Na text
   je korál ztmavený (`--akcent`), plný #FF5A3C má na papíru jen 2,75:1. */
.znackaText {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 24px; line-height: 1; letter-spacing: .01em;
}
.znackaText em { font-style: normal; color: var(--akcent); }
.znackaZnak { width: 28px; height: 28px; display: block; flex: none; }

.nav { display: flex; gap: 20px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--inkoust-2); text-decoration: none; font-size: 15px;
}
.nav a:hover { color: var(--inkoust); text-decoration: underline; }

/* Přepínač jazyků — rozbalovací nabídka nad `<details>`.

   Pět chipů vedle sebe se do hlavičky nevešlo a na telefonu rozjelo
   vodorovné rolování. `<details>` funguje bez JavaScriptu i klávesnicí;
   `jazyk.js` k tomu jen přidává zavření kliknutím mimo a Escapem. */
.jazyky { position: relative; }
.jazykyRozbal { position: relative; }
.jazykChip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--linka); background: var(--papir-2);
  color: var(--inkoust-2); text-decoration: none;
  font-size: 13px; line-height: 1; cursor: pointer;
  list-style: none; user-select: none;
}
/* Trojúhelníček, který prohlížeč u `summary` kreslí sám, se schová —
   šipku si kreslíme vlastní, aby seděla do palety. */
.jazykChip::-webkit-details-marker { display: none; }
.jazykChip:hover { border-color: var(--ramecek); color: var(--inkoust); }
.jazykSipka {
  width: 7px; height: 7px; margin-left: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.jazykyRozbal[open] > .jazykChip {
  border-color: var(--akcent); color: var(--akcent);
  background: color-mix(in srgb, var(--koral) 8%, transparent);
}
.jazykyRozbal[open] .jazykSipka { transform: rotate(-135deg) translate(-3px, -3px); }

.jazykyMenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column; min-width: 168px;
  background: var(--papir-2); border: 1px solid var(--linka);
  border-radius: 12px; padding: 5px; z-index: 30;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--inkoust) 10%, transparent);
}
.jazykPolozka {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--inkoust-2); text-decoration: none; font-size: 14.5px;
}
.jazykPolozka:hover { background: var(--papir-3); color: var(--inkoust); }
.jazykPolozka[aria-current="true"] { color: var(--akcent); font-weight: 600; }
.jazykVlajka { font-size: 15px; }

/* ── ÚVODNÍ BLOK ──────────────────────────────────────────────────── */

/* Úvodní blok stojí na střed. Nadpis i podnadpis mají úzkou míru
   (16 a 46 znaků), takže při zarovnání doleva se na širokém displeji
   krčily v levé třetině a zbytek stránky zůstal prázdný. */
.hero { padding-block: 76px 60px; text-align: center; }
/* Řádkování 1,3 jako v appce: háčky a čárky nad verzálkami Antonu (Ř, Č, Í)
   sahají vysoko a při menším se dotýkají řádku nad sebou. Zkoušeno i 1,46
   z brandového mockupu — na monitoru se nadpis rozpadl na čtyři ostrovy. */
.hero h1 {
  font-size: clamp(40px, 6.4vw, 70px);
  line-height: 1.3;
  max-width: 20ch;
  margin: 0 auto 20px;
}
/* Perex leží na lístcích z banky, tedy na textu. Proti běžnému
   `--inkoust-2` je tu proto plná barva inkoustu a řez 500: v šedé
   se názvy receptů pod ním potřískaly s odstavcem a obojí se četlo
   špatně. Papírový závoj pod celým blokem (`.hero::before`) dělá
   druhou půlku práce. */
.heroPodnadpis {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--inkoust);
  font-weight: 500;
  max-width: 46ch;
  margin: 0 auto 34px;
}
.hero .storeRada { justify-content: center; }
/* Druhá věta nadpisu je pointa, proto korálem a na vlastním řádku —
   začínala-li uprostřed řádku, četla se jako pokračování první věty.
   `em` bez kurzívy: Anton kurzívu nemá a prohlížeč by ji jen šikmo
   zdeformoval. */
.hero h1 em { font-style: normal; color: var(--akcent); display: block; }

/* Čísla z banky pod perexem. Nahrazují pilulky z brandu, které by
   řekly totéž co poslední dvě čísla. */
.heroCisla {
  list-style: none; padding: 0; margin: 0 auto 30px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  color: var(--inkoust-2); font-size: 15px;
}
.heroCisla strong {
  font-family: var(--nadpis); font-weight: 400; color: var(--inkoust);
  font-size: 20px; margin-right: 2px;
}
.heroOdkaz { margin: 18px 0 0; font-weight: 600; }
.heroOdkaz a { color: var(--akcent); text-decoration: none; }
.heroOdkaz a:hover { text-decoration: underline; }

/* Pod úvodním blokem pozadí měkne do papíru. Halo kolem písmen samo
   nestačilo: lístky mají vlastní rámečky a štítky, takže mezi řádky
   perexu pořád prosvítal cizí text. Přechod je radiální a končí
   průhledností, aby nevznikl viditelný obdélník — lístky jsou dál
   vidět, jen ustoupí. Živý pás za nadpisem leží nad závojem (je
   uvnitř `.heroPas`, který má `z-index: 1`), takže o něj nepřijdeme. */
.hero { position: relative; }
.hero::before {
  content: ''; position: absolute; z-index: 0;
  inset: -30px -6% -10px;
  background: radial-gradient(ellipse 62% 58% at 50% 48%,
    color-mix(in srgb, var(--papir) 97%, transparent) 0%,
    color-mix(in srgb, var(--papir) 93%, transparent) 42%,
    color-mix(in srgb, var(--papir) 60%, transparent) 70%,
    color-mix(in srgb, var(--papir) 0%, transparent) 100%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* ── ŽIVÝ PÁS ZA NADPISEM ─────────────────────────────────────────────
   Plátno leží přesně na nadpisu a přetéká jen nahoru a dolů, nikdy do
   stran: záporný postranní posun by na mobilu rozjel vodorovné rolování
   celé stránky — u pásu snímků to kdysi stálo 18 px přetečení doprava,
   změřeno na 320, 390 i 430 px. Konce pásu se místo useknutí
   rozplynou maskou, takže je vidět, že motivy někam pokračují. */
.heroPas { position: relative; }
/* Rozměr se zadává PROCENTY, ne dvojicí `left`/`right`. `<canvas>` je
   nahrazovaný prvek, takže `width: auto` u něj neznamená „dopočítej
   z odsazení", ale „vezmi vnitřní výchozí 300 × 150 px" — pás se pak
   kreslil do třetiny šířky nadpisu a zbytek zůstal prázdný. */
.heroPas > canvas {
  position: absolute; left: 0; top: -16px;
  width: 100%; height: calc(100% + 24px);
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.heroPas > h1 { position: relative; z-index: 1; }
.oko {
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--inkoust-3);
  margin-bottom: 14px;
}

/* ── TLAČÍTKA STORŮ ───────────────────────────────────────────────── */

.storeRada { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 20px; border-radius: 12px;
  background: var(--inkoust); color: var(--papir);
  text-decoration: none; border: 1px solid var(--inkoust);
  min-height: 54px;
}
.store:hover { background: var(--koral); border-color: var(--koral); color: var(--na-koralu); }
.store svg { width: 26px; height: 26px; flex: none; }
.storeText { display: flex; flex-direction: column; line-height: 1.15; }
.storeMale { font-size: 11px; opacity: .8; }
.storeVelke { font-size: 16px; font-weight: 600; }

/* Dokud odkazy nevedou do storů, tlačítko nesmí vypadat funkčně —
   klik do prázdna je horší než viditelně nedostupné tlačítko. */
.store.chysta {
  background: var(--papir-2); color: var(--inkoust-3);
  border: 1px dashed var(--ramecek); cursor: default;
}
.store.chysta:hover { background: var(--papir-2); color: var(--inkoust-3); }
.storePozn { font-size: 14px; color: var(--inkoust-3); margin-top: 12px; }

/* ── UKÁZKA PRŮVODCE ──────────────────────────────────────────────────
   Vlevo rám telefonu s živou appkou, vpravo tři kroky a závěr. Do
   22. 9. 2026 tu byly čtyři natočené smyčky (`.ukazky`, `.ukazka`);
   ty jsou pryč i s pravidly, protože šablona je už negeneruje.

   Rám má 390 px na šířku, tedy přesně tolik, kolik má stránka uvnitř
   něj. Appka se tak nemusí zmenšovat a písmo v ní zůstane stejně velké
   jako na telefonu; zvětšovat rám nemá smysl, appka je psaná na šířku
   ruky.
   ────────────────────────────────────────────────────────────────── */

.ukazkaBlok {
  display: grid; gap: 34px;
  /* `minmax(0, 1fr)`, ne `1fr`: automatické minimum sloupce je min-content
     a to je u rámu jeho pevných 390 px. Na 390px obrazovce se tím stránka
     roztáhla na 413 px a rolovala doprava (změřeno 22. 9. 2026). */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .ukazkaBlok { grid-template-columns: 390px minmax(0, 1fr); gap: 54px; }
  /* Rám zůstane na očích, dokud se vedle něj rolují kroky. Odsazení
     shora je o vlas víc než lepivá hlavička (62 px + 16 px odsazení),
     aby se rám nelepil přímo na její spodní linku. */
  .ukazkaRam { position: sticky; top: 96px; }
}

/* Telefon: silný rámeček v barvě inkoustu a měkký stín, ať je poznat,
   že jde o zařízení a ne o další kartu na stránce. */
.ukazkaRam {
  width: min(390px, 100%);
  margin: 0 auto;
  border: 10px solid var(--inkoust);
  border-radius: 34px;
  background: var(--inkoust);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--inkoust) 22%, transparent);
  overflow: hidden;
}
/* Poměr stran drží `aspect-ratio`, ne pevná výška z atributů `width`
   a `height`. Na úzké obrazovce se rám zúží na šířku stránky a výška se
   dopočítá, takže se appka uvnitř neusekne ani neprotáhne. */
.ukazkaOkno {
  display: block; width: 100%; height: auto;
  aspect-ratio: 390 / 760;
  border: 0; border-radius: 24px;
  background: var(--papir);
}
.ukazkaBezJs {
  margin: 0; padding: 22px;
  background: var(--papir-2); color: var(--inkoust-2);
  font-size: 15px; text-align: center;
}

.ukazkaVedle { display: grid; gap: 30px; }
.ukazkaKroky {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 24px; counter-reset: krok;
}
/* Číslo kroku kreslí `::before`, ne značka seznamu: kolečko s okrajem
   se jinak nedá obarvit zvlášť od textu. Obsah generovaný přes CSS
   navíc čtečka přeskočí, což je tady správně — pořadí je vidět z toho,
   že kroky jdou pod sebou, a nahlas by čísla jen překážela. */
.ukazkaKrok { counter-increment: krok; padding-left: 52px; position: relative; }
.ukazkaKrok::before {
  content: counter(krok);
  position: absolute; left: 0; top: 1px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--koral); border: 0;
  color: var(--na-koralu); font-weight: 700; font-size: 16px;
}
.ukazkaKrok h3 { font-size: 20px; margin: 0 0 6px; }
.ukazkaKrok p { margin: 0; color: var(--inkoust-2); max-width: 46ch; }

/* Korálová hrana je stejná značka jako u `.hlavniVec` na právních
   stránkách: tohle si odnes, i kdybys nečetl zbytek. */
.ukazkaZaver {
  background: var(--papir-2);
  border: 1px solid var(--linka);
  border-left: 3px solid var(--koral);
  border-radius: 0 18px 18px 0;
  padding: 26px;
}
.ukazkaZaver h3 { font-size: 20px; margin: 0 0 8px; }
.ukazkaZaver p { margin: 0 0 20px; color: var(--inkoust-2); max-width: 46ch; }

.ukazkaPozn {
  margin: 26px 0 0; font-size: 14px; color: var(--inkoust-3); max-width: 62ch;
}


/* ── PAPÍROVÉ PODLOŽENÍ TEXTU ─────────────────────────────────────────
   Pozadí tvoří lístky z banky — tedy text pod textem. I při nízkém krytí
   se název receptu občas trefí přesně pod odstavec a obojí se potříská.
   Halo v barvě papíru okolo písmen to řeší bez viditelného obdélníku:
   rozsvítí papír jen tam, kde jsou tahy písma.

   Karty (`.karta`, `.ukazkaZaver`) a příběh mají vlastní neprůhledné pozadí,
   takže je tohle netrápí a halo by na nich bylo k ničemu. */
.hero h1, .heroPodnadpis, .hero .oko, .storePozn,
.sekce h2, .sekceUvod,
.dokument h1, .dokument h2, .dokument h3, .dokument p, .dokument li,
.dokumentDatum, .faqPolozka summary, .pribehStitek,
.ukazkaKrok h3, .ukazkaKrok p, .ukazkaPozn,
.udaje th, .udaje td {
  text-shadow:
    0 0 5px var(--papir),
    0 0 10px var(--papir),
    0 0 18px var(--papir),
    0 0 28px var(--papir),
    0 0 38px var(--papir);
}

/* ── SEKCE ────────────────────────────────────────────────────────── */

.sekce { padding-block: 62px; border-top: 1px solid var(--linka); }

/* Pruhy sekcí. Do 22. 9. 2026 byla celá stránka jedna plocha papíru
   a sekce od sebe dělila jen tenká linka; na velkém monitoru z toho byla
   jednolitá šedá. Podklad je průsvitný, ne krycí: kresba lístků v pozadí
   musí prosvítat dál, jinak se ze sekce stane prázdný obdélník.

   Pruh jde přes celou šířku okna, i když obsah sekce má jen 1080 px —
   odtud `100vw` a posun na střed. Do strany nic nepřeteče, `.obal` má
   `overflow-x: clip`. Kreslí ho `::before` se záporným `z-index`, aby
   ležel pod textem sekce; `.obal` je vlastní vrstvicí kontext, takže se
   tím nedostane pod kresbu motivů. */
.sekceTon { position: relative; }
.sekceTon::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
}
/* Korálový nádech patří ukázce — je to sekce, kde se něco děje. Závěr
   u tlačítek storů leží na písku, druhé ploše značky; druhá signální
   barva se nepřidává. Krytí 7 % je maximum, při kterém se text
   v pozadí ještě dá přečíst (zkoušeno na 12 % a 9 %). */
.sekceTonTepla::before  { background: color-mix(in srgb, var(--koral) 7%, transparent); }
.sekceTonPisek::before { background: var(--pisek); }
.sekce h2 { font-size: clamp(27px, 3.4vw, 36px); margin-bottom: 14px; }
.sekceUvod { color: var(--inkoust-2); max-width: 56ch; margin: 0 0 34px; }

.karty {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.karta {
  background: var(--papir-2);
  border: 1px solid var(--linka);
  border-radius: 16px;
  padding: 22px 22px 24px;
}
.kartaZnak { width: 30px; height: 30px; margin-bottom: 14px; display: block; color: var(--akcent); }
.karta h3 { font-size: 19px; margin-bottom: 7px; }
.karta p { margin: 0; color: var(--inkoust-2); font-size: 15.5px; line-height: 1.55; }

/* Šest brandových bloků: otázka jako nadpis, pod ní krátká odpověď.
   Bez znaku — nese to text, ne ikona, a karty se znaky žijí na
   stránce Jak to funguje. */
.bloky {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.blok {
  background: var(--papir-2);
  border: 1px solid var(--linka);
  border-top: 3px solid var(--koral);
  border-radius: 16px;
  padding: 22px 22px 24px;
}
.blokTema {
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--akcent); margin: 0 0 10px;
}
.blok h3 { font-size: 20px; margin-bottom: 8px; }
.blok p:last-child { margin: 0; color: var(--inkoust-2); font-size: 15.5px; line-height: 1.55; }
.dokument .karta h3 { margin: 0 0 7px; }
.dokument .karta p { margin: 0; }
.dokument .karty { margin-bottom: 20px; }

/* ── PŘÍBĚH ───────────────────────────────────────────────────────── */

/* Osobní text stojí bokem od produktových sekcí a čte se jinak — proto
   serifové písmo, užší sloupec a odsazený svislý proužek. */
.pribeh { background: var(--papir-2); border-top: 1px solid var(--linka); }
.pribehVnitrek { padding-block: 62px; display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .pribehVnitrek { grid-template-columns: 260px 1fr; gap: 48px; }
}
.pribehStitek { color: var(--inkoust-3); }
.pribehStitek h2 { font-size: 26px; margin-bottom: 10px; color: var(--inkoust); }
.pribehText {
  font-family: var(--sans); font-size: 18.5px; line-height: 1.62;
  max-width: var(--sirka-uz); color: var(--inkoust);
}
.pribehText p { margin: 0 0 18px; }
.pribehText p:last-child { margin-bottom: 0; }
/* Podpis pod příběhem. Vlastní klíč v textech, ne součást odstavce —
   až se rozhodne, kdo je vydavatel, změní se jen on. */
.pribehPodpis {
  margin-top: 22px !important; font-family: var(--sans);
  font-size: 15px; color: var(--inkoust-2); font-weight: 600;
}

/* Značka „tady se bude psát" — musí být vidět, že text není hotový,
   ale nesmí to vypadat jako chyba stránky. */
.rozepsano {
  border-left: 3px solid var(--akcent);
  padding: 4px 0 4px 18px;
  color: var(--inkoust-2);
  font-style: italic;
}

/* ── TEXTOVÉ STRÁNKY (podmínky, soukromí) ─────────────────────────── */

.dokument { padding-block: 54px 72px; }
.dokument h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 10px; }
.dokumentDatum { color: var(--inkoust-3); font-size: 14.5px; margin: 0 0 38px; }
.dokument h2 {
  font-size: 23px; margin: 42px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--linka);
}
.dokument h3 { font-size: 18px; margin: 26px 0 8px; }
.dokument p, .dokument li { max-width: var(--sirka-uz); color: var(--inkoust-2); }
.dokument p { margin: 0 0 14px; }
.dokument ul, .dokument ol { margin: 0 0 16px; padding-left: 22px; }
.dokument li { margin-bottom: 7px; }
.dokument strong { color: var(--inkoust); font-weight: 600; }

/* Vytažený odstavec — to podstatné, co si má člověk odnést, když
   zbytek nepřečte. U právního textu to není zdvořilost, ale smysl. */
.hlavniVec {
  background: var(--papir-2);
  border: 1px solid var(--linka);
  border-left: 3px solid var(--koral);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin: 0 0 34px;
  max-width: var(--sirka-uz);
}
.hlavniVec p { margin: 0; color: var(--inkoust); }

/* Údaj, který ještě nemáme. Nesmí projít do publikované verze — build
   ho počítá a vypíše, kolik jich na stránce zbývá. */
.doplnit {
  background: color-mix(in srgb, var(--koral) 14%, transparent);
  border-bottom: 1px dashed var(--akcent);
  color: var(--akcent-tm);
  padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
}

.udaje { border-collapse: collapse; margin: 0 0 20px; max-width: var(--sirka-uz); width: 100%; }
.udaje th, .udaje td {
  text-align: left; padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--linka); vertical-align: top;
}
.udaje th { font-weight: 600; color: var(--inkoust); width: 200px; }
.udaje td { color: var(--inkoust-2); }

/* ── ČASTÉ DOTAZY ─────────────────────────────────────────────────── */

.faq { max-width: var(--sirka-uz); }
.faqPolozka {
  border-bottom: 1px solid var(--linka);
  padding: 4px 0;
}
.faqPolozka summary {
  cursor: pointer; padding: 15px 0; font-weight: 600;
  color: var(--inkoust); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faqPolozka summary::-webkit-details-marker { display: none; }
.faqPolozka summary::after {
  content: '+'; font-size: 22px; color: var(--inkoust-3);
  font-weight: 400; line-height: 1; flex: none;
}
.faqPolozka[open] summary::after { content: '−'; }
.faqPolozka p { margin: 0 0 15px; color: var(--inkoust-2); }

/* ── PATIČKA ──────────────────────────────────────────────────────── */

.pata {
  border-top: 1px solid var(--linka);
  background: var(--papir-3);
  padding: 48px 0 40px;
  font-size: 15px;
}
.pataMrizka {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 34px;
}
.pataSloupec h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--inkoust-3); margin-bottom: 12px;
}
.pataSloupec ul { list-style: none; margin: 0; padding: 0; }
.pataSloupec li { margin-bottom: 8px; }
.pataSloupec a { color: var(--inkoust-2); text-decoration: none; }
.pataSloupec a:hover { color: var(--akcent); text-decoration: underline; }
.pataZnacka .znacka { margin-bottom: 10px; color: var(--inkoust); }
.claim {
  margin: 0; font-family: var(--display); font-size: 14px;
  letter-spacing: .08em; color: var(--inkoust-2);
}
.claim span { color: var(--akcent); }
.pataSpodek {
  border-top: 1px solid var(--linka); padding-top: 22px;
  color: var(--inkoust-3); font-size: 14px;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
}

/* ── TISK ─────────────────────────────────────────────────────────── */

/* Podmínky si člověk vytiskne nebo uloží do PDF — kresba na pozadí
   a navigace jsou tam k ničemu a stojí toner. */
@media print {
  #terrain, #pasNadpisu, .hlava, .pata, .storeRada { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .dokument p, .dokument li { color: #000; max-width: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ── MOBIL ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .pas { padding: 0 18px; }
  /* Na telefonu zůstává hlavička na jedné řádce: značka, jeden odkaz
     a rozbalovací nabídka jazyků. Víc se tam nevejde — viz níž. */
  .hlavaRada { gap: 12px; }

  /*
   * Hlavička se do jedné řádky nevejde a zalomená se rozpadne tak, že
   * navigace skončí NAD značkou — změřeno na 390 px. Kotvy na sekce
   * úvodní stránky se proto na mobilu schovají; obojí je v patičce
   * a ve stránce se k nim člověk stejně doroluje.
   */
  .navSekce { display: none; }
  .nav { gap: 14px 12px; font-size: 14px; }
  .hlava .znackaText { font-size: 20px; }
  .hlava .znackaZnak { width: 24px; height: 24px; }
  .hlava .znacka { gap: 7px; }
  .hlavaRada { min-height: 54px; }
  /* Ani se dvěma odkazy se hlavička nevešla — výběr jazyka proto na
     telefonu ukazuje jen vlajku. Název zůstává pro čtečky obrazovky
     a rozbalená nabídka vypisuje jazyky celými jmény. */
  .jazykNazev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .hero { padding-block: 46px 40px; }
  .sekce { padding-block: 44px; }
  .pribehVnitrek { padding-block: 44px; }
  .dokument { padding-block: 38px 52px; }

  /* Tlačítka storů přes celou šířku — palcem se trefí líp než do dvou
     tlačítek vedle sebe. */
  .storeRada { flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }

  /* Rám se zúží na šířku stránky; poměr stran si iframe dopočítá sám,
     takže se appka uvnitř nezdeformuje. Rámeček a zaoblení se zmenší
     s ním — deset pixelů okraje vypadá na 390px stránce jako ohrada. */
  .ukazkaRam { border-width: 8px; border-radius: 28px; }
  .ukazkaOkno { border-radius: 20px; }
  .ukazkaKrok { padding-left: 46px; }
  .ukazkaZaver { padding: 20px; }

  .udaje th, .udaje td { display: block; width: auto; padding: 0; border: 0; }
  .udaje th { padding-top: 12px; }
  .udaje td { padding-bottom: 12px; border-bottom: 1px solid var(--linka); }
}