/* ══════════════════════════════════════════════════════════════
   GRID — bento systém.
   Jediný zdroj medzier je `gap`. Marginy na dlaždiciach ZAKÁZANÉ.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Proporcionálne škálovanie celej stránky (Q6).
   `position/z-index` drží obsah nad vrstvou pozadia. */
.page {
  position: relative;
  z-index: 1;
  zoom: var(--scale);
  width: var(--page);
  margin-inline: auto;
  padding: 0 var(--margin) var(--sp-bottom);
}

/* Priestor pre 3D naklonenie dlaždíc (parallax).
   Veľká perspektíva = jemné naklonenie bez skreslenia. */
.row, .stack-v { perspective: 1800px; }

/* ── Riadok bento dlaždíc ──────────────────────────────────────
   Šírky stĺpcov a výška sa zadávajú inline na .row,
   aby bol layout čitateľný priamo v HTML.               */
.row {
  display: grid;
  gap: var(--u);
  width: var(--content);
  margin-bottom: var(--u);      /* 30px medzi riadkami */
}
.row:last-child { margin-bottom: 0; }

/* Zvislý pod-stĺpec vnútri riadku (napr. mapa + crew foto) */
.stack-v {
  display: grid;
  gap: var(--u);
}

/* Plávajúce dlaždice — transformuje ich js/parallax.js.
   `will-change` len na najvyššej úrovni; vnútro rámu sa
   nehýbe samostatne, takže vrstvu navyše nepotrebuje. */
.row > .tile,
.row > .frame,
.stack-v > .tile { will-change: transform; }

/* ── Dlaždica ──────────────────────────────────────────────── */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-width: 0;
}

/* Typ B — rám. Padding = radius → vnútorný radius = 0. */
.frame {
  overflow: visible;
  border-radius: var(--radius);
  padding: var(--pad);
  background: var(--tile-black);
}
.frame--white { background: var(--tile-white); }

/* Vnútro rámu má VŽDY ostré rohy:  r_in = r_out − padding = 0 */
.frame .tile,
.frame .ph { border-radius: 0; }