/* ===================== PREMIERE — every credit a poster =====================
   Selector prefix: .pg-premiere   Token-driven: never hard-codes colour.
   All layout via @container page (cqw/cqh). No @media queries.
   ========================================================================== */

.pg-premiere {
  background: var(--bg);
  color: var(--ink);
}

/* ── Scroll-reveal — sections rise in when the stage has .animate ── */
/* Wrapped in motion guard so reduced-motion users see content immediately  */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-premiere > * {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
  .stage.animate .pg-premiere > *.in {
    opacity: 1;
    transform: none;
  }
}

/* ── Shared mono micro-label ─────────────────────────────────────── */
.pg-premiere .pm-sec-label {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: clamp(1.2rem, 3cqw, 2rem);
}

.pg-premiere .pm-col-label {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}

.pg-premiere .pm-kicker {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: clamp(.9rem, 2.4cqw, 1.6rem);
}

/* ── HERO ────────────────────────────────────────────────────────── */
.pg-premiere .pm-hero {
  position: relative;
  min-height: clamp(520px, 96cqh, 900px);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: flex-end;
}

.pg-premiere .pm-hero-bare {
  min-height: clamp(320px, 55cqh, 560px);
  border-top: 4px solid var(--accent);
}

.pg-premiere .pm-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.pg-premiere .pm-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 44%, transparent) 42%,
    transparent 100%
  );
}

.pg-premiere .pm-logo {
  position: absolute;
  z-index: 3;
  top: clamp(1.2rem, 2.8cqw, 2rem);
  right: clamp(1.2rem, 2.8cqw, 2rem);
  max-height: 44px;
  width: auto;
}

.pg-premiere .pm-hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(1.4rem, 5cqw, 4.4rem) clamp(2.4rem, 6cqw, 4.4rem);
}

.pg-premiere .pm-hero h1 {
  font: 400 clamp(4.2rem, 17cqw, 11rem)/.82 'Bebas Neue', var(--font-sans);
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
}

.pg-premiere .pm-rule {
  display: block;
  width: clamp(36px, 7cqw, 72px);
  height: 3px;
  background: var(--accent);
  margin-top: 1.6rem;
}

/* ── POSTER ROWS ─────────────────────────────────────────────────── */
.pg-premiere .pm-row {
  position: relative;
  min-height: clamp(360px, 60cqh, 680px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--surface);
}

/* Bare rows (no image) get an accent top stripe */
.pg-premiere .pm-row--bare {
  border-top: 1px solid var(--line);
}

.pg-premiere .pm-img-wrap {
  position: absolute;
  inset: 0;
}

.pg-premiere .pm-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transition: transform .75s cubic-bezier(.22,.84,.22,1);
}

.pg-premiere .pm-row:hover .pm-img-wrap img {
  transform: scale(1.03);
}

/* Extra grade layer deepens on hover via ::after on the wrap */
.pg-premiere .pm-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.14) 52%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}

.pg-premiere .pm-row:hover .pm-img-wrap::after {
  opacity: 1;
}

/* Dark cinematic grade — keeps text readable on any image */
.pg-premiere .pm-grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.34) 46%,
    rgba(0,0,0,.06) 100%
  );
}

.pg-premiere .pm-caption {
  position: relative;
  z-index: 2;
  padding: clamp(1.6rem, 4.5cqw, 3.2rem) clamp(1.4rem, 5cqw, 4.4rem) clamp(2rem, 5cqw, 3.6rem);
  width: 100%;
  color: #f2f2f0; /* near-white over dark grade */
}

/* Bare rows use theme ink instead */
.pg-premiere .pm-row--bare .pm-caption {
  color: var(--ink);
}

.pg-premiere .pm-caption--right {
  text-align: right;
}

/* Mono index — e.g. "PREMIERE 01" */
.pg-premiere .pm-idx {
  display: block;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}

/* Huge condensed production title */
.pg-premiere .pm-caption h2 {
  font: 400 clamp(3.4rem, 12cqw, 8rem)/.82 'Bebas Neue', var(--font-sans);
  letter-spacing: .01em;
  text-wrap: balance;
  max-width: 76%;
}

/* Bare row: accent title so it pops on surface bg */
.pg-premiere .pm-row--bare .pm-caption h2 {
  color: var(--accent);
  max-width: 100%;
}

/* Right-side caption: title hangs from the right edge */
.pg-premiere .pm-caption--right h2 {
  margin-left: auto;
  max-width: 76%;
}

/* ── STATS STRIP — inverted, lives between poster rows ───────────── */
.pg-premiere .pm-stats {
  padding: clamp(2.2rem, 5.5cqw, 3.8rem) clamp(1.4rem, 5cqw, 4.4rem);
  background: var(--ink);
  color: var(--bg);
}

.pg-premiere .pm-stats .pm-sec-label {
  color: color-mix(in srgb, var(--bg) 54%, transparent);
}

.pg-premiere .pm-stats-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2rem, 6.5cqw, 5rem);
}

.pg-premiere .pm-stat b {
  display: block;
  font: 400 clamp(2.8rem, 9cqw, 5.8rem)/1 'Bebas Neue', var(--font-sans);
  color: var(--accent);
  letter-spacing: .01em;
}

.pg-premiere .pm-stat span {
  display: block;
  margin-top: .35rem;
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

/* ── ALSO STARRING — compact remaining-productions index ─────────── */
.pg-premiere .pm-also {
  padding: clamp(3rem, 8cqw, 5.8rem) clamp(1.4rem, 5cqw, 4.4rem);
}

.pg-premiere .pm-also-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: clamp(1.4rem, 4cqw, 3.2rem);
}

.pg-premiere .pm-also-list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font: 400 clamp(.85rem, 1.9cqw, 1rem)/1.2 var(--font-sans);
}

.pg-premiere .pm-also-num {
  flex-shrink: 0;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--muted);
}

.pg-premiere .pm-more {
  margin-top: 1.1rem;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── BIO ─────────────────────────────────────────────────────────── */
.pg-premiere .pm-bio {
  padding: clamp(3rem, 8cqw, 5.8rem) clamp(1.4rem, 5cqw, 4.4rem);
  background: var(--surface);
}

.pg-premiere .pm-bio-text {
  max-width: 640px;
  font: 400 clamp(1.05rem, 2.2cqw, 1.2rem)/1.68 var(--font-body);
}

/* ── SCORE — tracks section ──────────────────────────────────────── */
.pg-premiere .pm-score {
  padding: clamp(3rem, 8cqw, 5.8rem) clamp(1.4rem, 5cqw, 4.4rem);
}

/* ── REEL ────────────────────────────────────────────────────────── */
.pg-premiere .pm-reel {
  padding: 0 clamp(1.4rem, 5cqw, 4.4rem) clamp(3rem, 8cqw, 5.8rem);
}

/* ── EXTRA COLS — works / publishers / territories ───────────────── */
.pg-premiere .pm-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.6rem, 4.5cqw, 3.2rem);
  padding: clamp(3rem, 8cqw, 5.8rem) clamp(1.4rem, 5cqw, 4.4rem);
  background: var(--surface);
}

.pg-premiere .pm-extra ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.pg-premiere .pm-extra li {
  padding: .56rem 0;
  border-bottom: 1px solid var(--line);
  font: 400 clamp(.8rem, 1.8cqw, .9rem)/1.3 var(--font-sans);
}

.pg-premiere .pm-col-more {
  color: var(--muted);
}

/* ── Productions section label (above poster rows) ──────────────── */
.pg-premiere .pm-prods-label {
  padding: clamp(1.4rem, 3.5cqw, 2.4rem) clamp(1.4rem, 5cqw, 4.4rem) 0;
  margin-bottom: 0;
}

/* ── Custom sections flex zone ───────────────────────────────────── */
.pg-premiere .xsec-zone {
  padding-left: clamp(1.4rem, 5cqw, 4.4rem);
  padding-right: clamp(1.4rem, 5cqw, 4.4rem);
  border-top: 1px solid var(--line);
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.pg-premiere .pm-foot {
  padding: clamp(2.6rem, 6cqw, 4.6rem) clamp(1.4rem, 5cqw, 4.4rem) clamp(2rem, 4cqw, 3rem);
  background: var(--ink);
  color: var(--bg);
  border-top: 3px solid var(--accent);
}

.pg-premiere .pm-soc {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
}

.pg-premiere .pm-foot .soc {
  color: var(--bg);
}

.pg-premiere .pm-foot .colophon {
  margin-top: 1.4rem;
  color: color-mix(in srgb, var(--bg) 52%, transparent);
}

/* ── ::selection & focus-visible ────────────────────────────────── */

.pg-premiere ::selection {
  background: var(--accent);
  color: var(--bg);
}

.pg-premiere a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Poster row sub-animations (motion-safe) ─────────────────────
   Titles slide from their alternating side; the mono index fades
   in first for a count-in feel; stats numbers slide up on reveal.  */
@media (prefers-reduced-motion: no-preference) {

  /* Left-side rows: title slides in from left */
  .stage.animate .pg-premiere .pm-row--left .pm-caption h2 {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 1.1s ease .18s, transform 1.15s cubic-bezier(.16,1,.3,1) .18s;
  }
  .stage.animate .pg-premiere .pm-row--left.in .pm-caption h2 {
    opacity: 1;
    transform: none;
  }

  /* Right-side rows: title slides in from right */
  .stage.animate .pg-premiere .pm-row--right .pm-caption h2 {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 1.1s ease .18s, transform 1.15s cubic-bezier(.16,1,.3,1) .18s;
  }
  .stage.animate .pg-premiere .pm-row--right.in .pm-caption h2 {
    opacity: 1;
    transform: none;
  }

  /* Mono index fades in ahead of the title (no delay) */
  .stage.animate .pg-premiere .pm-row .pm-idx {
    opacity: 0;
    transition: opacity .55s ease 0s;
  }
  .stage.animate .pg-premiere .pm-row.in .pm-idx {
    opacity: 1;
  }

  /* Stats strip: numbers slide up with staggered delay */
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat b {
    display: block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .72s ease var(--sd, 0s),
                transform .78s cubic-bezier(.16,1,.3,1) var(--sd, 0s);
  }
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat:nth-child(1) b { --sd: 0s; }
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat:nth-child(2) b { --sd: .1s; }
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat:nth-child(3) b { --sd: .2s; }
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat:nth-child(4) b { --sd: .3s; }
  .stage.animate .pg-premiere .pm-stats-inner .pm-stat:nth-child(5) b { --sd: .4s; }
  .stage.animate .pg-premiere .pm-stats.in .pm-stats-inner .pm-stat b {
    opacity: 1;
    transform: none;
  }
}

/* ── RESPONSIVE — @container page only (no @media) ──────────────── */
@container page (max-width: 620px) {
  .pg-premiere .pm-hero h1 {
    font-size: clamp(3.4rem, 14cqw, 5.8rem);
  }

  .pg-premiere .pm-caption h2 {
    font-size: clamp(2.8rem, 11cqw, 4.6rem);
    max-width: 100%;
  }

  .pg-premiere .pm-caption--right h2 {
    max-width: 100%;
  }

  .pg-premiere .pm-also-list {
    columns: 1;
  }

  .pg-premiere .pm-extra {
    grid-template-columns: 1fr;
  }
}

@container page (max-width: 390px) {
  .pg-premiere .pm-hero h1 {
    font-size: clamp(2.8rem, 12cqw, 4rem);
  }

  .pg-premiere .pm-caption h2 {
    font-size: clamp(2.4rem, 10cqw, 3.4rem);
  }

  .pg-premiere .pm-stats-inner {
    gap: 1.6rem;
  }

  .pg-premiere .pm-row {
    min-height: clamp(300px, 55cqh, 520px);
  }
}