/**
 * WEEU 830 Unified Page Hero
 *
 * Renders the title/subtitle banner at the top of inner pages. Replaces the
 * per-template hero CSS (programming-hero, archive-hero, events-hero, ...).
 *
 * Layout: flex column centered on both axes. The subtitle line simply isn't
 * rendered when hidden, so a title-only hero centers itself — no special
 * casing needed.
 *
 * All colors and sizes come from the Design System tokens.
 *
 * @package WEEU830
 * @version 2.5.0
 */

.weeu-page-hero {
    position: relative;
    overflow: hidden;
    min-height: var(--hero-min-h, 200px);
    display: flex;
    align-items: center;
    background: var(--color-primary); /* paint-flash fallback under the gradient */
    /* The heroes this replaces all carried 40-60px of bottom margin and the
       sections below them have no top padding. */
    margin-bottom: 36px;
}

/* Plain title banners (no background image) stay streamlined even when a
   page saved the old taller default; image heroes keep their configured
   height. */
.weeu-page-hero:not(.has-bg-image) {
    min-height: min(var(--hero-min-h, 200px), 140px);
}

/* Default background: brand gradient (matches the previous hardcoded look). */
.weeu-page-hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--gradient-primary);
}

/* With an image, the inline styles on .hero-bg supply image/size/position
   and the gradient is replaced. */
.weeu-page-hero.has-bg-image .hero-bg {
    background-color: var(--color-dark-surface);
}

/* With a chosen color and no image, the inline `background` on .hero-bg
   replaces the gradient; the section's own fallback paint matches it so
   nothing red flashes before the band draws. */
.weeu-page-hero.has-bg-color {
    background: transparent;
}

.weeu-page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    pointer-events: none;
}

/* The collage overlay (universal-hero-collage) sits above bg/overlay,
   below the text — its own CSS positions it absolutely. */
.weeu-page-hero .hero-collage-overlay {
    z-index: 2;
}

/* ---- Foreground image layer ----
   One picture drawn once over the background (and collage), anchored to a
   9-point position inside the same column as the text. The two axis classes
   set flex alignment; the X/Y nudge and width are inline on the <img>.
   Behind the text by default (z 2, after the collage in source order);
   "in front" lifts it over .hero-inner. Never a hit target. */
.weeu-page-hero .hero-fg {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.weeu-page-hero .hero-fg.fg-layer-front {
    z-index: 4;
}

.weeu-page-hero .hero-fg-inner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weeu-page-hero .hero-fg.fg-x-left   .hero-fg-inner { justify-content: flex-start; }
.weeu-page-hero .hero-fg.fg-x-right  .hero-fg-inner { justify-content: flex-end; }
.weeu-page-hero .hero-fg.fg-y-top    .hero-fg-inner { align-items: flex-start; }
.weeu-page-hero .hero-fg.fg-y-bottom .hero-fg-inner { align-items: flex-end; }

.weeu-page-hero .hero-fg img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    /* When the band's height caps the image, keep it undistorted and pinned
       to the anchored edge rather than floating in the middle of its box. */
    object-fit: contain;
}

.weeu-page-hero .hero-fg.fg-x-left   img { object-position: left center; }
.weeu-page-hero .hero-fg.fg-x-right  img { object-position: right center; }
.weeu-page-hero .hero-fg.fg-y-top    img { object-position: center top; }
.weeu-page-hero .hero-fg.fg-y-bottom img { object-position: center bottom; }
.weeu-page-hero .hero-fg.fg-x-left.fg-y-top     img { object-position: left top; }
.weeu-page-hero .hero-fg.fg-x-left.fg-y-bottom  img { object-position: left bottom; }
.weeu-page-hero .hero-fg.fg-x-right.fg-y-top    img { object-position: right top; }
.weeu-page-hero .hero-fg.fg-x-right.fg-y-bottom img { object-position: right bottom; }

.weeu-page-hero .hero-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--hero-text-align, center);
    padding-top: 20px;
    padding-bottom: 20px;
}

.weeu-page-hero[style*="--hero-text-align: left"] .hero-inner { align-items: flex-start; }
.weeu-page-hero[style*="--hero-text-align: right"] .hero-inner { align-items: flex-end; }

.weeu-page-hero .hero-title {
    margin: 0;
    color: var(--color-on-primary);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-heading);
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.weeu-page-hero .hero-subtitle {
    margin: 14px 0 0;
    color: var(--color-on-primary);
    font-size: var(--font-size-xl);
    font-weight: 400;
    opacity: 0.92;
    max-width: 720px;
    line-height: var(--line-height-base);
}

.weeu-page-hero .breadcrumbs {
    margin-bottom: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-on-primary);
    opacity: 0.85;
}

.weeu-page-hero .breadcrumbs a {
    color: var(--color-on-primary);
    text-decoration: underline;
}

/* ---- Media layout (logo / featured-image column via the 'media' arg) ---- */

.weeu-page-hero.has-hero-media .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.weeu-page-hero.has-hero-media .hero-media {
    flex: 0 0 auto;
}

.weeu-page-hero.has-hero-media .hero-media img {
    display: block;
    max-width: min(400px, 100%);
    max-height: 400px;
    border-radius: 12px;
}

.weeu-page-hero.has-hero-media .hero-text {
    flex: 1;
    min-width: 0;
}

/* ---- Effects ---- */

/* Ken Burns: slow zoom on the background only. */
.weeu-page-hero.hero-effect-kenburns .hero-bg {
    animation: weeu-hero-kenburns 18s ease-out forwards;
    will-change: transform;
}

@keyframes weeu-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Parallax: JS (page-hero.js) translates .hero-bg on scroll. The bleed
   keeps edges covered while the background moves. */
.weeu-page-hero.hero-effect-parallax .hero-bg {
    inset: -18% 0;
    will-change: transform;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .weeu-page-hero {
        margin-bottom: 32px;
        /* Phones: cap the banner height regardless of the per-page
           min-height setting — titles shouldn't eat the first screen. */
        min-height: min(var(--hero-min-h, 280px), 120px);
    }
    .weeu-page-hero .hero-title {
        font-size: var(--font-size-h1);
    }
    .weeu-page-hero .hero-subtitle {
        margin-top: 8px;
        font-size: var(--font-size-lg);
        padding: 0 10px;
    }
    .weeu-page-hero .hero-inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .weeu-page-hero.has-hero-media .hero-inner {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    .weeu-page-hero.has-hero-media .hero-media {
        margin: 0 auto;
    }
    .weeu-page-hero.has-hero-media .hero-text {
        width: 100%;
    }
    .weeu-page-hero .hero-fg.fg-hide-mobile {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weeu-page-hero .hero-bg {
        animation: none !important;
        transform: none !important;
    }
}

@media print {
    .weeu-page-hero {
        min-height: 0;
        background: none;
    }
    .weeu-page-hero .hero-bg,
    .weeu-page-hero .hero-overlay,
    .weeu-page-hero .hero-fg {
        display: none;
    }
    .weeu-page-hero .hero-title,
    .weeu-page-hero .hero-subtitle {
        color: var(--color-heading);
        text-shadow: none;
    }
}