/**
 * Flamingo Marine — Full-bleed video hero (V4 strip-1).
 *
 * Tier-2 interactive: muted/looping autoplay video with a thin white progress
 * bar pinned bottom-right (~30% of hero width) that fills linearly as the video
 * plays. JS (hero-fullbleed-video.js) drives the fill width off `timeupdate`;
 * CSS here owns layout, the overlay headline treatment, and the bar's resting
 * appearance. The fill resets to 0 on each loop — no transition is applied so
 * the snap-back is instantaneous rather than animating backwards.
 */

.flm-hero-video {
    position: relative;
    /* Tall full-bleed hero (V4 strip-1): fill the first viewport beneath the
       80px sticky header so the video frame reads at the mockup's proportions.
       Overrides the cover block's inline min-height:624px floor. svh keeps the
       hero from jumping when mobile browser chrome collapses. */
    min-height: calc(100svh - 180px) !important;
}

/* Bottom-left overlay headline: large bold IBM Plex Sans anchored to the
   lower-left of the video. The cover block's `bottom left` content position
   handles flex alignment (align-items:flex-end / justify-content:flex-start);
   here we set the breathing room from the bottom + left edges. */
.flm-hero-video .wp-block-cover__inner-container {
    /* Sit low near the bottom edge, clear of the progress bar. Left padding
       aligns the headline with the content column (≈ root padding + column
       offset, ~50px @1280) per strip-1, instead of jamming it to the edge. */
    padding-bottom: 3.5rem;
    /* Proportional left inset matching the content sections' left edge
       (margin = max(4vw, 50vw - 920px) — i.e. 4% until the 1840px content
       cap kicks in above ~2000px), so hero text shares one left edge with
       every section at any viewport width. */
    padding-left: calc(max(4vw, 50vw - 920px) - 20px);
    row-gap: 0;
}

.flm-hero-video h1.wp-block-heading {
    font-family: var(--wp--preset--font-family--plex);
    font-weight: 700;
    font-size: 4.3125rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* Scoped to .home (the ROVE hero shares .flm-hero-video): the headline must
   always break 5 words over 4 ("The New Standard for Time" / "Together on the
   Water."). Line 1 measures ~12.4em, so a 13em cap fits it but never fits
   "…Time Together". The em cap only holds if the type also shrinks with the
   viewport, so the block's fluid font-size (whose 2.337rem floor stops scaling
   below ~1000px) gains a 7vw ceiling — !important beats the inline style. */
.home .flm-hero-video h1.wp-block-heading {
    font-size: min(clamp(2.337rem, 2.337rem + ((1vw - 0.2rem) * 2.47), 4.313rem), 6.6vw) !important;
    max-width: 13em;
}

/* "Meet the [rOVE logomark]": the words and the logo share one baseline.
   The logo height tracks the headline cap height so it reads as part of the
   line; align-items:baseline rests it on the text baseline like a word. */
.flm-hero-video__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.32em;
    row-gap: 0.1em;
}

.flm-hero-video__rove {
    height: 0.74em;
    width: auto;
    display: inline-block;
    transform: translateY(0.04em); /* optical seat onto the text baseline */
}

/* Subtitle lead lines: tightly stacked under the headline (strip-1 shows the
   two lines consecutive, not gapped), 18px, with the second line bold. */
.flm-hero-video .wp-block-cover__inner-container p.flm-hero-video__lead {
    font-size: 1.375rem;
    line-height: 1.45;
    margin-block: 0;
}

/* Progress bar: thin track pinned bottom-right, ~30% of hero width. Fill is
   accent pink — "forward movement / action" (BugHerd #174). */
.flm-hero-video__progress {
    position: absolute;
    right: var(--wp--style--root--padding-right, 2rem);
    bottom: 1.75rem;
    width: 30%;
    max-width: 420px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.25);
    z-index: 2;
    pointer-events: none;
}

.flm-hero-video__progress-fill {
    width: 0;
    height: 100%;
    background-color: var(--wp--preset--color--accent-pink);
    /* No transition: width is set continuously from `timeupdate`, and the loop
       reset must snap to 0 instantly rather than easing back across the bar. */
}

/* --- Homepage hero: bright + warm, no overlay (BugHerd #8) --------------- */
/* Scoped to .home so the ROVE-page hero (which shares .flm-hero-video) keeps
   its own untouched treatment. The dark dim span was removed from the markup;
   these rules supply the warm grade and hold text legibility without it. */
.home .flm-hero-video__media {
    /* Warm, slightly brighter grade in lieu of re-encoding the source clip:
       sepia + a small negative hue-rotate nudge the water toward golden-hour,
       while brightness/saturate lift it without washing the highlights out. */
    filter: brightness(1.05) saturate(1.12) sepia(0.12) hue-rotate(-8deg);
}

/* Legibility without an overlay: a soft shadow carries the white headline and
   leads over the now-undimmed, brighter footage. */
.home .flm-hero-video h1.wp-block-heading,
.home .flm-hero-video .flm-hero-video__lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 22px rgba(0, 0, 0, 0.45);
}

/* Tablet: pull the overlay headline down from desktop display size so it
   doesn't dominate the video frame. */
@media (max-width: 1279px) {
    .flm-hero-video h1.wp-block-heading {
        font-size: var(--wp--preset--font-size--heading-one) !important;
    }
}

@media (max-width: 767px) {
    .flm-hero-video__progress {
        /* Slightly wider on mobile so the bar stays legible at narrow widths. */
        width: 40%;
        right: 1.25rem;
        bottom: 1.25rem;
    }

    .flm-hero-video h1.wp-block-heading {
        font-size: var(--wp--preset--font-size--heading-two-mobile) !important;
    }

    .flm-hero-video .wp-block-cover__inner-container {
        /* Extra clearance above the bottom progress bar at narrow widths. */
        padding-bottom: 3rem;
    }

    /* Homepage hero only (not the ROVE page hero, which shares .flm-hero-video):
       move the overlay text lower. Both lead lines show — the old rule hiding
       all-but-last dated from the 3-line hero copy and was dropping
       "The New Standard…" after the corp #2 rewrite (client punch list 2026-08-05). */
    .home .flm-hero-video .wp-block-cover__inner-container {
        padding-bottom: 1.5rem;
    }
    /* Lead lines at phone width: 22px read huge and clipped (BugHerd #203
       follow-up comment) — step down and let long lines wrap comfortably. */
    .flm-hero-video .wp-block-cover__inner-container p.flm-hero-video__lead {
        font-size: 1.0625rem;
        line-height: 1.5;
        max-width: 92%;
    }
}