/* ============================================================================
   design-system/base.css
   Nordic Clean foundation: typografie, helpery, grid.
   Součást CSS přes top.php — načítá se globálně, před per-page stylama.
   ============================================================================ */

/* ---- Body typografie ---- */
/* overflow-x: clip (NE hidden) — clip brání horizontálnímu scrollu STEJNĚ jako
   hidden, ALE nevytváří scroll-kontejner, takže nerozbíjí position: sticky
   u .site-header. (hidden na html/body je známá příčina nefunkčního sticky.) */
html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: clip;
}
/* Pojistka proti přetékání obsahu na mobilu — obrázky a SVG nikdy přes 100 % šířky.
   Bez tohoto pravidla může graf s pevnou viewBox proudit přes okraj obrazovky. */
img, svg, video, iframe, canvas { max-width: 100%; }

/* ---- Display (Fraunces) ---- */
.font-display,
.display,
[data-font="display"] {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "lnum";
}

/* Velké hodnoty (teplota, AQI, hlavní čísla) */
.hero-numeric {
  font-family: var(--font-display);
  font-weight: 200;
  font-variation-settings: "SOFT" 50;
  letter-spacing: -12px;
  line-height: 0.85;
  font-feature-settings: "tnum", "lnum";
}

/* ---- Numerické tabulky ---- */
.tabular-nums,
.nums {
  font-feature-settings: "tnum";
}

/* ---- Oddělovač ---- */
.hairline {
  border-bottom: 1px solid var(--line-soft);
}

/* ---- 12-column grid helper ---- */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 1100px) {
  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .ds-grid { gap: 12px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}