/**
 * Homepage Hero Block - Frontend Styling
 * Targets the .homepage-hero-redesigned CSS class on the Row element.
 * Uses #html-body prefix to beat PageBuilder + Tailwind specificity.
 *
 * !important is ONLY used where PageBuilder/Glider.js set inline styles.
 *
 * Responsive strategy:
 *   - Row capped at 1600px to prevent extreme stretching on ultrawide
 *   - Height scales with viewport via clamp(250px, 26vw, 420px)
 *     → 250px minimum, ~380px at 1440px, 420px cap
 *   - Both images use cover + top center so tops are never cut off
 *   - Mobile (<768px): columns stack, banner uses contain + aspect-ratio
 */

/* ===== ROW CONTAINER ===== */
#html-body .homepage-hero-redesigned .row-full-width-inner {
    max-width: 2200px;
    margin: 0 auto;
    padding: 0;
}

/* ===== COLUMN LAYOUT ===== */
#html-body .homepage-hero-redesigned .pagebuilder-column-line {
    gap: 8px;
}

#html-body .homepage-hero-redesigned .pagebuilder-column {
    padding: 0;
    margin: 0;
}

#html-body .homepage-hero-redesigned .pagebuilder-column-line:first-child > .pagebuilder-column:first-child {
    width: 33.3333% !important;
    overflow: hidden;
    border-radius: 0;
}

#html-body .homepage-hero-redesigned .pagebuilder-column-line:first-child > .pagebuilder-column:last-child {
    width: 66.6667% !important;
    overflow: visible;
    border-radius: 0;
}

/* ===== RESPONSIVE HEIGHT =====
   clamp() scales proportionally with viewport width.
   Tuned to 27vw so the banner (475×380, in a 33% column) always fits:
   banner needs height = viewport × 0.3333 × 0.8 = viewport × 0.2667
   250px min → ~389px at 1440px → 430px max */
#html-body .homepage-hero-redesigned .pagebuilder-banner-wrapper,
#html-body .homepage-hero-redesigned .pagebuilder-poster-overlay,
#html-body .homepage-hero-redesigned .pagebuilder-slide-wrapper {
    min-height: clamp(250px, 27vw, 600px) !important;
}

/* ===== BANNER ===== */
#html-body .homepage-hero-redesigned .pagebuilder-banner-wrapper {
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat;
}

#html-body .homepage-hero-redesigned [data-content-type="banner"] {
    margin: 0;
    padding: 0;
}

/* ===== SLIDER ===== */
#html-body .homepage-hero-redesigned .pagebuilder-slider {
    position: relative;
    overflow: visible !important;
}

#html-body .homepage-hero-redesigned .pagebuilder-slide-wrapper {
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat;
}

#html-body .homepage-hero-redesigned .glider-slide {
    margin: 0 !important;
    padding: 0 !important;
}

#html-body .homepage-hero-redesigned .glider-track {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
}

#html-body .homepage-hero-redesigned [data-content-type="slide"] {
    margin: 0;
    padding: 0;
}

/* ===== CAROUSEL NAV OVERLAY =====
   PageBuilder sets inline display/position/dimensions on this element */
#html-body .homepage-hero-redesigned .pagebuilder-slider > .carousel-nav {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    pointer-events: none;
    flex: none;
    overflow: visible !important;
    min-height: 0 !important;
}

/* ===== ARROWS =====
   Glider.js sets inline display/visibility/opacity/position on arrows */
#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-prev,
#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-prev.hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    z-index: 15;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    color: #1a1919;
    text-decoration: none;
}

#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-next,
#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-next.hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    right: -50% !important;
    left: auto !important;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    z-index: 15;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    color: #1a1919;
    text-decoration: none;
}

#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-prev:hover,
#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-next:hover {
    background: #fff;
}

#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-prev svg,
#html-body .homepage-hero-redesigned .pagebuilder-slider .glider-next svg {
    width: 20px;
    height: 20px;
    color: #1a1919;
}

/* ===== DOTS: hidden ===== */
#html-body .homepage-hero-redesigned .glider-dots {
    display: none !important;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    #html-body .homepage-hero-redesigned .row-full-width-inner {
        padding-top: 10px;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-banner-wrapper,
    #html-body .homepage-hero-redesigned .pagebuilder-poster-overlay,
    #html-body .homepage-hero-redesigned .pagebuilder-slide-wrapper {
        min-height: 0 !important;
        height: auto;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-column-line:first-child {
        flex-direction: column;
        gap: 8px;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-column-line:first-child > .pagebuilder-column:first-child,
    #html-body .homepage-hero-redesigned .pagebuilder-column-line:first-child > .pagebuilder-column:last-child {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-banner-wrapper {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 475 / 380 !important;
        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-banner-wrapper .pagebuilder-poster-overlay {
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 !important;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-slide-wrapper {
        min-height: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    #html-body .homepage-hero-redesigned .pagebuilder-slide-wrapper .pagebuilder-poster-overlay {
        min-height: 0 !important;
        padding-bottom: 30%;
    }
}