/*
 * 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;
}
/* Pin children to their columns so a missing synopsis doesn't shift the
   right info column into the middle cell. */
.detail-body > .poster-col { grid-column: 1; }
.detail-body > .synopsis   { grid-column: 2; }
.detail-body > .right-col  { grid-column: 3; }
/* When the project has no poster: synopsis grows into poster's space,
   info column keeps its 2-share. */
.detail-body.no-poster {
  grid-template-columns: 6fr 2fr;
}
.detail-body.no-poster > .synopsis  { grid-column: 1; }
.detail-body.no-poster > .right-col { grid-column: 2; }
/* When the right info column has no sub-sections to show, keep the
   3-col layout so synopsis stays at its 4-share (does NOT stretch right);
   info slot stays empty. */
.detail-body.no-right-col {
  grid-template-columns: 2fr 4fr 2fr;
}
.detail-body.no-right-col > .synopsis { grid-column: 2; }
.detail-body.no-poster.no-right-col {
  grid-template-columns: minmax(0, 1fr);
}
.detail-body.no-poster.no-right-col > .synopsis { grid-column: 1; }

/* ─── 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: 2fr 3fr;
    grid-template-areas:
      "synopsis synopsis"
      "poster   right-col";
    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: 2fr 3fr;
    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 {
  position: sticky; top: 100px;
}
.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;
}
.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); }
}

/* ─── 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);
  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-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));
}
.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;
  }
  /* 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;
  }

  /* 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 — mobile padding */
  .logo-block,
  .mentions-block {
    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;
  }
}


/* ─── v20.4 — Pořadí sloupců v prvním bloku detailu projektu
   PC (≥1025px):  1) info + štáb   2) synopse   3) plakát
   Chybějící plakát / info = prázdné vyhrazené místo, synopse drží
   šířku prostředního sloupce. grid-row: 1 je nutné — položky jsou
   v HTML v pořadí plakát → synopse → info, a bez pevného řádku by je
   grid při sestupných číslech sloupců rozházel na nové řádky.
   Mobil (≤768px) beze změny: synopse → plakát → štáb (order 1/2/3). */
@media (min-width: 1025px) {
  .detail-body,
  .detail-body.no-poster,
  .detail-body.no-right-col,
  .detail-body.no-poster.no-right-col { grid-template-columns: 2fr 4fr 2fr; }

  .detail-body > .right-col,
  .detail-body.no-poster > .right-col { grid-column: 1; grid-row: 1; }

  .detail-body > .synopsis,
  .detail-body.no-poster > .synopsis,
  .detail-body.no-right-col > .synopsis,
  .detail-body.no-poster.no-right-col > .synopsis { grid-column: 2; grid-row: 1; }

  .detail-body > .poster-col { grid-column: 3; grid-row: 1; }
}

/* Tablet (769–1024px): synopse nahoře, pod ní info + štáb vlevo, plakát vpravo
   (zrcadlově k původnímu rozložení, aby odpovídalo pořadí na PC). */
@media (min-width: 769px) and (max-width: 1024px) {
  .detail-body {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "synopsis  synopsis"
      "right-col poster";
  }
  .detail-body.no-right-col {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "synopsis synopsis"
      ".        poster";
  }
}

/* ═══ v1.3.0 — Za podpory / Partneři / Festivaly / Zmínky ═══════════════
   Název sekce nahoře, obsah pod ním (stejně jako Trailer / Galerie).
   Loga: jedna řada, velikost ≈ 2/3 původní, max. 10 vedle sebe na PC,
   další skryté vpravo — posun šipkami vpravo nahoře (jako Galerie). */
.logo-block .logo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  height: 44px;
  margin-bottom: 24px;
}
.logo-block .logo-head h3 { line-height: 1; margin: 0; }
.mentions-block > h3 {
  display: flex; align-items: center;
  height: 44px; line-height: 1;
  margin: 0 0 24px;
}

.logo-block .logo-arrows { display: flex; gap: 8px; }
.logo-block .logo-arrows[hidden] { display: none; }
.logo-block .logo-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; padding: 0;
  transition: border-color .18s, color .18s, opacity .18s;
}
.logo-block .logo-arrow:hover { color: var(--accent); border-color: var(--accent); }
.logo-block .logo-arrow:disabled { opacity: 0.3; cursor: default; }
.logo-block .logo-arrow:disabled:hover { border-color: var(--rule); color: var(--ink); }

.logo-block .scroller-wrap { position: relative; }
.logo-block .scroller-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 72px;
  background: linear-gradient(90deg, transparent, var(--bg) 85%);
  pointer-events: none; z-index: 2;
  opacity: 1; transition: opacity .25s;
}
.logo-block .scroller-wrap[data-at-end="true"]::after { opacity: 0; }

/* Přebíjí původní grid (6 / 8 / 4 / 3 / 2 sloupců) — jedna posuvná řada. */
.logo-block .logo-grid {
  --logo-gap: 14px;
  --logo-visible: 10;
  display: flex;
  gap: var(--logo-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.logo-block .logo-grid::-webkit-scrollbar { display: none; }
/* v1.3.1 — pevná velikost loga (≈ jako na MacBooku Pro 14": 122 px).
   Při zúžení okna se loga NEzmenšují — vejde se jich méně a zbytek se
   posouvá šipkami. Na širokých monitorech se loga mírně zvětší, aby jich
   vedle sebe nebylo víc než 10. */
.logo-block .logo-grid > .logo-box {
  --logo-w: 122px;
  flex: 0 0 max(var(--logo-w), calc((100% - (var(--logo-visible) - 1) * var(--logo-gap)) / var(--logo-visible)));
  min-width: 0;
  scroll-snap-align: start;
  padding: 6px 8px;
  font-size: 11px;
}
@media (max-width: 768px) {
  .logo-block .logo-grid { --logo-gap: 10px; }
  .logo-block .logo-head,
  .mentions-block > h3 { margin-bottom: 18px; }
}

/* ═══ v1.3.2 — Trailer + Galerie: pevná velikost (jako loga) ═════════════
   PC / tablet: trailer i fotka mají stálou šířku ≈ jako na MacBooku Pro 14"
   (396 px). Při zúžení okna se nezmenšují — vejde se méně fotek, zbytek
   se posouvá šipkami Galerie. Na širších monitorech se zvětší proporčně
   jako dosud (max()).
   Mobil (≤768px): trailer přes celou šířku, pod ním Galerie se 2 fotkami
   vedle sebe, další fotky skryté vpravo (šipky / swipe). */
@media (min-width: 769px) {
  .trailer-col {
    flex: 0 0 max(396px, calc((100% - 36px) / 3.3));
  }
  .gallery-col .gallery-item {
    flex: 0 0 max(396px, calc((100% - 2 * 12px) / 2.3));
  }
  .media-row:not(:has(> .trailer-col)) .gallery-col .gallery-item {
    flex: 0 0 max(396px, calc((100% - ((100% - 36px) / 3.3) - 36px) / 2.3));
  }
}
@media (max-width: 768px) {
  .gallery-col .gallery-item,
  .media-row:not(:has(> .trailer-col)) .gallery-col .gallery-item {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}

/* v1.3.5 — víceřádkové hodnoty (producenti, koproducenti, žánry, štáb):
   každá položka vždy na vlastním řádku. */
.kv-row .v ul { display: flex !important; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kv-row .v ul > li { display: block; margin: 0; padding: 0; }

/* ═══ v1.4.0 — Moduly Štáb / Hrají (template-parts/credits.php) ══════════
   Samostatné celošířkové moduly pod prvním blokem — stejná hlavička,
   odsazení a oddělovací linka jako Za podpory / Partneři / Festivaly.
   „Neviditelná tabulka“: 6 kreditů na řádek (PC), 4 (tablet), 2 (mobil);
   viditelné 2 / 2 / 3 řádky, zbytek pod „+ Zobrazit více“. */
.credits-block {
  padding: calc(56px * var(--scale)) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.credits-block .credits-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px;
  margin-bottom: 24px;
}
.credits-block .credits-head h3 {
  font-size: calc(15px * var(--read-scale)); color: var(--accent);
  letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase;
  line-height: 1; margin: 0;
}
.credits-grid {
  --credits-cols: 6;
  --credits-rows: 2;
  display: grid;
  grid-template-columns: repeat(var(--credits-cols), minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}
.credit {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.credit-role {
  font-size: calc(13.5px * var(--read-scale));
  color: var(--ink-mute);
  letter-spacing: 0.01em; line-height: 1.35;
  overflow-wrap: anywhere;
}
.credit-name {
  display: flex; flex-direction: column; gap: 2px;
  font-size: calc(15.5px * var(--read-scale));
  font-weight: 500; color: var(--ink); line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Skrytí kreditů nad limit (PC 12). Po kliknutí .is-open vše odkryje. */
.credits-block:not(.is-open) .credit:nth-child(n+13) { display: none; }
.credits-block .credits-more { display: none; margin-top: 20px; }
.credits-block .credits-more .crew-toggle { margin-top: 0; }
.credits-block.more-d .credits-more { display: flex; }

@media (min-width: 769px) and (max-width: 1024px) {
  .credits-grid { --credits-cols: 4; gap: 24px 24px; }
  .credits-block:not(.is-open) .credit:nth-child(n+9) { display: none; }
  .credits-block .credits-more,
  .credits-block.more-d .credits-more { display: none; }
  .credits-block.more-t .credits-more { display: flex; }
}
@media (max-width: 768px) {
  .credits-block { padding: 40px var(--gutter); }
  .credits-block .credits-head { margin-bottom: 18px; }
  .credits-grid { --credits-cols: 2; gap: 20px 16px; }
  .credit-role { font-size: 13px; }
  .credit-name { font-size: 15px; }
  .credits-block:not(.is-open) .credit:nth-child(n+7) { display: none; }
  .credits-block .credits-more,
  .credits-block.more-d .credits-more,
  .credits-block.more-t .credits-more { display: none; }
  .credits-block.more-m .credits-more { display: flex; margin-top: 16px; }
  .credits-block .credits-more .crew-toggle { font-size: 13px; padding: 6px 0; }
}
/* .is-open má vždy přednost (tlačítko už je odstraněné JS). */
.credits-block.is-open .credit { display: flex !important; }

/* ═══ v1.4.2 — Štáb / Hrají: počty viditelných kreditů ═══════════════════
   PC:              6 na řádek, 1 řádek   (6)
   Tablet 769–1024: 3 na řádek, 2 řádky   (6)
   Tablet 541–768:  3 na řádek, 3 řádky   (9)
   Mobil ≤540:      2 na řádek, 3 řádky   (6) — beze změny */
.credits-block:not(.is-open) .credit:nth-child(n+7) { display: none; }
@media (min-width: 769px) and (max-width: 1024px) {
  .credits-grid { --credits-cols: 3; }
  .credits-block:not(.is-open) .credit:nth-child(n+7) { display: none; }
}
@media (min-width: 541px) and (max-width: 768px) {
  .credits-grid { --credits-cols: 3; }
  .credits-block:not(.is-open) .credit:nth-child(n+7) { display: flex; }
  .credits-block:not(.is-open) .credit:nth-child(n+10) { display: none; }
  .credits-block.more-m .credits-more { display: none; }
  .credits-block.more-tm .credits-more { display: flex; }
}
.credits-block.is-open .credit { display: flex !important; }

/* ═══ v1.5.0 — Jednotná typografie (tokeny v global.css) ═══ */
.detail-hero h1 { font-size: 81px; }
.detail-hero .en { font-size: 19px; }
@media (max-width: 768px) {
  .detail-hero h1 { font-size: clamp(29px, 8vw, 42px); }
  .detail-hero .en { font-size: 15px; }
}
.synopsis p,
.mention-row .ttl { font-size: var(--fs-text); }
.kv-row,
.credit-name { font-size: var(--fs-small); }
.credit-role,
.mention-row .src { font-size: var(--fs-label); }
.crew-toggle,
.mentions-more button,
.credits-block .credits-more .crew-toggle { font-size: var(--fs-xs); }
@media (max-width: 768px) {
  .synopsis p, .mention-row .ttl { font-size: var(--fs-text); }
  .kv-row, .credit-name { font-size: var(--fs-small); }
  .credit-role { font-size: var(--fs-label); }
  .credits-block .credits-more .crew-toggle { font-size: var(--fs-xs); }
}

/* ═══ v1.5.2 — Zmínky: název článku = velikost „Hlavních informací“
   (--fs-small), datum stejným písmem jako zbytek stránky (bez
   tabulkových číslic). */
.mention-row .ttl { font-size: var(--fs-small); line-height: 1.4; }
@media (max-width: 768px) { .mention-row .ttl { font-size: var(--fs-small); } }
.mention-row .src .date {
  font-family: var(--font);
  font-variant-numeric: normal;
  font-feature-settings: normal;
  letter-spacing: inherit;
}

/* ═══ v1.5.4 — Synopse + názvy zmínek = písmo Štábu / Hrají ═══ */
.synopsis p,
.mention-row .ttl {
  font-size: var(--fs-text); font-weight: var(--text-weight);
  color: var(--text-color); line-height: var(--text-leading);
}
.mention-row a.ttl { color: var(--text-color); }
.mention-row a.ttl:hover { color: var(--accent); }
@media (max-width: 768px) {
  .synopsis p, .mention-row .ttl { font-size: var(--fs-text); line-height: var(--text-leading); }
}

/* ═══ v1.5.8 — Související aktuality (template-parts/project-news.php) ═══
   Hlavička jako ostatní moduly detailu projektu; karty stejné jako ve
   výpisu aktualit (jednotný vzhled karet je v global.css). */
.project-news {
  padding: calc(56px * var(--scale)) var(--gutter) calc(80px * var(--scale));
  border-top: 1px solid var(--rule);
}
.project-news .project-news-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; margin-bottom: 24px;
}
.project-news .project-news-head h3 {
  font-size: calc(15px * var(--read-scale)); color: var(--accent);
  letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase;
  line-height: 1; margin: 0;
}
.project-news .more-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}
.project-news .ncard .img-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
}
.project-news .ncard .img-wrap:not(.has-image)::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.06), transparent 70%);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .project-news .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .project-news { padding: 40px var(--gutter) 56px; }
  .project-news .project-news-head { margin-bottom: 18px; }
  .project-news .more-grid { grid-template-columns: 1fr; }
}

/* ═══ v1.5.9 — Související aktuality: vodorovný posuvník ═══
   PC 3 karty, tablet 2, mobil 1 (+ náhled další); další šipkami vpravo
   nahoře — stejné šipky a chování jako Galerie / loga. */
.project-news .more-grid {
  --pn-gap: 28px;
  --pn-visible: 3;
  display: flex;
  gap: var(--pn-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.project-news .more-grid::-webkit-scrollbar { display: none; }
.project-news .more-grid > .ncard[href] {
  flex: 0 0 calc((100% - (var(--pn-visible) - 1) * var(--pn-gap)) / var(--pn-visible));
  min-width: 0;
  scroll-snap-align: start;
}
.project-news .scroller-wrap { position: relative; }
.project-news .scroller-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 72px;
  background: linear-gradient(90deg, transparent, var(--bg) 85%);
  pointer-events: none; z-index: 2;
  opacity: 1; transition: opacity .25s;
}
.project-news .scroller-wrap[data-at-end="true"]::after { opacity: 0; }
.project-news .logo-arrows { display: flex; gap: 8px; }
.project-news .logo-arrows[hidden] { display: none; }
.project-news .logo-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; padding: 0;
  transition: border-color .18s, color .18s, opacity .18s;
}
.project-news .logo-arrow:hover { color: var(--accent); border-color: var(--accent); }
.project-news .logo-arrow:disabled { opacity: 0.3; cursor: default; }
.project-news .logo-arrow:disabled:hover { border-color: var(--rule); color: var(--ink); }
@media (min-width: 769px) and (max-width: 1024px) {
  .project-news .more-grid { --pn-visible: 2; }
}
@media (max-width: 768px) {
  .project-news .more-grid { --pn-gap: 16px; --pn-visible: 1.2; }
  .project-news .scroller-wrap::after { width: 40px; }
}

/* ═══ v1.6.0 — Čára nad „Souvisejícími aktualitami“ = stejná jako ostatní
   čáry na stránce: patří spodnímu okraji předchozího modulu a má stejné
   odsazení (jako logo-bloky / Štáb). */
.project-news { border-top: 0; }
.mentions-block:has(+ .project-news),
.logo-block:has(+ .project-news),
.credits-block:has(+ .project-news),
.media-row:has(+ .project-news) {
  border-bottom: 1px solid var(--rule);
}
.mentions-block:has(+ .project-news) { padding-bottom: calc(56px * var(--scale)); }
@media (max-width: 768px) {
  .mentions-block:has(+ .project-news) { padding-bottom: 40px; }
}

/* ═══ v1.6.3 — Velké monitory (Full HD a širší) ═══════════════════════════
   Základ = MacBook Pro 13" (1440 px). Na širších obrazovkách prvky
   NEROSTOU — zůstávají zhruba stejně velké a vejde se jich víc vedle sebe:
                 <1600   ≥1600   ≥1800 (Full HD)   ≥2300
     Štáb/Hrají    6       7        8               10   (1 řádek, zbytek „Zobrazit více“)
     Loga         10      11       12               15   (zbytek šipkami)
     Galerie   trailer 396 px + fotky 396 → 245 px (Full HD ≈ 5 fotek vedle traileru)
   Tablet a mobil beze změny. */
@media (min-width: 1600px) {
  .credits-grid { --credits-cols: 7; }
  .credits-block:not(.is-open) .credit:nth-child(n+7) { display: flex; }
  .credits-block:not(.is-open) .credit:nth-child(n+8) { display: none; }
  .credits-block.more-d .credits-more { display: none; }
  .credits-block.more-d7 .credits-more { display: flex; }
  .logo-block .logo-grid { --logo-visible: 11; }
}
@media (min-width: 1800px) {
  .credits-grid { --credits-cols: 8; }
  .credits-block:not(.is-open) .credit:nth-child(n+8) { display: flex; }
  .credits-block:not(.is-open) .credit:nth-child(n+9) { display: none; }
  .credits-block.more-d7 .credits-more { display: none; }
  .credits-block.more-d8 .credits-more { display: flex; }
  .logo-block .logo-grid { --logo-visible: 12; }
}
@media (min-width: 2300px) {
  .credits-grid { --credits-cols: 10; }
  .credits-block:not(.is-open) .credit:nth-child(n+9) { display: flex; }
  .credits-block:not(.is-open) .credit:nth-child(n+11) { display: none; }
  .credits-block.more-d8 .credits-more { display: none; }
  .credits-block.more-d10 .credits-more { display: flex; }
  .logo-block .logo-grid { --logo-visible: 15; }
}
.credits-block.is-open .credit { display: flex !important; }
@media (min-width: 769px) {
  .trailer-col { flex: 0 0 396px; }
  .gallery-col .gallery-item,
  .media-row:not(:has(> .trailer-col)) .gallery-col .gallery-item {
    flex: 0 0 clamp(240px, calc(849px - 31.46vw), 396px);
  }
}

/* ═══ v1.6.4 — Full HD a širší (≥1800 px) ═══
   Související aktuality: 4 viditelné, další šipkami.
   Galerie (v1.6.5): přesně 4 fotky vedle traileru (i bez traileru), další šipkami. */
@media (min-width: 1800px) {
  .project-news .more-grid { --pn-visible: 4; }
  .gallery-col .gallery-item,
  .media-row:not(:has(> .trailer-col)) .gallery-col .gallery-item {
    flex: 0 0 calc((100% - 3 * 12px) / 4);
  }
}