/* Novy uvod lachez.eu (22. 10. 2026; designer: prototyping/output/2026-10-22-uvod-design/uvod.html). Karty = akce/akce.css. */
.home { padding:0 0 28px; text-align:left; }
.wrap { max-width:1100px; margin:0 auto; padding:0 32px; }
@container (max-width:600px) { .wrap { padding:0 16px; } }
.hbar { display:flex; align-items:center; justify-content:space-between; padding:16px 0 6px; }
.brand { display:flex; align-items:center; gap:8px; font:700 20px Georgia,serif; color:var(--ink); text-decoration:none; }
.brand img { width:30px; height:32px; object-fit:contain; }
.lng-switch { font-size:13px; color:var(--muted); }
.lng-switch select { font:inherit; font-size:13px; color:var(--accent); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 8px; }
.hero h1 { font:700 40px/1.12 Georgia,serif; margin:22px 0 8px; }
.hero p.lead { color:var(--muted); font-size:17px; line-height:1.5; margin:0 0 22px; max-width:720px; }
@container (max-width:600px) { .hero h1 { font-size:28px; margin-top:14px; } .hero p.lead { font-size:15px; } }
/* Tlacitko v hero (7. 11. 2026, Petr): odroluje na karty roli #role, bez JS; styl jako .btn-primary, na mobilu plna sirka */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.rb3 { scroll-margin-top:16px; }
.hero-cta { display:inline-block; margin:0 0 24px; background:var(--accent); color:#fff; text-decoration:none; font-weight:800; font-size:16px; padding:13px 26px; border-radius:12px; text-align:center; }
.hero-cta:hover { filter:brightness(1.08); }
.hero-cta:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@container (max-width:600px) { .hero-cta { display:block; width:100%; box-sizing:border-box; margin-bottom:20px; } }
.hero .card.featured .cname { font-size:28px; }
.card { position:relative; }
.stretch { color:inherit; text-decoration:none; }
.stretch::after { content:""; position:absolute; inset:0; border-radius:16px; }
.stretch:focus-visible { outline:none; }
.stretch:focus-visible::after { outline:3px solid var(--accent); outline-offset:2px; }
.watch { position:relative; z-index:1; align-self:flex-start; display:inline-block; margin-top:14px; background:var(--ok); color:#fff; font-weight:800; text-decoration:none; padding:11px 16px; border-radius:12px; font-size:14px; }
.watch:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
html[data-theme="dark"] .watch { color:#0d1a0e; }
.sech { display:flex; align-items:baseline; justify-content:space-between; margin:34px 0 12px; }
.sech h2 { font:700 22px Georgia,serif; margin:0; }
.sech a { color:var(--accent); font-weight:700; text-decoration:none; font-size:14px; }
.sech a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.ctile { border:2px dashed var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:260px; color:var(--ink); text-decoration:none; text-align:left; }
.ctile:hover { border-color:var(--accent); }
.ctile:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@container (min-width:700px) { .ctile.span2 { grid-column:span 2; min-height:0; } }
@container (min-width:700px) { .ctile.spanall { grid-column:1 / -1; min-height:0; } }   /* sama v radku = pres cely radek (Petr 7. 11. 2026) */
.ctile b { font:700 20px Georgia,serif; }
.ctile span { color:var(--muted); font-size:14px; }
.ctile i { font-style:normal; color:var(--accent); font-weight:800; font-size:14px; }
/* Tri rovnocenne bloky roli Pilot · Posadka · Poradatel (3. 11. 2026, hodnoty z navrhu designera 2026-11-02-home-page-role/design/hp_build.py, sekce NOVE).
   Obrazek = vyrez ze store sady pres object-fit; mobil: obrazek jako uzky pruh vpravo, at jsou bloky kratke. */
.rb3 { display:grid; grid-template-columns:1fr; gap:14px; }
@container (min-width:700px) { .rb3 { grid-template-columns:repeat(3,1fr); gap:18px; } }
.rb { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.rb:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.rb:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .rb { transition:none; } .rb:hover { transform:none; } }
.rb .shot { display:block; height:250px; background:#2b2118; overflow:hidden; }
.rb .shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
/* Desktop a telefon na sirku (3. 11. 2026, Petr: „obrazky v rezimu na sirku jsou schovane, spodni okraj oriznuty“): vyrez 2:3
   a pozice podle role, at horni okraj displeje neusekne text - pilot od vystrahy nahore, posadka/poradatel vic mapy s balony */
@container (min-width:700px) {
  .rb .shot { height:auto; aspect-ratio:480 / 813; }   /* presny pomer snimku = cely snimek bez orezu (Petr 9. 11. 2026: u Pilota musi byt videt auto posadky vpravo dole; drive 2:3 usekl spodnich 93 px) */
  .rb.pilot .shot img { object-position:50% 0; }
  .rb.crew .shot img, .rb.org .shot img { object-position:50% 25%; }
}
.rb .rbody { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.rb .rh { display:flex; align-items:center; gap:10px; }
.rb .rh svg { width:30px; height:30px; color:var(--accent); flex:none; }
.rb .rh b { font:700 24px Georgia,serif; }
.rb .gain { display:block; font-size:16px; line-height:1.4; font-weight:600; }
.rb .ul { display:flex; flex-direction:column; gap:6px; }
.rb .li { display:block; color:var(--muted); font-size:14px; line-height:1.4; padding-left:16px; position:relative; }
.rb .li b { color:var(--ink); font-weight:700; }
.rb .li::before { content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.rb .go { margin-top:auto; align-self:flex-start; border:1.5px solid var(--accent); color:var(--accent); font-weight:800; font-size:14px; border-radius:12px; padding:9px 14px; }
/* uzky pruh vpravo i mezi 601-699 px (jeden sloupec bloku, sirsi nez mobil) - jinak by tam byl vyrez 250 px pres celou sirku */
@container (max-width:699px) {
  .rb { display:grid; grid-template-columns:1fr 104px; }
  .rb .shot { grid-column:2; grid-row:1; height:auto; min-height:100%; position:relative; }
  .rb .shot img { position:absolute; inset:0; }   /* vysku bloku dava text, ne obrazek (jinak sirsi pruh natahl blok) */
  .rb .rbody { grid-column:1; grid-row:1; padding:14px 12px 14px 14px; gap:8px; }
  .rb .rh b { font-size:20px; } .rb .rh svg { width:26px; height:26px; }
  .rb .gain { font-size:15px; } .rb .li { font-size:13px; }
}
@container (min-width:601px) and (max-width:699px) { .rb { grid-template-columns:1fr 170px; } }
.more { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin:16px 0 0; font-size:14px; color:var(--muted); }
.more a { color:var(--accent); font-weight:700; text-decoration:none; }
.more a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.more svg { width:16px; height:16px; vertical-align:-3px; margin-right:4px; color:var(--muted); }
/* Blok „Proc Lachez“ (3. 11. 2026): nizka karta pres celou sirku mrizky, bez obrazku */
.story { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:26px 0 0; }
.story h2 { font:700 22px Georgia,serif; margin:0 0 8px; }
.story p { color:var(--muted); font-size:15px; line-height:1.5; margin:0; max-width:900px; }
@container (max-width:600px) { .story { padding:16px; } .story h2 { font-size:20px; } }
/* Prouzek „Prave leti“ nad bloky - jen kdyz live_count > 0 (akce.js liveStrip) */
.liveb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1.5px solid var(--ok); background:color-mix(in srgb, var(--ok) 9%, var(--card)); border-radius:14px; padding:10px 14px; margin:0 0 18px; font-size:14px; }
.liveb[hidden] { display:none; }
.liveb .dot { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); flex:none; }
.liveb b { font-size:15px; } .liveb span { color:var(--muted); }
.liveb span a { color:inherit; }
.liveb .watch { margin:0 0 0 auto; padding:8px 14px; }
@container (max-width:600px) { .liveb .watch { margin-left:20px; } }
.stores { margin:22px 0 0; text-align:center; }
.store-badges { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.store-badges img { display:block; }
html[data-theme="dark"] .store-badges a, html[data-theme="dark"] .store-badges > span { background:#fff; border-radius:10px; padding:3px; }
.stores p { color:var(--muted); font-size:14px; margin:10px 0 0; }
.foot { text-align:center; color:var(--muted); font-size:12px; margin-top:30px; }
.foot a { color:var(--muted); }
/* hero zive akce: interaktivni mapa vlevo, info vpravo (mobil pod sebou) */
.card.live-hero .banner { aspect-ratio:auto; min-height:300px; }
.card.live-hero .banner iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.card.live-hero .chip { position:static; align-self:flex-start; margin-bottom:10px; }
.card.live-hero .stretch::after { display:none; }   /* karta je celkem mapa - klik do mapy nesmi otevrit stranku akce; odkaz je jen na nazvu */
.card.live-hero .cname a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
@container (min-width:700px) { .card.live-hero .banner { min-height:400px; } }
.card.live-hero:hover { transform:none; box-shadow:none; }
/* teaser na hero karte: canvas s mizici stopou nad JPEG bannerem; prekryvny odkaz vede na sekci Zivá mapa */
.teaser-link { position:absolute; inset:0; z-index:2; }
.teaser-link:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; border-radius:16px; }
.teaser-cv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }