/* ==========================================================================
   HOMEPAGE HERO — [sy_hero]

   Replaces the Slider Revolution module. Sizing here is pure CSS with no
   JavaScript, which is the point:

   SR's Full Screen layout computed the module height in pixels from
   window.innerHeight and re-ran on every resize event. Mobile browsers fire
   resize when the address bar hides during a scroll, so the hero rewrote its
   own height mid-scroll — the shaking — and the same setting made it far too
   tall on a phone.

   Two units do the work, and neither can be moved by scrolling:

     svh  (desktop) — the SMALL viewport height: the height with browser chrome
                      VISIBLE. It is a fixed number. Its sibling dvh is the one
                      that tracks the address bar, and is exactly what must be
                      avoided here.

     vw   (mobile)  — a percentage of the hero's own WIDTH, so it sets a shape
                      rather than a screen fraction. 100 = square, 95 = slightly
                      wider than tall (matches the reference site), 75 = 4:3.

   Both values, plus the scrim, come in as custom properties on the element
   from Customize > SY Sections > Hero. Nothing here needs editing to retune.
   ========================================================================== */

.sy-hero {
    /* Fallbacks if the shortcode's inline values are ever missing. */
    --sy-hero-height: 92svh;
    --sy-hero-shape: 95vw;
    --sy-hero-scrim: 0.22;

    position: relative;
    /*
     * Full-bleed. Elementor's containers are boxed by default, which left the
     * hero inset from both edges. Breaking out to the viewport here means it
     * spans the screen whatever the wrapper does, and no layout setting has to
     * be hunted for in the editor.
     *
     * Safe against a horizontal scrollbar: the theme already sets
     * body { overflow: hidden }, so the extra width from 100vw is clipped.
     */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: var(--sy-hero-height);
    overflow: hidden;
    background: #1a1714;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Older browsers without svh support fall back to vh, which is close enough
   on desktop where the address bar does not collapse. */
@supports not (height: 1svh) {
    .sy-hero {
        height: 92vh;
    }
}


/* --- Media ---------------------------------------------------------------- */

.sy-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sy-hero-video,
.sy-hero-still {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    max-width: none;
}

.sy-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, calc(var(--sy-hero-scrim) * 1.4)) 0%,
            rgba(0, 0, 0, calc(var(--sy-hero-scrim) * 0.5)) 38%,
            rgba(0, 0, 0, calc(var(--sy-hero-scrim) * 1.2)) 100%
        );
}


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

.sy-hero-content {
    position: relative;
    z-index: 2;
    width: min(90vw, 1100px);
    text-align: center;
    color: #fff;
    padding: 0 16px;
}

.sy-hero-title {
    margin: 0 !important;
    color: #fff !important;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 300;
    font-size: clamp(32px, 5.2vw, 80px);
    line-height: 1.06;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    /* The old SR layer carried an inline white-space:nowrap, which is what
       clipped this line to "SY LUXURY LIVING STU" on narrow phones. */
    white-space: normal;
    text-wrap: balance;
}

.sy-hero-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-top: clamp(14px, 1.6vw, 26px);
    font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(10.88px, 0.9vw, 13.6px);
    letter-spacing: 0.42em;
    text-indent: 0.42em; /* Balances the trailing letter-space. */
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.sy-hero-rule {
    display: block;
    width: clamp(22px, 3vw, 46px);
    height: 1px;
    background: rgba(255, 255, 255, 0.65);
    flex: 0 0 auto;
}


/* --- Mobile: sized by shape, not by screen height ------------------------- */

@media (max-width: 767px) {
    .sy-hero {
        height: var(--sy-hero-shape);
    }

    .sy-hero-title {
        font-size: clamp(24px, 7.4vw, 38.4px);
        letter-spacing: 0.1em;
    }

    .sy-hero-sub {
        gap: 10px;
        letter-spacing: 0.34em;
        text-indent: 0.34em;
        font-size: 10.56px;
    }
}


/* --- Reduced motion -------------------------------------------------------
   The video is decorative. When motion is unwelcome, hold the poster frame
   instead — sections.js pauses playback to match. */
@media (prefers-reduced-motion: reduce) {
    .sy-hero-video {
        /* Poster stays visible while paused. */
        animation: none;
    }
}


/* --- Gaps above and below --------------------------------------------------
   The hero should meet the header with nothing between them, and hand straight
   over to the section beneath it.

   Three separate things put a band above it: Elementor gives its containers
   default padding, the widget wrapper carries a margin, and the theme pads the
   top of #content. Each is cleared only where a hero is actually present, so
   nothing else on the site loses its spacing. */
.elementor-widget-shortcode:has(.sy-hero),
.elementor-widget:has(.sy-hero),
.e-con:has(.sy-hero),
.elementor-section:has(.sy-hero),
.elementor-container:has(.sy-hero),
.elementor-column:has(.sy-hero),
.elementor-widget-wrap:has(.sy-hero) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

.site-content:has(.sy-hero) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.sy-hero {
    margin-top: 0 !important;
}

.sy-hero + * {
    margin-top: 0 !important;
}