/* Centered-logo hero (heroStyle: logo). The show logo, large and centred, on the
   production's colour (--show-cyan-top/-bot) or a full-bleed photo ($heroBg).
   Reuses the per-production tokens; loaded only when heroStyle = logo. */

.prod-hero.logo {
  position: relative;
  background: var(--show-cyan-top);
  color: var(--show-title);
  text-align: center;
}

.prod-hero.logo .ph-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.prod-hero.logo .ph-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 30%, rgba(255,255,255,0.10), transparent 60%);
}
/* Background photos are already optimised for their logo — do NOT darken them. */
.prod-hero.logo.has-photo .ph-scrim { background: none; }

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

/* Content centred, logo large. */
.prod-hero.logo .ph-inner {
  margin: auto 0; padding: clamp(30px, 5vw, 64px) 0;
  display: flex; flex-direction: column; align-items: center;
}
.prod-hero.logo .prod-eyebrow { color: var(--show-title); justify-content: center; }
.prod-hero.logo .ph-logo { display: block; width: min(760px, 94%); height: auto; margin: 20px 0 8px; }
.prod-hero.logo.has-photo.has-logo .ph-logo { filter: drop-shadow(0 12px 34px rgba(0,0,0,0.5)); }
.prod-hero.logo .prod-title { margin-top: 12px; }
.prod-hero.logo .prod-sub, .prod-hero.logo .prod-credits { max-width: 60ch; }
.prod-hero.logo .prod-cta { justify-content: center; }
/* Logo + intro are centred, but the meta fields still flow to the left. */
.prod-hero.logo .meta-bar { border-top-color: color-mix(in oklab, var(--show-title) 26%, transparent); text-align: left; justify-content: flex-start; }