/**
 * HAC Explainer — Narrative Slide Layout
 *
 * Typography, spacing, and rhythm for the slide content region. The shell
 * itself is structural (explainer-overlay.css); this file styles what's
 * inside it.
 */

/* ---------------------------------------------------------------------------
 * Narrative content region — scrollable middle column
 * ------------------------------------------------------------------------- */

.hac-explainer-narrative {
    flex:          1 1 auto;
    overflow-y:    auto;
    padding:       3rem clamp( 1.5rem, 4vw, 3rem ) 2rem;
    line-height:   1.55;
    /* Reserve room around the close button so headlines don't collide with it. */
    scrollbar-width: thin;
    scrollbar-color: rgba( 200, 196, 184, 0.3 ) transparent;
}

.hac-explainer-narrative::-webkit-scrollbar {
    width: 8px;
}
.hac-explainer-narrative::-webkit-scrollbar-thumb {
    background:    rgba( 200, 196, 184, 0.3 );
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Section label — small, above the headline
 * ------------------------------------------------------------------------- */

.hac-explainer-section-label {
    margin:          0 0 0.5rem;
    font-size:       0.78rem;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           rgba( 220, 190, 130, 0.85 );
    font-weight:     500;
}

/* ---------------------------------------------------------------------------
 * Headline
 * ------------------------------------------------------------------------- */

.hac-explainer-headline {
    margin:      0 0 1.25rem;
    font-size:   clamp( 1.5rem, 3vw, 2rem );
    line-height: 1.2;
    color:       #f4efe1;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Body copy — primary narrative
 * ------------------------------------------------------------------------- */

.hac-explainer-body {
    color:     #d8d3c2;
    font-size: 1rem;
}

.hac-explainer-body p {
    margin: 0 0 1rem;
}

.hac-explainer-body p:last-child {
    margin-bottom: 0;
}

.hac-explainer-body em {
    color:      #f4efe1;
    font-style: italic;
}

.hac-explainer-body strong {
    color:       #f4efe1;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Supporting copy — smaller, lower-emphasis follow-up
 * ------------------------------------------------------------------------- */

.hac-explainer-supporting {
    margin-top:  1.25rem;
    padding-top: 1rem;
    border-top:  1px solid rgba( 220, 190, 130, 0.15 );
    color:       rgba( 200, 196, 184, 0.85 );
    font-size:   0.92rem;
    font-style:  italic;
}

/* ---------------------------------------------------------------------------
 * Navigation footer — prev / progress / next or CTA
 * ------------------------------------------------------------------------- */

.hac-explainer-nav {
    flex:            0 0 auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         1rem clamp( 1.5rem, 4vw, 3rem );
    border-top:      1px solid rgba( 220, 190, 130, 0.12 );
    background:      rgba( 0, 0, 0, 0.25 );
}

.hac-explainer-progress {
    flex:           0 0 auto;
    font-size:      0.82rem;
    color:          rgba( 200, 196, 184, 0.65 );
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
 * Nav buttons
 * ------------------------------------------------------------------------- */

.hac-explainer-nav-btn {
    flex:          0 0 auto;
    padding:       0.55rem 1.1rem;
    font-size:     0.92rem;
    font-weight:   500;
    border-radius: 4px;
    border:        1px solid rgba( 220, 190, 130, 0.3 );
    background:    transparent;
    color:         #e8e6df;
    cursor:        pointer;
    transition:    background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.hac-explainer-nav-btn:hover:not(.is-disabled),
.hac-explainer-nav-btn:focus-visible:not(.is-disabled) {
    background:   rgba( 220, 190, 130, 0.12 );
    border-color: rgba( 220, 190, 130, 0.55 );
    color:        #f4efe1;
    outline:      none;
}

.hac-explainer-nav-btn.is-disabled,
.hac-explainer-nav-btn[disabled] {
    opacity:        0.35;
    cursor:         default;
    pointer-events: none;
}

/* Dwell state — realization-critical slides hold Continue for 1200ms.
   A gentle pulse signals "loading" without showing a countdown. */
.hac-explainer-nav-btn.is-dwelling {
    animation: hac-explainer-dwell-pulse 600ms ease-in-out infinite alternate;
}

@keyframes hac-explainer-dwell-pulse {
    from { opacity: 0.25; }
    to   { opacity: 0.45; }
}

@media ( prefers-reduced-motion: reduce ) {
    .hac-explainer-nav-btn.is-dwelling {
        animation: none;
        opacity:   0.35;
    }
}

/* The final-CTA button is visually emphasized — it's the user's exit. */
.hac-explainer-nav-btn--cta {
    background:   rgba( 220, 190, 130, 0.18 );
    border-color: rgba( 220, 190, 130, 0.6 );
    color:        #f9f4e1;
    font-weight:  600;
}

.hac-explainer-nav-btn--cta:hover,
.hac-explainer-nav-btn--cta:focus-visible {
    background:   rgba( 220, 190, 130, 0.28 );
    border-color: rgba( 220, 190, 130, 0.85 );
    color:        #ffffff;
    outline:      none;
}

/* ---------------------------------------------------------------------------
 * Mobile spacing
 * ------------------------------------------------------------------------- */

@media ( max-width: 767px ) {
    .hac-explainer-narrative {
        padding: 2.5rem 1.25rem 1.5rem;
    }
    .hac-explainer-nav {
        padding: 0.75rem 1.25rem;
        gap:     0.5rem;
    }
    .hac-explainer-nav-btn {
        padding:   0.5rem 0.9rem;
        font-size: 0.88rem;
    }
}

/* ==========================================================================
 * Slide region — replaces .hac-explainer-narrative for Phase 2
 * (the .hac-explainer-slide element is the re-rendered content area)
 * ========================================================================== */

.hac-explainer-slide {
    flex:            1 1 auto;
    overflow-y:      auto;
    overflow-x:      hidden;
    min-height:      0;     /* allow flex child to shrink below content size */
    scrollbar-width: thin;
    scrollbar-color: rgba( 200, 196, 184, 0.3 ) transparent;
}

/* Slide-level fade transition — applied by JS on slide change */
.hac-explainer-slide.is-fading-out {
    opacity:    0;
    transition: opacity 180ms ease-out;
}

.hac-explainer-slide.is-fading-in {
    opacity:    0;
    transition: none;
}

.hac-explainer-slide.is-faded-in {
    opacity:    1;
    transition: opacity 220ms ease-in;
}

@media ( prefers-reduced-motion: reduce ) {
    .hac-explainer-slide.is-fading-out,
    .hac-explainer-slide.is-fading-in,
    .hac-explainer-slide.is-faded-in {
        transition: none;
        opacity:    1;
    }
}

.hac-explainer-slide::-webkit-scrollbar {
    width: 8px;
}
.hac-explainer-slide::-webkit-scrollbar-thumb {
    background:    rgba( 200, 196, 184, 0.3 );
    border-radius: 4px;
}

/* ==========================================================================
 * Structured body node styles
 * ========================================================================== */

.hac-explainer-body {
    color:     #d8d3c2;
    font-size: 1rem;
}
.hac-explainer-body p {
    margin: 0 0 1rem;
}
.hac-explainer-body p:last-child {
    margin-bottom: 0;
}
.hac-explainer-body__emphasis {
    color:       #f4efe1;
    font-style:  italic;
    font-size:   1.05rem;
    font-weight: 500;
    margin:      1rem 0 !important;
}
.hac-explainer-body__list {
    padding-left: 1.4em;
    margin:       0.5rem 0 1rem;
}
.hac-explainer-body__list li {
    margin-bottom: 0.4rem;
    color:         #d8d3c2;
}
.hac-explainer-body__quote {
    border-left:  3px solid rgba( 220, 190, 130, 0.4 );
    padding-left: 1rem;
    margin:       1rem 0;
    color:        #c8c4b8;
    font-style:   italic;
}
.hac-explainer-body__caption {
    font-size:  0.88rem;
    color:      rgba( 200, 196, 184, 0.75 );
    font-style: italic;
    margin:     0.25rem 0;
}

/* ==========================================================================
 * Type A — Atmospheric Hero
 * ========================================================================== */

.hac-explainer-type-a {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;        /* fill the slide region completely */
    text-align:      center;
    padding:         3rem clamp( 2rem, 6vw, 5rem );
    overflow:        hidden;
}

.hac-explainer-type-a__bg {
    position:           absolute;
    inset:              0;
    background-size:    cover;
    background-position: center;
    background-repeat:  no-repeat;
    opacity:            0.28;
    z-index:            0;
}

.hac-explainer-type-a__content {
    position: relative;
    z-index:  1;
    max-width: 680px;
}

.hac-explainer-type-a .hac-explainer-section-label {
    text-align: center;
}

.hac-explainer-type-a .hac-explainer-headline {
    font-size:     clamp( 2rem, 4vw, 3rem );
    margin-bottom: 1.5rem;
}

.hac-explainer-type-a .hac-explainer-body {
    font-size: 1.05rem;
    max-width: 56ch;
    margin:    0 auto;
}

/* ==========================================================================
 * Type B — Standard Explanation
 * ========================================================================== */

.hac-explainer-type-b {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
    height:    100%;
}

.hac-explainer-type-b__text {
    flex:            0 0 45%;
    min-width:       280px;
    padding:         3rem clamp( 1.5rem, 3vw, 2.5rem ) 2rem;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             0;
}

.hac-explainer-type-b__visual {
    flex:            1 1 55%;
    min-width:       240px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    background:      rgba( 0, 0, 0, 0.18 );
    border-left:     1px solid rgba( 220, 190, 130, 0.08 );
    box-shadow:      0 8px 40px rgba( 193, 168, 123, 0.18 ),
                     0 2px 12px rgba( 193, 168, 123, 0.10 );
}

.hac-explainer-type-b__visual .hac-explainer-media-img,
.hac-explainer-type-b__visual video.hac-explainer-media-img {
    max-width:  100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 4px;
    filter:     drop-shadow( 0 0 18px rgba( 193, 168, 123, 0.45 ) )
                drop-shadow( 0 4px 32px rgba( 193, 168, 123, 0.25 ) );
}

/* ==========================================================================
 * Type C — Deep Analysis / Realization
 * ========================================================================== */

.hac-explainer-type-c {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
    height:    100%;
}

.hac-explainer-type-c__visual {
    flex:            0 0 65%;
    min-width:       300px;
    min-height:      0;          /* allow flex child to shrink below content size */
    overflow:        hidden;     /* clip portrait images that exceed shell height */
    padding:         1.5rem;
    background:      rgba( 0, 0, 0, 0.22 );
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             1rem;
    border-right:    1px solid rgba( 220, 190, 130, 0.08 );
}

.hac-explainer-type-c__comparison {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    flex:      1 1 auto;
}

.hac-explainer-type-c__comparison--two-up .hac-explainer-img-frame {
    flex: 1 1 45%;
    min-width: 160px;
}

.hac-explainer-type-c__caption {
    font-size:  0.88rem;
    color:      rgba( 200, 196, 184, 0.75 );
    font-style: italic;
    margin:     0.5rem 0 0;
}

.hac-explainer-type-c__legend {
    flex:            1 1 35%;
    min-width:       240px;
    padding:         2rem clamp( 1.5rem, 2.5vw, 2rem );
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             0;
    overflow-y:      auto;
}

/* ==========================================================================
 * Image frames (used by Type C and Type D)
 * ========================================================================== */

.hac-explainer-img-frame {
    position:        relative;
    overflow:        hidden;
    border-radius:   4px;
    background:      rgba( 0, 0, 0, 0.3 );
    flex:            1 1 auto;
    min-height:      0;       /* let the visual column control height, not the frame */
    min-width:       0;
    max-height:      100%;    /* never exceed the visual column height */
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 8px 40px rgba( 193, 168, 123, 0.18 ),
                     0 2px 12px rgba( 193, 168, 123, 0.10 );
}

.hac-explainer-img-frame .hac-explainer-media-img,
.hac-explainer-img-frame video.hac-explainer-media-img {
    max-width:   100%;
    max-height:  calc( 82vh - 12rem );  /* shell height minus nav + padding + caption */
    width:       auto;
    height:      auto;
    object-fit:  contain;
    display:     block;
    margin:      0 auto;
    filter:      drop-shadow( 0 0 18px rgba( 193, 168, 123, 0.45 ) )
                 drop-shadow( 0 4px 32px rgba( 193, 168, 123, 0.25 ) );
}

/* ==========================================================================
 * Annotation dots
 * ========================================================================== */

.hac-explainer-annotation-dot {
    position:        absolute;
    width:           1.6rem;
    height:          1.6rem;
    border-radius:   50%;
    background:      rgba( 220, 190, 130, 0.85 );
    color:           #1c1c20;
    border:          none;
    font-size:       0.78rem;
    font-weight:     700;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          default;
    transform:       translate( -50%, -50% );
    box-shadow:      0 0 0 2px rgba( 0, 0, 0, 0.55 );
    pointer-events:  none;   /* informational only in Phase 2 */
}

/* ==========================================================================
 * Annotation legend (Type C side panel)
 * ========================================================================== */

.hac-explainer-annotation-legend {
    margin:     1rem 0 0;
    padding:    0;
    list-style: none;
    counter-reset: annotation-counter;
}

.hac-explainer-annotation-legend__item {
    display:        flex;
    gap:            0.5rem;
    align-items:    baseline;
    margin-bottom:  0.55rem;
    font-size:      0.84rem;
    color:          #c8c4b8;
    counter-increment: annotation-counter;
    padding-left:   0;
}

.hac-explainer-annotation-legend__item::before {
    content:         counter( annotation-counter );
    flex:            0 0 auto;
    width:           1.4rem;
    height:          1.4rem;
    border-radius:   50%;
    background:      rgba( 220, 190, 130, 0.75 );
    color:           #1c1c20;
    font-size:       0.72rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-top:      0.1rem;
}

.hac-explainer-annotation-legend__item strong {
    color: #e8e6df;
}

/* ==========================================================================
 * Type D — Metadata Demonstration
 * ========================================================================== */

.hac-explainer-type-d {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
    height:    100%;
}

.hac-explainer-type-d__screenshot {
    flex:       0 0 65%;
    min-width:  300px;
    padding:    1.5rem;
    background: rgba( 0, 0, 0, 0.22 );
    border-right: 1px solid rgba( 220, 190, 130, 0.08 );
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:        0.75rem;
    box-shadow: inset 0 8px 40px rgba( 193, 168, 123, 0.08 ),
                inset 0 -8px 40px rgba( 193, 168, 123, 0.08 );
}

.hac-explainer-media-img--screenshot {
    max-width:    100%;
    max-height:   calc( 82vh - 10rem );   /* shell height minus nav + caption + padding */
    object-fit:   contain;
    border-radius: 4px;
    filter:       drop-shadow( 0 0 18px rgba( 193, 168, 123, 0.45 ) )
                  drop-shadow( 0 4px 32px rgba( 193, 168, 123, 0.25 ) );
}

.hac-explainer-type-d__caption {
    font-size:  0.88rem;
    color:      rgba( 200, 196, 184, 0.75 );
    font-style: italic;
    text-align: center;
}

.hac-explainer-type-d__explanation {
    flex:            1 1 35%;
    min-width:       240px;
    padding:         2rem clamp( 1.5rem, 2.5vw, 2rem );
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             0;
    overflow-y:      auto;
}

/* ==========================================================================
 * Type E — CTA / Exploration Transition
 * ========================================================================== */

.hac-explainer-type-e {
    padding:         1.5rem clamp( 1.5rem, 4vw, 3rem );
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             1.25rem;
    height:          100%;
}

/* Compact header variant — shrinks heading + body to make room for cards */
.hac-explainer-type-e__header--compact .hac-explainer-headline {
    font-size: clamp( 1.3rem, 2.5vw, 1.75rem );
    margin-bottom: 0.25rem;
}

.hac-explainer-type-e__header--compact .hac-explainer-body {
    font-size: 0.9rem;
}

.hac-explainer-type-e__header--compact .hac-explainer-body p {
    margin-bottom: 0.4rem;
}

.hac-explainer-type-e__header .hac-explainer-headline {
    font-size: clamp( 1.6rem, 3vw, 2.25rem );
}

/* ==========================================================================
 * Collection cards row (Type E final slide)
 * ========================================================================== */

.hac-explainer-collection-cards {
    display:         flex;
    flex-direction:  row;
    justify-content: center;
    align-items:     stretch;
    gap:             1.25rem;
    width:           100%;
}

.hac-explainer-collection-card {
    display:         flex;
    flex-direction:  column;
    flex:            1 1 0;
    max-width:       220px;
    background:      rgba( 255, 255, 255, 0.04 );
    border:          1px solid rgba( 220, 190, 130, 0.18 );
    border-radius:   8px;
    overflow:        hidden;
    box-shadow:      0 2px 16px rgba( 0, 0, 0, 0.45 ),
                     0 0 0 1px rgba( 220, 190, 130, 0.06 ) inset;
    transition:      transform 200ms cubic-bezier( 0.4, 0.0, 0.2, 1 ),
                     box-shadow 200ms cubic-bezier( 0.4, 0.0, 0.2, 1 ),
                     border-color 200ms cubic-bezier( 0.4, 0.0, 0.2, 1 );
    will-change:     transform;
}

.hac-explainer-collection-card:hover {
    transform:    translateY( -3px ) scale( 1.015 );
    box-shadow:   0 6px 28px rgba( 0, 0, 0, 0.55 ),
                  0 0 18px rgba( 220, 190, 130, 0.12 ),
                  0 0 0 1px rgba( 220, 190, 130, 0.18 ) inset;
    border-color: rgba( 220, 190, 130, 0.38 );
}

/* Image button — fixed-ratio container, same technique as APC catalog thumb-wrap */
.hac-explainer-collection-card__image-btn {
    display:      block;
    position:     relative;
    width:        100%;
    aspect-ratio: 2 / 3;    /* portrait on desktop */
    overflow:     hidden;
    padding:      0;
    margin:       0;
    border:       none;
    background:   #0d0d10;
    cursor:       pointer;
    flex-shrink:  0;
}

@media ( max-width: 899px ) {
    .hac-explainer-collection-card__image-btn {
        cursor:       zoom-in;
        aspect-ratio: 16 / 9;   /* landscape on mobile */
    }
}

/* Blurred background fill — bleeds 10% past edges, clipped by overflow:hidden
   so the letterbox area is filled with a soft atmospheric echo of the image
   (identical to hac-card__thumb-bg in configurator.css) */
.hac-explainer-collection-card__image-bg {
    position:       absolute;
    inset:          -10%;
    width:          120%;
    height:         120%;
    object-fit:     cover;
    filter:         blur( 12px ) brightness( 0.5 ) saturate( 0.8 );
    pointer-events: none;
    z-index:        0;
}

/* Foreground image — contained within the ratio box, centred */
.hac-explainer-collection-card__image {
    position:   absolute;
    inset:      0;
    margin:     auto;
    display:    block;
    max-width:  100%;
    max-height: 100%;
    width:      auto;
    height:     auto;
    object-fit: contain;
    z-index:    1;
    transition: transform 220ms ease;
}

.hac-explainer-collection-card:hover .hac-explainer-collection-card__image {
    transform: scale( 1.04 );
}

.hac-explainer-collection-card:hover .hac-explainer-collection-card__image-bg {
    filter: blur( 14px ) brightness( 0.55 ) saturate( 0.85 );
}

/* Card text area */
.hac-explainer-collection-card__name {
    font-size:      0.88rem;
    font-weight:    600;
    color:          #f4efe1;
    line-height:    1.3;
    padding:        0.6rem 0.75rem 0.25rem;
    margin:         0;
}

.hac-explainer-collection-card__desc {
    font-size:   0.78rem;
    color:       rgba( 200, 196, 184, 0.78 );
    line-height: 1.45;
    padding:     0 0.75rem 0.6rem;
    margin:      0;
    flex:        1 1 auto;
}

/* Per-card Explore button — secondary style, less prominent than Begin Exploring */
.hac-explainer-collection-card__cta {
    display:        block;
    width:          calc( 100% - 1.5rem );
    margin:         0 0.75rem 0.75rem;
    padding:        0.35rem 0;
    background:     transparent;
    border:         1px solid rgba( 220, 190, 130, 0.3 );
    border-radius:  4px;
    color:          rgba( 220, 190, 130, 0.85 );
    font-size:      0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     border-color 150ms ease, color 150ms ease, background 150ms ease;
    flex-shrink:    0;
}

.hac-explainer-collection-card__cta:hover {
    border-color: rgba( 220, 190, 130, 0.7 );
    color:        #f4efe1;
    background:   rgba( 220, 190, 130, 0.08 );
}

.hac-explainer-collection-card__cta-label {
    pointer-events: none;
}

/* ==========================================================================
 * Shared media caption
 * ========================================================================== */

.hac-explainer-media-caption {
    font-size:  0.85rem;
    color:      rgba( 200, 196, 184, 0.7 );
    font-style: italic;
    margin-top: 0.5rem;
    text-align: center;
}

/* ==========================================================================
 * TODO placeholder
 * ========================================================================== */

.hac-explainer-todo-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    padding:         2rem;
    background:      rgba( 0, 0, 0, 0.2 );
    border:          1px dashed rgba( 220, 190, 130, 0.25 );
    border-radius:   4px;
    min-height:      180px;
    width:           100%;
    flex:            1 1 auto;   /* expand to fill the img-frame */
}

.hac-explainer-todo-placeholder__label {
    font-size:  0.88rem;
    color:      rgba( 200, 196, 184, 0.4 );
    font-style: italic;
}

.hac-explainer-todo-placeholder__verdict {
    font-size:   0.95rem;
    font-weight: 500;
    color:       #c8c4b8;
    text-align:  center;
}

/* ==========================================================================
 * In-shell media lightbox — mobile tap-to-expand
 * ========================================================================== */

.hac-explainer-lightbox {
    display:         none;   /* hidden by default; shown via .is-open */
    position:        absolute;
    inset:           0;
    z-index:         10;
    align-items:     center;
    justify-content: center;
}

.hac-explainer-lightbox.is-open {
    display: flex;
}

.hac-explainer-lightbox__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba( 8, 8, 12, 0.88 );
}

.hac-explainer-lightbox__media {
    position:        relative;
    z-index:         1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    padding:         3rem 1rem 1rem;   /* room for close button at top */
    box-sizing:      border-box;
}

.hac-explainer-lightbox__img {
    max-width:    100%;
    max-height:   100%;
    object-fit:   contain;
    border-radius: 4px;
    /* Video elements need explicit dimensions */
    width:        auto;
    height:       auto;
}

.hac-explainer-lightbox__close {
    position:         absolute;
    top:              0.5rem;
    right:            0.5rem;
    z-index:          2;
    width:            2.25rem;
    height:           2.25rem;
    padding:          0;
    border:           none;
    background:       rgba( 28, 28, 32, 0.85 );
    color:            #c8c4b8;
    cursor:           pointer;
    border-radius:    4px;
    -webkit-appearance: none;
    appearance:       none;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background-color 150ms ease, color 150ms ease;
}

.hac-explainer-lightbox__close:hover,
.hac-explainer-lightbox__close:focus-visible {
    background: rgba( 255, 220, 140, 0.15 );
    color:      #f4efe1;
    outline:    none;
}

/* ==========================================================================
 * Slide-specific legend alignment overrides
 *
 * For multi-step reveal slides where body content changes between states,
 * centering the legend causes the headline to drift. Pin those legends to
 * top-alignment with a fixed top padding so the header stays in place.
 * ========================================================================== */

/* 7B — Human Review Still Matters
 * The evaluator report video has a bright white background that makes the
 * amber drop-shadow invisible. Apply the glow directly to the video element
 * as a box-shadow (which renders inside the column and is visible against
 * the dark column background) rather than relying on drop-shadow. */
.hac-explainer-shell[data-slide-id="7B"] .hac-explainer-type-b__visual .hac-explainer-media-img,
.hac-explainer-shell[data-slide-id="7B"] .hac-explainer-type-b__visual video.hac-explainer-media-img {
    max-width:  100%;
    max-height: 65vh;
    box-shadow: 0 0 40px rgba( 193, 168, 123, 0.55 ),
                0 0 80px rgba( 193, 168, 123, 0.25 );
    filter:     none;
}

/* 3C — Refinement Is Part of the Process (3 reveal states, varying body)
 * Top-align the legend and use a fixed padding-top that matches where the
 * header would sit if step 1 (the tallest body) were vertically centered.
 * The shell is 82vh; step-1 content (label + headline + 2 paras) is ~14rem.
 * Centered top = (82vh - 14rem) / 2 ≈ 41vh - 7rem. */
.hac-explainer-shell[data-slide-id="3C"] .hac-explainer-type-c__legend {
    justify-content: flex-start;
    padding-top:     calc( 41vh - 7rem );
}

/* ==========================================================================
 * Mobile — type layout overrides
 * On narrow viewports, all multi-column layouts stack vertically.
 * ========================================================================== */

@media ( max-width: 900px ) {
    /* Stack all multi-column type containers vertically.
       height: 100% fills the slide region; the slide itself scrolls if
       the stacked content (text + visual) is taller than the available space. */
    .hac-explainer-type-b,
    .hac-explainer-type-c,
    .hac-explainer-type-d {
        flex-direction: column;
        flex-wrap:      nowrap;
        height:         100%;
        min-height:     100%;
        width:          100%;
        max-width:      100%;
        overflow-x:     hidden;
        box-sizing:     border-box;
    }

    /* Text/legend/explanation columns — appear FIRST (top) on mobile. */
    .hac-explainer-type-b__text,
    .hac-explainer-type-c__legend,
    .hac-explainer-type-d__explanation {
        order:           1           !important;
        flex:            0 0 auto    !important;
        width:           100%        !important;
        max-width:       100%        !important;
        min-width:       0           !important;
        box-sizing:      border-box  !important;
        padding:         2.75rem 1.25rem 1rem !important;
        justify-content: flex-start  !important;
        overflow-x:      hidden      !important;
    }

    /* Visual/screenshot columns — appear SECOND (below text) on mobile. */
    .hac-explainer-type-b__visual,
    .hac-explainer-type-c__visual,
    .hac-explainer-type-d__screenshot {
        order:      2           !important;
        flex:       1 1 auto    !important;
        width:      100%        !important;
        max-width:  100%        !important;
        min-width:  0           !important;
        min-height: 160px       !important;
        box-sizing: border-box  !important;
        overflow:   hidden      !important;
    }

    /* All media elements inside visual columns — fit within the column */
    .hac-explainer-type-b__visual .hac-explainer-media-img,
    .hac-explainer-type-b__visual video.hac-explainer-media-img,
    .hac-explainer-type-c__visual .hac-explainer-media-img,
    .hac-explainer-type-c__visual video.hac-explainer-media-img,
    .hac-explainer-type-d__screenshot .hac-explainer-media-img,
    .hac-explainer-type-d__screenshot video.hac-explainer-media-img,
    .hac-explainer-media-img--screenshot {
        max-width:  100%;
        max-height: 100%;
        width:      auto;
        height:     auto;
        object-fit: contain;
    }

    /* Type C comparison row — portrait pair side by side within the column */
    .hac-explainer-type-c__comparison {
        height:     100%;
        flex-wrap:  nowrap;
    }

    .hac-explainer-type-c__comparison--two-up .hac-explainer-img-frame {
        flex:       1 1 50%;
        min-width:  0;
        height:     100%;
    }

    /* Remove desktop border-right, add bottom separator */
    .hac-explainer-type-c__visual,
    .hac-explainer-type-d__screenshot {
        border-right:  none;
        border-bottom: 1px solid rgba( 220, 190, 130, 0.08 );
    }

    /* Type B visual: remove desktop border-left */
    .hac-explainer-type-b__visual {
        border-left: none;
    }

    /* Live preview carousel — fill the visual column height on mobile
       rather than using the carousel's fixed desktop track height. */
    .hac-explainer-type-b__visual--live-preview {
        padding:    0;
        overflow:   visible;
    }

    .hac-explainer-type-b__visual--live-preview .hac-lap-section {
        padding: 0;
        width:   100%;
    }

    .hac-explainer-type-b__visual--live-preview .hac-lap-carousel-wrap {
        padding: 12px 0 16px;
    }

    .hac-explainer-type-b__visual--live-preview .hac-lap-track {
        height: 280px;
    }

    .hac-explainer-type-b__visual--live-preview .hac-lap-card {
        width: 180px;
    }

    .hac-explainer-type-b__visual--live-preview .hac-lap-card.is-near-left  { transform: translateX(-195px) scale(0.89); }
    .hac-explainer-type-b__visual--live-preview .hac-lap-card.is-near-right { transform: translateX(195px)  scale(0.89); }
    .hac-explainer-type-b__visual--live-preview .hac-lap-card.is-outer-left  { opacity: 0; pointer-events: none; }
    .hac-explainer-type-b__visual--live-preview .hac-lap-card.is-outer-right { opacity: 0; pointer-events: none; }

    .hac-explainer-type-b__visual--live-preview .hac-lap-nav-prev { left: 4px; }
    .hac-explainer-type-b__visual--live-preview .hac-lap-nav-next { right: 4px; }

    .hac-explainer-type-b__visual--live-preview .hac-lap-dots {
        margin-top: 12px;
    }

    /* Disable the 3C legend alignment override on mobile — it uses a
       calc based on desktop shell height and will misplace content */
    .hac-explainer-shell[data-slide-id="3C"] .hac-explainer-type-c__legend {
        justify-content: flex-start;
        padding-top:     1rem;
    }

    /* Annotation dots are positioned relative to the full image frame and
       rely on the image filling that frame closely — which doesn't hold on
       mobile where images are tiny and letterboxed. Hide them; the legend
       text below communicates the same information. */
    .hac-explainer-annotation-dot {
        display: none !important;
    }

    /* Type E — on mobile the outer wrapper must NOT lock to 100% height,
       because the stacked cards overflow it. Let it grow naturally and
       allow the slide region (which already has overflow-y: auto) to scroll. */
    .hac-explainer-type-e {
        height:     auto;
        min-height: 100%;
    }

    /* Collection cards — stack vertically on mobile */
    .hac-explainer-collection-cards {
        flex-direction: column;
        align-items:    stretch;   /* full-width cards, not centred */
    }

    /* Each card: let it size from its own content, not flex-basis 0 */
    .hac-explainer-collection-card {
        flex:       0 0 auto;   /* do NOT collapse to flex-basis:0 */
        max-width:  100%;
        width:      100%;
        overflow:   visible;    /* un-clip so children can establish height */
    }

    /* The image-btn aspect-ratio is already overridden to 16/9 via the
       @media (max-width: 899px) rule above the mobile block. No additional
       image rules needed here — the abs-positioned fg/bg images fill the
       ratio container automatically. */
}