/* ── Homepage Hero Spotlight Slideshow ────────────────────────────────────── */
/*
 * JS-driven spotlight. One state (position + radius), one requestAnimationFrame
 * loop, one source of truth. Mode switches (auto ↔ mouse) just change what the
 * loop lerps toward — no CSS animations to pause/resume/clobber.
 */

/* Kill the Elementor-baked home.webp background. */
.home .elementor-7 .elementor-element.elementor-element-6f27b36:not(.elementor-motion-effects-element-type-background),
.home .elementor-7 .elementor-element.elementor-element-6f27b36 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
}

/* Hide the mobile Elementor image widget (also home.webp). */
.home .elementor-element.elementor-element-25d3c85,
.home .elementor-element.elementor-element-ac253b5 {
    display: none !important;
}

/* Hero is sized EXACTLY to the viewport minus bottom breathing room, so the
   caption + cream edge always land above the fold. */
/* No height overrides on the hero — let it be whatever it wants. */

/* Admin bar steals 32px — .admin-bar + .home are both on <body>. */
.home .elementor-element.elementor-element-6f27b36 .e-con-inner {
    position: relative;
}

/* ── Stack: right side of the hero, filling top to bottom ───────────────── */

.gh-hero-stack {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    max-width: 580px;
    pointer-events: none;
    z-index: 2;
}

/* ── Photo slot — 1:1 square anchored at the top ───────────────────────── */

.gh-hero-stack__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: auto;
    display: block;
    text-decoration: none;
    cursor: pointer;
    /* Default clip-path — JS replaces this on first frame. */
    clip-path: circle(28% at 50% 50%);
    will-change: clip-path;
}
.gh-hero-cap { text-decoration: none; color: inherit; }
.gh-hero-cap:hover .gh-hero-cap__title { text-decoration: underline; text-decoration-color: var(--gh-text-light, #999); text-underline-offset: 4px; }

.gh-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms ease;
    will-change: opacity;
}

.gh-hero-slide.is-active {
    opacity: 1;
}

/* ── Caption — directly below the photo, outside the clip-path ─────────── */

/* Caption at the bottom of the stack (= bottom of hero). */
.gh-hero-stack__caption {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
}

.gh-hero-cap {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    opacity: 0;
    transition: opacity 500ms ease;
}

.gh-hero-cap.is-active {
    opacity: 1;
}

.gh-hero-cap__cat {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gh-text-light, #666);
    margin-bottom: 0.35rem;
}

.gh-hero-cap__title {
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--gh-text, #1a1a1a);
    font-weight: 400;
    font-style: italic;
}
.gh-hero-cap__meta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gh-text-light, #666);
}
.gh-hero-cap__sep { margin: 0 0.25rem; opacity: 0.5; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .gh-hero-slide { transition: none; }
    .gh-hero-stack__photo {
        clip-path: circle(32% at 50% 50%);
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Mobile: full-width crossfade slideshow (no spotlight). */
    .gh-hero-stack {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        display: block !important;
        /* Stack is first in DOM; with --flex-direction: column override on
           the hero, it naturally appears at the top. No order needed. */
    }
    .gh-hero-stack__photo {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        clip-path: none !important;
    }
    .gh-hero-slide {
        transition: opacity 1400ms ease;
    }
    .gh-hero-stack__caption {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0.75rem 1rem 0 !important;
    }
    /* Edge-to-edge + force a plain column flex so DOM order (stack first,
       text second) places the stack at the top of the hero. */
    .home .elementor-element.elementor-element-6f27b36 {
        --flex-direction: column !important;
        --padding-top: 0px !important;
        --padding-bottom: 20px !important;
        --padding-left: 0px !important;
        --padding-right: 0px !important;
        --row-gap: 0px !important;
        --gap: 0px 0px !important;
    }
    /* Text column keeps its own horizontal padding so headline/button
       don't touch the edges. */
    .home .elementor-element.elementor-element-3c63710 {
        --padding-left: 20px !important;
        --padding-right: 20px !important;
        --padding-top: 24px !important;
    }
    .home .elementor-element.elementor-element-be3bb25 {
        margin-top: 1.5rem !important;
    }
    /* Elementor's custom CSS hides the <br>s inside the headline on mobile,
       which pushes "THE GREENHOUSE ENSEMBLE" onto one line and clips on
       narrow phones. Re-enable them so the headline wraps naturally. */
    .home .elementor-element.elementor-element-be3bb25 .elementor-heading-title br {
        display: inline !important;
    }
}