/* ==========================================================================
   Homepage Trailer Spotlight
   Every rule in this file is scoped under .suncoast-homepage-spotlight.
   Reuses existing theme design tokens (see style.css :root) rather than
   inventing a parallel token set.

   Visual direction: one dominant featured Trailer per slide, open
   editorial two-column composition (content left, large image right),
   minimal chrome, restrained specification rows, black quote CTA, and
   centered minimal navigation below the slide. No boxed outer card.
   ========================================================================== */

.suncoast-homepage-spotlight {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.suncoast-homepage-spotlight__container {
    width: 100%;
}

/* --------------------------------------------------------------------
   Track (the only horizontally scrollable element)
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__track {
    position: relative; /* Establishes the offsetParent slides measure against. */
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.suncoast-homepage-spotlight__track:focus-visible {
    outline: none;
    box-shadow: var(--sc-focus-ring);
}

/* Hide the scrollbar only once JavaScript enhancement succeeds. Native
   scrolling itself is never disabled (overflow-x remains "auto"). The
   no-JS baseline keeps the native scrollbar visible. */
.suncoast-homepage-spotlight.is-enhanced .suncoast-homepage-spotlight__track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.suncoast-homepage-spotlight.is-enhanced .suncoast-homepage-spotlight__track::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* --------------------------------------------------------------------
   Slides — one full-width slide at a time, no boxed card styling.
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__slide {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.suncoast-homepage-spotlight__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "media"
        "header"
        "content";
    gap: var(--sc-space-xl);
    padding-top: var(--sc-space-md);
    padding-bottom: var(--sc-space-xs);
}

.suncoast-homepage-spotlight__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    margin: 0;
}

/* --------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-xs);
    min-width: 0;
}

.suncoast-homepage-spotlight__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    margin: 0;
}

.suncoast-homepage-spotlight__type-badge {
    color: var(--sc-color-dark);
    font-family: var(--sc-font-trailer-button);
    font-size: var(--sc-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
}

.suncoast-homepage-spotlight__sku {
    color: var(--sc-color-muted);
    font-family: var(--sc-font-trailer-button);
    font-size: var(--sc-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.suncoast-homepage-spotlight__type-badge + .suncoast-homepage-spotlight__sku {
    padding-left: 0.5rem;
    border-left: 1px solid var(--sc-color-border);
}

.suncoast-homepage-spotlight__title {
    margin: 0;
    font-family: var(--sc-font-trailer-heading);
    font-weight: 500;
    font-size: clamp(2.25rem, 3vw, 2.625rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #111111;
    min-width: 0;
}

.suncoast-homepage-spotlight__title a {
    color: inherit;
    text-decoration: none;
}

.suncoast-homepage-spotlight__title a:hover,
.suncoast-homepage-spotlight__title a:focus {
    color: var(--sc-color-blue);
    text-decoration: underline;
}

.suncoast-homepage-spotlight__message {
    margin: 0;
    max-width: 30ch;
    font-family: var(--sc-font-trailer-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: #1f1f1f;
}

/* --------------------------------------------------------------------
   Feature rows — restrained definition list, thin dividers only.
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__features {
    margin: var(--sc-space-sm) 0 0;
    /* No max-width here at the base/stacked level: .content already
       stretches its flex children (default align-items: stretch) to its
       own full width, so leaving this unconstrained lets the feature
       rows and their divider lines span the full stacked content width
       instead of leaving unused white space beside them. The prior
       28rem cap is restored only at 1100px+ (see that block below) to
       preserve the existing desktop feature-row width unchanged. */
    display: flex;
    flex-direction: column;
}

.suncoast-homepage-spotlight__feature-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-md);
    padding-block: 0.65rem;
    border-bottom: 1px solid #cfcfcf;
}

.suncoast-homepage-spotlight__feature-label,
.suncoast-homepage-spotlight__feature-value {
    margin: 0;
}

.suncoast-homepage-spotlight__feature-label {
    font-family: var(--sc-font-trailer-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #333333;
}

.suncoast-homepage-spotlight__feature-value {
    font-family: var(--sc-font-trailer-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #111111;
    text-align: right;
}

/* --------------------------------------------------------------------
   CTA — black, not the orange pill used elsewhere on the site.
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__cta {
    /* var(--sc-space-2xl) here plus the .content flex gap (var(--sc-space-xs))
       above it combine to ~48px of total visual space between the last
       feature row and the CTA, landing at the recommended end of the
       approved 48-56px range rather than this margin alone. */
    margin-top: var(--sc-space-2xl);
}

.suncoast-homepage-spotlight__cta-button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.75rem;
    border: 2px solid transparent;
    border-radius: 2px;
    background: #111111;
    color: #ffffff;
    font-family: var(--sc-font-trailer-button);
    font-weight: 500;
    font-size: var(--sc-font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition: background-color var(--sc-transition), border-color var(--sc-transition), color var(--sc-transition);
}

.suncoast-homepage-spotlight__cta-button:hover {
    background: #111111;
    border-color: transparent;
    color: #f5c518;
    text-decoration: none;
    box-shadow: none;
}

.suncoast-homepage-spotlight__cta-button:focus-visible {
    outline: none;
    background: #111111;
    border-color: transparent;
    box-shadow: 0 0 0 3px #f5c518;
}

/* --------------------------------------------------------------------
   Image column — dominant, contained, no crop.
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__media {
    grid-area: media;
    position: relative;
    min-height: 220px;
    background: transparent;
    overflow: hidden;
}

.suncoast-homepage-spotlight__image-link {
    position: absolute;
    inset: 0;
    display: block;
}

.suncoast-homepage-spotlight__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.suncoast-homepage-spotlight__image-link--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.suncoast-homepage-spotlight__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sc-space-md);
    background: var(--sc-color-light);
    color: var(--sc-color-muted);
    font-size: var(--sc-font-size-sm);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------
   Controls — centered below the slide: [ previous ] [ dots ] [ next ].
   Hidden until JavaScript enhancement succeeds (no-JS keeps native
   scrolling only, per the no-JS contract).
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__controls {
    display: none;
}

.suncoast-homepage-spotlight.is-enhanced .suncoast-homepage-spotlight__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-md);
    margin-top: var(--sc-space-md);
}

/* Rotation control is first in DOM (accessible order) and first visually
   in the centered controls row. No positive tabindex. */
.suncoast-homepage-spotlight__autoplay {
    order: 0;
}

.suncoast-homepage-spotlight__previous {
    order: 1;
}

.suncoast-homepage-spotlight__dots {
    order: 2;
}

.suncoast-homepage-spotlight__next {
    order: 3;
}

.suncoast-homepage-spotlight__autoplay,
.suncoast-homepage-spotlight__previous,
.suncoast-homepage-spotlight__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: #111111;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--sc-transition), color var(--sc-transition), background-color var(--sc-transition);
}

.suncoast-homepage-spotlight__autoplay-icon {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent currentColor;
}

.suncoast-homepage-spotlight__autoplay:not(.is-paused) .suncoast-homepage-spotlight__autoplay-icon {
    width: 10px;
    height: 12px;
    border: 0;
    background:
        linear-gradient(currentColor, currentColor) left / 3px 100% no-repeat,
        linear-gradient(currentColor, currentColor) right / 3px 100% no-repeat;
}

.suncoast-homepage-spotlight__autoplay:hover,
.suncoast-homepage-spotlight__previous:hover,
.suncoast-homepage-spotlight__next:hover {
    border-color: var(--sc-color-border);
    background: var(--sc-color-light);
    color: #111111;
}

.suncoast-homepage-spotlight__autoplay:focus-visible,
.suncoast-homepage-spotlight__previous:focus-visible,
.suncoast-homepage-spotlight__next:focus-visible {
    outline: none;
    border-color: transparent;
    background: var(--sc-color-light);
    box-shadow: var(--sc-focus-ring);
}

.suncoast-homepage-spotlight.has-reduced-motion-autoplay .suncoast-homepage-spotlight__autoplay,
.suncoast-homepage-spotlight__autoplay[hidden] {
    display: none;
}

.suncoast-homepage-spotlight__previous:disabled,
.suncoast-homepage-spotlight__next:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: transparent;
    background: transparent;
    color: var(--sc-color-muted);
}

.suncoast-homepage-spotlight__dots {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.suncoast-homepage-spotlight__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.suncoast-homepage-spotlight__dot::before {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #c4c4c4;
    transition: background-color var(--sc-transition), transform var(--sc-transition);
}

.suncoast-homepage-spotlight__dot:hover::before {
    background: var(--sc-color-muted);
}

.suncoast-homepage-spotlight__dot[aria-current="true"]::before {
    background: #111111;
    transform: scale(1.2);
}

.suncoast-homepage-spotlight__dot:focus-visible {
    outline: none;
    box-shadow: var(--sc-focus-ring);
    border-radius: 50%;
}

/* --------------------------------------------------------------------
   Screen-reader status
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__status {
    margin: 0;
}

/* --------------------------------------------------------------------
   Stacked composition (base, < 1100px): grid areas place media, then
   header, then content. Full-width single slide with comfortable side
   padding. Applies through mobile and tablet widths — see the 1100px+
   block below for where the side-by-side desktop layout begins.
   -------------------------------------------------------------------- */

.suncoast-homepage-spotlight__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.suncoast-homepage-spotlight__container {
    padding-inline: var(--sc-gutter);
}

/* --------------------------------------------------------------------
   Stacked slide gutter (< 1100px): each slide's flex-basis is exactly
   100% of the track's own content width, and scroll-snap-align: start
   anchors each slide flush with the track's visible edge at rest — so
   this gap is never visible as a resting-state preview of the next
   slide. It only becomes visible as breathing room while the user is
   actively scrolling between two full slides. Applied as a flex `gap`
   on the track itself (not a margin/padding on the slide) so it never
   changes any slide's own offsetWidth/offsetLeft math; the JS's
   target.offsetLeft (see homepage-spotlight.js scrollToSlide()) and
   getBoundingClientRect() (see detectActiveIndex()) both already
   measure real, rendered box positions, and flex `gap` is included in
   that native layout automatically, so no JS change is needed. Reverts
   to the existing gap: 0 (declared on .track above) at 1100px+, where
   the accepted side-by-side composition already reads as clearly
   separated slides without added space.
   -------------------------------------------------------------------- */

@media (max-width: 1099px) {
    .suncoast-homepage-spotlight__track {
        gap: clamp(2rem, 8vw, 4rem);
    }
}

/* --------------------------------------------------------------------
   Tablet/mid-width typography only (700px+): Anthony's larger editorial
   body sizing for the message and feature labels applies from this
   breakpoint up, independent of the column layout below. This never
   controls stacking/columns; the stacked (single-column) composition
   from the base/mobile rules above continues to apply visually all the
   way through 1099px (see the 1100px+ block below) even though this
   larger type already applies starting here. Narrow mobile keeps the
   smaller (but never below 1rem) base sizing declared above.
   -------------------------------------------------------------------- */

@media (min-width: 700px) {
    .suncoast-homepage-spotlight__message,
    .suncoast-homepage-spotlight__feature-label {
        font-size: 1.125rem;
    }
}

/* --------------------------------------------------------------------
   Desktop (1100px+): side-by-side two-column layout begins here using
   the accepted 30/70 ratio directly. Deliberately not 1024px or 1120px:
   1024px is a common tablet/iPad landscape width, so the stacked
   (mobile-style) composition from the base rules above is kept all the
   way through 1099px to guarantee tablet widths never receive a cramped
   side-by-side layout. The larger 1200px+ image scale/bottom-anchor
   treatment (below) intentionally does not start until 1200px, so this
   1100-1199px range keeps the original absolute-fill + object-fit:
   contain + centered image behavior (inherited unchanged from the base
   .suncoast-homepage-spotlight__image-link / .suncoast-homepage-spotlight__image
   rules above) at a restrained media height instead of the wide-desktop
   500px floor.
   -------------------------------------------------------------------- */

@media (min-width: 1100px) {
    /* Full-width header row (title + Type/SKU) above the accepted 30/70
       content/media row. Column track sizing matches the prior flex
       floor/cap contract: content minmax(250px, 30%), media minmax(0, 70%). */
    .suncoast-homepage-spotlight__inner {
        grid-template-columns: minmax(250px, 30%) minmax(0, 70%);
        grid-template-areas:
            "header header"
            "content media";
        align-items: stretch;
        column-gap: var(--sc-space-3xl);
        row-gap: var(--sc-space-md);
    }

    .suncoast-homepage-spotlight__content {
        justify-content: flex-start;
    }

    .suncoast-homepage-spotlight__media {
        align-self: start;
        aspect-ratio: auto;
        min-height: 320px;
    }

    /* Restore the pre-existing desktop feature-row width cap now that the
       base/stacked rule above is intentionally unconstrained; the 30%
       content column here is already narrower than 28rem in ordinary
       Spotlight widths, so this preserves the accepted desktop appearance
       unchanged rather than widening the specification rows. */
    .suncoast-homepage-spotlight__features {
        max-width: 28rem;
    }

    /* Restore the natural auto-width, left-aligned desktop CTA; the
       full-width mobile/tablet treatment below this breakpoint (see the
       base .suncoast-homepage-spotlight__cta-button rule above) no
       longer applies here. */
    .suncoast-homepage-spotlight__cta-button {
        width: auto;
    }
}

/* --------------------------------------------------------------------
   Wide desktop (1200px+): the accepted large-image scale/bottom-anchor
   treatment. Column ratio (30/70) is unchanged from the 1100px block
   above; only the image's own sizing/positioning is refined further.
   -------------------------------------------------------------------- */

@media (min-width: 1200px) {
    /* The media box becomes a small flex container of its own here so the
       Trailer image can be sized from its own intrinsic ratio (below)
       instead of being forced to fill this box's height. align-items:
       flex-start keeps the image at the top of the media column so it
       aligns with the content column start (message / features / CTA).
       The media grid item itself uses align-self: start (1100px+ rule)
       so it does not stretch and then bottom-anchor the image.
       min-height is raised from the 960px floor to ~500px: at the
       accepted 70% desktop column width (roughly 896px on a 1280px
       Spotlight), a representative Trailer photo (measured source
       1072x603, ratio ~1.78) renders at roughly 896 / 1.78 ~= 504px tall.
       Flooring the box at that height preserves the accepted dominant
       image scale; overflow: hidden on .media remains a safety net for
       unusually tall outlier photos. */
    .suncoast-homepage-spotlight__media {
        min-height: 500px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    /* Real Trailer image only — never the missing-image placeholder,
       which keeps its own position: absolute; inset: 0; centering
       (declared with the placeholder-specific classes above) unaffected
       by this override. The image now sizes to the full media-column
       width with a proportional (intrinsic-ratio) height instead of
       being stretched to the box's height, which previously made
       object-fit: contain shrink it to fit the box's height and left the
       sides letterboxed well inside the accepted 70% column. */
    .suncoast-homepage-spotlight__image-link:not(.suncoast-homepage-spotlight__image-link--placeholder) {
        position: static;
        display: block;
        width: 100%;
    }

    .suncoast-homepage-spotlight__image {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center bottom;
    }
}

/* --------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .suncoast-homepage-spotlight__track {
        scroll-behavior: auto;
    }

    .suncoast-homepage-spotlight__dot::before,
    .suncoast-homepage-spotlight__autoplay,
    .suncoast-homepage-spotlight__previous,
    .suncoast-homepage-spotlight__next {
        transition: none;
    }

    .suncoast-homepage-spotlight__autoplay {
        display: none;
    }
}