/*
 * Site — single project detail.
 *
 * Loaded on is_singular('project') via `site-page-single-project`
 * handle in theme/inc/60-enqueue.php. Template: single-project.php.
 *
 * Contents:
 *   – Detail hero (poster-overlay h1 over key visual)
 *   – Detail body (3-col grid: poster + synopsis + info)
 *   – kv-list (Info / Producers / Crew tables)
 *   – Media row (trailer + gallery scroller)
 *   – Logo block (support / partners / festivals)
 *   – Mentions list (Press)
 *   – Pulse keyframe (for in-development status indicator)
 *   – Tablet + mobile overrides
 */

/* ─── Detail hero ─────────────────────────────────── */
.detail-hero {
  position: relative; width: 100%; height: 100vh; min-height: 640px;
  overflow: hidden; background: var(--bg);
}
.detail-hero .img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
}
.detail-hero .img::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.10), transparent 70%);
}
.detail-hero .img::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, transparent 30%, transparent 45%, rgba(10,10,10,0.92) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.45) 0%, transparent 35%);
}
.detail-hero .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.32); font-size: 13px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; pointer-events: none;
}
.detail-hero .content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) calc(80px * var(--scale));
  max-width: 1100px;
}
.detail-hero h1 {
  /* Sjednoceno s .hc-content h1 (front-page) — projekt titulky čtou na
     stejné velikosti napříč homepage a detail-stránce. */
  font-size: calc(101px * var(--scale));
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-wrap: balance;
}
.detail-hero .en {
  margin-top: 14px; font-size: calc(24px * var(--scale)); font-weight: 400; font-style: italic; color: var(--ink-dim);
  letter-spacing: -0.005em;
}

/* ─── Body ──────────────────────────────────────── */
.detail-body {
  padding: calc(80px * var(--scale)) var(--gutter);
  display: grid;
  /* Desktop ratio 2:4:2 — synopsis (middle) gets 2× the width of each
     side column. Tablet (769–1024px) and mobile (≤768px) overrides
     collapse the layout further below. */
  grid-template-columns: 2fr 4fr 2fr;
  gap: 56px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
/* Pořadí sloupců: detailní informace (1) | synopse (2) | plakát (3).
   DOM pořadí v PHP zůstává (poster, synopsis, right-col), přeskládáno
   přes grid-column. grid-row: 1 je nutné, protože DOM pořadí je vůči
   sloupcům sestupné (col3, col2, col1) → sparse auto-placement by jinak
   posunul každou další položku o řádek níž (diagonální schody). Všechny
   na řádku 1 + align-items:start = společný horní okraj. */
.detail-body > .right-col  { grid-column: 1; grid-row: 1; }
.detail-body > .synopsis   { grid-column: 2; grid-row: 1; }
.detail-body > .poster-col { grid-column: 3; grid-row: 1; }
/* Pevná šířka synopse: grid zůstává 2fr 4fr 2fr za všech okolností.
   Když plakát chybí, jeho sloupec (3) zůstane prázdný (vpravo); když
   chybí info, prázdný zůstane sloupec 1 (vlevo). Synopse tak vždy drží
   svou 4fr šířku a neroztahuje se. Třídy .no-poster / .no-right-col
   zůstávají v markupu, ale grid nepřerovnávají. */

/* ─── Tablet (769–1024px) ─────────────────────────
   Three columns are too narrow on portrait tablets, so we collapse to a
   two-row layout: synopsis spans the full width on top, poster + right
   info column sit below it side by side. Sticky poster is disabled —
   with the poster below the fold of the synopsis, sticking it serves
   no purpose. The vertical gap between hero h1 and synopsis is also
   tightened (hero bottom + body top paddings halved) — the fluid scale
   shrinks the type at this width but the paddings used to feel oversized. */
@media (min-width: 769px) and (max-width: 1024px) {
  .detail-hero .content { padding-bottom: calc(40px * var(--scale)); }
  .detail-body {
    padding-top: calc(40px * var(--scale));
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "synopsis synopsis"
      "right-col poster";
    gap: 40px 32px;
  }
  .detail-body > .poster-col { grid-area: poster;    grid-column: auto; }
  .detail-body > .synopsis   { grid-area: synopsis;  grid-column: auto; }
  .detail-body > .right-col  { grid-area: right-col; grid-column: auto; }

  .detail-body.no-poster,
  .detail-body.no-poster.no-right-col {
    grid-template-columns: 1fr;
    grid-template-areas: "synopsis" "right-col";
  }
  .detail-body.no-poster > .synopsis,
  .detail-body.no-poster > .right-col,
  .detail-body.no-poster.no-right-col > .synopsis {
    grid-column: auto;
  }

  .detail-body.no-right-col {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "synopsis synopsis"
      ".         poster";
  }
  .detail-body.no-right-col > .synopsis { grid-column: auto; }

  .poster-col { position: static; }
}

/* Poster (A4 ratio 1:√2) — clean, no labels */
.poster-col {
  /* top 130px kotví plakát pod fixní hlavičkou (.nav ~100-112px) i s
     odstupem, aby horní hrana plakátu nemizela za hlavičkou. */
  position: sticky; top: 130px;
}
.poster {
  width: 100%; aspect-ratio: 1 / 1.414;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  position: relative; overflow: hidden; border-radius: 4px;
  cursor: zoom-in;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.poster::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 30% 25%, rgba(255,255,255,0.10), transparent 70%);
}
.poster::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* Synopsis column */
.synopsis h3,
.right-col h3 {
  font-size: calc(15px * var(--read-scale)); color: var(--accent); letter-spacing: 0.06em; font-weight: 500;
  margin-bottom: 22px; text-transform: uppercase;
}
.synopsis p {
  font-size: calc(19px * var(--read-scale)); line-height: 1.65; color: var(--ink);
  text-wrap: pretty; text-align: justify; hyphens: auto;
}
.synopsis p + p { margin-top: 20px; }

/* Right column (info + producers + crew + cast) */
.right-col { display: flex; flex-direction: column; gap: 48px; }
.right-col section { padding: 0; }

/* Inline "+ Zobrazit více" text link under the truncated crew list.
   Deliberately not a pill/button — it's a soft text action. */
.crew-toggle {
  margin-top: 12px; padding: 0;
  background: transparent; border: 0;
  color: var(--accent); cursor: pointer;
  font: inherit; font-size: calc(13px * var(--read-scale));
  letter-spacing: 0.02em; text-align: left;
  transition: opacity .18s;
}
.crew-toggle:hover { opacity: 0.7; }

/* ─── Shared "invisible-table" kv-list — same label column across
       Hlavní informace, Producenti, Štáb so values vertically align. */
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: calc(15.5px * var(--read-scale)); line-height: 1.4;
  align-items: baseline;
}
/* HTML `hidden` atribut: třída .kv-row (display:grid) přebíjí browser
   default [hidden]{display:none}, protože má vyšší specificitu. Explicit
   override zajistí, že extra crew kategorie (PHP přidá hidden) zůstanou
   skryté až do kliku na .crew-toggle (crew.js). */
.kv-row[hidden] { display: none; }
.kv-row:first-child { padding-top: 0; }
.kv-row:last-child { padding-bottom: 0; border-bottom: 0; }
.kv-row .k {
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  font-weight: 400;
}
.kv-row .v {
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
}

/* Multi-value cell (Producer/Co-producer lists) */
.kv-row .v ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}

/* Inline pulse for status */
.kv-row .v .sep { color: var(--ink-mute); margin: 0 8px; font-weight: 400; }
.kv-row .v .pulse {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(160,107,255,0.4); }
  100% { box-shadow: 0 0 0 8px rgba(160,107,255,0); }
}

/* Cast */
.cast-text {
  font-size: calc(16px * var(--read-scale)); line-height: 1.55; color: var(--ink);
  text-wrap: pretty;
}

/* ─── Trailer + Gallery row ──────────────────────── */
.media-row {
  padding: calc(60px * var(--scale)) var(--gutter) calc(80px * var(--scale));
  display: flex; gap: 12px;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
/* Trailer takes exactly one "item slot" (same width as a gallery item),
   so visually it reads as the first item of a row. Gallery fills the
   remainder and shows ~2.3 items, with the fade hinting at more. */
.trailer-col {
  flex: 0 0 calc((100% - 36px) / 3.3);
  min-width: 0;
}
.gallery-col {
  /* Bez traileru zabere galerie celou .media-row (gutter→gutter); .gallery-item
     má fixed flex-basis, takže širší sloupec = automaticky víc viditelných itemů. */
  flex: 1 1 0; min-width: 0;
}
.media-row .col-head,
.gallery-col .gallery-head {
  /* Lock the header row to the arrow height so the small "TRAILER" /
     "GALERIE" labels and the round 44px arrow buttons all sit on the
     same horizontal line. */
  display: flex; align-items: center; justify-content: space-between;
  height: 44px;
  margin-bottom: 24px;
  padding: 0;
}
.media-row .col-head h2,
.gallery-col .gallery-head h2 {
  /* Match the small-caps accent heading used in "Za podpory" / "Festivaly" */
  font-size: calc(15px * var(--read-scale));
  color: var(--accent);
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
}

/* Trailer */
.trailer-col .trailer {
  /* <button> UA default = inline-block s content-based width. Bez explicitního
     display:block + width:100% bylo tlačítko jen ~72px (= šířka absolutně-
     umístěného .play spanu) a aspect-ratio dopočítal výšku ~40px → trailer
     prakticky neviditelný. Plus UA border/padding reset, aby 16:9 box seděl. */
  display: block; width: 100%;
  border: 0; padding: 0; margin: 0;
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit;
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  cursor: pointer;
}
.trailer-col .trailer::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,0.10), transparent 70%);
}
.trailer-col .trailer::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 35%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.trailer-col .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2;  /* nad ::before + ::after overlay; jinak je tlumený / neviditelný */
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  transition: all .2s;
  color: #fff;  /* triangle používá currentColor; bílá zajistí viditelnost na jakémkoli posteru i gradientu */
}
.trailer-col .trailer:hover .play {
  background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.05);
}
.trailer-col .play .triangle {
  width: 0; height: 0;
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.trailer-col .trailer .meta {
  position: absolute; left: 16px; bottom: 14px;
  font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.trailer-col .empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Gallery (matches news-detail) */
.gallery-col .gallery-arrows { display: flex; gap: 8px; }
.gallery-col .gallery-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  transition: background .18s, border-color .18s, color .18s, opacity .18s;
}
.gallery-col .gallery-arrow:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.gallery-col .gallery-arrow:disabled { opacity: 0.3; cursor: default; }
.gallery-col .gallery-arrow:disabled:hover { background: transparent; border-color: var(--rule); color: var(--ink); }
.gallery-col .gallery-scroller {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery-col .gallery-scroller::-webkit-scrollbar { display: none; }
/* Right-side fade hints at more images beyond the visible edge */
.gallery-col .scroller-wrap {
  position: relative;
}
.gallery-col .scroller-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
  background: linear-gradient(90deg, transparent, var(--bg) 85%);
  pointer-events: none; z-index: 2;
  opacity: 1; transition: opacity .25s;
}
.gallery-col .scroller-wrap[data-at-end="true"]::after { opacity: 0; }
.gallery-col .gallery-item {
  /* S trailerem (default): scroller zobrazí ~2.3 itemů z gallery-col šířky. */
  flex: 0 0 calc((100% - 2 * 12px) / 2.3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
/* Bez traileru je gallery-col 100% media-row. Aby si item zachoval stejnou
   pixel-šířku jako u with-trailer (~70% media-row, 2.3 viditelných), přepočet
   flex-basis matematicky reprezentuje šířku, kterou by item měl, kdyby tam
   trailer byl. Výsledek: konstantní pixel-šířka, ale wider scroller → víc
   itemů viditelných (počet závisí na viewportu). */
.media-row:not(:has(> .trailer-col)) .gallery-col .gallery-item {
  flex: 0 0 calc((100% - ((100% - 36px) / 3.3) - 36px) / 2.3);
}
.gallery-col .gallery-item .img {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  cursor: zoom-in;
}
.gallery-col .gallery-item .img::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.07), transparent 70%);
}
.gallery-col .gallery-item .img .lbl {
  position: absolute; bottom: 12px; left: 14px;
  font-size: calc(11px * var(--scale)); color: rgba(255,255,255,0.5); letter-spacing: 0.18em; text-transform: uppercase;
}

/* ─── Logo boxes block (shared: support, partners, festivals) ─── */
.logo-block {
  padding: calc(56px * var(--scale)) var(--gutter);
  display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start;
  border-bottom: 1px solid var(--rule);
}
.logo-block:last-of-type { border-bottom: 0; }
.logo-block h3 {
  font-size: calc(15px * var(--read-scale)); color: var(--accent); letter-spacing: 0.06em; font-weight: 500;
  text-transform: uppercase;
}
.logo-grid {
  display: grid;
  /* Standard layout: 6 boxes per row na typickém Macu (1281–1599 logical),
     8 na fullscreen / externích monitorech (≥1600), 4/3/2 na užších šířkách.
     Vždy auto-flow: víc log než se vejde = přetečou na další řádek. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 1600px) {
  /* MBP 16" fullscreen (1728), externí monitory (1920+). */
  .logo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  /* 3 boxíky na řádek (uživatelský požadavek). aspect-ratio 16/9 zůstává,
     boxy se proporcionálně zmenší — žádná deformace poměrů. Gap zmenšen,
     aby se vešly 3 boxy + 2 mezery do gutter-omezené šířky. */
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
.logo-box {
  aspect-ratio: 16/9; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(12px * var(--read-scale)); color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: 8px 12px; line-height: 1.3;
  transition: border-color .2s, color .2s, background .2s;
}
.logo-box:hover { border-color: var(--rule-2); color: var(--ink); background: var(--bg-2); }
/* <img> uvnitř logo-box musí respektovat 16/9 rámeček a nesmí přesahovat.
   object-fit: contain zachová poměr loga (laurels jsou často vysoké). */
.logo-box img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* ─── Mentions ─── */
.mentions-block {
  padding: calc(60px * var(--scale)) var(--gutter) calc(100px * var(--scale));
  display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start;
}
.mentions-block h3 {
  font-size: calc(15px * var(--read-scale)); color: var(--accent); letter-spacing: 0.06em; font-weight: 500;
  text-transform: uppercase;
}
.mentions-list { display: flex; flex-direction: column; }
.mention-row {
  /* Iter 11: titul nad meta řadou (datum · autor · médium). Žádný pravý
     sloupec — datum se přesunulo dovnitř .src. */
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.mention-row:first-child { padding-top: 0; }
.mention-row.is-last-visible { border-bottom: 0; padding-bottom: 10px; }
.mention-row:last-child { border-bottom: 0; }
.mention-row .ttl {
  font-size: calc(19px * var(--read-scale)); font-weight: 500; letter-spacing: -0.012em; color: var(--ink);
  line-height: 1.35; text-wrap: pretty;
}
.mention-row a.ttl { color: var(--ink); transition: color .18s; }
.mention-row a.ttl:hover { color: var(--accent); }
.mention-row a.ttl::after {
  content: ' ↗'; color: var(--ink-mute); font-size: 0.8em; letter-spacing: 0;
}
.mention-row .src {
  font-size: calc(13.5px * var(--read-scale)); color: var(--ink-mute);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
}
.mention-row .src .date {
  color: var(--ink-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  white-space: nowrap;
}
.mention-row .src .author { color: var(--ink-dim); font-weight: 500; }
.mention-row .src .dot { color: var(--rule-2); }

/* Reveal-all button under the visible 3 */
.mentions-more {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: flex-start;
}
.mentions-more button {
  appearance: none; background: transparent; border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  font: inherit; font-size: calc(13px * var(--read-scale)); font-weight: 500;
  letter-spacing: 0.02em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s, border-color .18s, color .18s;
}
.mentions-more button:hover {
  background: var(--bg-2); border-color: var(--rule-2);
  color: var(--accent);
}
.mentions-more button .count {
  color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.mentions-more button .chev {
  display: inline-block; transition: transform .2s;
  color: var(--ink-mute); font-size: 0.9em;
}
.mentions-more button.is-open .chev { transform: rotate(180deg); }

/* ─── Mobile (≤768px) ─────────────────────────────────────────
   Stack the 3-col body, drop the sticky poster, collapse the
   media row and logo/mentions label columns. */
@media (max-width: 768px) {
  .detail-hero {
    height: 70vh;
    min-height: 480px;
    max-height: 720px;
  }
  .detail-hero .content {
    padding: 0 var(--gutter) 32px;
  }
  .detail-hero h1 {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 0.9;
  }
  .detail-hero .en {
    font-size: 18px;
    margin-top: 10px;
  }

  .detail-body,
  .detail-body.no-poster,
  .detail-body.no-right-col,
  .detail-body.no-poster.no-right-col {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 36px var(--gutter) 48px;
  }
  .detail-body > .poster-col,
  .detail-body > .synopsis,
  .detail-body > .right-col,
  .detail-body.no-poster > .synopsis,
  .detail-body.no-poster > .right-col,
  .detail-body.no-right-col > .synopsis,
  .detail-body.no-poster.no-right-col > .synopsis {
    grid-column: 1;
    /* reset grid-row: 1 z desktopu, jinak by se v jednosloupcovém gridu
       všechny položky překryly v buňce řádek1/sloupec1. order určuje pořadí. */
    grid-row: auto;
  }
  /* Mobile reading order: synopsis first, then poster, then info column —
     text is what people want to read; the poster is supporting imagery. */
  .detail-body > .synopsis  { order: 1; }
  .detail-body > .poster-col { order: 2; }
  .detail-body > .right-col { order: 3; }
  .poster-col {
    position: static;
    max-width: 260px;
  }
  .synopsis p {
    font-size: 16px;
    line-height: 1.6;
    hyphens: auto;
  }
  .right-col { gap: 36px; }

  /* kv-list — narrower label column, slightly smaller type */
  .kv-row {
    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: 12px;
    font-size: 13px;
    padding: 9px 0;
  }
  /* Cast text — sjednotit s .kv-row velikostí, ať Crew (kv-row) a Cast
     mají stejně velké písmo na mobilu. */
  .cast-text {
    font-size: 13px;
    line-height: 1.55;
  }

  /* Media row — trailer full width, gallery below */
  .media-row {
    flex-direction: column;
    gap: 32px;
    padding: 48px var(--gutter);
  }
  .trailer-col,
  .gallery-col {
    flex: none;
    width: 100%;
  }
  .gallery-col .gallery-item {
    /* show ~1.2 items so the next image peeks out */
    flex: 0 0 80%;
  }
  .gallery-col .scroller-wrap::after { width: 48px; }

  /* Logo + mentions — stack label above content */
  .logo-block,
  .mentions-block {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 40px var(--gutter);
  }
  .mentions-block { padding-bottom: 60px; }
  .mention-row {
    padding: 18px 0;
  }
  .mention-row .ttl {
    font-size: 16px;
  }
  .mentions-more button {
    padding: 11px 20px;
  }
}