/* ===========================================================
   ALGOTRADERMARTIN.CZ · JEDINÝ soubor s komponentami.

   🔴 Chybí ti komponenta? PŘIDEJ JI SEM.
      Nezakládej další soubor se styly a nepiš <style> do stránky.
      Proč: standardy/vizual.md, bod 2 · kontrola: kontrola-jednoho-css.md

   🔴 Žádná barva ani rozměr natvrdo — všechno přes var(--…) z tokens.css.

   Jak se z toho staví další stránka: STAVEBNICE-WEB.md
   =========================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--text-zaklad);
  line-height: var(--text-radek);
  -webkit-font-smoothing: antialiased;
}

/* Velikosti jsou pevné podle breakpointu, ne clamp: zadání předepisuje
   konkrétní hodnoty pro desktop, tablet a mobil. Zlomy jsou dole. */
h1, h2, h3 { color: var(--nadpis); margin: 0 0 var(--mezera-3); }
h1 {
  font-size: 56px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: var(--nadpis-sirka);
}
h2 { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 26px; line-height: 1.25; font-weight: 650; }
p { margin: 0 0 var(--mezera-2); max-width: var(--sloupec); }
strong { color: var(--nadpis); font-weight: 600; }

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

img { max-width: 100%; height: auto; display: block; }

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

/* ---------- Rozvržení ---------- */

.pas {
  max-width: var(--pas);
  margin: 0 auto;
  padding: 0 var(--okraj);
}

.sloupec { max-width: var(--sloupec); }
.sloupec-stred { max-width: var(--sloupec); margin-left: auto; margin-right: auto; }

/* 🔴 .pas a .sloupec na JEDNOM prvku — pozor, tady byla chyba.
   Oba selektory mají stejnou váhu, takže vyhraje ten pozdější: .sloupec
   přebil šířku pásu z 1200 na 720 px a `margin: 0 auto` z .pas ten úzký
   blok vycentroval. Text v takové sekci pak začínal o ~240 px vpravo než
   v sousední sekci psané jako .pas > .sloupec — zarovnání se rozjelo.

   Řešení: pás si drží svou šířku, čtecí sloupec se omezí až u dětí.
   Obě zápisy tak vypadají stejně a nezáleží, který kdo použije.        */
.pas.sloupec { max-width: var(--pas); }
.pas.sloupec > * { max-width: var(--sloupec); }
.pas.sloupec > h1 { max-width: var(--nadpis-sirka); }

.sekce { padding: var(--mezera-7) 0; }
.sekce--uzka { padding: var(--mezera-6) 0; }
.sekce--povrch { background: var(--povrch); }

.nadhlavi {
  font-family: var(--pismo-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akcent);
  margin: 0 0 12px;
}

/* ---------- Hlavička ---------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(var(--povrch-rgb) / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linka);
}

.hlavicka-obsah {
  display: flex;
  align-items: center;
  gap: var(--mezera-3);
  min-height: 68px;
}

.znacka {
  font-weight: 700;
  color: var(--nadpis);
  text-decoration: none;
  font-size: 17px;
  white-space: nowrap;
}
.znacka span { font-weight: 400; color: var(--text-tlumeny); }

.menu {
  display: flex;
  gap: var(--mezera-3);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.menu a { color: var(--text); text-decoration: none; font-size: 16px; }
.menu a:hover { color: var(--akcent); }
.menu a[aria-current="page"] { color: var(--akcent); }

/* Přepínač menu — na desktopu není vidět, na mobilu rozbaluje seznam odkazů.
   Chování je v js/menu.js, ne v každé stránce. */
.menu-prepinac {
  display: none;
  align-items: center;
  gap: var(--mezera-1);
  margin-left: auto;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--linka);
  border-radius: var(--oblouk);
  cursor: pointer;
}
.menu-prepinac:hover { color: var(--akcent); border-color: var(--akcent); }

.menu-prepinac-carky,
.menu-prepinac-carky::before,
.menu-prepinac-carky::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-prepinac-carky { position: relative; }
.menu-prepinac-carky::before,
.menu-prepinac-carky::after { content: ""; position: absolute; left: 0; }
.menu-prepinac-carky::before { top: -6px; }
.menu-prepinac-carky::after { top: 6px; }

/* ---------- Tlačítko (jediné plné na stránku) ---------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mezera-1);
  min-height: 48px;
  padding: 14px 22px;
  /* --akcent-plocha, ne --akcent: v tmavé sekci se --akcent přepisuje na
     světlou modrou kvůli čitelnosti textu, ale výplň tlačítka musí zůstat
     značková všude. */
  background: var(--akcent-plocha);
  color: var(--na-akcentu);
  font-weight: 650;
  font-size: 16px;
  border: 0;
  border-radius: var(--oblouk-tlacitko);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.tlacitko:hover { background: var(--akcent-plocha-hover); color: var(--na-akcentu); }
.tlacitko--velke { min-height: 56px; padding: var(--mezera-2) 30px; font-size: 18px; }

.odkaz-dal {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- Úvod ---------- */

.uvod { padding: 72px 0 88px; border-bottom: 1px solid var(--linka); }

.uvod-mrizka {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.uvod p.perex { font-size: 20px; color: var(--text); max-width: 34em; }

/* Zvýrazněná věta pod perexem — vymezení, ne tvrzení („Bez zkratek.
   Bez signálů. Bez slibů."). Nese ji váha a barva nadpisu, ne velikost:
   kdyby byla větší, soupeřila by s H1 o první pohled.               */
p.perex-duraz {
  font-weight: 600;
  color: var(--nadpis);
  margin-top: var(--mezera-3);
}
.uvod p.perex-duraz { max-width: 34em; }

/* ---------- Manifest: pozicovací tvrzení ----------
   Kdy: JEDNOU na domovské stránce, v horní části. Není to odstavec,
   je to prohlášení značky — proto vlastní plocha, rámeček a zaoblení.
   Dvě věty: co nedělám (menší) a co dělám (větší). Ta druhá nese váhu.
   🔴 Nikdy víc než jeden manifest na web.                          */

.manifest {
  background: var(--manifest);
  border: 1px solid var(--manifest-linka);
  border-radius: var(--oblouk-blok);
  padding: var(--mezera-4) var(--mezera-5);
  margin: var(--mezera-4) 0;
  max-width: var(--sloupec);
}
.manifest p { margin: 0; max-width: none; color: var(--nadpis); }
.manifest-nedelam {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 650;
}
.manifest-delam {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--mezera-2) !important;
}

/* Velké tvrzení v úvodu — nese ho velikost, ne jen tučnost. Používá se
   na jednu krátkou větu, na které stránka stojí. Menší než H1, aby se
   o první pohled nepralo; větší než perex, aby se nedalo přehlédnout.
   🔴 Jen jedna taková věta na stránku. Dvě se navzájem umlčí. */
p.perex-velky {
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--nadpis);
  margin-top: var(--mezera-3);
}
.uvod p.perex-velky { max-width: 24em; }

/* Podnadpis pod H1 — tvrzení, kterým stránka začíná. Menší než H1, ale
   pořád nadpis: kdyby to byl odstavec, splynul by s perexem pod ním. */
.uvod-podnadpis {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  color: var(--text);
  max-width: 32em;
  margin: 0 0 var(--mezera-3);
}

/* Výčet po jedné větě na řádek. Odstavce zůstávají odstavci (každá věta
   stojí sama, jak je v podkladu), jen se k sobě přitáhnou — s běžnou
   mezerou 20 px by šest jednoslovných vět zabralo půl obrazovky. */
.vycet p { margin-bottom: 6px; }
.vycet { margin-bottom: 20px; }

/* Citovaná věta uvnitř výčtu — „Backtest vyšel." proti „Proč vyšel?".
   Odsazení s linkou drží dvojici pohromadě: čtenář vidí, co bylo předtím
   a co potom, bez toho, aby to musel číst dvakrát. */
.vyrok {
  padding-left: var(--mezera-3);
  border-left: 2px solid var(--linka);
  color: var(--nadpis);
}

/* Řetěz kroků metody (DMAIC). Mono, protože je to pojmenovaný postup,
   ne věta — a v mono drží šipky stejný rytmus jako názvy kroků.      */
.dmaic {
  font-family: var(--pismo-mono);
  font-size: var(--text-popisek);
  letter-spacing: 0.02em;
  color: var(--akcent);
  border-left: 3px solid var(--akcent);
  padding: var(--mezera-2) var(--mezera-3);
  margin: var(--mezera-3) 0;
}

.uvod-akce {
  display: flex;
  align-items: center;
  gap: var(--mezera-3);
  flex-wrap: wrap;
  margin-top: var(--mezera-4);
}

.uvod-pojistka {
  font-size: var(--text-popisek);
  color: var(--text-tlumeny);
  margin: var(--mezera-2) 0 0;
}

/* ---------- Rám na snímek (klíčová komponenta) ----------
   Snímky ze StrategyQuantu jsou důkaz odbornosti, ne dekorace.
   Rám je bílá karta s jemnou linkou a velmi jemným stínem: snímek se
   tak od světle šedé stránky oddělí, aniž by ho cokoli překrývalo.
   🔴 Snímek nikdy nepřekrývej grafikou ani popiskem přes obraz.
   🔴 Žádný obrázek nesmí stát bez rámu a bez popisku.        */

.snimek {
  background: var(--povrch-2);
  border: 1px solid var(--linka);
  border-radius: var(--oblouk-snimek);
  box-shadow: var(--stin);
  padding: 10px;
  margin: 0;
}
.snimek img { border-radius: 8px; }

/* Portrét na výšku vedle textu. Bez omezení šířky vyžene úvodní sekci
   přes celou obrazovku a to podstatné (kontakt, tlačítko) spadne pod ohyb. */
.snimek--portret { max-width: 260px; margin-inline: auto; }
.snimek-popis {
  font-size: var(--text-popisek);
  color: var(--text-tlumeny);
  margin: 12px 4px 0;
  line-height: 1.5;
}
.snimek-popis b { color: var(--text); font-weight: 600; }

/* ---------- Dvojice: snímek vedle textu ---------- */

.dvojice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.dvojice--uzsi-text { grid-template-columns: 1.15fr 0.85fr; }
.dvojice--nahoru { align-items: start; }

/* Náhled dokumentu — dokládá, že psaný rozbor existuje; NENÍ ke čtení.
   Oříznutý a doběhne do ztracena: kdyby byl celý, je z něj největší
   bílá plocha na stránce a přetáhne pozornost.
   🔴 Text v obrázku nikdy není jediný nosič informace — podstatná
      věta patří na stránku jako skutečný text.                 */
.dokument {
  position: relative;
  max-width: 320px;
  max-height: 240px;
  overflow: hidden;
  border: 1px solid var(--linka);
  border-radius: 8px;
  background: #fff;              /* skutečná barva papíru, ne token */
  margin: 0;
}
.dokument img { display: block; }
.dokument::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to bottom, rgb(var(--pozadi-rgb) / 0), var(--pozadi));
}

/* ---------- Čísla ---------- */

.cisla { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-3); }
.cislo {
  background: var(--povrch);
  border: 1px solid var(--linka);
  border-radius: var(--oblouk);
  padding: 28px var(--mezera-3);
}
.cislo {
  box-shadow: var(--stin);
}
.cislo b {
  display: block;
  font-family: var(--pismo-mono);
  font-size: 40px;
  line-height: 1.1;
  color: var(--nadpis);
  font-weight: 700;
}
.cislo span {
  display: block;
  margin-top: var(--mezera-1);
  color: var(--text-tlumeny);
  font-size: 16px;
}

/* ---------- Karty ---------- */

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mezera-3);
}
.karta {
  background: var(--povrch);
  border: 1px solid var(--linka);
  border-radius: var(--oblouk);
  box-shadow: var(--stin);
  transition: box-shadow 0.18s ease;
  padding: 28px;

  /* 🔴 Obojí je nutné, jinak stránka na mobilu přetéká do strany.
     Položka mřížky má ve výchozím stavu min-width:auto, takže jedno
     nedělitelné slovo (e-mailová adresa, dlouhá URL) roztlačí sloupec
     šířeji, než je místo — a roztáhne s ním celou stránku. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.karta:hover { box-shadow: var(--stin-vyssi); }
.karta h3 { margin-bottom: var(--mezera-1); }
.karta p:last-child { margin-bottom: 0; }

/* Lichá karta nezůstane sama v rohu — standardy/ctivost.md, bod 10.
   Řeší se přepnutím rovnou z 3 sloupců na 1; mezistav se dvěma
   sloupci a osiřelou třetí kartou tak vůbec nevznikne. */
.karty--tri { grid-template-columns: repeat(3, 1fr); }

/* ---------- Zvýrazňovací box (NENÍ tlačítko) ----------
   Plná barva = tlačítko. Barevný nádech = zvýraznění.
   🔴 Zvýraznění nikdy nesmí vypadat jako tlačítko.       */

.zvyrazneni {
  background: rgb(var(--akcent-rgb) / 0.10);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--oblouk) var(--oblouk) 0;
  padding: var(--mezera-3) 28px;
}
.zvyrazneni p:last-child { margin-bottom: 0; }
.zvyrazneni h3 { font-size: var(--text-zaklad); margin-bottom: var(--mezera-2); }

/* ---------- Kroky ---------- */

.kroky { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.krok { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.krok b {
  font-family: var(--pismo-mono);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linka);
  background: var(--povrch);
  color: var(--akcent);
  font-size: 17px;
}
/* Krok má nadpis a pod ním jednu nebo víc krátkých vět, takže jeho obsah
   je zabalený v <div> — jinak by se každý odstavec stal dalším sloupcem
   mřížky a rozsypal se vedle číslovaného kolečka. */
.krok > div > :first-child { padding-top: var(--mezera-1); }
.krok h3 { font-size: var(--text-zaklad); margin: 0 0 var(--mezera-1); }
.krok p { margin: 0 0 var(--mezera-1); }
.krok p:last-child { margin-bottom: 0; }



/* ---------- Tmavá sekce ----------
   Jeden tmavý pás na nejsilnějším místě stránky — u závěrečné výzvy.
   Barvy se uvnitř PŘEPÍŠOU, ne přepíší natvrdo, takže komponenty
   fungují beze změny a hodnota pořád bydlí na jednom místě.
   Kdy: závěrečná výzva, silné pozicovací tvrzení, metodika.
   🔴 NIKDY jako pozadí celého webu a nikdy dvě na jedné stránce. */

.sekce--tmava {
  background: var(--tmava);
  /* 🔴 Nestačí přepsat proměnnou: odstavec žádnou barvu nedeklaruje a dědí
     ji z <body>, kde se vyhodnotila dřív. Musí se přebarvit i sama sekce. */
  color: var(--tmava-text);
  --pozadi: #111827;
  --pozadi-rgb: 17 24 39;
  --povrch: rgba(255, 255, 255, 0.06);
  --povrch-2: rgba(255, 255, 255, 0.06);
  --linka: rgba(255, 255, 255, 0.16);
  --nadpis: var(--tmava-text);
  --text: var(--tmava-text);
  --text-tlumeny: var(--tmava-tlumeny);
  /* jen barva TEXTU; --akcent-plocha zůstává značkově modrá */
  --akcent: var(--tmava-akcent);
  --akcent-tmavsi: #FFFFFF;
}

/* ---------- Landing page ----------
   Domovská stránka je výkonová landing page: jediná akce, žádné menu.
   Opakované tlačítko na TUTÉŽ akci je záměr, ne chyba — člověk se
   rozhodne v jiném místě stránky, než kde ho čekáme. Zakázané zůstává
   mít vedle sebe dvě RŮZNÉ akce.                                      */

.hlavicka--bez-menu .tlacitko { margin-left: auto; }

/* Lepivá lišta s hlavní akcí — jen na mobilu, kde je tlačítko
   v hlavičce po odrolování pryč. */
.lista-akce { display: none; }

/* Časté otázky — odbourání námitek těsně před poslední výzvou */
.faq { border-top: 1px solid var(--linka); }
.faq details { border-bottom: 1px solid var(--linka); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mezera-3);
  padding: 20px 0;
  font-weight: 600;
  color: var(--nadpis);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--pismo-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--akcent);
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { margin-bottom: 20px; }
.faq details p:last-child { margin-bottom: 20px; }

/* Řádek s odznaky pod hlavním nadpisem */
.odznaky { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--mezera-3) 0 0; padding: 0; list-style: none; }
.odznaky li {
  padding: 6px 12px;
  border: 1px solid var(--linka);
  border-radius: 999px;
  font-family: var(--pismo-mono);
  font-size: 13px;
  color: var(--text-tlumeny);
  white-space: nowrap;
}

/* ---------- Odrážkový seznam v textu ----------
   Kdy: výčet, který patří do čteného textu (ne karty, ne kroky).
   Odrážka je tlumená, aby netahala oko víc než text vedle ní. */

.seznam { padding: 0; margin: 0 0 20px; list-style: none; display: grid; gap: 12px; }
.seznam li { position: relative; padding-left: var(--mezera-3); }
.seznam li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tlumeny);
}

/* ---------- Citace: skutečný ohlas ----------
   Kdy: doslovný komentář člověka, vždy s odkazem na místo, kde se dá ověřit.
   Nikdy: bez zdroje, upravený „do krásy", nebo vymyšlený — reference,
   která zní jako reklama, přestává být důkazem. */

.citace { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--mezera-3); }

.citat {
  display: flex;
  flex-direction: column;
  background: var(--povrch);
  border: 1px solid var(--linka);
  border-radius: var(--oblouk);
  box-shadow: var(--stin);
  transition: box-shadow 0.18s ease;
  padding: 28px;
  margin: 0;
}
.citat:hover { box-shadow: var(--stin-vyssi); }
.citat blockquote { margin: 0 0 var(--mezera-3); }
.citat blockquote p { margin: 0; }
.citat figcaption {
  margin-top: auto;
  padding-top: var(--mezera-2);
  border-top: 1px solid var(--linka);
  font-size: var(--text-popisek);
  color: var(--text-tlumeny);
  line-height: 1.5;
}
.citat figcaption a { text-decoration: none; }
.citat figcaption a:hover { text-decoration: underline; }

/* ---------- Seznam titulků ---------- */

.titulky { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.titulky li { border-top: 1px solid var(--linka); padding: 18px 0; }
.titulky li:last-child { border-bottom: 1px solid var(--linka); }
.titulky a { text-decoration: none; font-weight: 500; }
.titulky a:hover { text-decoration: underline; }

/* Varianta s podtitulkem: název rozboru a pod ním, o čem je. */
.titulky--s-popisem a { font-weight: 600; }
.titulky--s-popisem li p {
  margin: 6px 0 0;
  font-size: var(--text-popisek);
  color: var(--text-tlumeny);
}

/* ---------- Závěrečná výzva ---------- */

.zaver { text-align: center; }

/* ---------- Patička ---------- */

.paticka {
  background: var(--tmava);
  color: var(--tmava-tlumeny);
  padding: var(--mezera-6) 0 var(--mezera-5);
  font-size: 16px;
  --linka: rgba(255, 255, 255, 0.14);
  --text-tlumeny: var(--tmava-tlumeny);
}
.paticka-mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-4); }
.paticka h3 {
  font-size: 14px;
  font-family: var(--pismo-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tmava-text);
  margin-bottom: 14px;
}
.paticka ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.paticka a { color: var(--tmava-tlumeny); text-decoration: none; }
.paticka a:hover { color: var(--tmava-text); }
.paticka p { max-width: none; }

.pojistka {
  color: var(--tmava-tlumeny);
  margin-top: var(--mezera-5);
  padding-top: var(--mezera-3);
  border-top: 1px solid var(--linka);
  color: var(--text-tlumeny);
  font-size: var(--text-popisek);
  line-height: 1.6;
}
.pojistka p { margin: 0 0 var(--mezera-1); }
.pojistka p:last-child { margin: 0; }

/* ---------- Typografie podle šířky ----------
   Zadání předepisuje tři stupně: desktop > 1024, tablet 640–1024,
   mobil < 640. Layout se láme jinde (900 px), proto vlastní zlomy. */

@media (max-width: 1024px) {
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
}

@media (max-width: 640px) {
  h1 { font-size: 36px; line-height: 1.12; }
  h2 { font-size: 30px; }
  h3 { font-size: 23px; }
  .manifest { padding: var(--mezera-4) var(--mezera-3); }
  .manifest-nedelam { font-size: 22px; }
  .manifest-delam { font-size: 26px; }
  /* Hlavní akce zabírá skoro celou šířku — na mobilu se do ní líp trefí. */
  .uvod-akce .tlacitko--velke { width: 100%; }
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .sekce { padding: var(--mezera-6) 0; }
  .sekce--uzka { padding: var(--mezera-5) 0; }
  .uvod { padding: 48px 0 var(--mezera-5); }
  .uvod-mrizka { grid-template-columns: 1fr; gap: 36px; }
  .uvod p.perex { font-size: 18px; }
  .dvojice, .dvojice--uzsi-text { grid-template-columns: 1fr; gap: var(--mezera-4); }
  .cisla { grid-template-columns: 1fr; }
  .karty--tri { grid-template-columns: 1fr; }
  .paticka-mrizka { grid-template-columns: 1fr; gap: var(--mezera-4); }
  /* Hlavička drží JEDEN řádek: logo · tlačítko · přepínač.
     Lepivá hlavička ve dvou řádcích ukusuje výšku na každé obrazovce,
     proto je přepínač jen ikona a logo i tlačítko o kus menší. */
  .hlavicka-obsah { gap: 8px; flex-wrap: wrap; min-height: 60px; }
  /* Pořadí na řádku: logo · tlačítko · přepínač (přepínač vpravo, jak lidé čekají).
     Mění se jen pořadí vykreslení, ne pořadí v HTML. */
  .znacka { font-size: 16px; order: 1; }
  /* min-width 44 px: pod tím se do toho na mobilu netrefí prst. */
  .menu-prepinac {
    display: inline-flex;
    justify-content: center;
    min-width: 44px;
    padding: 8px;
    order: 3;
    margin-left: 0;
  }
  .menu { order: 4; }
  .menu-prepinac-popis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  /* Seznam odkazů se sbalí; hlavní akce zůstává viditelná vedle přepínače. */
  .menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding-bottom: var(--mezera-2);
    border-top: 1px solid var(--linka);
  }
  .hlavicka--otevrene-menu .menu { display: flex; }
  .menu li { border-bottom: 1px solid var(--linka); }
  .menu a { display: block; padding: 14px 2px; font-size: 17px; }
  .tlacitko { padding: 10px var(--mezera-2); font-size: 15px; }
  .hlavicka .tlacitko { order: 2; margin-left: auto; padding: 10px 12px; font-size: 14px; min-height: 44px; }

  /* Lepivá lišta s hlavní akcí. Na mobilu je hlavička po odrolování pryč
     a člověk by musel scrollovat zpátky nahoru. */
  .lista-akce {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    padding: 10px var(--okraj) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--pozadi-rgb) / 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--linka);
  }
  .lista-akce .tlacitko { width: 100%; font-size: 16px; min-height: 50px; }
  body:has(.lista-akce) { padding-bottom: 84px; }
}