/* =========================================================
   SMG Japan — Home page responsive styles
   Load after customer-overrides.css and only on Home/Index.

   This file uses the existing Revolution Slider markup. It does
   not hide, replace, or duplicate the Hero section.
   ========================================================= */

.customer-home-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Keep the existing slider contained without changing desktop design. */
.customer-home-page .home-slider5,
.customer-home-page .home-slider5 .thmg-slideshow,
.customer-home-page .home-slider5 .rev_slider_wrapper,
.customer-home-page .home-slider5 .rev_slider {
    width: 100% !important;
    max-width: none !important;
}

.customer-home-page .home-hero-title,
.customer-home-page .home-hero-copy {
    white-space: normal !important;
}

@media (min-width: 768px) {

    /* Reserve the slider's space before Revolution Slider initializes.
       This prevents the overlapping search panel from jumping beneath the navbar. */
    .customer-home-page {
        /* Matches RevSlider's ~1.95 aspect ratio (100vw / 1.95 = ~51vw).
           Lowered minimum to 390px so tablet views don't stretch artificially. */
        --home-hero-reserved-height: clamp(390px, 51vw, 580px);
    }

    /* overflow:hidden clips the dark background-color that would otherwise
           show below the slider content when RevSlider's JS-computed height is
           shorter than the CSS min-height. */
    .customer-home-page .home-slider5,
    .customer-home-page #thmg-slideshow,
    .customer-home-page #rev_slider_4_wrapper,
    .customer-home-page #rev_slider_4 {
        min-height: var(--home-hero-reserved-height) !important;
        overflow: hidden !important;
        background-color: #10161a;
    }

    /* Keep the supporting copy aligned with the main heading. */
    .customer-home-page #rev_slider_4 .home-hero-copy {
        left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Preserve a comfortable gap above the overlapping search panel. */
    .customer-home-page #rev_slider_4 .home-hero-button {
        margin-top: 25px !important;
    }
}

/* =========================================================
   Tablet search layout
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .customer-home-page .home-search-section {
        padding-right: 15px;
        padding-left: 15px;
    }

    .customer-home-page .home-search-panel {
        width: 100% !important;
        max-width: 750px !important;
    }

    .customer-home-page form.home-search-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .customer-home-page form.home-search-form>* {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .customer-home-page form.home-search-form>.harrier-price-preview {
        display: none !important;
    }

    .customer-home-page form.home-search-form>button {
        grid-column: 1 / -1 !important;
    }
}

/* =========================================================
   Mobile Hero and vehicle search
   ========================================================= */
@media (max-width: 767px) {
    .customer-home-page {
        --home-mobile-hero-height: clamp(330px, 68vw, 390px);
    }

    /*
       Revolution Slider writes inline heights on several generated
       elements. Keeping every layer at one height removes the black
       spacer without pulling the Search section over the slider.
    */
    .customer-home-page .home-slider5,
    .customer-home-page #thmg-slideshow,
    .customer-home-page .forcefullwidth_wrapper_tp_banner,
    .customer-home-page #rev_slider_4_wrapper,
    .customer-home-page #rev_slider_4,
    .customer-home-page #rev_slider_4>ul,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul,
    .customer-home-page #rev_slider_4>ul>li,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul>li,
    .customer-home-page #rev_slider_4 .slotholder,
    .customer-home-page #rev_slider_4 .tp-bgimg,
    .customer-home-page .tp-fullwidth-forcer {
        width: 100% !important;
        height: var(--home-mobile-hero-height) !important;
        min-height: var(--home-mobile-hero-height) !important;
        max-height: var(--home-mobile-hero-height) !important;
    }

    .customer-home-page .home-slider5,
    .customer-home-page #thmg-slideshow,
    .customer-home-page .forcefullwidth_wrapper_tp_banner,
    .customer-home-page #rev_slider_4_wrapper,
    .customer-home-page #rev_slider_4 {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #10161a !important;
    }

    .customer-home-page #rev_slider_4>ul,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .customer-home-page #rev_slider_4>ul>li,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul>li {
        overflow: hidden !important;
    }


    .customer-home-page #rev_slider_4 .slotholder,
    .customer-home-page #rev_slider_4 .tp-bgimg {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inset: 0 !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    .customer-home-page #rev_slider_4>ul>li,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul>li {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
    }

    .customer-home-page #rev_slider_4>ul>li>img,
    .customer-home-page #rev_slider_4 .tp-revslider-mainul>li>img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Ensure the caption area fills the image and follows one clean flow. */
    .customer-home-page #rev_slider_4 .container,
    .customer-home-page #rev_slider_4 .content_slideshow,
    .customer-home-page #rev_slider_4 .content_slideshow .row,
    .customer-home-page #rev_slider_4 .content_slideshow .row>div {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .customer-home-page #rev_slider_4 .slotholder::after {
        position: absolute !important;
        inset: 0 !important;
        content: "" !important;
        background: linear-gradient(180deg, rgba(14, 20, 25, 0.78) 0%, rgba(14, 20, 25, 0.25) 55%, rgba(14, 20, 25, 0.85) 100%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-info {
        position: absolute !important;
        inset: 0 !important;
        z-index: 5 !important;
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 40px 24px 10px 24px !important;
        color: #fff !important;
        transform: none !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-info>.tp-caption {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        max-width: min(480px, calc(100vw - 48px)) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        transform: none !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-eyebrow,
    .customer-home-page #rev_slider_4 .home-hero-eyebrow span {
        display: inline-block !important;
        padding: 2px 8px !important;
        background: rgba(85, 200, 102, 0.18) !important;
        border-left: 3px solid #55c866 !important;
        color: #55c866 !important;
        font: 600 11px/1.2 "Saira Condensed", Arial, sans-serif !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-title {
        color: #ffffff !important;
        font: 600 clamp(24px, 6.5vw, 32px)/1.05 "Teko", "Saira Condensed", Arial, sans-serif !important;
        letter-spacing: 0.02em !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
        text-transform: uppercase !important;
        text-wrap: balance;
    }

    .customer-home-page #rev_slider_4 .home-slide-title-line {
        display: inline !important;
        font: inherit !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-copy {
        color: rgba(255, 255, 255, 0.92) !important;
        font: 400 11.5px/1.35 "Open Sans", Arial, sans-serif !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
        max-height: 32px !important;
        overflow: hidden !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-action {
        margin-top: 4px !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-button {
        display: inline-flex !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 7px 16px !important;
        color: #1a232a !important;
        background: var(--harrier-lime) !important;
        border-radius: 3px !important;
        font: 700 14px/1 "Saira Condensed", Arial, sans-serif !important;
        letter-spacing: 0.04em !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    }

    /* Hide carousel arrows on mobile — swipe is the intended gesture. */
    .customer-home-page #rev_slider_4_wrapper .tp-leftarrow.default,
    .customer-home-page #rev_slider_4_wrapper .tp-rightarrow.default {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Search starts in normal document flow immediately after the Hero. */
    .customer-home-page .home-search-section {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        margin: -85px 0 0 !important;
        padding: 0 16px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .customer-home-page .home-search-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 22px 18px 20px !important;
        background: linear-gradient(145deg, #355768 0%, #264352 100%) !important;
        border-top: 3px solid var(--harrier-lime) !important;
        border-bottom: 0 !important;
        border-radius: 6px !important;
        box-shadow: 0 16px 36px rgba(10, 22, 30, 0.4) !important;
    }

    .customer-home-page .home-search-panel h2 {
        margin: 0 0 16px !important;
        color: #ffffff !important;
        font: 600 clamp(26px, 6vw, 32px)/1 "Teko", Arial, sans-serif !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .customer-home-page form.home-search-form {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .customer-home-page form.home-search-form>select,
    .customer-home-page form.home-search-form>input,
    .customer-home-page form.home-search-form>button,
    .customer-home-page form.home-search-form>.harrier-price-preview {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-column: 1 !important;
    }

    .customer-home-page form.home-search-form>select,
    .customer-home-page form.home-search-form>input {
        display: block !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 16px !important;
        color: #333333 !important;
        background: #ffffff !important;
        border: 1px solid #d4de43 !important;
        border: 0 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        font: 400 14.5px/50px Arial, sans-serif !important;
        outline: none !important;
    }

    .customer-home-page form.home-search-form>input[type="search"] {
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .customer-home-page form.home-search-form>.harrier-price-preview {
        display: none !important;
    }

    .customer-home-page form.home-search-form>button {
        display: flex !important;
        height: 48px !important;
        min-height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 18px !important;
        color: #1a232a !important;
        background: var(--harrier-lime) !important;
        border: 0 !important;
        border-radius: 4px !important;
        font: 700 19px/1 "Saira Condensed", Arial, sans-serif !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    }
}

@media (max-width: 480px) {
    .customer-home-page {
        --home-mobile-hero-height: 410px;
    }

    .customer-home-page #rev_slider_4 .home-hero-info {
        gap: 4px !important;
        padding: 30px 18px 6px 18px !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-info>.tp-caption {
        max-width: calc(100vw - 36px) !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-eyebrow,
    .customer-home-page #rev_slider_4 .home-hero-eyebrow span {
        font-size: 11px !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-title {
        font-size: clamp(24px, 7.5vw, 30px) !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-copy {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .customer-home-page #rev_slider_4 .home-hero-button {
        min-height: 38px !important;
        padding: 7px 15px !important;
        font-size: 13.5px !important;
    }

    /* Arrows already hidden at <= 767px; no override needed here. */

    .customer-home-page .home-search-section {
        margin-top: -85px !important;
        padding: 0 14px !important;
    }

    .customer-home-page .home-search-panel {
        padding: 18px 14px 16px !important;
    }

    .customer-home-page .home-search-panel h2 {
        margin-bottom: 14px !important;
        font-size: 26px !important;
    }

    .customer-home-page form.home-search-form>select,
    .customer-home-page form.home-search-form>input {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        line-height: 48px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .customer-home-page #rev_slider_4 .tp-caption,
    .customer-home-page #rev_slider_4 .tp-bgimg {
        transition: none !important;
        animation: none !important;
    }
}