/* --- Process cards (About 884:1420) -------------------------------------- */
.process {
    background: #F6F6F6;
}

.process-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: 72px;
    justify-content: center;
    max-width: calc(1760px + var(--gutter) * 2);
}

.process .head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.process h2 {
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    line-height: 1.234;
    color: var(--muted, #909091);
}

.process .head p {
    max-width: 465px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--black, #000000);
}

/* Flex rather than grid so a hovered step can widen and its neighbours give up
   the space (client round 11). --cards-per-row replaces the grid track count at
   each breakpoint; the 0.01px trim keeps sub-pixel rounding from wrapping a row,
   and flex-grow stays 0 so a short last row keeps the column width instead of
   stretching across it. */
.process .cards {
    --cards-per-row: 5;
    --card-gap: 26px;
    --card-basis: calc(
            (100% - var(--card-gap) * (var(--cards-per-row) - 1)) / var(--cards-per-row) - 0.01px
    );
    --card-open: calc(var(--card-basis) * 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--card-gap);
    /* Figma's Team Members Container (1006:1930) is 526px tall around 472px cards,
       i.e. 27px of slack above and below — this is that slack. It used to also
       correct for `.process-inner` centring in a fixed 969px box; that box is gone
       (CCD-33), so the value is now purely the design's breathing room. */
    padding-block: 27px;
}

.process .card {
    position: relative;
    display: flex;
    flex: 0 1 var(--card-basis);
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: var(--white, #ffffff);
    transition: flex-basis 0.35s ease;
}

.process .card > img {
    width: 100%;
    height: auto;
    aspect-ratio: 329 / 273;
    object-fit: cover;
}

/* Step number: the five cards are a sequence, and without an order marker the
   client read them as five options (client feedback 2026-08-11). `01`-`05`
   matches the numbering already used by the Concrete Recycling process steps
   (`.process-steps .num`), so the two pages describe the flow the same way. */
.process .card .step {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    min-width: 52px;
    padding: 10px 14px;
    border-radius: 12px 0 12px 0;
    font-family: var(--display, system-ui, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--white, #ffffff);
    background: var(--brand, #008AF7);
}

/* The "open card" state the Figma shows on Stockpile, wired to hover: the card
   under the pointer widens by 12% and the others each give up an equal slice, so
   the line still adds up to 100% and nothing wraps. Gated at 1400px — that is
   where all five cards share a single row. Below it they wrap into two or three
   rows, and shrinking every non-hovered card would open holes at the end of the
   rows the pointer is not even on. */
@media (hover: hover) and (min-width: 1400px) {
    /* Freeze the photo height at what the resting card width gives it, so the
       widening turns into crop instead of scale: the row's images stay aligned
       and only the hovered card's box changes, as in the Figma. */
    .process .card > img {
        aspect-ratio: auto;
        height: min(273px, calc((100vw - var(--gutter) * 2 - 26px * 4) / 5 * 273 / 329));
    }

    .process .cards:has(.card:hover) .card {
        flex-basis: calc(var(--card-basis) - var(--card-open) / (var(--cards-per-row) - 1));
    }

    .process .cards:has(.card:hover) .card:hover {
        flex-basis: calc(var(--card-basis) + var(--card-open));
    }
}

/* 992–1399 the five cards wrap 3 + 2, so "shrink everyone else" would open holes
   at the end of the row the pointer is not on. The row composition is fixed per
   breakpoint, so each row compensates within itself (client round 16 — the
   effect was previously dead below 1400 and the client reads that as broken). */
@media (hover: hover) and (min-width: 992px) and (max-width: 1399px) {
    .process .cards:has(.card:nth-child(-n+3):hover) .card:nth-child(-n+3) {
        flex-basis: calc(var(--card-basis) - var(--card-open) / 2);
    }

    .process .cards:has(.card:nth-child(-n+3):hover) .card:nth-child(-n+3):hover {
        flex-basis: calc(var(--card-basis) + var(--card-open));
    }

    .process .cards:has(.card:nth-child(n+4):hover) .card:nth-child(n+4) {
        flex-basis: calc(var(--card-basis) - var(--card-open));
    }

    .process .cards:has(.card:nth-child(n+4):hover) .card:nth-child(n+4):hover {
        flex-basis: calc(var(--card-basis) + var(--card-open));
    }
}

@media (prefers-reduced-motion: reduce) {
    .process .cards {
        --card-open: 0px;
    }

    .process .card {
        transition: none;
    }
}

.process .card .body {
    position: relative;
    flex: 1;
    min-height: 199px;
    padding: 31px 40px;
}

.process .card h3 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand, #008AF7);
}

.process .card .body p {
    margin: 0;
    font-size: 18px;
    line-height: 1.2222; /* 22/18 in Figma */
    color: var(--black, #000000);
}

.process .card .watermark {
    position: absolute;
    right: 40px;
    bottom: 31px;
    width: 27px;
    height: 26px;
    background-color: var(--light, #E8E8E8);
    -webkit-mask-image: url("../img/logo-mark.svg");
    mask-image: url("../img/logo-mark.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}