/* ============================================================
   Awards Section — Two-phase scroll-driven reveal
   Phase 1: Title "Awards" with Branch SVG + dashed lines
   Phase 2: Awards list with hover-to-image interaction
   ============================================================ */


/* ── Section Tokens ── */
:root {
    --aw-bg:            var(--color-black2);
    --aw-text:          var(--color-white);
    --aw-abox-bg:       var(--color-white);
    --aw-abox-text:     var(--color-black2);
    --aw-abox-size:     clamp(80px, 10vw, 140px);
}


/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.awards-section {
    position: relative;
    z-index: var(--z-base);
    margin-top: -100vh;
    pointer-events: none;
}

.awards-runway {
    position: relative;
}

.awards-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--aw-bg);
    color: var(--aw-text);
    pointer-events: auto;
}


/* ============================================================
   PHASE 1 — Title Reveal
   ============================================================ */
.aw-phase1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* ── Branch SVG (background watermark) ──
   Position/scale/mask/filter all managed by GSAP — CSS just sets structure.
   Width is via --aw-branch-width so the debug panel can resize it; the JS
   re-measures branchNaturalW on refresh, so the line geometry stays in sync.
   max-width: none overrides the global img reset (max-width: 100%) which
   would otherwise clamp the branch to viewport width and hide growth. */
.aw-branch-bg {
    position: absolute;
    width: var(--aw-branch-width, 120vw);
    max-width: none;
    height: auto;
    pointer-events: none;
    opacity: 0;
}

/* ── Dashed Lines — positioned via JS to match A-box edges ── */
.aw-dash-h,
.aw-dash-v {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.aw-dash-h {
    height: 0;
    border-top: var(--guide-border);
    transform: scaleX(0);
}

.aw-dash-v {
    width: 0;
    border-left: var(--guide-border);
    transform: scaleY(0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 25%, black 75%, transparent 95%);
    mask-image: linear-gradient(to bottom, transparent 5%, black 25%, black 75%, transparent 95%);
}

/* ── Title Group ── */
.aw-title-group {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.aw-line1 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--aw-line1-size, var(--text-xl));
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    color: var(--aw-text);
    margin-bottom: 0;
    margin-left: calc(var(--aw-abox-size) + 0.05em);
    /* Use position-based offsets — transform would conflict with GSAP scale/blur tweens */
    position: relative;
    top: var(--aw-line1-offset-y, 0);
    left: var(--aw-line1-offset-x, 0);
}

/* ── A-box + wards row ── */
.aw-abox-row {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    margin-top: -0.05em;
}

/* Desktop: A-box is absolute, positioned by JS */
.aw-abox {
    position: absolute;
    z-index: 10;
    width: var(--aw-abox-size);
    height: var(--aw-abox-size);
    background: var(--aw-abox-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--aw-abox-radius, 0);
}

/* Desktop: Branch is absolute */
.aw-branch-bg {
    z-index: 5;
}

/* ── Phase 2 Branch (cream-coloured, sits below repositioned A-box) ──
   Uses CSS mask so the SVG shape can be filled with a token colour
   instead of relying on filter: brightness/invert which only yields pure white. */
.aw-branch-p2 {
    position: absolute;
    width: clamp(60px, 7vw, 100px);
    aspect-ratio: 1269 / 533;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    background-color: var(--color-white);
    -webkit-mask: url('../../assets/svg/shapes/Branch asset.svg') no-repeat center / contain;
    mask: url('../../assets/svg/shapes/Branch asset.svg') no-repeat center / contain;
}

@media (max-width: 767px) {
    .aw-branch-p2 { display: none; }
}

/* Invisible spacer in Phase 1 matching A-box dimensions */
.aw-abox-spacer {
    width: var(--aw-abox-size);
    height: var(--aw-abox-size);
    flex-shrink: 0;
    margin-right: calc(var(--aw-abox-size) * -0.1);
}

.aw-abox-letter {
    font-family: var(--font-heading);
    font-weight: 700;
    /* Letter size is decoupled from box size — debug panel can scale them independently. */
    font-size: var(--aw-letter-size, calc(var(--aw-abox-size) * 0.7));
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--aw-abox-text);
    /* Letter offset uses transform — letter has no GSAP transforms of its own,
       and the parent A-box's transform compounds, scaling the offset with the box. */
    transform: translate(var(--aw-letter-offset-x, 0), var(--aw-letter-offset-y, 0));
}

.aw-wards {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--aw-wards-size, var(--text-3xl));
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    color: var(--aw-text);
    position: relative;
    top: var(--aw-wards-offset-y, 0);
    left: var(--aw-wards-offset-x, 0);
}

.aw-tagline {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--aw-tagline-size, var(--text-sm));
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-greyish);
    margin-top: 4px;
    margin-left: calc(var(--aw-abox-size) + 0.3em);
    position: relative;
    top: var(--aw-tagline-offset-y, 0);
    left: var(--aw-tagline-offset-x, 0);
}


/* ============================================================
   PHASE 2 — Awards List
   ============================================================ */
.aw-phase2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(80px, 12vh, 120px) var(--pad-x) 5vh;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.aw-phase2.is-active {
    pointer-events: auto;
}

/* ── Top Group: same A-box + Branch animated by GSAP into position ── */
.aw-p2-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(10px, 2vw, 20px);
    flex-shrink: 0;
    min-height: clamp(50px, 8vw, 90px);
}

/* ── Awards Grid ── */
.aw-awards-grid {
    display: flex;
    gap: clamp(30px, 4vw, 60px);
    flex: 1;
    min-height: 0;
    /* Push the rows down a bit further from the small Phase 2 A-box + branch
       at the top of the section. Mobile resets this in the @media block. */
    margin-top: clamp(20px, 3vw, 50px);
    /* No overflow clipping — the row::before dashed dividers extend past
       phase2's horizontal padding to the viewport edge, so any axis with
       overflow:hidden would chop them off on the left. */
    overflow: visible;
}

.aw-awards-list {
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
}

/* ── Award Row (no longer accordion — flat layout, full vw dividers) ── */
.aw-row {
    position: relative;
    padding: clamp(16px, 2vw, 28px) 0;
    display: flex;
    gap: clamp(40px, 4vw, 80px);   /* year ↔ bullets gap (wider) */
    width: 100%;
    align-items: flex-start;
}

/* Dashed separator above each row — full viewport width with a soft
   right-side fade. The line escapes phase2's horizontal padding by
   pulling left by var(--pad-x) and using width: 100vw. Mobile resets
   this back to padding-confined width in the mobile @media block. */
.aw-row::before {
    content: '';
    position: absolute;
    top: 0;
    /* -2vw matches the global --pad-x value for desktop/tablet (2% of vw).
       We can't use calc(-1 * var(--pad-x)) here because % on `left` resolves
       against the containing block (the row) not the viewport, which would
       leave a small gap on the left edge. Mobile @media overrides this back
       to left: 0; width: 100% (the rows already span full viewport there). */
    left: -2vw;
    width: 100vw;
    height: 0;
    border-top: var(--guide-border);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 65%);
    mask-image: linear-gradient(to right, black 0%, black 35%, transparent 65%);
}

/* Last row bottom border — same right-side fade */
.aw-row:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* -2vw matches the global --pad-x value for desktop/tablet (2% of vw).
       We can't use calc(-1 * var(--pad-x)) here because % on `left` resolves
       against the containing block (the row) not the viewport, which would
       leave a small gap on the left edge. Mobile @media overrides this back
       to left: 0; width: 100% (the rows already span full viewport there). */
    left: -2vw;
    width: 100vw;
    height: 0;
    border-top: var(--guide-border);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 65%);
    mask-image: linear-gradient(to right, black 0%, black 35%, transparent 65%);
}

.aw-year {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    color: var(--aw-text);
    flex-shrink: 0;
    min-width: clamp(60px, 6vw, 100px);
}

.aw-lines {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 14px);
    justify-content: center;
}

/* ── Award line: dash icon + body text, no longer hoverable/clickable ── */
.aw-award-line {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);   /* dash ↔ text gap (smaller than year ↔ bullets) */
}

.aw-award-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-greyish);
}

/* Dash icon — coloured via mask + token background-color so it stays
   in sync with the brand cream/white. Desktop default ~3px tall. */
.aw-award-dash {
    width: clamp(20px, 1.5vw, 30px);
    height: 3px;
    flex-shrink: 0;
    background-color: var(--color-white);
    -webkit-mask: url('../../assets/svg/icons/Dash Icon.svg') no-repeat center / contain;
    mask: url('../../assets/svg/icons/Dash Icon.svg') no-repeat center / contain;
}


/* ============================================================
   PHASE 2 — Fixed 3-image collage (right column on desktop/tablet,
   bottom of section on mobile). Same 3 images repeated, layout
   "middle-front" puts the centre image on top of the two sides.
   Reveal: scale-up + depixelate, triggered once after Phase 1 ends.
   ============================================================ */
.aw-p2-collage {
    flex: 1;
    position: relative;
    align-self: stretch;
    z-index: 5;   /* sit above the row::before dashed dividers */
    pointer-events: none;
}

.aw-p2-collage[data-collage="middle-front"] {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 600px;
}

.aw-p2-collage[data-collage="middle-front"] .depix-wrap {
    position: absolute;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.aw-p2-collage[data-collage="middle-front"] .depix-wrap img,
.aw-p2-collage[data-collage="middle-front"] .depix-wrap canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Left image — sits behind, tilted left */
.aw-p2-collage[data-collage="middle-front"] .depix-wrap:nth-of-type(1) {
    width: 42%;
    top: 8%;
    left: 4%;
    transform: rotate(-6deg);
    z-index: 1;
}

/* Centre image — on top, larger, slight tilt */
.aw-p2-collage[data-collage="middle-front"] .depix-wrap:nth-of-type(2) {
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    z-index: 3;
}

/* Right image — sits behind, tilted right */
.aw-p2-collage[data-collage="middle-front"] .depix-wrap:nth-of-type(3) {
    width: 42%;
    top: 8%;
    right: 4%;
    transform: rotate(5deg);
    z-index: 2;
}


/* ============================================================
   PHASE 2 SMALL A-BOX  (mobile-only badge above first accordion)
   Hidden by default; the mobile @media below toggles it on.
   ============================================================ */
.aw-p2-abox {
    display: none;
    width: var(--aw-m-p2-abox-size, 48px);
    height: var(--aw-m-p2-abox-size, 48px);
    background: var(--aw-abox-bg);
    color: var(--aw-abox-text);
    border-radius: var(--aw-m-abox-radius, 4px);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(var(--aw-m-p2-abox-rotation, 10deg));
    transform-origin: center center;
}

.aw-p2-abox-letter {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: calc(var(--aw-m-p2-abox-size, 48px) * 0.7);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}


/* ============================================================
   MOBILE  (<=767px) — Normal scroll, no sticky / no scrub.
   Phase 1 elements stay laid out the same way as desktop (A-box
   absolutely positioned over the title-group spacer, dashed lines
   tracking the A-box, branch behind), but the section flows normally
   and reveals on viewport entry instead of a scrubbed timeline.
   Mobile-prefixed CSS vars (--aw-m-*) keep the mobile debug panel
   from colliding with the desktop panel's vars on the same element.
   ============================================================ */
@media (max-width: 767px) {
    /* ── Mobile defaults — the debug panel overrides these via inline
          style on .awards-section. Starting points mirror desktop's
          arrangement so the mobile tuning starts from a familiar layout. */
    :root {
        --aw-m-abox-size:        90px;
        --aw-m-abox-radius:      4px;
        --aw-m-letter-size:      90px;
        --aw-m-line1-size:       22px;
        --aw-m-wards-size:       100px;
        --aw-m-tagline-size:     12px;
        --aw-m-branch-width:     140vw;
        --aw-m-phase1-height:    65vh;
        --aw-m-p2-abox-size:     48px;
        --aw-m-p2-abox-rotation: 0deg;
    }

    /* ── Section: drop the sticky-overlap stacking, become normal flow ── */
    .awards-section {
        margin-top: 0;
        z-index: auto;
        pointer-events: auto;
    }
    .awards-runway {
        height: auto !important;
    }
    .awards-sticky {
        position: relative;
        height: auto;
        padding: 0;
        overflow: hidden;
    }

    /* ── Phase 1: fixed-height container in normal flow.
          A-box, branch, dashed lines remain absolutely positioned within
          .awards-sticky (their nearest positioned ancestor) — JS computes
          their coordinates so they sit centered inside Phase 1's space. */
    .aw-phase1 {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: var(--aw-m-phase1-height, 65vh);
        min-height: 50vh;
        padding: 0 var(--pad-x);
    }

    /* ── Phase 2 small A-box: shows above the first accordion,
          left-aligned to the global page padding. ── */
    .aw-p2-abox {
        display: flex;
        margin: 0 0 clamp(16px, 4vw, 28px) var(--pad-x);
    }

    /* ── A-box: stays absolute (positioned by JS), mobile-sized ── */
    .aw-abox {
        width: var(--aw-m-abox-size);
        height: var(--aw-m-abox-size);
        border-radius: var(--aw-m-abox-radius, 0);
    }
    .aw-abox-spacer {
        width: var(--aw-m-abox-size);
        height: var(--aw-m-abox-size);
        margin-right: calc(var(--aw-m-abox-size) * -0.1);
    }
    .aw-abox-letter {
        font-size: var(--aw-m-letter-size, calc(var(--aw-m-abox-size) * 0.7));
        transform: translate(var(--aw-m-letter-offset-x, 0), var(--aw-m-letter-offset-y, 0));
    }

    /* ── Title text — keep desktop's left-aligned arrangement on mobile ── */
    .aw-line1 {
        font-size: var(--aw-m-line1-size, 22px);
        margin-left: calc(var(--aw-m-abox-size) + 0.05em);
        top: var(--aw-m-line1-offset-y, 0);
        left: var(--aw-m-line1-offset-x, 0);
    }
    .aw-wards {
        font-size: var(--aw-m-wards-size, 100px);
        top: var(--aw-m-wards-offset-y, 0);
        left: var(--aw-m-wards-offset-x, 0);
    }
    .aw-tagline {
        font-size: var(--aw-m-tagline-size, 12px);
        margin-left: calc(var(--aw-m-abox-size) + 0.3em);
        top: var(--aw-m-tagline-offset-y, 0);
        left: var(--aw-m-tagline-offset-x, 0);
    }

    /* ── Branch SVG: stays absolute, mobile-tunable width ── */
    .aw-branch-bg {
        width: var(--aw-m-branch-width, 140vw);
    }

    /* ── Dashed lines visible on mobile and tracked by JS to the A-box ── */
    .aw-dash-h,
    .aw-dash-v {
        display: block;
    }

    /* ── Phase 2: normal flow, opacity 1 immediately (rows fade in via ST) ── */
    .aw-phase2 {
        position: relative;
        top: auto;
        left: auto;
        opacity: 1;
        height: auto;
        padding: var(--pad-y) 0;
        pointer-events: auto;
    }

    /* ── Phase 2 grid: stack rows + collage vertically on mobile,
          drop the desktop margin-top so the small A-box badge sits
          right next to the first row. ── */
    .aw-awards-grid {
        flex-direction: column;
        overflow: visible;
        margin-top: 0;
    }
    .aw-awards-list {
        flex: none;
        width: 100%;
        overflow: visible;
    }

    /* ── Award rows on mobile: stack year on top, bullets below.
          Each row keeps the dashed dividers, but they're confined
          to the content width (no full-vw + fade). ── */
    .aw-row {
        flex-direction: column;
        gap: clamp(10px, 2.5vw, 16px);
        padding: clamp(28px, 7vw, 44px) var(--pad-x);
    }
    .aw-row::before,
    .aw-row:last-child::after {
        left: 0;
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .aw-year {
        font-size: clamp(22px, 5vw, 32px);
    }
    .aw-lines {
        gap: clamp(6px, 2vw, 12px);
    }

    /* ── Dash icon sized down on mobile (~2px tall) ── */
    .aw-award-dash {
        height: 2px;
        width: clamp(16px, 5vw, 24px);
    }

    /* ── Phase 2 collage on mobile: full content width below the rows ── */
    .aw-p2-collage[data-collage="middle-front"] {
        margin: clamp(40px, 8vw, 80px) auto 0;
        max-width: 100%;
    }
}