/* =====================================================================================================
   Section: what-we-do — styles for the block between "BEGIN SECTION: what-we-do" and "END SECTION: what-we-do" in index.html.

   Layout modes (by viewport):
   - Card images (>= 64em wide): each card is its image (resources 03–07, text baked in). The text layer is laid out
     over it in container query units (cqi = 1% of the card width), matching the positions in the images, so it
     will fit a future text-free card image.
   - Live cards (< 64em): the images' text would be unreadably small, so the image is not shown and the card is
     drawn with CSS (grey rounded box) and its HTML text layer, in a normal flow layout. The number is the one from
     the card image, cut out (img/what-we-do/number-NN), with the title beside it and the description below its cut.
   - Stacking (>= 64em wide and >= 40em tall): the heading (title + intro, with the background blob) and
     the circuit are pinned under the site header, and the cards are sticky below them with a staggered top, so each
     new card rises and covers the previous one, which stays pinned with its top strip visible. No card ever goes
     above the heading. Once all five cards are stacked (the design's collapsed view), everything scrolls away
     together. Otherwise the cards are a plain vertical list.

   Geometry: measured on the 1440px design (Diseño/ref/01–03). Horizontal and card-related values are in cqi of the
   card column (.wwd__inner is a size container: 100cqi = card width = 1368px at 1440), so the whole composition
   scales with it. Design values at 1440 (page y): hero ends 706 · title 144,851 421×34 · intro 145–720, lines every
   29px, ends 1031 · first card 35,1130 1368 wide · card tops every 45px · last card ends 1624 · research title 1777
   · circuit 900,642 635×665 · blob 140,830 1181 wide.
   ===================================================================================================== */

.section--what-we-do {
    --wwd-gutter: clamp(1rem, 2.5vw, 2.25rem);          /* cards are wider than the text column (design: 1368/1440) */
    --wwd-title-h: clamp(1.1rem, 2.3vw, 2.075rem);       /* title image height (design: 421×34 at 1440) */
    --wwd-gap: max(2.5rem, 7.2cqi);                     /* intro → first card (design: 99px) */
    /* Heading height (title + intro), set in px by js/sections/what-we-do.js; this is the no-JS estimate. */
    --wwd-head-h: 11.25rem;

    isolation: isolate;
    /* The circuit sticks out on the right: clip it horizontally only (no horizontal scroll), so it can still reach
       up over the hero. overflow-x: clip (unlike hidden) doesn't create a scroll container, so sticky still works. */
    overflow-x: clip;
    /* Design: title 145px below the hero; last card → research title 153px (research adds its own section-space). */
    padding-block: clamp(2.5rem, 10.07vw, 9.0625rem) clamp(1.5rem, 2.64vw, 2.375rem);
}

.wwd__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--wwd-gutter);
    container-type: inline-size;     /* cqi inside = 1% of the card width */
}

/* ----- Decoration: spinning circuit circle (resource 18), top right -------------------------------------- */

.wwd__decor {
    position: absolute;
    inset: 0 var(--wwd-gutter);      /* = the card column; the circuit is placed from the column's top-left corner */
    z-index: -1;                     /* < 64em: behind the title and the cards */
    pointer-events: none;
}

.wwd__circuit {
    display: block;
    /* Design: 635px wide at x = 900 (865px from the cards' left edge), top 209px above the title, so it reaches up
       over the hero's bottom right corner; cut by the page edge at 1440. */
    width: 46.4cqi;
    max-width: none;
    height: auto;
    margin-top: -15.25cqi;
    margin-left: 63.2cqi;
    /* The image is trimmed on the open side of the "C": rotate around the circle's centre, not the image's. */
    transform-origin: 52.45% 50%;
    animation: wwd-spin 50s linear infinite;
}

@keyframes wwd-spin {
    to { transform: rotate(360deg); }
}

/* ----- Title and intro ------------------------------------------------------------------------------- */

.wwd__head {
    position: relative;
    z-index: 0;                      /* own stacking context: the background below stays behind the text */
    /* Design: the text column starts at x=144 of the 1440 canvas, the cards at x=36. */
    padding-inline-start: clamp(0.25rem, 11.4vw - 3.5rem, 6.75rem);
    margin-bottom: var(--wwd-gap);
}

.section--what-we-do .wwd__title { justify-content: flex-start; }
.section--what-we-do .wwd__title img {
    height: var(--wwd-title-h);
    max-height: none;
}

.wwd__intro {
    max-width: 24.6em;               /* design: wraps after "…solutions that" */
    margin-top: clamp(1rem, 2.25vw, 2rem);
    font-size: var(--text-lg);
    line-height: 1.2;
    color: var(--text);
}

/* Background (resource 09 blob), behind the cards; its top peeks out above the first card. Its
   origin is the first card's top-left corner (the heading's bottom + the gap). */
.wwd__bg {
    position: absolute;
    top: calc(100% + var(--wwd-gap));
    left: 0;
    z-index: -1;
    pointer-events: none;
}

.wwd__blob {
    position: absolute;
    /* As in the design, only a band of colour shows under the last card, then it fades out well before the Research
       title (otherwise the rest of the blob hangs over the next section). The stack's bottom is at ~58% of the
       image's height (21.93cqi above the first card + 36.1cqi of stack, over 86.33cqi); fade out from 67% to 76%. */
    -webkit-mask-image: linear-gradient(to bottom, #000 67%, transparent 76%);
    mask-image: linear-gradient(to bottom, #000 67%, transparent 76%);
    /* Design: 1181px wide, 105px from the cards' left edge, image top 300px above the first card (the colour
       starts 70px above it). */
    left: 7.64cqi;
    top: -21.93cqi;
    width: 86.33cqi;
    max-width: none;
    height: auto;
}

/* ----- Cards: common --------------------------------------------------------------------------------- */

.wwd-cards {
    position: relative;
    container-type: inline-size;     /* cqi below = 1% of the cards' width */
}

.wwd-stack {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wwd-stack__item { margin-bottom: clamp(1rem, 3vw, 2rem); }
.wwd-stack__item:last-child { margin-bottom: 0; }

.wwd-card {
    --wwd-card-bg: var(--grey-100);
    position: relative;
    container-type: inline-size;     /* cqi inside a card = 1% of that card's width */
}
.wwd-card--02 { --wwd-card-bg: var(--grey-200); }
.wwd-card--03 { --wwd-card-bg: var(--grey-300); }
.wwd-card--04 { --wwd-card-bg: var(--grey-400); }
.wwd-card--05 { --wwd-card-bg: var(--grey-500); }

.wwd-card__num {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wwd-card__num-img { display: none; }   /* the number as an image: live cards only (< 64em) */

.wwd-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-strong);
}

.wwd-card__desc {
    font-weight: 400;
    color: var(--text);
}

/* Card 02 pipeline: Silicon → Hardware → Firmware → Connectivity → Cloud → Applications. */
.wwd-pipeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wwd-pipeline__step { position: relative; }

.wwd-pipeline__name {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 50%;
    /* Gradient ring: card grey inside, brand gradient on the border. */
    background: linear-gradient(var(--wwd-card-bg), var(--wwd-card-bg)) padding-box,
                linear-gradient(135deg, var(--brand-magenta), var(--brand-violet) 50%, var(--brand-orange)) border-box;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
}

.wwd-pipeline__caption {
    display: block;
    color: var(--text);
    text-align: center;
}

/* ----- Live cards (< 64em): CSS box + flowing text; the image is not shown ------------------------------- */

@media (max-width: 63.999em) {
    .wwd-card {
        padding: clamp(1.25rem, 5vw, 2.25rem);
        border-radius: var(--radius-md);
        background: var(--wwd-card-bg);
    }

    .wwd-card__img { display: none; }

    /* The text layer is the visible content here (the image isn't shown), so undo the baked-text hiding. */
    .section--what-we-do .wwd-card.baked .baked__text {
        position: static;
        clip-path: none;
        pointer-events: auto;
    }

    /* The number (cut off at the bottom, as in the card images) sits top left with the title beside it, top-aligned;
       the description starts right at the number's cut, as if its first line were what cuts it. */
    .wwd-card__text {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(0.75rem, 3.5vw, 1.5rem);
    }
    .wwd-card__body { display: contents; }

    .wwd-card__num { display: none; }
    .wwd-card__num-img {
        display: block;
        grid-area: 1 / 1;
        align-self: end;             /* a two-line title taller than the number keeps the cut on the description */
        width: auto;
        height: clamp(3rem, 13.5vw, 4.5rem);
    }
    .wwd-card__title {
        grid-area: 1 / 2;
        margin-top: -0.2em;          /* cap tops level with the number's top (line-height leading) */
        font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    }
    .wwd-card__desc {
        grid-column: 1 / -1;
        margin-top: 0.5rem;          /* a small gap between the number's cut and the first line */
        font-size: var(--text-base);
        line-height: 1.5;
    }

    /* Pipeline: vertical list, circle on the left, caption on the right, joined by a line. */
    .wwd-pipeline {
        grid-column: 1 / -1;
        display: grid;
        gap: 1rem;
        margin-top: 1.25rem;
    }
    .wwd-pipeline__step {
        display: grid;
        grid-template-columns: 5.5rem 1fr;
        align-items: center;
        gap: 1rem;
    }
    .wwd-pipeline__step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 2.75rem;
        top: 100%;                   /* circle bottom (captions are never taller than it) */
        width: 1px;
        height: 1rem;                /* = the gap between steps */
        background: linear-gradient(var(--brand-magenta), var(--brand-orange));
    }
    .wwd-pipeline__name { width: 5.5rem; font-size: var(--text-xs); }
    .wwd-pipeline__caption { font-size: var(--text-sm); line-height: 1.4; text-align: start; }
}

/* ----- Card images (>= 64em): text layer positioned as in the images (1240px-wide card = 100cqi) ------------ */

@media (min-width: 64em) {
    .wwd-card {
        /* Positions measured on the card images; overridden per card below. */
        --num-left: 7.14cqi;
        --num-top: 7.4cqi;
        --num-size: 11cqi;
        --body-top: 6.23cqi;
        --body-width: 58cqi;
        --desc-gap: 1.27cqi;
    }
    .wwd-card--02 { --num-left: 5.97cqi; --num-top: 4.77cqi; --num-size: 12cqi; --body-top: 5.37cqi; --body-width: 56.5cqi; --desc-gap: 0.5cqi; }
    .wwd-card--03 { --num-left: 5.93cqi; --num-top: 6.48cqi; --body-top: 6.18cqi; --body-width: 61.5cqi; }
    .wwd-card--04 { --num-left: 5.93cqi; --num-top: 6.92cqi; --body-top: 6.7cqi;  --body-width: 60cqi; }
    .wwd-card--05 { --num-left: 5.93cqi; --num-top: 6.23cqi; --body-top: 5.94cqi; --body-width: 61.5cqi; }

    .wwd-card__num {
        position: absolute;
        left: var(--num-left);
        top: var(--num-top);
        font-size: var(--num-size);
    }

    .wwd-card__body {
        position: absolute;
        left: 33cqi;
        top: var(--body-top);
        width: var(--body-width);
    }

    .wwd-card__title { font-size: 2.53cqi; }
    .wwd-card__desc { margin-top: var(--desc-gap); font-size: 1.8cqi; line-height: 1.17; }

    /* Pipeline: six equal columns; circles 8.67cqi wide, centred at y = 20.8cqi; lines join the circles. */
    .wwd-pipeline {
        position: absolute;
        left: 2.3cqi;
        top: 16.45cqi;
        width: 95.04cqi;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
    .wwd-pipeline__step {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wwd-pipeline__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 4.335cqi;               /* circle centre */
        left: calc(50% + 4.335cqi);  /* from this circle's edge… */
        width: calc(100% - 8.67cqi); /* …to the next one's */
        height: 1px;
        background: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet) 50%, var(--brand-orange));
        opacity: 0.8;
    }
    .wwd-pipeline__name {
        width: 8.67cqi;
        border-width: max(1px, 0.09cqi);
        font-size: 1.1cqi;
    }
    .wwd-pipeline__caption {
        max-width: 11cqi;
        margin-top: 1.17cqi;
        font-size: 1.09cqi;
        line-height: 1.2;
    }
}


/* ----- Stacking cards on scroll (>= 64em wide, tall enough for the whole stack) ------------------------------ */

@media (min-width: 64em) and (min-height: 40em) {
    .section--what-we-do {
        /* Card heights from the image ratios (1240×285, card 02 1240×407); cqi = 1% of the cards' width.
           The stack step makes card 02's bottom line up with card 05's once all cards are stacked (as in the
           design's collapsed view): 3 steps = card 02 height − card height. */
        --wwd-card-h: calc(100cqi * 285 / 1240);
        --wwd-card-h-tall: calc(100cqi * 407 / 1240);
        --wwd-step: calc(100cqi * 122 / 3720);
        --wwd-stack-h: calc(4 * var(--wwd-step) + var(--wwd-card-h));      /* the collapsed stack (494px at 1440) */
        /* Where the heading pins, just under the site header. */
        --wwd-head-top: calc(var(--header-height) + clamp(0.75rem, 3vh, 2rem));
        /* Where the first card pins: always below the heading (title + intro), never over it. The gap is the
           design's when the whole collapsed stack fits in the viewport, and shrinks (down to 1rem) when it doesn't;
           on very short screens the bottom of the stack simply runs below the fold. */
        --wwd-stack-top: calc(var(--wwd-head-top) + var(--wwd-head-h) + clamp(1rem,
            100vh - var(--wwd-stack-h) - 1rem - var(--wwd-head-top) - var(--wwd-head-h), var(--wwd-gap)));
        /* Pinned distance from the heading's bottom to the stack's bottom. */
        --wwd-tail: calc(var(--wwd-stack-top) + var(--wwd-stack-h) - var(--wwd-head-top) - var(--wwd-head-h));
    }

    /* The heading pins under the header. Its sticky range ends at the bottom of .wwd__inner (= the stack's bottom)
       minus its bottom margin, so a margin of --wwd-tail makes it leave exactly when the stack does. The cards'
       negative top margin collapses with it, leaving the design gap in the flow. */
    .wwd__head {
        position: sticky;
        top: var(--wwd-head-top);
        margin-bottom: var(--wwd-tail);
    }
    .wwd-cards { margin-top: calc(var(--wwd-gap) - var(--wwd-tail)); }

    /* The circuit pins at the same moment, keeping its place relative to the title, and leaves with the stack too
       (its bottom margin = pinned distance from its bottom to the stack's bottom; image 480×503 → 48.62cqi tall). */
    .wwd__circuit {
        position: sticky;
        top: calc(var(--wwd-head-top) - 15.25cqi);
        margin-bottom: calc(var(--wwd-stack-top) + var(--wwd-stack-h) - var(--wwd-head-top) + 15.25cqi - 48.62cqi);
    }

    .wwd-stack__item {
        --i: 0;
        --h: var(--wwd-card-h);
        position: sticky;
        top: calc(var(--wwd-stack-top) + var(--i) * var(--wwd-step));
        margin-bottom: 0;
        /* Transparent extension so every card's box ends at the bottom of the full stack: then all the cards stay
           pinned until the last one arrives and leave together (the stack ends cleanly before the next section)
           instead of collapsing into each other. */
        padding-bottom: max(0px, (4 - var(--i)) * var(--wwd-step) + var(--wwd-card-h) - var(--h));
    }
    /* Scroll distance between two cards arriving. A top margin, not a bottom one: a sticky element's bottom margin
       would make it leave that much before the others. */
    .wwd-stack__item + .wwd-stack__item { margin-top: 4cqi; }
    .wwd-stack__item:nth-child(2) { --i: 1; --h: var(--wwd-card-h-tall); }
    .wwd-stack__item:nth-child(3) { --i: 2; }
    .wwd-stack__item:nth-child(4) { --i: 3; }
    .wwd-stack__item:nth-child(5) { --i: 4; }
}

/* ----- Circuit stacking order ------------------------------------------------------------------------ */

@media (min-width: 64em) {
    /* As in the design, the circuit is drawn over the cards' top-right corner (and over the hero's bottom edge).
       On smaller screens it stays behind the title and the cards (z-index -1 above). */
    .wwd__decor { z-index: 2; }       /* above .wwd-stack (z-index 1) */
}

/* ----- Reduced motion -------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .wwd__circuit { animation: none; }
}