/*
 * BHN Dynamic Hero Slider - Phase 3 / Option A
 * Fundora-inspired organic presentation.
 * Scoped only to a hero root successfully bound by BHN public JavaScript.
 */

.bhn-hero-organic-ready {
    --bhn-hero-purple: #5f2db6;
    --bhn-hero-gold: #f5b800;
    --bhn-hero-transition-ms: 280ms;
}

.bhn-hero-organic-ready .bhn-hero-slider-target {
    transition:
        opacity var(--bhn-hero-transition-ms) ease,
        transform var(--bhn-hero-transition-ms) ease,
        filter var(--bhn-hero-transition-ms) ease;
    will-change: opacity, transform;
}

.bhn-hero-organic-ready .bhn-hero-slider-target.is-changing {
    opacity: 0;
    transform: translateY(4px) scale(.995);
}

/*
 * Persistent organic media stage.
 * This wrapper is created once and never changes while slides rotate.
 * Therefore every Media Library image receives exactly the same dimensions,
 * clipping, gold border and organic curve independent of its source ratio.
 */
.bhn-hero-organic-ready .bhn-hero-organic-media-stage {
    position: relative;
    display: block;
    width: min(94%, 680px);
    max-width: 680px;
    aspect-ratio: 1.03 / 1;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    overflow: hidden;
    isolation: isolate;
    border: 2px solid rgba(245,184,0,.92);
    border-radius: 48% 52% 47% 53% / 45% 48% 52% 55%;
    background: var(--bhn-hero-gold);
    box-shadow:
        0 0 0 1px rgba(245,184,0,.18),
        0 18px 38px rgba(59,36,94,.10);
}

.bhn-hero-organic-ready .bhn-hero-organic-media-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 2px solid rgba(255,255,255,.34);
    border-radius: inherit;
}

.bhn-hero-organic-ready .bhn-hero-organic-image {
    display: block !important;
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 47.3% 51.7% 46.3% 52.7% / 44.3% 47.3% 51.3% 54.3% !important;
    box-shadow: none !important;
    background: #fff;
}

.bhn-hero-organic-ready .bhn-hero-organic-image[src] {
    object-position: center;
}

.bhn-hero-organic-ready .bhn-hero-organic-cta-host {
    position: relative !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-manual-nav {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    max-width: min(92vw, 430px);
    transform: translateX(-50%);
    white-space: nowrap;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 300px;
    overflow-x: auto;
    padding: 3px 1px;
    scrollbar-width: none;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-dots::-webkit-scrollbar {
    display: none;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    min-width: 9px;
    padding: 0 !important;
    border: 1.5px solid var(--bhn-hero-purple) !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-dot.is-active {
    background: var(--bhn-hero-purple) !important;
    transform: scale(1.22);
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    min-width: 27px;
    padding: 0 !important;
    border: 1px solid rgba(95,45,182,.34) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--bhn-hero-purple) !important;
    box-shadow: 0 2px 9px rgba(59,36,94,.10) !important;
    cursor: pointer;
    font-size: 23px !important;
    line-height: 1 !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-arrow:hover,
.bhn-hero-organic-ready .bhn-hero-organic-nav-arrow:focus-visible {
    border-color: var(--bhn-hero-purple) !important;
    background: var(--bhn-hero-purple) !important;
    color: #fff !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-nav-dot:focus-visible,
.bhn-hero-organic-ready .bhn-hero-organic-nav-arrow:focus-visible {
    outline: 2px solid var(--bhn-hero-gold);
    outline-offset: 2px;
}

/* Stable right-hand copy proportions: close to the original Fundora hero. */
.bhn-hero-organic-ready .bhn-hero-organic-eyebrow {
    max-width: 650px;
    min-height: 1.25em;
    margin: 0 auto 7px !important;
    font-size: clamp(17px, 1.45vw, 25px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-heading {
    max-width: 690px;
    min-height: 1.12em;
    margin: 0 auto 2px !important;
    font-size: clamp(34px, 3.15vw, 56px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    color: var(--bhn-hero-purple) !important;
    overflow-wrap: normal;
}

.bhn-hero-organic-ready .bhn-hero-organic-highlight {
    max-width: 650px;
    min-height: 1.08em;
    margin: 0 auto 7px !important;
    font-size: clamp(34px, 3.15vw, 56px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    color: var(--bhn-hero-gold) !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-description {
    display: -webkit-box;
    width: min(92%, 590px);
    min-height: 3.05em;
    max-height: 3.05em;
    margin: 8px auto 10px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: #666 !important;
    font-size: clamp(13px, 1vw, 16px) !important;
    line-height: 1.52 !important;
    text-align: center !important;
}

.bhn-hero-organic-ready .bhn-hero-organic-cta {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* Touch-hold gives the persistent frame a subtle reading-state cue. */
.bhn-hero-organic-ready.bhn-hero-is-held .bhn-hero-organic-media-stage {
    box-shadow:
        0 0 0 2px rgba(245,184,0,.26),
        0 18px 38px rgba(59,36,94,.10);
}

@media (max-width: 1199px) {
    .bhn-hero-organic-ready .bhn-hero-organic-media-stage {
        width: min(92%, 610px);
        max-width: 610px;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-heading,
    .bhn-hero-organic-ready .bhn-hero-organic-highlight {
        font-size: clamp(31px, 3.4vw, 50px) !important;
    }
}

@media (max-width: 767px) {
    .bhn-hero-organic-ready .bhn-hero-organic-media-stage {
        width: min(92%, 520px);
        max-width: 520px;
        aspect-ratio: 1.04 / 1;
        padding: 4px;
        border-width: 2px;
        border-radius: 47% 53% 49% 51% / 46% 49% 51% 54%;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-image {
        border-radius: 46.2% 52.2% 48.2% 50.2% / 45.2% 48.2% 50.2% 53.2% !important;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-manual-nav {
        top: calc(100% + 6px);
        gap: 5px;
        max-width: 90vw;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-nav-dots {
        max-width: 220px;
        gap: 4px;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-nav-arrow {
        width: 25px;
        height: 25px;
        min-width: 25px;
        font-size: 21px !important;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-eyebrow {
        margin-bottom: 5px !important;
        font-size: clamp(15px, 4.2vw, 20px) !important;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-heading,
    .bhn-hero-organic-ready .bhn-hero-organic-highlight {
        max-width: 94%;
        font-size: clamp(28px, 7.2vw, 40px) !important;
        line-height: 1.06 !important;
    }

    .bhn-hero-organic-ready .bhn-hero-organic-description {
        width: min(94%, 520px);
        min-height: 4.55em;
        max-height: 4.55em;
        margin-top: 7px !important;
        margin-bottom: 9px !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: clamp(13px, 3.5vw, 15px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bhn-hero-organic-ready .bhn-hero-slider-target {
        transition: none !important;
    }
}