/* ════════════════════════════════════════════════════════════════════════
   99-responsive.css — Mobile-first responsive (poslední v pořadí načítání)

   Breakpointy (sdílené s HTML mockupy):
   - 1024px → tablet (nav schovaný, burger zapnutý, gridy 2-3 sloupce)
   -  780px → menší tablet / velký mobil (gridy 2 sloupce)
   -  640px → mobil (gridy 1-2 sloupce, sticky CTA, drawer)
   -  380px → malý mobil (texty schované, ikony menší)

   TODO: doplnit ve fázi obsahu.

   Pravidlo: každý komponentní soubor (03-header, 04-nav, 09-sections, ...)
   může mít vlastní media queries v sobě. Tenhle soubor je jen pro:
   - Globální layout responsive (container padding, gutters)
   - Crossmodulové breakpointy (např. hide topbar pravá strana < 640)
   - Fallback overrides
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1024px — tablet ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --gutter: 20px;
  }
}

/* ── 640px — mobil ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  /* Topbar pravá strana skrytá (přesune se do draweru) */
  .topbar .right {
    display: none;
  }

  /* Hero text menší */
  h1 {
    font-size: 26px !important;
  }
}

/* ── 380px — nejmenší obrazovky ──────────────────────────────────── */
@media (max-width: 380px) {
  :root {
    --gutter: 14px;
  }
}