/* ============================================================
   SKIN: LIGHT (viz PLAN_TEMA.md fáze 4) — dnešní vzhled produkce.
   Základ jsou design-tokens.css + main.css + CSS stránky, takže tady zatím
   nejsou žádná přepsání. Světlé specifikum (pozadí, ikony, tvary komponent),
   které bude potřeba odlišit od tmavého, patří SEM, ne do stránek.
   ============================================================ */
:root { color-scheme: light; }

/* ---------- index.php: hero – notebook jako vrstva (stejná geometrie a pozice jako tmavá fotka) ---------- */
/* Tmavé téma má notebook přímo ve fotce pozadí (cover, střed); tady je totéž v průhledné vrstvě stejného rozměru
   (1862×560) se stolem (barvy z tmavé fotky, vlevo plynule do průhledna) a vystřiženým notebookem na identických souřadnicích → při každé šířce stojí notebook na stejném místě. */
.hero { position: relative; display: block; padding: 4rem 0 3rem; max-width: 1920px; margin: 0 auto; min-height: clamp(400px, 30.08vw, 578px); box-sizing: border-box; }
.hero::before { content: ''; position: absolute; inset: 0; background: url("img/hero-laptop-layer.png?v=2") center / cover no-repeat; pointer-events: none; z-index: 0; }
.hero-text { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 1.5rem; text-align: left; }
@media (max-width: 640px) { .hero { padding: 2.5rem 0; } }