/* ══════════════════════════════════════════════════════════════
   STYLE — komponenty stránky
   ══════════════════════════════════════════════════════════════ */

/* ── Hlavička ──────────────────────────────────────────────── */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-top);
  padding-bottom: var(--sp-hero);
  color: var(--text);
  font-size: var(--fs-header);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
}

/* ── Nadpis sekcie + biela linka ───────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-sec-pre);
  margin-bottom: var(--sp-sec-post);
}
.section-head h2 {
  margin: 0;
  font-variation-settings: "wdth" var(--wdth);
  color: var(--text);
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
}
.rule {
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--text);
  border-radius: calc(var(--rule-h) / 2);
  flex: none;
}

/* ── Dlaždice ──────────────────────────────────────────────── */
.tile          { display: flex; align-items: center; justify-content: center; }
.tile--black   { background: var(--tile-black); }
.tile--white   { background: var(--tile-white); }

/* Grafika vnútri čiernej dlaždice.
   Šírka sa riadi premennou --aw → doladenie bez re-exportu. */
.art { display: block; width: var(--aw); height: auto; }

/* Fotka / plagát vypĺňajúci celú dlaždicu */
.tile > img.fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Placeholder (biela plocha tam, kde ešte nie je materiál) ── */
.ph { background: var(--tile-white); }
.ph::after {
  content: attr(data-ph);
  display: block;
  padding: 0 24px;
  color: #B0B0B0;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: pre-line;
}

/* ── Rotátor ───────────────────────────────────────────────────
   Všetky snímky sú v DOM od začiatku a ležia na sebe.
   Prepína sa iba viditeľnosť → pri tvrdom strihu nikdy nepreblikne. */
.rot { position: relative; width: 100%; height: 100%; }
.rot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* žiadny transition — tvrdý strih (rozhodnutie Q3) */
}
.rot > img.is-on { opacity: 1; }

/* ── Video (správa sa ako GIF) ─────────────────────────────── */
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;   /* nedá sa s tým nič robiť */
}

/* Farebná paleta — pás sa NATIAHNE na presne 1170 × 120 px,
   teda 30 px od každého rohu dlaždice 1230 × 180.
   Sú to plné farebné plochy, deformácia je opticky nulová. */
.palette {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ── Banner 2.2 — čierny rám, vnútri 3 posty NA DORAZ ──────────
   V predlohe medzi postami bannera NIE JE medzera; posty sa dotýkajú.
   Vnútro rámu 660 px ÷ 3 = presne 220 px na post.            */
.posts-banner {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  gap: 0;
  height: 270px;
}

/* ── Rám s 2 postami nad sebou (sekcia 4) ──────────────────── */
.posts-2 {
  display: grid;
  grid-template-rows: repeat(2, 285px);
  gap: var(--u);
}