/**
 * Hero Banner — premium jewellery storefront.
 *
 * Markup is template-parts/sections/hero.php; it is unchanged, so every
 * Customizer setting still drives this section exactly as before:
 *   --hero-height / --hero-height-mobile   hero_height_desktop / _mobile
 *   .hero-overlay inline background+opacity  hero_overlay_color / _opacity
 *   .is-slider + .hero-dots                  two slides, autoplay, dots
 *
 * Hierarchy is deliberately flat and small — eyebrow → heading → description
 * → CTA. Type never grows large enough to compete with the photograph; on
 * mobile it is anchored to the bottom edge so it sits under the piece rather
 * than across it.
 *
 * The CTA carries .casablanca-btn, so its colour, border, radius and shadow come
 * from the button contract in assets/css/base.css (which sets them with
 * !important). Only the properties that actually survive that contract are
 * declared here — background/border/box-shadow/border-radius rules used to
 * sit in this file doing nothing.
 */

.casablanca-hero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--casablanca-bg-secondary);
}

.hero-slider-wrapper {
    display: flex;
    width: 100%;
    /* The merchant's height (200–1000px), capped so a tall setting can never
       push the whole viewport past the fold on a short screen. */
    height: min(var(--hero-height, 500px), 88vh);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: scroll-position;
}

.hero-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    background-color: #f5f5f5;
    overflow: hidden;
}

.hero-picture {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-content {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    /* Narrower than the old 680px: a measured column reads as editorial and
       leaves the photograph room to breathe on either side. */
    max-width: 560px;
    padding: 0 clamp(16px, 3vw, 32px);
    text-align: center;
    box-sizing: border-box;
}

.hero-eyebrow {
    display: block;
    font-family: var(--casablanca-font-primary, inherit);
    font-size: clamp(9.5px, 0.18vw + 0.55rem, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 clamp(8px, 1vw, 13px);
}

.hero-heading {
    font-family: var(--casablanca-font-secondary, inherit);
    /* Medium, never oversized — tops out at ~34px on a 1920px screen. */
    font-size: clamp(1.15rem, 0.72rem + 1.35vw, 2.1rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.22;
    color: #fff;
    margin: 0 0 clamp(8px, 1vw, 14px);
    text-wrap: balance;
}

.hero-subheading {
    font-family: var(--casablanca-font-primary, inherit);
    font-size: clamp(12px, 0.16vw + 0.7rem, 15px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    /* A measure, so a long Customizer description stays readable. */
    max-width: 46ch;
    margin: 0 auto clamp(16px, 1.8vw, 26px);
}

.hero-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(9px, 0.6vw, 13px) clamp(20px, 1.6vw, 30px);
    font-size: clamp(11px, 0.14vw + 0.62rem, 13.5px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
}

.hero-dots {
    position: absolute;
    bottom: clamp(14px, 1.6vw, 22px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero-dot {
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
}

.hero-dot.is-active {
    background: #fff;
    width: 34px;
}

@media (max-width: 767px) {
    .hero-slider-wrapper {
        /* Merchant height (150–600px), capped against the viewport. */
        height: min(var(--hero-height-mobile, 300px), 74vh);
    }

    /* Bottom-anchored, not centred: on a portrait phone crop the middle of the
       frame is where the piece actually sits, so centred type lands straight
       on it. Sitting the block on the lower edge keeps the product clear. */
    .hero-content {
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        max-width: 100%;
        padding: 0 18px clamp(36px, 10vw, 50px);
    }

    /* No dots to clear when there is a single slide. */
    .casablanca-hero-section:not(.is-slider) .hero-content {
        padding-bottom: clamp(22px, 6vw, 32px);
    }

    .hero-eyebrow {
        letter-spacing: 0.16em;
        margin-bottom: 6px;
    }

    .hero-heading {
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .hero-subheading {
        max-width: 36ch;
        line-height: 1.5;
        margin-bottom: 13px;
        /* Two lines, always. Guarantees the block fits at 320px without
           asking the merchant to shorten their copy. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-dots {
        bottom: 14px;
        gap: 6px;
    }

    .hero-dot {
        width: 16px;
    }

    .hero-dot.is-active {
        width: 26px;
    }
}

/* Narrowest phones (320–360px): trim the gutter, nothing else. */
@media (max-width: 360px) {
    .hero-content {
        padding-inline-start: 14px;
        padding-inline-end: 14px;
    }

    .hero-subheading {
        margin-bottom: 11px;
    }
}