/* ==========================================================================
   web.css — veřejná stránka tisax.2marsa.cz

   Stránka je postavená z komponent zóny TISAX: tokens.css a zona.css jsou
   BAJTOVĚ STEJNÉ kopie ze smery/tisax/zona/komponenty/ (dá se to ověřit
   diffem — když se rozejdou, rozešel se web se zónou). Tenhle soubor smí
   obsahovat jen to, co zóna nemá, protože je to veřejná stránka a ne zóna:

     1. lišta a patička bez skriptu — zóna si je kreslí z zona-nav.js podle
        seznamu 17 stránek; veřejná stránka má čtyři kotvy a žádnou zónu,
        takže je má napsané v HTML pod stejnými třídami (.zona-nav__*);
     2. širší pás — zóna má main .wrap na 720 px (čte se v ní text),
        tady se do řady staví dlaždice, řetěz a karty služeb;
     3. hero — zóna žádný nemá, začíná rovnou titulkem;
     4. .odrazky — jediná třída zvenčí zona.css (je v zona-firma.css,
        kterou sem tahat nemá smysl kvůli formulářovým polím).

   Žádná barva ani odstup natvrdo — všechno z tokens.css. Kdo tu napíše
   hex, rozejde web se zónou při první změně palety.
   ========================================================================== */

/* ---------- širší pás (zóna má main .wrap na text, tady jsou mřížky) ---------- */
main .wrap--siroky { max-width: var(--wrap); }

/* ---------- lišta: statická obdoba .zona-nav, jen kotvy ---------- */
.zona-nav__odkazy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); flex: 1 1 auto; min-width: 0; }

/* Odkaz do zóny stojí na opačném konci lišty než kotvy — je to odchod ze
   stránky, ne její další sekce. */
.zona-nav__ven { margin-left: auto; }
@media (max-width: 560px) { .zona-nav__ven { margin-left: 0; } }

/* ---------- hero ---------- */
.hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: var(--section-y) 0; }
.hero .perex { margin-bottom: var(--sp-6); }
.hero__akce { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Hero nese h1 — main uvnitř začíná rovnou pásem, bez horní mezery navíc. */
main.je-po-heru { padding-top: var(--section-y); }

/* ---------- odrážky (převzato z komponenty/zona-firma.css beze změny) ---------- */
.odrazky { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--ink-soft); }
.odrazky li { padding-left: .9em; text-indent: -.9em; }
.odrazky li::before { content: "· "; color: var(--ink-mute); }

/* ---------- karty služeb ---------- */
/* Sdílené .karty jsou auto-fit od 300 px — čtyři úrovně by se na 1120 px
   zlomily 3 + 1 a poslední karta by vypadala jako dodatek. Čtyři úrovně
   jsou rovnocenné, tak stojí v jedné řadě; níž se dělí na dvě a jednu. */
.karty--sluzby { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .karty--sluzby { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .karty--sluzby { grid-template-columns: 1fr; } }

/* ---------- karta služby: odrážky nahoru, patka dolů ---------- */
.karta--sluzba { display: flex; flex-direction: column; gap: var(--sp-2); }
.karta--sluzba .karta__pata { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }

/* ---------- řetěz: dvanáct kroků (stejné dělení jako Přehled zóny) ---------- */
/* Sdílený pás je psaný na 10 kroků, TISAX jich má 12 — dvě řady po šesti.
   Beze změny převzato z komponenty/zona-prehled.css; dole se dělí na čtyři
   a tři, aby dílek zůstal nad dotykovým limitem 44 px i na 320 px. */
.retez__pas { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 640px) { .retez__pas { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 380px) { .retez__pas { grid-template-columns: repeat(3, 1fr); } }