/**
 * Flamingo Marine — ROVE Size Showcase ("Product Presentation" comp / Image 2).
 *
 * Each slide is a self-contained, rounded PHOTOGRAPHIC PANEL: a real beach /
 * turquoise-water scene (media 16) as the base layer, the boat sitting in the
 * water, and the giant "ROVE NN'" headline + dark CTA + subtitle overlaid on top.
 * The section frames the panel in dark navy. The carousel cross-fades through the
 * three sizes (22'/24'/26' — "three panels"); only the headline number changes
 * because all three reuse the one available boat cutout (media 84) for now.
 *
 * Text/boat are positioned as PERCENTAGES of the panel (its height is set by the
 * beach image's aspect), and the headline is sized with container query units
 * (cqi) so it scales to the PANEL width, not the viewport — the panel is capped
 * well below wide-screen widths, so vw-based type would overflow it.
 */

.flm-rove-showcase {
    background-color: var(--wp--preset--color--surface-deep);
    overflow: hidden;
}

.flm-rove-showcase__inner {
    position: relative;
    /* Full-bleed: the beach panel spans the whole viewport width, no margins. */
    max-width: none;
    margin-inline: auto;
    padding: 0;
}

/* --- Cycling stage ------------------------------------------------------ */

.flm-rove-showcase__stage {
    position: relative;
}

/* Each slide is a full-bleed photographic panel and a query container so its
   overlaid headline scales to the panel width. */
.flm-rove-showcase__slide {
    container-type: inline-size;
    position: relative;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
}

/* Inactive slides stack behind the active one (which holds the panel height). */
.flm-rove-showcase__slide:not(.is-active) {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Cross-fade (matches the prototype ~360ms size-swap); JS owns the choreography. */
.flm-rove-showcase__slide {
    opacity: 1;
    transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.flm-rove-showcase__slide.is-entering,
.flm-rove-showcase__slide.is-leaving {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .flm-rove-showcase__slide {
        transition: none;
    }
}

/* --- Panel layers ------------------------------------------------------- */

/* Beach backdrop — base layer; its intrinsic ratio drives the panel height. */
.flm-rove-showcase__bg {
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
}

/* Boat — sits in the water, lower-centre, grounded with a soft shadow. The one
   side-profile cutout we have; reused across sizes (see pattern asset note). */
.flm-rove-showcase .flm-rove-showcase__boat {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    width: 90%;
    margin: 0;
}

.flm-rove-showcase .flm-rove-showcase__boat img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.28));
}

/* Headline + CTA share ONE centred row so the button always sits BESIDE the
   headline with a gap — never overlapping the type — at any headline width. */
.flm-rove-showcase__head {
    position: absolute;
    z-index: 3;
    top: 20%;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end; /* CTA drops to the headline's lower edge, by the apostrophe */
    justify-content: center;
    gap: clamp(0.75rem, 1.5cqi, 1.75rem);
    padding-inline: var(--wp--preset--spacing--lg);
}

/* ENORMOUS thin Plex display in soft slate, sized to the panel via cqi. */
.flm-rove-showcase .flm-rove-showcase__headline {
    margin: 0;
    color: #39474f; /* soft slate to match the comp (not full navy) */
    font-family: var(--wp--preset--font-family--plex);
    font-size: clamp(2.25rem, 8cqi, 6.5rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-wrap: nowrap;
}

/* CTA — DARK fill on the light sky, beside the headline. */
.flm-rove-showcase .wp-block-buttons {
    flex: 0 0 auto;
    margin: 0 0 1.5cqi 0; /* lift to ~the headline's lower third, like the comp */
}

.flm-rove-showcase .flm-rove-showcase__cta .wp-block-button__link {
    background-color: var(--wp--preset--color--surface-deep);
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--plex);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--caption);
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding-block: var(--wp--preset--spacing--sm);
    padding-inline: var(--wp--preset--spacing--lg);
    transition: background-color 150ms ease;
}

.flm-rove-showcase .flm-rove-showcase__cta .wp-block-button__link:hover,
.flm-rove-showcase .flm-rove-showcase__cta .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--surface-elev-3);
}

/* Subtitle — small slate caption near the panel's lower edge, pink underline accent. */
.flm-rove-showcase .flm-rove-showcase__subtitle {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 4%;
    margin: 0;
    color: #39474f;
    font-family: var(--wp--preset--font-family--plex);
    font-size: clamp(0.85rem, 1.6cqi, 1.15rem);
    font-weight: 400;
    padding-bottom: 0.9rem;
}

.flm-rove-showcase .flm-rove-showcase__subtitle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 96px;
    height: 2px;
    background-color: var(--wp--preset--color--accent-pink);
}

/* --- Chevron nav -------------------------------------------------------- */

/* Light circular chevrons in the dark margin beside the panel (over the panel
   edge on narrow screens). Hidden until JS upgrades the section. */
.flm-rove-showcase__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    color: var(--wp--preset--color--surface-deep);
    background-color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(27, 42, 58, 0.18);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 150ms ease, transform 150ms ease;
}

.flm-rove-showcase[data-flm-rove-ready] .flm-rove-showcase__nav {
    display: inline-flex;
}

.flm-rove-showcase__nav svg {
    display: block;
}

.flm-rove-showcase__nav--prev {
    left: clamp(0.75rem, 2vw, 2.5rem);
}

.flm-rove-showcase__nav--next {
    right: clamp(0.75rem, 2vw, 2.5rem);
}

.flm-rove-showcase__nav:hover,
.flm-rove-showcase__nav:focus-visible {
    background-color: rgba(255, 255, 255, 0.95);
}

.flm-rove-showcase__nav:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-pink);
    outline-offset: 2px;
}

.flm-rove-showcase__nav:active {
    transform: translateY(-50%) scale(0.94);
}

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

@media (max-width: 767px) {
    .flm-rove-showcase__inner {
        padding-inline: var(--wp--preset--spacing--md);
    }

    /* The landscape beach panel is too short on a phone to overlay headline + CTA +
       boat without collisions, so the panel goes PORTRAIT (bg cropped to cover) and
       the overlays reflow into a clean vertical stack: headline → CTA → boat →
       subtitle. */
    .flm-rove-showcase__slide {
        aspect-ratio: 4 / 5;
    }

    .flm-rove-showcase__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Headline + CTA stack vertically (no room for them side by side on a phone). */
    .flm-rove-showcase__head {
        top: 8%;
        flex-direction: column;
        gap: var(--wp--preset--spacing--sm);
    }

    .flm-rove-showcase .flm-rove-showcase__headline {
        font-size: clamp(1.9rem, 13cqi, 3.25rem);
    }

    .flm-rove-showcase .wp-block-buttons {
        margin: 0;
    }

    .flm-rove-showcase .flm-rove-showcase__cta .wp-block-button__link {
        padding-inline: var(--wp--preset--spacing--md);
    }

    /* Boat centred in the lower-middle, clear of both the CTA and the subtitle. */
    .flm-rove-showcase .flm-rove-showcase__boat {
        width: 94%;
        bottom: 16%;
    }

    .flm-rove-showcase .flm-rove-showcase__subtitle {
        bottom: 6%;
    }

    .flm-rove-showcase__nav {
        width: 2.4rem;
        height: 2.4rem;
    }
}