/*
 * Heikaya v6.20.21 — phone-only homepage hero refinement.
 * Desktop/tablet are intentionally untouched.
 *
 * Goals:
 * - Keep the hero image visually dominant.
 * - Restrict copy to a compact lower-left area rather than covering the slide.
 * - Replace the numeric hero counter with small MASU-inspired pagination dots.
 */

@media (max-width: 767px) {
    body.home .lumiere-hero,
    body.home .lumiere-hero--slider {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: clamp(525px, 142vw, 605px) !important;
        min-height: 525px !important;
        max-height: 605px !important;
        overflow: hidden !important;
        background: #15120f !important;
    }

    /* The image owns the full mobile hero canvas. */
    body.home .lumiere-hero__visual {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        background: #15120f !important;
    }

    body.home .lumiere-hero__slides,
    body.home .lumiere-hero__slide {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Remove the blurred duplicate image used by desktop. It softens the hero on phones. */
    body.home .lumiere-hero__slide-backdrop {
        display: none !important;
    }

    body.home .lumiere-hero__slide-image {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        filter: none !important;
    }

    /*
     * Only the lower part of the image receives contrast. The upper image stays
     * clean and visible rather than being covered by a full-screen dark layer.
     */
    body.home .lumiere-hero__slide::after {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        content: "" !important;
        pointer-events: none !important;
        background: linear-gradient(
            180deg,
            rgba(10, 9, 8, 0) 0%,
            rgba(10, 9, 8, 0) 39%,
            rgba(10, 9, 8, .10) 48%,
            rgba(10, 9, 8, .48) 70%,
            rgba(10, 9, 8, .78) 100%
        ) !important;
    }

    /* Compact MASU-like copy block: lower-left, not full-canvas. */
    body.home .lumiere-hero--slider .lumiere-hero__content,
    body.home .lumiere-hero__content {
        position: absolute !important;
        top: auto !important;
        right: auto !important;
        bottom: 45px !important;
        left: 20px !important;
        z-index: 5 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        width: min(86%, 340px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        color: #fff !important;
        text-align: left !important;
        pointer-events: none !important;
    }

    /* Remove the old decorative line from the mobile hero copy. */
    body.home .lumiere-hero__content::before {
        display: none !important;
        content: none !important;
    }

    body.home .lumiere-hero__content > * {
        pointer-events: auto !important;
    }

    body.home .lumiere-hero__content .lumiere-eyebrow {
        margin: 0 0 11px !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: .26em !important;
        text-transform: uppercase !important;
        text-shadow: 0 2px 14px rgba(0,0,0,.48) !important;
        -webkit-line-clamp: 1 !important;
    }

    body.home .lumiere-hero h1,
    body.home .lumiere-hero__content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: clamp(37px, 10.4vw, 48px) !important;
        font-weight: 500 !important;
        line-height: .98 !important;
        letter-spacing: -.025em !important;
        text-shadow: 0 3px 20px rgba(0,0,0,.5) !important;
        -webkit-line-clamp: 3 !important;
    }

    /* Keep the description useful without allowing it to cover the image. */
    body.home .lumiere-hero__text {
        display: -webkit-box !important;
        width: 100% !important;
        max-width: 315px !important;
        margin: 15px 0 18px !important;
        overflow: hidden !important;
        color: rgba(255,255,255,.94) !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-shadow: 0 2px 13px rgba(0,0,0,.48) !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body.home .lumiere-hero__content .lumiere-button {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 45px !important;
        margin: 0 !important;
        padding: 0 24px !important;
        border: 1px solid #fff !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #15120f !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: .13em !important;
        box-shadow: none !important;
    }

    body.home .lumiere-hero__content .lumiere-button:hover,
    body.home .lumiere-hero__content .lumiere-button:focus-visible {
        border-color: #15120f !important;
        background: #15120f !important;
        color: #fff !important;
    }

    /* Retire the old timer/count UI on phones. */
    body.home .lumiere-hero__progress,
    body.home .lumiere-hero__counter {
        display: none !important;
    }

    /* MASU-inspired small slide dots in the lower-right corner. */
    body.home .heikaya-hero-dots {
        position: absolute !important;
        right: 20px !important;
        bottom: 18px !important;
        z-index: 8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    body.home .heikaya-hero-dot {
        display: block !important;
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        min-height: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.42) !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.home .heikaya-hero-dot.is-active {
        width: 9px !important;
        height: 9px !important;
        min-width: 9px !important;
        min-height: 9px !important;
        border: 2px solid #fff !important;
        background: transparent !important;
    }

    /* Slightly tighter treatment for very narrow phones. */
    @media (max-width: 390px) {
        body.home .lumiere-hero--slider .lumiere-hero__content,
        body.home .lumiere-hero__content {
            left: 18px !important;
            bottom: 43px !important;
            width: min(87%, 320px) !important;
        }

        body.home .lumiere-hero h1,
        body.home .lumiere-hero__content h1 {
            font-size: clamp(35px, 10vw, 43px) !important;
        }

        body.home .lumiere-hero__text {
            max-width: 300px !important;
            font-size: 12.5px !important;
        }

        body.home .heikaya-hero-dots {
            right: 18px !important;
        }
    }
}

/* The phone pagination is deliberately absent from desktop/tablet. */
@media (min-width: 768px) {
    body.home .heikaya-hero-dots {
        display: none !important;
    }
}