/* hub99 — styl.css — STRUKTURA. Barvy, typografie a prostor jsou TOKENY a
   vlastní je ŠABLONA v public/css/sablony/<slug>.css (Owner 2026-08-10).
   Tenhle soubor nesmí definovat ani jeden token: kdyby ho definoval, byla by
   to skrytá jedenáctá šablona, kterou nikdo nevybral a která přebíjí vybranou.
   Kontrakt a brána: public/css/sablony/README.md, tools/sablona-audit. */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  font-family: var(--pismo);
  font-size: var(--velikost-zaklad);
  line-height: var(--radek);
}

a {
  color: var(--barva-vedlejsi-text);
}

:focus-visible {
  outline: 3px solid var(--barva-fokus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */

.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: var(--barva-povrch);
  border-bottom: 1px solid var(--barva-hranice);
}

.hlavicka .logo {
  font-weight: var(--vaha-silna);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

.uzivatel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.uzivatel .email {
  color: var(--barva-text-tlum);
  font-size: 0.9375rem;
  word-break: break-all;
}

.uzivatel form {
  margin: 0;
}

.obsah {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.25rem;
  width: 100%;
}

.paticka {
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--barva-text-tlum);
  font-size: 0.875rem;
  border-top: 1px solid var(--barva-hranice);
}

/* ---------- karta ---------- */

.karta {
  background: var(--barva-povrch);
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
  padding: 2rem;
  width: 100%;
  max-width: 28rem;
}

.karta--prihlaseni {
  text-align: center;
  margin: auto;
}

.karta h1 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
}

.karta p {
  margin: 0 0 1.5rem;
  color: var(--barva-text-tlum);
}

/* ---------- tlacitko ---------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 24px;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.tlacitko--hlavni {
  background: var(--barva-primarni);
  color: var(--barva-primarni-text);
}

.tlacitko--hlavni:hover {
  background: var(--barva-primarni-hover);
}

.tlacitko--vedlejsi {
  background: transparent;
  color: var(--barva-vedlejsi-text);
  border-color: var(--barva-hranice);
}

.tlacitko--vedlejsi:hover {
  background: var(--barva-stitek-pozadi);
}

/* ---------- hlaska ---------- */

.hlaska {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  text-align: left;
}

.hlaska--chyba {
  background: var(--barva-chyba-pozadi);
  color: var(--barva-chyba);
  border: 1px solid var(--barva-chyba);
}

/* ---------- sluzby ---------- */

.sluzby {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--sirka-obsahu);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.sluzba {
  background: var(--barva-povrch);
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
}

.sluzba__odkaz {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem;
  min-height: 24px;
  color: var(--barva-text);
  text-decoration: none;
  border-radius: var(--polomer);
}

a.sluzba__odkaz:hover {
  background: var(--barva-stitek-pozadi);
}

div.sluzba__odkaz {
  cursor: not-allowed;
}

.sluzba--neaktivni {
  opacity: 0.72;
}

.sluzba__nazev {
  font-weight: var(--vaha-silna);
  font-size: 1.0625rem;
}

.sluzba__popis {
  color: var(--barva-text-tlum);
  font-size: 0.9375rem;
}

.sluzba__stitek {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--barva-stitek-pozadi);
  color: var(--barva-stitek-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------- telemetrie ---------- */
/* Doplňkové tokeny. "Pozor" není chyba — nenakonfigurovaný zdroj je legitimní
   stav, který se ale nesmí přehlédnout. */

.tel {
  width: 100%;
  max-width: var(--sirka-obsahu);
}

.tel h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.tel-tlum {
  color: var(--barva-text-tlum);
}

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

.tel-drobecky {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--barva-text-tlum);
}

.tel-drobecky a {
  color: var(--barva-vedlejsi-text);
}

/* --- pruh o zdroji dat --- */

.tel-zdroj {
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  background: var(--barva-povrch);
  padding: 0.875rem 1.125rem;
  margin: 0 0 1.5rem;
}

.tel-zdroj--pozor {
  background: var(--barva-pozor-pozadi);
  border-color: var(--barva-pozor-hranice);
}

.tel-zdroj__hlava {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

.tel-zdroj__popis {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--barva-text-tlum);
}

.tel-zdroj--pozor .tel-zdroj__popis {
  color: var(--barva-pozor);
}

/* --- přepínače (bez JS: obyčejné odkazy) --- */

.tel-ovladani {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.75rem;
}

.tel-skupina__popis {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--vaha-silna);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--barva-text-tlum);
  margin-bottom: 0.5rem;
}

.tel-volby {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tel-volba {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--barva-hranice);
  border-radius: 999px;
  background: var(--barva-povrch);
  color: var(--barva-vedlejsi-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}

a.tel-volba:hover {
  background: var(--barva-stitek-pozadi);
}

.tel-volba--aktivni {
  background: var(--barva-primarni);
  border-color: var(--barva-primarni);
  color: var(--barva-primarni-text);
  cursor: default;
}

/* --- souhrnné číslo --- */

.tel-souhrn {
  background: var(--barva-povrch);
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
  padding: 1.5rem;
  margin: 0 0 1.75rem;
}

.tel-velke-cislo {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: var(--vaha-silna);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tel-velke-popis {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--barva-text-tlum);
}

.tel-hlaska-info {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--barva-pozor-hranice);
  background: var(--barva-pozor-pozadi);
  color: var(--barva-pozor);
  font-size: 0.9375rem;
}

/* --- sekce a tabulky --- */

.tel-sekce {
  margin: 0 0 2rem;
  overflow-x: auto;
}

.tel-sekce h2 {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.tel-tabulka,
.tel-serie {
  width: 100%;
  border-collapse: collapse;
  background: var(--barva-povrch);
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  font-size: 0.9375rem;
}

.tel-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.625rem;
  color: var(--barva-text-tlum);
  font-size: 0.875rem;
}

.tel-tabulka th,
.tel-tabulka td,
.tel-serie th,
.tel-serie td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--barva-hranice);
  text-align: left;
  vertical-align: top;
}

.tel-tabulka thead th,
.tel-serie thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--barva-text-tlum);
  white-space: nowrap;
}

.tel-tabulka tbody tr:last-child th,
.tel-tabulka tbody tr:last-child td,
.tel-serie tbody tr:last-child th,
.tel-serie tbody tr:last-child td {
  border-bottom: 0;
}

.tel-cislo {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

.tel-sl-pruh {
  width: 40%;
  min-width: 8rem;
}

.tel-radek--dnes th {
  font-style: italic;
}

/* --- pruh (jediná "grafika": žádný JS, žádné externí knihovny) --- */

.tel-pruh {
  display: block;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--barva-pruh-drazka);
  overflow: hidden;
}

.tel-pruh__vypln {
  display: block;
  height: 100%;
  background: var(--barva-pruh);
  border-radius: 999px;
}

/* --- štítky, poznámky, prázdné stavy --- */

.tel-stitek {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--barva-stitek-pozadi);
  color: var(--barva-stitek-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Nepřehazovat na text=pozadi-pozor / pozadi=hranice-pozor: naměřeno 2,05
   (světlý) a 2,38 (tmavý) proti požadovaným 4,5. Tahle kombinace je stejná
   jako u .tel-hlaska-info, kde je naměřeno 5,76 / 8,98. */
.tel-stitek--pozor {
  background: var(--barva-pozor-pozadi);
  color: var(--barva-pozor);
  border: 1px solid var(--barva-pozor-hranice);
}

.tel-poznamka {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--barva-text-tlum);
  max-width: 34rem;
}

/* Šířka pruhu je ZDE, ne v inline style atributu: CSP posílá
   style-src 'self' bez 'unsafe-inline', což inline style ATRIBUTY blokuje —
   pruhy by se vykreslily nulové a 100 % by vypadalo jako "bez dat". */
.tel-pruh__vypln--p0 { width: 0%; }
.tel-pruh__vypln--p5 { width: 5%; }
.tel-pruh__vypln--p10 { width: 10%; }
.tel-pruh__vypln--p15 { width: 15%; }
.tel-pruh__vypln--p20 { width: 20%; }
.tel-pruh__vypln--p25 { width: 25%; }
.tel-pruh__vypln--p30 { width: 30%; }
.tel-pruh__vypln--p35 { width: 35%; }
.tel-pruh__vypln--p40 { width: 40%; }
.tel-pruh__vypln--p45 { width: 45%; }
.tel-pruh__vypln--p50 { width: 50%; }
.tel-pruh__vypln--p55 { width: 55%; }
.tel-pruh__vypln--p60 { width: 60%; }
.tel-pruh__vypln--p65 { width: 65%; }
.tel-pruh__vypln--p70 { width: 70%; }
.tel-pruh__vypln--p75 { width: 75%; }
.tel-pruh__vypln--p80 { width: 80%; }
.tel-pruh__vypln--p85 { width: 85%; }
.tel-pruh__vypln--p90 { width: 90%; }
.tel-pruh__vypln--p95 { width: 95%; }
.tel-pruh__vypln--p100 { width: 100%; }

/* Neznámý podíl: žádná výplň, ale viditelně jiná drážka než u naměřené nuly. */
.tel-pruh--nezname {
  background-image: repeating-linear-gradient(
    45deg,
    var(--barva-pruh-drazka) 0 4px,
    var(--barva-hranice) 4px 8px
  );
}

.tel-pruh__vypln--nezname { width: 0; }

.tel-poznamka--pod-tabulkou {
  margin-top: 0.75rem;
  max-width: 60rem;
}

.tel-poznamka--pod-tabulkou code {
  font-size: 0.9em;
  padding: 0.0625rem 0.25rem;
  border-radius: 4px;
  background: var(--barva-stitek-pozadi);
}

.tel-prazdno {
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px dashed var(--barva-hranice);
  border-radius: var(--polomer);
  color: var(--barva-text-tlum);
  font-size: 0.9375rem;
}

/* --- známé mezery --- */

.tel-mezery {
  border-top: 1px solid var(--barva-hranice);
  padding-top: 1.25rem;
}

.tel-mezery__seznam {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--barva-text-tlum);
  font-size: 0.9375rem;
}

.tel-mezery__seznam li {
  margin-bottom: 0.5rem;
  max-width: 60rem;
}

@media (min-width: 48rem) {
  .tel-ovladani {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
}

/* ---------- telemetrie: karta, segmentový přepínač, graf (UXR-SPEC v1) ----------
   Implementuje web-uxbot/specs/hub99-telemetrie-v1/UXR-SPEC.md §2 a §3.
   ŽÁDNÝ NOVÝ HEX (§3.5.4): grafová paleta jsou aliasy už ověřených tokenů.
   Aliasy se definují JEDNOU — protože cílové tokeny mají vlastní dark override,
   nepotřebuje tahle vrstva vlastní @media blok (§3.4, §3.5.5). */

/* --- karta: sjednocuje sekce, které byly ploché (§3.1, §3.2) --- */
.tel-karta {
  background: var(--barva-povrch);
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
  padding: var(--mezera) calc(var(--mezera) * 1.2);
  margin: 0 0 var(--mezera-sekce);
}

.tel-karta > h2:first-child,
.tel-karta > .tel-karta__hlava {
  margin-top: 0;
}

/* --- segmentový přepínač: jeden rámeček místo N pilulek (§3.3) --- */
.tel-segment {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  background: var(--barva-povrch);
  padding: 0.25rem;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
}

.tel-segment__polozka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;          /* §3.3: 44px na OBOU osách, ne jen na výšku */
  padding: 0.375rem 0.875rem;
  border-radius: calc(var(--polomer) - 0.25rem);
  color: var(--barva-vedlejsi-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  background: transparent;
}

a.tel-segment__polozka:hover {
  background: var(--barva-stitek-pozadi);
}

.tel-segment__polozka--aktivni {
  background: var(--barva-primarni);
  color: var(--barva-primarni-text);
  cursor: default;
}

/* --- graf (§2) --- */
.tel-graf { margin: 0; }

.tel-graf__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.tel-graf__mrizka-cara {
  stroke: var(--barva-hranice);
  stroke-width: 1;
}

.tel-graf__osa-y,
.tel-graf__osa-x {
  fill: var(--barva-text-tlum);
  font-size: 10px;
  font-family: var(--pismo);
}

.tel-graf__osa-x--dnes { font-weight: 700; }

/* Barva sloupce je TŘÍDA, ne spočítaný hex v atributu (§2.4.3, §2.8.3). */
.tel-graf__sloupec--1 { fill: var(--barva-graf-bot-1); }
.tel-graf__sloupec--2 { fill: var(--barva-graf-bot-2); }
.tel-graf__sloupec--ostatni { fill: var(--barva-graf-ostatni); }

/* Šrafování chybějícího dne — stejný jazyk jako .tel-pruh--nezname v tabulce. */
.tel-graf__srafa-pozadi { fill: var(--barva-pruh-drazka); }
.tel-graf__srafa-cara { fill: var(--barva-hranice); }

.tel-graf__legenda {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
  color: var(--barva-text-tlum);
}

.tel-graf__polozka {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.tel-graf__vzorek {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  flex: 0 0 auto;
}

.tel-graf__vzorek--1 { background: var(--barva-graf-bot-1); }
.tel-graf__vzorek--2 { background: var(--barva-graf-bot-2); }
.tel-graf__vzorek--ostatni { background: var(--barva-graf-ostatni); }

.tel-graf__vzorek--mezera {
  background-image: repeating-linear-gradient(
    45deg,
    var(--barva-pruh-drazka) 0 4px,
    var(--barva-hranice) 4px 8px
  );
}

/* ---------- galerie šablon ---------- */
.sab-mrizka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--mezera);
}

.sab-polozka {
  border: 1px solid var(--barva-hranice);
  border-radius: var(--polomer);
  padding: var(--mezera);
  background: var(--barva-povrch);
}

.sab-polozka--aktivni { border-width: 2px; border-color: var(--barva-primarni); }
.sab-nazev { margin: 0 0 0.25rem; font-size: 1rem; }
.sab-slug { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--barva-text-tlum); }
.sab-popis { margin: 0.5rem 0; font-size: 0.9375rem; color: var(--barva-text-tlum); }

.sab-vzornik {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
  margin: 0.25rem 0 0.5rem;
}

/* ===========================================================================
   ROZVRŽENÍ (scaffoldy) — STRUKTURA, ne barva.
   Autor struktury: web-uxbot, UXR-SPEC specs/sablonovy-system-v1/.
   Implementace mechaniky: web-reditel (Owner 2026-08-10: uxbot je autor
   struktury i vzhledu, ředitel staví mechaniku a implementuje jeho spec).

   Rozvržení je kostra .obsah. Hlavička a patička jsou sdílené a mimo rozsah.
   Aktivace: jedna třída na <body> (roz--<slug>), viz views/layout.php.

   STEJNÝ ZÁKAZ JAKO U MOTIVŮ: žádný nový token, žádná syrová barva, žádný
   @import / url() / !important / @font-face / style=. Rozvržení smí barvu jen
   ČÍST přes var(--…). Brána: tools/rozvrzeni-audit.

   Značka `rozvrzeni: <slug>` níže NENÍ dekorace — čte ji hub99_rozvrzeni_seznam()
   jako whitelist. CSS bez značky se nedá vybrat; značka bez CSS je vidět v gale-
   rii jako prázdná. Jeden zdroj pravdy na disku, stejně jako soubory motivů.
   =========================================================================== */

/* ---------- rozvrzeni: jadro-prosty ----------
   Název: Jádro
   Popis: Jeden vystředěný sloupec s omezenou šířkou. Dnešní výchozí chování
          hub99 — přihlášení, chybové stránky, rozcestník.
   Osy: navigace=zadna, kompozice=jadro, hero=zadny, hustota=—

   Tenhle scaffold záměrně NEMÁ žádné vlastní pravidlo: je to dnešní implicitní
   chování .obsah, nově POJMENOVANÉ a registrované, aby konfigurace vždy říkala
   rozvržení explicitně místo "žádné" jako skrytého výchozího stavu (otevřená
   otázka 1 z UXR-SPEC 10_STRUKTURNI-OSY.md; jméno navrhl web-uxbot).
   Prázdnost je tu VÝSLEDEK, ne opomenutí — kdyby scaffold cokoli přidal, změnil
   by dnešní vzhled a nasazení téhle dávky by přestalo být bezpečné.
   -------------------------------------------------------------------------- */

/* ---------- rozvrzeni: panel-bocni ----------
   Název: Boční panel
   Popis: Dashboard, back-office, provozní přehled. Svislá navigace vlevo,
          hlavní sloupec, volitelný vedlejší sloupec s kontextem.
   Osy: navigace=bocni, kompozice=panel, hero=zadny, hustota=kompaktni
   Hranice: 63.9375rem
   Spec: specs/sablonovy-system-v1/20_SCAFFOLD-A_panel-bocni.md

   VLASTNÍ HRANICE 63.9375rem (tj. těsně pod 64rem) je deklarovaná schválně:
   brána ji jinak označí za vadu. Zdůvodnění je web-uxbot v `20_`: tři sloupce
   vedle sebe potřebují prostor pro čitelný hlavní sloupec, takže tenhle scaffold
   má druhou hranici navíc ke sdílené 48rem. Je to obsahová volba, ne odvozené
   číslo — a proto musí být napsaná tady, kde ji brána vidí, ne jen ve specu.
   -------------------------------------------------------------------------- */

body.roz--panel-bocni .obsah {
  align-items: stretch;
  padding: 1.5rem;
}

body.roz--panel-bocni .roz {
  width: 100%;
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) 18rem;
  grid-template-areas: "postranik hlavni vedlejsi";
  column-gap: 1.5rem;
  align-items: start;
}

/* Chybějící vedlejší sloupec je rozhodnutí STRÁNKY, ne CSS: view ví, jestli má
   co dát do kontextu. Proto přepínací třída, ne :has() — cílová podpora
   prohlížečů hub99 není nikde definovaná a web-uxbot ji odmítla domýšlet
   (otevřená otázka 2). Ředitel 2026-08-25 volí konzervativní variantu; :has()
   lze doplnit později bez změny markupu, opačně to neplatí. */
body.roz--panel-bocni .roz--bez-vedlejsiho {
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-areas: "postranik hlavni";
}

body.roz--panel-bocni .roz__postranik { grid-area: postranik; }
body.roz--panel-bocni .roz__hlavni    { grid-area: hlavni; min-width: 0; }
body.roz--panel-bocni .roz__vedlejsi  { grid-area: vedlejsi; min-width: 0; }

/* Tablet: tři sloupce vedle sebe by hlavní sloupec stlačily pod použitelnou
   šířku. Postraník zůstává sloupcem, vedlejší padá pod hlavní obsah. Stejný
   markup, jen jiné uspořádání gridu. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  body.roz--panel-bocni .roz {
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-areas:
      "postranik hlavni"
      "postranik vedlejsi";
  }
  body.roz--panel-bocni .roz--bez-vedlejsiho {
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-areas: "postranik hlavni";
  }
}

/* Mobil: svislý panel nemá pod 48rem místo. Padá do vodorovného zalamujícího
   seznamu nad obsahem — stejný vzor, jaký už dělá .tel-volby u přepínačů. */
@media (max-width: 47.9375rem) {
  body.roz--panel-bocni .roz,
  body.roz--panel-bocni .roz--bez-vedlejsiho {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  body.roz--panel-bocni .roz__postranik ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ---------- rozvrzeni: sekce-hero ----------
   Název: Sekce s hero
   Popis: Obsahový web, vstupní stránka. Plný hero nahoře, pod ním plnošířkové
          sekce nad sebou. Žádná trvalá navigace uvnitř obsahu.
   Osy: navigace=zadna, kompozice=sekce, hero=plny, hustota=prostorna
   Spec: specs/sablonovy-system-v1/30_SCAFFOLD-B_sekce-hero.md
   -------------------------------------------------------------------------- */

body.roz--sekce-hero .obsah {
  align-items: stretch;
  padding: 0;
  gap: 3.5rem;
}

body.roz--sekce-hero .roz__hero,
body.roz--sekce-hero .roz__sekce {
  width: 100%;
}

body.roz--sekce-hero .roz__sekce-vnitrek,
body.roz--sekce-hero .roz__hero-vnitrek {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body.roz--sekce-hero .roz__hero {
  padding: 3.5rem 0;
  background: var(--barva-povrch);
  border-bottom: 1px solid var(--barva-hranice);
}

body.roz--sekce-hero .roz__hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  max-width: 40rem;
}

body.roz--sekce-hero .roz__hero p {
  margin: 0;
  color: var(--barva-text-tlum);
  max-width: 40rem;
}

body.roz--sekce-hero .roz__hero-akce {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

body.roz--sekce-hero .roz__sekce {
  padding: 3.5rem 0;
}

/* Střídavé pozadí sekcí: na jednom sloupci by ani 3.5rem mezera na dlouhé
   stránce nemusela stačit jako signál "nová sekce". Plocha, ne jen prostor.
   Používá jen existující povrchový token — žádný nový. */
body.roz--sekce-hero .roz__sekce:nth-of-type(even) {
  background: var(--barva-povrch);
}

body.roz--sekce-hero .roz__sekce h2 {
  margin: 0 0 1.5rem;
  font-size: 1.375rem;
}

/* Jediné, co se láme, je vnitřní hustota — topologie zůstává stejná na všech
   šířkách. To je sama o sobě strukturní odlišnost od panel-bocni. */
@media (max-width: 47.9375rem) {
  body.roz--sekce-hero .roz__hero,
  body.roz--sekce-hero .roz__sekce {
    padding: 2rem 0;
  }
  body.roz--sekce-hero .obsah {
    gap: 2rem;
  }
}