/* ════════════════════════════════════════════════════════════
   04-home.css

   Tlacitka, hero (typo / panel / fotka), showcase statistik a landing sekce
   homepage: features, cenik, pricing, kroky, info, FAQ, CTA, mapa areny.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.7rem; border-radius: var(--radius-pill);
  font-family: var(--font); font-weight: 500; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--d-hover) var(--ease-out),
              border-color var(--d-hover) var(--ease-out),
              box-shadow var(--d-hover) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}
/* Stisk: scale, ne translateY. Scale zmenší i obsah tlačítka,
   takže prvek působí opravdu zmáčknutě, ne jen posunutě. */
.btn:active { transform: scale(.97); }
/* Plná zelená s tmavým textem — přesně jak je „Rezervovat" v návrhu.
   Bílý text na téhle zelené má kontrast 2:1, tmavý přes 7:1. */
.btn-primary {
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  box-shadow: var(--glow-2);
}
.btn-primary:hover { box-shadow: var(--glow); transform: translateY(-2px); }
/* Sekundární tlačítko je pilulka „Neon OFF" — stejný tvar, jiná váha. */
.btn-ghost { background: var(--surface-2); color: var(--accent); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--line-neon); }
/* Obrys jen linkou — pro místa, kde by i „Neon OFF" plocha byla moc. */
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent-border); }
.btn-outline:hover { border-color: var(--accent); box-shadow: var(--glow-2); }

/* ── HERO — typographic manifesto ────────────────── */
.hero {
  position: relative;
  /* Hlavička je fixed a `main` už její výšku odsadil — bez odečtení by hero
     přeteklo přes okraj obrazovky přesně o výšku hlavičky. */
  min-height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(2rem, 6vh, 4rem) var(--pad) clamp(3rem, 8vh, 5rem);
}
.hero-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 42% at 28% 30%, var(--accent-dim), transparent 70%),
    radial-gradient(46% 38% at 74% 70%, rgba(105, 188, 68, .07), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
/* Kicker je jediné místo v heru, kde je Beon: krátký verzálkový řádek,
   přesně to, na co ten stencil je. */
.hero-kicker {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  color: var(--accent); font-size: 1rem;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase; margin: 0 0 1.8rem;
  text-shadow: var(--glow-text);
}
/* Nadpis je Space Grotesk Bold v čisté bílé — tak je v návrzích a je to
   správně: Beon v tříslovném nadpisu přes celou šířku je nečitelný. */
.hero-title {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.06; letter-spacing: -.03em;
  color: var(--text-strong); margin: 0; max-width: 18ch;
}
/* Zvýrazněné slovo v nadpisu. Brand má jednu svítící barvu, takže se
   zvýrazňuje jí; --accent-blue/-red zůstávají výhradně pro rozlišení týmů. */
.accent { color: var(--accent); text-shadow: var(--glow-text); }
.accent-blue { color: var(--team-blue); }
.accent-red { color: var(--accent-2); }
.hero-sub {
  color: var(--muted); font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  max-width: 48ch; margin: 1.9rem auto 0; line-height: 1.55;
}
.hero-actions {
  display: flex; gap: .9rem; margin-top: 2.5rem;
  justify-content: center; align-items: center; flex-wrap: wrap;
}

/* ── HERO: panel v neonovém rámečku ──
   Sdílený obal variant „bez fotky" a „fotka". Text uvnitř je zarovnaný
   doleva, i když `.hero` centruje — v návrhu nadpis začíná u levé hrany
   rámečku a vystředěný text v obdélníku působí jako plakát, ne jako web. */
.hero-panel {
  width: min(100%, var(--maxw));
  text-align: left;
  padding: clamp(1.75rem, 4vw, 3rem);
  /* NEPRŮHLEDNÁ PLOCHA JE POVINNÁ, ne dekorace. Pozadí stránky nese laserové
     paprsky (`.arena-beams`) a přerušení `.neon-frame` se kreslí „gumami"
     v barvě `--frame-bg` — paprsek, který projede pod průhledným panelem
     přesně v místě přerušení, z gum udělá čtyři viditelné obdélníčky.
     Poslední vrstva je proto plná `--bg`, tedy přesně ta barva, kterou guma
     kreslí, takže se nemají jak rozejít.
     Radiální vrstva nad ní je `.hero-ambient` posunutá DOVNITŘ panelu: bez ní
     by neprůhledná plocha uřízla vnitřní svit, který panel měl, dokud jím
     ambient prosvítal. Ambient vně panelu zůstává, kde byl. */
  background:
    radial-gradient(60% 55% at 25% 30%, var(--accent-dim), transparent 70%),
    var(--bg);
}
/* V panelu je nadpis o stupeň menší než na volné ploše: sloupec je jen
   polovina panelu (vedle stojí 3D zbraň) a v návrhu má KAŽDÁ VĚTA SVŮJ
   ŘÁDEK. Při 4,6rem se „Dvanáct minut." zalomilo na dva řádky a ze tří
   řádků byly čtyři — přesně to, co návrh nemá. */
.hero-typo .hero-title { max-width: 16ch; font-size: clamp(2rem, 4.6vw, 3.5rem); }
.hero-typo .hero-sub { margin-left: 0; }
.hero-typo .hero-actions { justify-content: flex-start; }
/* Uvnitr panelu dva sloupce: text vlevo, 3D zbran vpravo. Text je uzsi nez
   polovina schvalne — radek nad ~60 znaku se spatne cte a zbran potrebuje
   misto, aby nebyla ozdoba, ale duvod, proc na strance zustat. */
.hero-panel-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}

/* ── HERO: varianta s fotkou ──
   Text leží přes obraz, takže musí mít vlastní podklad. Scrim je gradient
   zdola, ne plošné ztmavení: horní část fotky zůstane vidět. */
.hero-photo-frame { position: relative; margin: 0; padding: 0; overflow: hidden; }
.hero-photo-img { display: block; width: 100%; height: auto; object-fit: cover; }
.hero-photo-copy {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(transparent, rgba(0, 14, 18, .85) 55%);
}
.hero-photo-copy .hero-title { max-width: 20ch; }
.hero-photo-copy .hero-actions { justify-content: flex-start; margin-top: 1.6rem; }
/* Bez fotky (prázdná složka) i po chybě načtení zůstane čitelný vzkaz,
   ne prázdný rámeček. `parent-class` doplní .img-failed přes img_fallback.js. */
.hero-photo-empty {
  display: grid; place-content: center; gap: .4rem; text-align: center;
  min-height: clamp(260px, 46vh, 460px); padding: 2rem;
  color: var(--muted);
}
.hero-photo-frame.img-failed .hero-photo-img { display: none; }
/* Nadpis nad fotkou je jediné bílé písmo na proměnlivém podkladu — stín ho
   drží čitelný i tam, kde je fotka světlá. */
.hero-photo .hero-title { text-shadow: 0 2px 18px rgba(0, 14, 18, .9); }

/* ── STATISTIKY showcase (grafy jako modul statistik) ── */
.stats-showcase-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.stat-figures {
  display: flex; gap: 2.4rem; flex-wrap: wrap;
  margin: 2rem 0 2.2rem;
}
.stat-figures b {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.stat-figures small { display: block; margin-top: .5rem; font-size: .84rem; color: var(--muted); }

.stats-charts { display: grid; gap: 14px; }
/* Ramecek nese `.neon-frame--open` ze sablony (designer: „ten neonovej ramecek
   na vsechny ty panely"), takze tady uz zadny `border` byt nesmi — zkratka
   `border` by kresbu ramecku prebila a graf by vypadal jako obycejna karta. */
.chart-card {
  /* Kolo 5 (13. 9.): pruhledne uz VSUDE, ne jen na homepage — designer videl
     i /laserforce a /moje-statistiky a chce modrou plochu pryc ze vsech
     panelu. Proto tu neni zadna vyjimka pro jednu sekci. */
  background: transparent;
  border-radius: var(--radius-lg); padding: 1.25rem 1.4rem 1rem;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .75rem; font-size: .9rem; color: var(--text); font-weight: 500;
}
.chart-tag {
  font-size: .68rem; color: var(--muted); letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem;
  text-transform: uppercase;
}
.chart-card canvas { width: 100% !important; }

/* ── LANDING SECTIONS ────────────────────────────── */
.page-section { border-top: 1px solid var(--line); padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad); }
/* MEZERU MEZI SEKCEMI NESE JEN PADDING SEKCE. Posledni prvek (typicky
   `.s-lead` v uvodu stranky, 2.5rem dole) by jinak svuj spodni okraj
   pricetl — padding sekce ho nenecha zkolabovat — a pod uvodem kazde
   podstranky vysla mezera o 40 px vetsi nez mezi ostatnimi sekcemi
   (designer, kolo 8, /arena: „tady jsou ty velky mezery"). */
.page-section > .container > :last-child { margin-bottom: 0; }
/* `main` už odsadil hlavičku, takže první sekce nepotřebuje vlastní rezervu. */
.section-flush { border-top: 0; padding-top: clamp(2.5rem, 6vh, 4rem); }
/* Sekční štítek je druhé místo pro Beon — krátký, verzálkový, svítící.
   Zároveň nahrazuje starý šedý štítek: v neonové paletě je tlumená šeď
   nad nadpisem jen šum. */
.s-label {
  font-family: var(--font-display);
  font-size: .95rem; letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem;
  text-shadow: var(--glow-text);
}
.s-title {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  letter-spacing: -.025em; line-height: 1.06;
  color: var(--text-strong); margin: 0 0 1rem;
}
.s-lead { font-size: 1.08rem; color: var(--muted); max-width: 56ch; line-height: 1.6; margin: 0 0 2.5rem; }

/* Features grid */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2.5rem; }
.feat-item--lead { grid-column: 1 / -1; }
.feat-item--lead h3 { font-size: 1.7rem; }
/* KARTA SEKCE — zarici ramecek s prerusenim, ZADNA vlastni plocha.
   Tak to ma navrh („design v2", Figma): paprsky pozadi kartou prosvitaji
   a nadpis je zeleny. Ramecek proto neni ani prosta zelena kontura, ani plny
   `.neon-frame` (jeho gumy potrebuji neprubeznou plochu za sebou) — je to
   `.neon-frame--open`, ktery si prerušeni vyrezava maskou.
   Sila linky drzi poradi dulezitosti: hlavni panel plochy ma 5 px a plnou
   zar, karta 3 px. */
.feat-item {
  background: transparent;
  border-radius: var(--radius-lg); padding: var(--panel-pad);
  transition: transform var(--d-hover) var(--ease-out);
}
.feat-label { font-size: 0.8rem; letter-spacing: .03em; color: var(--accent); margin: 0 0 0.75rem; }
.feat-item h3 {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--accent); margin: 0 0 0.7rem;
}
.feat-item > p { font-size: 1rem; color: var(--muted); line-height: 1.65; margin: 0; }
.feat-item--img { padding: 0; }
.feat-item-photo { width: 100%; aspect-ratio: 1 / 1; max-height: 220px; object-fit: cover; display: block; border-radius: calc(var(--radius-lg) - var(--frame-w)) calc(var(--radius-lg) - var(--frame-w)) 0 0; }
/* Karta S OBRAZKEM: text nelezi pod fotkou, ale najizdi na ni pres stinovy
   prechod — jinak by mezi fotkou a textem vznikla tvrda hrana a karta by se
   rozpadla na dva bloky (v navrhu je to jedna plocha, ktera dole ztmavne). */
.feat-item--img .feat-item-body {
  position: relative; margin-top: -3.4rem; padding-top: 3.6rem;
  background: linear-gradient(180deg, transparent, var(--bg) 62%);
  border-radius: 0 0 calc(var(--radius-lg) - var(--frame-w)) calc(var(--radius-lg) - var(--frame-w));
}

/* 3 stejne velke karty v rade (zakladatele o-nas) - narrower cards drzi
   ctvercove fotky v rozumne velikosti, misto 2-sloupcove mrizky s osamocenou
   3. kartou. */
.feat-grid--3col { grid-template-columns: repeat(3, 1fr); }
.feat-item-body { padding: 1.2rem var(--panel-pad) var(--panel-pad); }
.feat-item-body > p { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* 4. item sám v řadě (3-col grid) → vystředit */
.feat-grid > .feat-item:last-child:nth-child(3n+1):not(:first-child) { grid-column: 2; }

/* Ceník — degresivní tabulka (řádky počítá config.price_table()).
   Dřív to byly tři karty s pevnými cenami; ceník je ale řada 15 hodnot,
   kterou tři karty neuměly ukázat. */
/* Panel kolem ceniku je SAMOSTATNY obal, ne `.price-table-wrap`: ten musi
   vodorovne rolovat (uzka tabulka na telefonu) a rolovaci kontejner by
   uriznul zar ramecku, ktera lezi vne prvku. */
.price-panel { margin-top: 2rem; border-radius: var(--radius-lg); padding: .55rem; }
.price-table-wrap { overflow-x: auto; border-radius: calc(var(--radius-lg) - var(--frame-w)); }
.price-table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  /* Kolo 5 (13. 9.): tabulka nema vlastni plochu, jen linky. */
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.price-table th, .price-table td { padding: .62rem 1rem; text-align: left; }
.price-table thead th {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; background: transparent;
  white-space: nowrap;
}
/* ŽÁDNÝ :hover na řádcích. Hover je na tomhle webu slib interakce — odkaz,
   karta, dlaždice galerie. Řádek ceníku nikam nevede, takže zvýraznění pod
   kurzorem by lidi nutilo zkusit klik a nic nedostat. Čitelnost patnácti řádků
   drží statické prostředky: zebra, linky a zarovnaná čísla. */
.price-table tbody tr + tr { border-top: 1px solid var(--line); }
.price-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
/* Pořadí hry je <th scope="row"> — je to popisek řádku, ne údaj. */
.price-table tbody th { color: var(--muted); font-weight: 500; width: 1%; white-space: nowrap; }
.price-table td { color: var(--text); white-space: nowrap; }
/* Peníze doprava a na tabulkové číslice: sloupec se srovná pod sebe na desítky
   a stovky, takže degrese (150 → 10) i růst součtu jdou přečíst očima po hraně.
   Zarovnaná číselná mřížka je zároveň nejsilnější signál "tohle je výpis dat". */
.price-table thead th:not(:first-child),
.price-table tbody td { text-align: right; font-variant-numeric: tabular-nums; }
/* Kumulativní součet je to, co zákazník opravdu zaplatí. */
.price-total { font-weight: 600; color: var(--accent); }

/* Poznámka, ne tlačítko. Plný akcentní rámeček dělal z věty CTA, na které
   člověk čeká klik — pruh vlevo je ustálený tvar pro "tohle si přečti". */
.price-free {
  margin: 1rem 0 0; padding: .7rem 0 .7rem 1rem;
  border-left: 3px solid var(--accent-border);
  color: var(--accent); font-weight: 600;
}
/* Nadpis herní plochy nad její cenovou tabulkou. Vykresluje se, teprve až jsou
   plochy dvě (viz cenik.html) — nad jedinou tabulkou by nic nerozlišoval.
   Font je --font-head, ne --font-display: je to nadpis, ne krátká verzálková
   řádka (pravidlo z manuálu, viz docs/claude/css.md). */
.s-sub {
  margin: 2rem 0 .6rem; font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 600; letter-spacing: .02em;
}
.s-sub:first-of-type { margin-top: 0; }
.price-extra { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.price-extra p { margin: 0; }

@media (max-width: 600px) {
  .price-table th, .price-table td { padding: .55rem .7rem; }
  .price-table { font-size: .88rem; }
}

/* Pricing grid (zbylo pro jiné stránky) */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 2rem; }
.price-cell {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem; position: relative;
  transition: border-color var(--d-hover) var(--ease-out),
              transform var(--d-hover) var(--ease-out);
}
/* Nejoblíbenější tarif musí být vidět bez čtení, ne jen jiným rámečkem. */
.price-featured {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, var(--accent-dim), transparent 55%);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .35);
}
/* Vizuální povýšení dělá geometrie, ne transform — transform tady drží tilt. */
@media (min-width: 901px) {
  .price-featured { padding: 2.6rem 1.9rem; margin: -.6rem 0; z-index: 1; }
  .price-featured .price-amt { font-size: 2.5rem; }
}
.price-badge {
  font-size: 0.72rem; letter-spacing: .02em; color: var(--accent);
  border: 1px solid var(--accent-border); background: var(--accent-dim);
  padding: 0.25rem 0.7rem; border-radius: 999px;
  display: inline-block; margin-bottom: 1rem;
}
.price-amt { font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--text); margin-bottom: 0.3rem; }
.price-per { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.5rem; }
.price-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.price-list li { font-size: 0.92rem; color: var(--muted); padding-left: 1.05rem; position: relative; }
.price-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }

/* Steps grid — karty kroku (pouziva /co-je-lasergame) */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 2rem; }
.step-cell {
  background: transparent;
  border-radius: var(--radius-lg); padding: var(--panel-pad);
  transition: border-color var(--d-hover) var(--ease-out),
              transform var(--d-hover) var(--ease-out);
}
/* `block`, ne `inline-block`: orez `text-box` na karte bere metriky korene
   radku, a u inline-blocku by to byl 16px radek karty, ne tohle cislo. */
.step-n { display: block; font-family: var(--font-head); font-size: 0.86rem; font-weight: 600; color: var(--muted); margin-bottom: 1rem; }
.step-cell h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 0 0 0.5rem; }
.step-cell > p { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* Steps flow — cislovana linka misto ctvrte mrizky karet (homepage).
   Spojnice se kresli pres ::before radku (od kolecka doprava), posledni
   krok ji nema, aby linka nekoncila ve vzduchu. */
.steps-flow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 28px; margin: 2rem 0 0; padding: 0; list-style: none;
}
.step-row { position: relative; display: grid; gap: .9rem; }
.step-dot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  color: var(--text);
}
.step-row:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  left: 40px; right: -28px; top: 20px; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.step-body h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 0 0 0.5rem; }
.step-body p { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin: 0; max-width: 34ch; }

/* Info grid — OBA PANELY KONCI VE STEJNE VYSCE (bod D zpetne vazby).
   Drive tu bylo `align-items: start` s odůvodněním, že hodiny mají obsah na
   jeden řádek a proti plné buňce dopravy by z nich byl poloprázdný box.
   Tím se ale řešil následek: obsahu bylo málo, protože v panelu stál slepený
   rozsah „Pondělí až neděle". Sedm samostatných řádků (viz index.html) panel
   naplní, takže se buňky můžou natáhnout na společnou výšku a rozdíl zmizí
   — a kdyby jedna přece jen zbyla nižší, dorovná ji ta vyšší. Prázdný pruh
   dole v jednom z panelů je to jediné, co tu nesmí vzniknout. */
.info-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 14px; align-items: stretch; }
/* Informacni panel pod obsahem stranky, ne ohnisko plochy - proto tenci
   `.neon-frame--open`, ne plny zarici ramecek (viz sablona). Kolo 4
   (7. 9.): bez vlastni plochy, jen obrys presviti pozadi skrz. */
.info-cell {
  background: transparent;
  border-radius: var(--radius-lg); padding: var(--panel-pad);
}
/* `:not(.s-label)` NENI kosmetika. `.info-cell p` ma vyssi specificitu nez
   `.s-label`, takze stitek v panelu prisel o spodni mezeru (a o barvu) —
   Beon lezel primo na prvnim radku textu („Bezny lasertag", „Kde nas
   najdes"; designer, kolo 8: „mezi tim beonem a dalsim textem … moc blizko").
   Stitek v panelu je tentyz stitek jako nad sekci, se stejnou mezerou.
   `:where()` drzi specificitu na jedne tride: s `p` navic tohle pravidlo
   tise nulovalo okraje vsem odstavcum widgetu dopravy (14-krouzky.css), ktere
   jsou v panelu na homepage, /o-nas i /doprava — jejich mezery se nikdy
   nevykreslily. */
.info-cell :where(p:not(.s-label)) { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin: 0; }
/* /arena ma v panelech `<h3>` a zadne pravidlo pro nej, takze dostal vychozi
   okraj prohlizece (1em nahore) — linka→nadpis tam vysla 50 px proti 23 vlevo. */
.info-cell h3 { margin: 0 0 .5rem; }
/* Sedm radku hodin. Posledni bez linky — hranice pod poslednim radkem uz
   je hrana panelu a dve cary tesne nad sebou vypadaji jako chyba. */
.hours-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.hours-row:last-child { border-bottom: 0; }
/* Nad prvnim radkem neni linka, ale stitek panelu — a ten si mezeru nese sam
   (`.s-label` margin). Horni padding radku se k ni pricital a „Otevírací
   doba" mela k prvnimu dni 39 px proti 26–30 u vsech ostatnich stitku. */
.hours-row:first-child { padding-top: 0; }
.hours-row strong {
  font-family: var(--font-head); color: var(--text); font-size: 1.05rem; font-weight: 600;
  /* Sedm casu pod sebou: proporcionalni cislice meni sirku podle glyfu a
     sloupec by se kymacel. Stejne pravidlo jako v leaderboardu. */
  font-variant-numeric: tabular-nums;
}

/* FAQ */
/* Ramecek panelu nahradil horni linku seznamu; spodni linka posledni polozky
   by s nim splynula do dvojite cary. */
/* Svisle odsazeni nese `summary` (velka plocha pro klik), vodorovne panel —
   `--panel-pad` z nej dela stejnou mezeru vlevo jako nad prvni otazkou. */
.faq-stack { margin-top: 2rem; border-radius: var(--radius-lg); padding: 0 var(--panel-pad) .2rem; }
/* Mezeru nad prvni otazkou nese jeji `summary`, a ten ma pevnych 1.2rem —
   na telefonu, kde `--panel-pad` klesne, vysla linka→text nahore o 6 px vetsi
   nez vlevo. Odvozeno z `--panel-pad`: .6rem je to, co nad pismeny pridava
   radek otazky (vycentrovany vedle vyssiho „+"), zmereno z pixelu. */
.faq-stack .faq-item:first-child summary { padding-top: calc(var(--panel-pad) - .6rem); }
.faq-stack .faq-item:last-child { border-bottom: 0; }
.faq-item { border-bottom: 1px solid var(--line); background: transparent; padding: 0; margin: 0; }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 0;
  font-size: 1.02rem; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; gap: 1rem;
  transition: color var(--d-hover) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { color: var(--accent); }
}
.faq-item summary::after {
  content: '+'; font-size: 1.3rem; color: var(--muted); flex-shrink: 0;
  transition: transform var(--d-pop) var(--ease-out), color var(--d-pop) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
/* Skokové otevření <details> působí rozbitě. Kde to prohlížeč umí, animuj výšku. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--d-pop) var(--ease-out),
                content-visibility var(--d-pop) allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}
.faq-item p { padding-bottom: 1.2rem; color: var(--muted); font-size: 0.95rem; max-width: 62ch; line-height: 1.65; margin: 0; }

/* CTA section */
/* ZÁVĚREČNÁ VÝZVA MÁ VLASOVOU LINKU, NE PULS. Zkusil to tu být (jako „dělící
   čára" z manuálu), jenže `.cta-section` je na každé stránce POSLEDNÍ blok
   před patičkou — a patička začíná PULSem taky. Na mobilu se tak do jedné
   obrazovky vešly dva srdeční kmity pod sebou, což z prvku, který má být
   jeden signál, dělá tapetu. PULS na stránce zůstává dvakrát: nahoře jako
   spodní hrana hlavičky, dole jako horní hrana patičky. */
.cta-section { border-top: 1px solid var(--line); padding: clamp(4rem, 9vw, 7rem) var(--pad); }
.cta-inner { text-align: center; }
.cta-inner .s-title { margin-bottom: 0.75rem; font-size: clamp(2.2rem, 6vw, 4rem); }
.cta-inner .muted { display: block; font-size: 1.05rem; }
/* TLACITKA V ZAVERECNE VYZVE SE NESMI DOTYKAT (designer, kolo 7). Radka byla
   `flex` BEZ `gap`, takze dve pilulky vedle sebe (`/cenik`: „Rezervovat termin"
   + „Zavolat …", `/o-nas`: „Rezervovat termin" + „Co je lasergame") na sebe
   dosedly hranou a cetly se jako jeden rozdeleny prvek. Gap tu proto je,
   `flex-wrap` k nemu patri: na uzkem displeji je druha pilulka s telefonnim
   cislem sirsi nez pulka okna a bez zalomeni by radku pretekla.
   Stejna hodnota jako `.hero-actions` — je to tataz dvojice tlacitek. */
.cta-actions {
  margin-top: 2rem; display: flex; justify-content: center;
  gap: .9rem; flex-wrap: wrap;
}

/* ── ARÉNA feature — scroll-driven mapa ──────────────
   Signature moment stránky. Mapa se nepřehrává sama dokola;
   odehrává se podle toho, jak daleko jsi sekci odscrolloval
   (--arena-p 0..1 píše motion.js). Scroll = ovladač, ne divák. */
/* SEKCE NEMA VLASTNI SIRKU OBSAHU (bod C zpetne vazby). Drzela
   `--maxw + 180px`, takze na desktopu zacinal nadpis „Zatemneny labyrint"
   o 90 px vlevo od nadpisu vsech ostatnich sekci a stranka nemela jednu
   svislici. Jedna sirka obsahu pro celou stranku je zaroven levnejsi na
   udrzbu nez odsazeni opsane na nekolika mistech. */
.arena-feature-grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.arena-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-direction: column; gap: .9rem; }
.arena-points li { display: flex; align-items: center; gap: .7rem; color: var(--text); font-size: .96rem; }
.arena-points .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.arena-points .dot-blue { background: var(--team-blue); }
.arena-points .dot-red  { background: var(--accent-2); }
.arena-stage {
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.4vw, 2rem);
  /* Kolo 4 (7. 9.): bez vlastni plochy, jen obrys - homepage-only trida. */
  background: transparent;
  transition: transform var(--d-hover) var(--ease-out); will-change: transform;
}
.arena-map { width: 100%; height: auto; display: block; }
.arena-cta { margin: 1.9rem 0 0; }


/* Základny se rozsvěcují postupně, jak se sekce odkrývá */
.arena-map .am-base { transform-origin: center; opacity: calc(.35 + var(--arena-p, 0) * .65); }
.arena-map .am-base-red { opacity: calc(.35 + max(0, var(--arena-p, 0) - .2) * .81); }

/* Střely se kreslí podle scrollu — každá se startem o kus dál */
.arena-map .am-shot {
  stroke-dasharray: 200; stroke-linecap: round;
  stroke-dashoffset: calc(200 - clamp(0, (var(--arena-p, 0) - var(--s, 0)) * 3.2, 1) * 200);
  opacity: calc(clamp(0, (var(--arena-p, 0) - var(--s, 0)) * 3.2, 1) * .9);
}
.arena-map .am-shot-1 { --s: .08; }
.arena-map .am-shot-2 { --s: .26; }
.arena-map .am-shot-3 { --s: .44; }

/* Hráči obíhají arénu úměrně scrollu */
.arena-map .am-player { offset-rotate: 0deg; }
.arena-map .am-player-blue {
  offset-path: path('M44 216 L120 50 L200 110 L150 130 L44 216');
  offset-distance: calc(var(--arena-p, 0) * 100%);
}
.arena-map .am-player-red {
  offset-path: path('M276 44 L200 60 L150 130 L230 130 L276 44');
  offset-distance: calc((1 - var(--arena-p, 0)) * 100%);
}
/* Bez JS / při reduced motion zůstane mapa v čitelném koncovém stavu */
@media (prefers-reduced-motion: reduce) {
  .arena-map { --arena-p: 1; }
}