/* ============================================================
   WEB DESIGN BRISBANE — Section 2: Who Beinc Is
   Centred heading + central landscape image with the service-label
   fan flanking it. Lives inside .wdb-frame so the hero side rails
   extend down to its bottom edge.
   Phase 1: static structure (heading + image + fan mounts).
   The grow→pin + fan animation are layered in later phases.
   ============================================================ */
.wdb-who {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    padding: var(--pad-top-nav) calc(var(--wdb-pad) * 2) var(--wdb-pad);
    overflow: hidden;
}

.wdb-who__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.wdb-who__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-size: var(--wdb-fs-display);
    color: var(--color-black2);
    margin: 0 0 clamp(48px, 9vh, 120px);
}

.wdb-who__stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Central landscape image (~40vw, rounded), in front of the fans.
   The <img> lives in an inner ".grow" layer so the grow animation can
   scale a HIGH-RES bitmap DOWN at rest (and back up to fill the screen)
   instead of scaling a small bitmap UP — which is what made the grown
   image look soft. See wdb-scroll.js (whoGrow) + the ≥768 block below. */
.wdb-who__media {
    position: relative;
    width: 40vw;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
    z-index: 1;
}
/* default (mobile / no-JS): the grow layer simply fills the box, rounded */
.wdb-who__media-grow {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}
.wdb-who__media-grow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Service-label fans flank the image (each ~20vw), sitting BEHIND it and
   tucked under its edges by a few vw so they overlap a little. */
.wdb-who__fan {
    position: relative;
    width: 20vw;
    flex-shrink: 0;
    z-index: 0;
    pointer-events: none;
}
.wdb-who__fan--left  { margin-right: -1vw; }
.wdb-who__fan--right { margin-left: -1vw; }

/* Runtime-injected animated fan SVG (who-fan.js) — same treatment as the
   services hero fans. Stage is aspect-locked to the 330:265 viewBox; the SVG
   overflows so labels can swing past the box without clipping. */
.wdb-who__fan-mount { position: relative; width: 100%; aspect-ratio: 330 / 265; }
.wdb-who__fan-mount .sfl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wdb-who__fan-mount .sfl-label { will-change: transform, opacity; }
/* Replacement pill rect (clean dashed stroke, swapped in for Figma's baked geometry) */
.wdb-who__fan-mount .sfl-pill {
    fill: var(--color-black2);
    stroke: var(--color-grid);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
}


/* ---- DESKTOP + TABLET: grow → pin runway ----
   The section becomes a 200vh scroll runway. Its inner pins (CSS
   sticky) for one viewport while the image — grown to near-fullscreen
   as the section scrolled up into view (wdb-scroll.js) — is held, and
   the dark Block 1 (margin-top:-100vh) slides up over it. No JS pin:
   the "pin" is this sticky, the grow is a scrubbed transform.
   IMPORTANT: .wdb-who must NOT be overflow:hidden here or the sticky
   child would sit inside a scroll container and never stick. */
@media (min-width: 768px) {
    .wdb-who {
        display: block;
        min-height: 300vh;       /* pin(100vh) + grow(100vh) + curtain(100vh) */
        padding: 0;
        overflow: visible;
    }
    .wdb-who__inner {
        position: sticky;
        top: 0;
        height: 100vh;
        justify-content: center;
        overflow: clip;          /* clip the grown image to the viewport box */
        padding: 0;              /* image grows edge-to-edge, no padding limit */
        box-sizing: border-box;
    }
    /* the box stays the 40vw LAYOUT slot (fans/heading anchor to it); the grow
       layer is taken out of flow so its raster can be viewport-sized */
    .wdb-who__media { overflow: visible; }
    .wdb-who__media-grow {
        --who-rest: 0.40;        /* box(40vw) ÷ base(100vw) → fits the slot at rest */
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;            /* BIG base → bitmap rasterised at ~viewport width */
        height: auto;
        aspect-ratio: 16 / 10;
        transform: translate(-50%, -50%) scale(var(--who-rest));
        transform-origin: 50% 50%;
        will-change: transform;
    }
}


/* ---- TABLET ---- */
@media (max-width: 1023px) {
    .wdb-who__media { width: 56vw; }
    .wdb-who__fan { width: 22vw; }
    /* box is 56vw here → grow layer rests at 56vw ÷ 100vw (only applies ≥768) */
    .wdb-who__media-grow { --who-rest: 0.56; }
}

/* ---- MOBILE ---- */
@media (max-width: 767px) {
    .wdb-who {
        min-height: 0;
        padding: var(--wdb-sec-y) var(--wdb-pad);
    }
    /* smaller image so the fans fit alongside it; fans are allowed to overflow
       the screen edges (html has overflow-x:clip, so no horizontal scroll) */
    .wdb-who__media { width: 62vw; }
    .wdb-who__fan { width: 36vw; }
}