/* Foto-Hero (heroStyle: poster). Full-bleed, darkened production photo ($heroBg)
   with the show's key-visual artwork ($poster) as centrepiece; falls back to the
   accent-colour gradient when no background photo is set. Reuses the per-production
   tokens --show-cyan-top/-bot and --show-title. Loaded only when heroStyle = poster.
   Interim, reusable base — a production may later graduate to its own bespoke hero
   (see waved.css / murmeltier.css). */

.prod-hero.poster {
  position: relative;
  background: var(--show-cyan-top);
  color: var(--show-title);
}

/* Background photo + legibility scrim (both behind the content). */
.prod-hero.poster .ph-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.prod-hero.poster .ph-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* no-photo (colour hero): subtle accent shaping only */
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--show-cyan-top) 40%, transparent), transparent 55%),
    radial-gradient(130% 90% at 22% 18%, rgba(255,255,255,0.10), transparent 55%);
}
.prod-hero.poster.has-photo .ph-scrim {
  /* photo hero: darken toward the bottom where the text sits, tint with accent */
  background:
    linear-gradient(180deg, rgba(8,10,14,0.20) 0%, rgba(8,10,14,0.56) 58%, rgba(8,10,14,0.87) 100%),
    linear-gradient(140deg, color-mix(in oklab, var(--show-cyan-top) 46%, transparent), transparent 60%);
}

.prod-hero.poster .wrap {
  position: relative; z-index: 1; width: 100%;
  min-height: min(62vh, 580px);
  display: flex; flex-direction: column;
}
.prod-hero.poster .breadcrumb { color: var(--show-title); opacity: 0.85; padding-top: 30px; }

/* content sits at the bottom of the hero; breadcrumb stays at the top */
.ph-inner { margin-top: auto; padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 3vw, 36px); max-width: 780px; }
.prod-hero.poster.has-photo .ph-inner { text-shadow: 0 1px 20px rgba(0,0,0,0.38); }
.ph-inner .prod-eyebrow { color: var(--show-title); }
.prod-hero.poster .prod-title { margin-top: 14px; }

/* Title logo overlaid on the background (shown instead of the H1). Transparent
   logos float over the image/colour; opaque logos on a matching accent colour
   blend seamlessly, reproducing the old header. */
.ph-logo {
  display: block; width: min(520px, 90%); height: auto; margin: 14px 0 6px;
}
.prod-hero.poster.has-photo.has-logo .ph-logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55)); }

/* Photo hero + logo: lighten the scrim so the artwork/logo stay legible. */
.prod-hero.poster.has-photo.has-logo .ph-scrim {
  background:
    linear-gradient(180deg, rgba(8,10,14,0.10) 0%, rgba(8,10,14,0.26) 55%, rgba(8,10,14,0.58) 100%);
}

/* Keep the accent CTA visible even when the accent equals the hero colour
   (e.g. white Chess header): give it a faint outline in the text colour. */
.prod-hero.poster .prod-cta .btn-accent {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--show-title) 38%, transparent);
}

/* Key-visual artwork as a floating card centrepiece (shown instead of the H1). */
.ph-key {
  display: block; width: min(560px, 100%); height: auto;
  margin: 16px 0 0; border-radius: 4px;
  box-shadow: 0 26px 64px -28px rgba(0,0,0,0.75);
}

.prod-hero.poster .meta-bar { border-top-color: color-mix(in oklab, var(--show-title) 26%, transparent); }

@media (max-width: 700px) {
  .prod-hero.poster .wrap { min-height: 0; }
  .ph-key { width: 100%; }
}