/**
 * Flamingo Marine — Exceptional CTA (V4 strip-4, middle band).
 *
 * Layout: dark-navy band with a left-aligned two-line bold headline — line 1
 * white ("Exceptional from every angle."), line 2 muted ("See for yourself.") —
 * over an outlined-white "BUILD YOUR ROVE" button. The inner column is
 * constrained (640px) and left-justified so the block reads as a left rail.
 *
 * The button itself inherits the .is-style-outlined-white variation styling
 * (white border, transparent fill, white text, uppercase) from header.css via
 * its global `.is-style-outlined-white > .wp-block-button__link` selector, which
 * is enqueued site-wide. No button rules are duplicated here.
 *
 * Tier-1 static — desktop layout first; responsive padding lands with the band
 * sweep in P3.18.
 */

.flm-cta-left .flm-cta-left__headline {
    margin: 0;
    font-family: var(--wp--preset--font-family--plex);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--text-primary);
}

/* Second headline line — same weight/size, muted gray. */
.flm-cta-left .flm-cta-left__headline .flm-cta-left__headline-muted {
    color: var(--wp--preset--color--text-muted);
}

/* Header bar — headline on the left, "Build your ROVE" button on the right.
   (WP's flex layout supplies justify/align; the gap keeps them apart when the
   row is tight, and lets them wrap cleanly on narrow screens.) */
.flm-cta-left .flm-cta-left__bar {
    gap: var(--wp--preset--spacing--lg);
}

/* The button sits in the bar now — no extra top margin pushing it down. */
.flm-cta-left .flm-cta-left__bar .flm-cta-left__buttons {
    margin-top: 0;
}

/* --- 3D model viewer (Sketchfab embed) ---------------------------------- */

/* Spans the full section content width (min(92vw,1840px)) and is centered by
   the constrained layout — same left/right margins as every other section. */
.flm-cta-left .flm-cta-left__viewer {
    width: 100%;
    /* More breathing room between the title row and the 3D module (BugHerd #17;
       was xl / 24px, read as cramped against the large viewer). */
    margin-top: clamp(2rem, 3vw, 3rem);
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background-color: #0e1117; /* dark fill while the model loads */
}

.flm-cta-left .rOve-configurator {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* "Drag to rotate" hint pill (BugHerd #150) — floats over the viewer's bottom
   centre, never intercepts the pointer, and fades once the visitor actually
   grabs the model (viewer-hint.js adds .is-hidden on iframe focus). */
.flm-cta-left .flm-cta-left__viewer {
    position: relative;
}
.flm-cta-left .flm-cta-left__hint {
    position: absolute;
    left: 50%;
    bottom: 3.4rem; /* clears Sketchfab's bottom annotation-nav bar */
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(14, 17, 23, 0.72);
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--plex);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.flm-cta-left .flm-cta-left__hint.is-hidden {
    opacity: 0;
}

/* --- Responsive --------------------------------------------------------- */

/* Remove the 3D model section (Sketchfab viewer + its CTA band) on mobile — the
   heavy embed and its "see for yourself" framing don't work on phones. */
@media (max-width: 767px) {
    .flm-cta-left {
        display: none;
    }
}