/* ============================================================
 * Production Hero (ContentBlock: production-hero)
 * NOTE: .production-hero, .production-hero-wrap, .production-hero-image
 *       base classes already exist in main.css. This file only adds
 *       inner / layout-variant rules to replace inline styles.
 *
 * Accent-Color via CSS Custom Property (--ph-accent), set per modifier:
 *   .production-hero--accent-accent (production layout, red)
 *   .production-hero--accent-neon   (workshop and event layout, yellow; ENT-5826 decision C)
 *
 * Structure (bru#7 items 3 and 4): top left title, subtitle and teaser, top right
 * the image column, then the accent line, then .production-hero__details.
 * On desktop the image column keeps one measure on every page: a portrait file
 * fills it, two landscape files stack, a single landscape file fills it too.
 * ============================================================ */

.production-hero { --ph-accent: var(--category-accent, var(--accent)); }
.production-hero--accent-accent { --ph-accent: var(--accent); }
.production-hero--accent-neon   { --ph-accent: var(--neon); }

/* Wrap layout variants */
.production-hero-wrap--with-image {
    padding: 80px 32px 64px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    gap: 48px;
    align-items: start;
    min-width: 0;
}
.production-hero-wrap--with-image > * { min-width: 0; }
.production-hero-wrap--no-image {
    padding: 80px 32px 64px;
    position: relative;
    min-height: auto;
}

/* Content wrapper */
.production-hero__content {
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
    min-width: 0;
}
.production-hero__content--narrow { max-width: 900px; }

/* Title size variants */
.production-hero__title {
    margin: 0;
    color: var(--ink);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.production-hero__title--with-image { font-size: clamp(48px, 10vw, 140px); }
.production-hero__title--no-image  { font-size: clamp(48px, 8vw, 120px); }

/* Workshops/neon variant — magenta text on yellow CTA for legibility (~4.6:1, AA Normal) */
.category-werkstatt .production-hero .production-hero__booking-btn,
.category-workshops .production-hero .production-hero__booking-btn,
.production-hero--accent-neon .production-hero__booking-btn,
.production-hero--accent-neon .btn-solid { color: #171300; }
/* Hover LIGHTENS (customer wish issue #4) and must also override the
   generic pink .btn-solid:hover background from main.css:129. */
.production-hero--accent-neon .production-hero__booking-btn:hover,
.production-hero--accent-neon .production-hero__booking-btn:focus-visible,
.production-hero--accent-neon .btn-solid:hover,
.production-hero--accent-neon .btn-solid:focus-visible {
    background: #f9f383;
    border-color: #f9f383;
    color: #171300;
    filter: none;
}
.production-hero--accent-neon .production-hero__booking-btn .mono,
.production-hero--accent-neon .btn-solid .mono { color: inherit; }

.production-hero__kicker { margin-bottom: 16px; color: var(--ph-accent); }

.production-hero__tag { border-color: var(--ph-accent); color: var(--ph-accent); }

.production-hero__booking-btn { background: var(--ph-accent); border-color: var(--ph-accent); }

.production-hero__subtitle {
    font-size: 16px;
    letter-spacing: .08em;
    color: var(--bone);
    margin-top: 16px;
}

.production-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.production-hero__metaline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

.production-hero__status-wrap { margin-top: 16px; }
.production-hero__status {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.production-hero__status--sold-out { background: var(--accent); color: var(--bg); }
.production-hero__status--coming-soon { background: var(--neon); color: var(--bg); }
.production-hero__status--finished {
    border: 1px solid var(--mute);
    color: var(--mute);
}

.production-hero__trigger-wrap { margin-top: 16px; }
.production-hero__trigger {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--line);
    color: var(--bone);
    text-decoration: none;
}

.production-hero__body {
    font-size: 18px;
    line-height: 1.5;
    color: var(--bone);
    margin-top: 28px;
    max-width: 640px;
    text-wrap: pretty;
}

.production-hero__cta {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* Image column: one measure for 1 portrait, 1 landscape and 2 landscape files.
   The pictures fill their share of it; object-fit crops, never distorts. */
.production-hero__image-col {
    position: relative;
    z-index: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    aspect-ratio: 3 / 4;
    min-height: 0;
    overflow: hidden;
}
.production-hero__figure {
    margin: 0;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* The frame sits on the picture so it stays whole where mobile crops the image (ENT-5826 decision B). */
.production-hero__figure picture {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid var(--ink);
}
.production-hero__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.production-hero__accent-line {
    height: 3px;
    background: var(--ph-accent);
}

/* Everything below the line: tags, meta, status, trigger warning, buttons. */
.production-hero__details {
    padding-top: 32px;
    padding-bottom: 48px;
}
.production-hero__details > :first-child { margin-top: 0; }

/* Workshop introductions are reading content, not full-viewport production posters. */
.production-hero--workshop .production-hero-wrap {
    min-height: auto;
    padding-top: 48px;
}
.production-hero--workshop .production-hero__title {
    font-size: clamp(48px, 6vw, 88px);
}
.production-hero__credit {
    flex: none;
    margin: 8px 0 0;
    color: var(--bone);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-height: 500px) {
    .production-hero-wrap--with-image,
    .production-hero-wrap--no-image {
        min-height: auto;
        padding-top: 48px;
    }
    .production-hero__content {
        padding-bottom: 24px;
    }
}

/* Trailer (bru#8 item 37): first in the image column and as wide (ENT-6192), 16:9, framed like the hero images,
   the other images follow with the column's gap. The preview is the hero's first image; the youtube-nocookie
   player replaces it only after the click. A column with the trailer alone takes the trailer's height. */
.production-hero__image-col .production-hero__trailer { flex: none; }
.production-hero-image.production-hero__image-col--trailer { aspect-ratio: auto; }
.production-hero-wrap--no-image .production-hero__trailer { max-width: 640px; margin-top: 40px; }
.production-hero__trailer-start,
.production-hero__trailer-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--line);
    overflow: hidden;
}
.production-hero__trailer-start {
    color: var(--ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.production-hero__trailer-start::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 14, 16, .72), rgba(14, 14, 16, 0) 55%);
}
.production-hero__trailer-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.production-hero__trailer-play {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--ph-accent);
    transition: transform .2s ease;
}
.production-hero__trailer-play::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 22px;
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent var(--bg);
}
.production-hero__trailer-label {
    position: absolute;
    z-index: 1;
    left: 16px;
    bottom: 12px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}
.production-hero__trailer-start:hover .production-hero__trailer-play,
.production-hero__trailer-start:focus-visible .production-hero__trailer-play { transform: scale(1.08); }
.production-hero__trailer-start:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 3px; }
/* The image column clips its overflow, so there the focus ring sits inside the frame. */
.production-hero__image-col .production-hero__trailer-start:focus-visible { outline-offset: -5px; }
.production-hero__trailer-note {
    margin: 8px 0 0;
    color: var(--bone);
    font-size: 12px;
    line-height: 1.5;
}
.production-hero__trailer-note a { color: inherit; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .production-hero__trailer-play { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .production-hero-wrap--with-image,
    .production-hero-wrap--no-image {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    /* Mobile keeps the image-first poster crop; two images stack below each other. */
    .production-hero-image.production-hero__image-col {
        aspect-ratio: auto;
        max-height: none;
        overflow: visible;
        order: -1;
    }
    .production-hero__figure,
    .production-hero__figure picture { flex: none; }
    .production-hero__figure picture {
        position: static;
        max-height: 400px;
        overflow: hidden;
    }
    .production-hero__figure img {
        position: static;
        height: auto;
    }
    .production-hero { min-height: auto; }
    .production-hero--workshop .production-hero__content { padding-bottom: 0; }
    .production-hero--workshop .production-hero__image-col { order: 0; }
}
@media (max-width: 600px) {
    .production-hero-wrap--with-image,
    .production-hero-wrap--no-image {
        padding: 40px 16px 32px;
        gap: 24px;
    }
    .production-hero__figure picture { max-height: 300px; }
    .production-hero--workshop .production-hero-wrap { padding-top: 32px; }
    .production-hero__details { padding-top: 24px; padding-bottom: 32px; }
}