/* ==========================================================================
   Hero title overlay
   --------------------------------------------------------------------------
   The page title sits INSIDE the hero frame as a title card; the explanatory
   line below it (.intro / .subtitle / .tagline) stays on solid ground, where
   its length and wrap count cannot fight moving footage.

   Chosen from /preview/hero-overlay/, which compared four treatments against
   the real hero clips. The fully-overlaid variants read well on a desktop but
   left ~12px of headroom on a 390px phone in German — one added clause of copy
   would have pushed them over. Keeping the body copy out of the frame is what
   makes this safe in all eight locales.

   Badges are deliberately NOT moved into the frame: .hero-badge keeps
   straddling the seam, half in and half out, as it always has.

   Loaded AFTER each page's inline <style> block, because those blocks define
   .landing-hero h1 themselves and would otherwise win on equal specificity.
   ========================================================================== */

/* The frame. Must not clip: the badge hangs half outside the bottom edge.
   Three container names carry a hero across the site — .landing-hero-image
   (standard pages), .hero-image-container (/music/, /casting/) and
   .inv-header-hero (investor sub-pages fused with their header panel). */
.landing-hero-image,
.hero-image-container {
    position: relative;
    overflow: visible;
}

/* Scrim at full strength. Three layers rather than one flat wash: a light top
   veil to seat the frame, a heavy bottom band under the title, and a soft
   centre pool so a bright subject mid-frame cannot compete with the type. */
.hero-slideshow::after,
.hero-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(11, 6, 8, .55) 0%, transparent 38%),
        linear-gradient(0deg,   rgba(11, 6, 8, .95) 0%, transparent 62%),
        radial-gradient(ellipse 70% 60% at 50% 62%, rgba(11, 6, 8, .6), transparent 72%);
}

/* /music/ and /casting/ still run a single <img> hero rather than a
   slideshow, so the scrim goes on the container and has to round its own top
   corners — there is no .hero-slideshow there to inherit them from. */
.hero-image-container::after {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.hero-title-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;              /* above the scrim; below .hero-badge at 10 */
    padding: 0 var(--spacing-lg) var(--spacing-md);
    text-align: center;
    pointer-events: none;    /* nothing in here is interactive */
}

/* Bottom-anchored, so a title that runs long grows UP over the footage rather
   than down through the seam. .landing-hero-image is overflow:visible, so it
   is never clipped either way. */
.hero-title-overlay h1 {
    margin: 0;
    /* White with the reddish glow — the site-wide h1 treatment from
       typography.css. Several pages fill their hero h1 with the brand gradient
       via background-clip, which leaves the glow applied to transparent type;
       undo that here so the title reads as lit white against the video. */
    background: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* The homepage carries the handwritten motto with the wordmark, so it travels
   into the frame too and keeps its tucked-in spacing. */
.hero-title-overlay .cemi-motto {
    margin: -1.15rem 0 -0.15rem;
}

/* Where something straddles the seam, the title clears it instead of sitting
   behind it. Written against the seam element rather than the container, so it
   holds for .hero-badge, the investor .inv-eyebrow and the artist .artist-type
   alike, and no page needs an extra class. */
:has(> .hero-badge) > .hero-title-overlay,
:has(> .inv-eyebrow) > .hero-title-overlay,
:has(> .artist-type) > .hero-title-overlay {
    padding-bottom: calc(var(--spacing-md) + 1.5rem);
}

/* The line below the frame no longer needs to clear a title above it. */
.landing-hero > h1 + .intro,
.landing-hero > h1 + .subtitle,
.landing-hero > h1 + .tagline {
    margin-top: 0;
}

@media (max-width: 720px) {
    /* A 32:9 frame is only ~98px tall at 390px wide. Sentence-length titles
       wrap to three or four lines there, so the overlaid h1 steps down well
       below the page default. */
    .hero-title-overlay {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
    }
    .hero-title-overlay h1 {
        font-size: clamp(1.15rem, 5.2vw, 1.7rem);
        line-height: 1.2;
    }
    .hero-title-overlay .cemi-motto {
        margin: -0.5rem 0 -0.1rem;
    }
    :has(> .hero-badge) > .hero-title-overlay,
    :has(> .inv-eyebrow) > .hero-title-overlay,
    :has(> .artist-type) > .hero-title-overlay {
        padding-bottom: calc(var(--spacing-sm) + 1.1rem);
    }
}