// ══════════════════════════════════════════════════════════
//  Highlights 2025 — Horizontal Scroll Section
//  Structure:
//    .hl-scroll-wrapper
//      .ar-highlights
//        .hl-header
//          .hl-title
//          .copy
//        .hl-arrows
//          .hl-prev
//          .hl-next
//        .hl-track-outer
//          .hl-row
//            .hl-card  ×n
// ══════════════════════════════════════════════════════════


// ── Mixin: shared arrow button styles ─────────────────────
// Used by both .hl-prev and .hl-next via @include arrow-base.
// pointer-events: auto re-enables tapping on the buttons
// because their parent .hl-arrows overlay has pointer-events: none.
@mixin arrow-base {
    font-size:      var(--hl-arrow-size);
    color:          var(--hl-color-text);
    cursor:         pointer;
    background:     none;
    border:         none;
    padding:        8px;
    line-height:    1;
    pointer-events: auto;
    transition:     var(--hl-transition-arrow);

    // Hover: highlight with brand colour
    &:hover { color: var(--hl-color-brand); }

    // Hidden state: JS sets aria-disabled="true" when
    // at the first or last card; CSS fades and blocks the button.
    &[aria-disabled="true"] {
        opacity:        0;
        pointer-events: none;
    }
}


// ── Grey background for layout wrapper ────────────────────
// Applied by a CMS layout class that wraps .ar-highlights.
.frame-layout-100 {
    .ar-highlights {
        background: var(--hl-color-bg);
    }
}
.ar-highlights-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;  // sits above the wrapper bg but below content (z-index: 2)

    &__img {
        width:      100%;
        height:     100%;
        object-fit: cover;
        opacity:    .2;
    }
}

.hl-wrapper {
    position:   relative;
    background: var(--hl-color-bg, #f2f2f2); // ADD THIS

    .inner {
        max-width: 1360px;
        margin-inline: auto;
    }
}

// ── Component root ────────────────────────────────────────
// All design tokens are scoped here so the component is
// self-contained and overridable per instance.
.hl-scroll-wrapper {

    // ── Design tokens ──────────────────────────────────────

    // Colors
    --hl-color-bg:         #f2f2f2;   // section background
    --hl-color-brand:      #243d51;   // accent / title / hover
    --hl-color-text:       #243d51;   // primary text & arrows
    --hl-color-img-bg:     #d0d0d0;   // image placeholder





    // Transitions
    --hl-transition-slide: transform 0.45s cubic-bezier(.22, 1, .36, 1); // track slide
    --hl-transition-img:   transform 0.5s ease;                          // card image zoom
    --hl-transition-arrow: color 0.2s, opacity 0.3s;                     // arrow states

    // Sizing
    --hl-arrow-size:    26px; // arrow button font-size
    --hl-dot-size:      16px;  // timeline dot diameter
    --hl-card-gap:      30px; // gap between cards in .hl-row (read by JS too)

    // Spacing
    --hl-section-pad-v: 52px; // section top padding
    --hl-section-pad-b: 32px; // section bottom padding
    --hl-track-margin:  60px; // left/right margin of .hl-track-outer


    // ── Section ────────────────────────────────────────────
    .ar-highlights {
        overflow:        hidden;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: flex-start;
        padding:         var(--hl-section-pad-v) 0 var(--hl-section-pad-b);
        box-sizing:      border-box;
        position:        relative; // anchor for .hl-arrows absolute overlay




        // ── Header ───────────────────────────────────────────
        .hl-header {
            text-align:  center;
            margin-bottom: 24px;
            flex-shrink: 0;
            width:       100%;
            padding:     0 var(--hl-track-margin); // aligns with track edges
            box-sizing:  border-box;

            // Section headline
            .hl-title {
                font-size:   clamp(28px, 3.5vw, 72px);
                font-weight: 700;
                background: linear-gradient(to right, #f38549 0%, #d3405e 22%, #c02f80 45%, #9a2575 68%, #762589 100%);;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin:      0 0 20px;
                line-height: 1.2;
            }

            // Intro copy / subtitle
            .hl-copy {
                font-size: 1rem;
                line-height: 1.7;
                font-family: Noto-Serif, serif;
            }
        }


        // ── Arrow overlay ─────────────────────────────────────
        // Stretched to inset: 0 so it doesn't consume flex space
        // or intercept taps outside the buttons themselves.
        // Individual buttons re-enable pointer-events via the mixin.
        .hl-arrows {
            position:       absolute;
            inset:          0;
            pointer-events: none;
            z-index:        10;

            // Shared positioning for both buttons
            .hl-prev,
            .hl-next {
                @include arrow-base;
                position:   absolute;
                top:        48%;
                transform:  translateY(-50%);
                background: transparent !important; // override any CMS resets
            }

            // Previous: anchored to the left edge
            .hl-prev { left: 12px; }

            // Next: anchored to the right edge
            .hl-next { right: 12px; }
        }


        // ── Track ─────────────────────────────────────────────
        // pointer-events: none prevents this flex container from
        // swallowing taps that should reach the arrow buttons.
        // JS reads --hl-card-gap from this element via getComputedStyle.
        .hl-track-outer {
            position:       relative;
            width:          calc(100% - var(--hl-track-margin) * 2);
            overflow:       hidden;  // clips cards outside the viewport
            //flex:           1;
            align-self:     center;
            margin:         0 var(--hl-track-margin);
            min-height:     0;       // allows flex child to shrink correctly
            display:        flex;
            flex-direction: column;
            pointer-events: none;


            // ── Row ────────────────────────────────────────────
            // width: max-content lets cards overflow naturally;
            // JS translates this element to scroll between cards.
            .hl-row {
                display:     flex;
                gap:         var(--hl-card-gap);
                width:       max-content;
                align-items: flex-start;
                transition:  var(--hl-transition-slide);
            }
        }
    }


    // ── Mobile ─────────────────────────────────────────────
    // Tighter margins; arrows pulled flush to the track edges.
    // JS handles 1-card-at-a-time layout at this breakpoint.
    @media (max-width: 880px) {
        --hl-track-margin: 30px; // reduce side margins on small screens

        .ar-highlights {

            // Recompute track width with the overridden margin
            .hl-track-outer {
                width:  calc(100% - var(--hl-track-margin) * 2);
                margin: 0 var(--hl-track-margin);
            }

            // Pull arrows outside the track so they don't overlap the card
            .hl-arrows {
                .hl-prev { left:  -10px; }
                .hl-next { right: -10px; }
            }
        }
    }
}

// ── Annual Report context overrides ───────────────────────
// Wider margins and arrow positions when inside the full-height
// slider layout (.annualReport), which has more horizontal space.
.annualReport .hl-scroll-wrapper {
    --hl-track-margin: 100px;

    .ar-highlights .hl-arrows {
        .hl-prev { left: 56px; }
        .hl-next { right: 56px; }
    }

    @media (max-width: 880px) {
        --hl-track-margin: 40px; // reduce side margins on small screens

        .ar-highlights .hl-arrows {
            .hl-prev { left: 12px; }
            .hl-next { right: 12px; }
        }
    }


}