/* ==========================================================================
   Block: numbered-cards — "Offset numbered cards" (src/blocks/numbered-cards.html)
   Figma "Social Media Advertising" 4506:165 at 1920 (page y):
     eyebrow  x103 y5545 (20px)            title  x103 y5596, 48px Blauer Nue Regular, box 59
     rule     x100 y5688→5690, 125×2       cards  y5761 (71 under the rule)
     cards    560×661 at x105 / 685 / 1265 (20px gaps: the row is the 1720px container, 5px right)
              tops step down 0 / 159 / 367 → 0 / 28.39% / 65.54% of the card width
     in card  photo 238×182 top-left, numeral 32px top-right (both ≈40px from the top), title 48px and
              body 20px anchored to the bottom (title → body 18px; ≈44px left, ≈35px right, ≈44px bottom —
              the Figma's three cards differ by a few px, these are their mean)
   Everything inside a card is sized in cqi (1% of the card's width, the <li> is the size container), so a
   card keeps the Figma's proportions at any column width.
   Variants (all optional, all keyed off data-count / a modifier class, so the 3-card SMA layout above is
   untouched): 4–5 small cards (SEO & six more pages), 2 wide cards (Media Buying, Web Design), title_top,
   intro, card icons — see their sections below.
   Section padding = half the Figma gap to the neighbours: (5545 − 5404) / 2 ≈ 70 above,
   (7039 − 6789) / 2 = 125 below.
   Mobile ("Mobile Category" 4148:2776, 402 wide): see the ≤640 block at the end.
   ========================================================================== */

.block-numbered-cards {
  --nc-cream: #fcfcf1;
  --nc-gap: min(1.0417vw, 20px);        /* 20px between cards at 1920 */
  --nc-shift: min(0.26vw, 5px);         /* cards start at x105, not the 100px gutter */
  padding: min(3.65vw, 70px) 0 min(6.51vw, 125px);
}

/* ---- Head: eyebrow, title, rule (+ optional intro) ------------------------ */
.block-numbered-cards__eyebrow,
.block-numbered-cards__title { margin-left: 3px; }    /* Figma x103 (the rule sits on the gutter, x100) */

.block-numbered-cards__eyebrow + .block-numbered-cards__headrow { margin-top: 26px; }  /* eyebrow bottom 5570 → title 5596 */
.block-numbered-cards__title {
  font-family: var(--font-display);
  font-weight: 400;                     /* Blauer Nue Regular */
  font-size: 48px;
  line-height: 1.23;                    /* 59px box */
}
.block-numbered-cards__line { display: block; }   /* title_lines: a forced desktop wrap (Web "Support", #48) */

.block-numbered-cards__rule {
  margin-top: 33px;                     /* title bottom 5655 → line 5688 */
  border-top-width: 2px;
}
.block-numbered-cards__intro {          /* SEO: 20px paragraph at x970, level with the title */
  margin-right: calc(min(0.26vw, 5px) * -1);   /* the Figma's intro box is 854 wide (x970→1824), 5px past the gutter */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  white-space: pre-line;                /* a blank line in the field = a new paragraph (Organic's 2-paragraph intro) */
}
/* Optional closing line under the cards (Photography, Videography: doc copy that follows the card row). */
.block-numbered-cards__outro {
  margin: clamp(32px, 4vh, 56px) 0 0;
  max-width: 854px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255,255,255,.82);
}
/* With an intro (7 service pages) the Figma drops the rule lower: 113px under the title top for a 1-line
   title (SEO 2381 → 2494, Paid, Web "Two sides"), 153–163 under it for a 2-line title (Media Buying,
   Organic, Web "Support", Photo, Video: 118 + 40). Content Writing's 235 is a one-off, normalised. */
.block-numbered-cards__headrow.grid-2 .block-numbered-cards__title { min-height: 73px; max-width: 704px; }   /* Figma box 697: keeps its wraps */
.block-numbered-cards__headrow.grid-2 .block-numbered-cards__rule { margin-top: 40px; }

/* ---- Cards row -------------------------------------------------------------- */
.block-numbered-cards__list {
  display: grid;
  grid-auto-flow: column;               /* one column per card, however many there are … */
  grid-auto-columns: calc((100% - 2 * var(--nc-gap)) / 3);   /* … never wider than the 3-up card (560 at 1920) */
  column-gap: var(--nc-gap);
  align-items: start;
  margin: 71px calc(var(--nc-shift) * -1) 0 var(--nc-shift);
}

.block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__list { grid-auto-columns: minmax(0, 1fr); }

/* The stagger, by position. % margins of a grid item resolve against its column width = the card width:
   SMA 159 / 560, 367 / 560; the 4th/5th continue the same ~35% step (SEO's 4th card: 408 / 417). */
.block-numbered-cards__item { container-type: inline-size; }
.block-numbered-cards__item:nth-child(2) { margin-top: 28.39%; }
.block-numbered-cards__item:nth-child(3) { margin-top: 65.54%; }
.block-numbered-cards__item:nth-child(4) { margin-top: 98%; }
.block-numbered-cards__item:nth-child(5) { margin-top: 133%; }

.block-numbered-cards__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "media num"
    ".     ."
    "name  name"
    "body  body";
  aspect-ratio: 560 / 661;              /* a minimum: longer copy makes the card taller */
  padding: min(7.14cqi, 40px) min(6.25cqi, 35px) min(7.86cqi, 44px) min(7.86cqi, 44px);
  background: var(--nc-cream);
  color: var(--black);
}
/* First card is green by default. Once JS drives the green (it adds .is-live-green — the desktop line-up, or the
   mobile stack) the green instead follows the card at the top (.is-green), the rest go cream — a colour that
   swaps as each card lands. Shared by the desktop line-up and the mobile peek-stack. */
.block-numbered-cards:not(.is-live-green) .block-numbered-cards__item:first-child .block-numbered-cards__card { background: var(--accent); }
.block-numbered-cards.is-live-green .block-numbered-cards__card { transition: background-color .35s ease; }
.block-numbered-cards.is-live-green .block-numbered-cards__item.is-green .block-numbered-cards__card { background: var(--accent); }

.block-numbered-cards__media {
  grid-area: media;
  width: 42.5cqi;                       /* 238 / 560 */
  max-width: 100%;
  height: auto;
  aspect-ratio: 238 / 182;
  object-fit: cover;
}
.block-numbered-cards__num {
  grid-area: num;
  align-self: start;
  margin-left: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 5.714cqi, 32px);
  line-height: 1.22;                    /* 39px box */
}
.block-numbered-cards__name {
  grid-area: name;
  margin-top: 24px;                     /* never closer than this to the photo */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 8.571cqi, 48px);
  line-height: 1.23;                    /* 59px box */
}
.block-numbered-cards__body {
  grid-area: body;
  max-width: 474px;
  margin-top: min(3.21cqi, 18px);
  font-size: var(--fs-body);
  line-height: 1.25;
  white-space: pre-line;                /* a blank line in the field = a new paragraph (the 2-card bodies) */
}

/* Icon (item field, Organic Social's platform logos): the Figma's 94px ellipse draws the glyph ≈66px
   square, its top-left at (+32, +36) of the 417px card — i.e. on the text's left edge. Kept uncropped
   (contain) and left-aligned, so a narrow glyph (the Facebook "f") lines up with the text too. */
.block-numbered-cards__icon {
  grid-area: media;
  width: 15.83cqi;                      /* 66 / 417 */
  height: auto;
  aspect-ratio: 1;
  margin-top: 1.53cqi;                  /* +36.2 in the card, 6.4 under the numeral row's top */
  object-fit: contain;
  object-position: left top;
}

/* ---- Variant: 4–5 small cards (SEO 4641:2, Paid Search, Organic, Content Writing, Web "Support", Photo,
   Video). Figma at 1920: 417×492 cards at x105 / 537 / 968 / 1405 — a 1715px row, 15.6px gaps (the Figma
   drifts 15–20; this spacing puts every card within 2.3px); tops 0 / 115 / 264 / 408 = 0 / 27.58 / 63.31 /
   97.84% of the card width. In card — the Figma's 28 small cards drift by up to ±10px, so these are their
   means: numeral 32px, box top +30.5, right edge 29 from the card's; title 48px + body 20px (353 box) at
   x+32; the body's last line ends 35.6 above the bottom (Figma 22–48); title baseline → body line 35.6
   (Figma 24–45). Applies while the row is one line of cards (≥1281px); below that the 4–5 cards fold
   into two columns and use the 3-card proportions. */
@media (min-width: 1281px) {
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) { --nc-gap: min(0.8125vw, 15.6px); }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__list { margin-right: 0; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(2) { margin-top: 27.58%; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(3) { margin-top: 63.31%; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(4) { margin-top: 97.84%; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(5) { margin-top: 132.4%; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__card {
    aspect-ratio: 417 / 492;
    padding: 7.31cqi 6.25cqi 8.54cqi 7.86cqi;       /* 30.5 · 26 · 35.6 · 32.8 at 417 */
  }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__num { margin-right: 0.72cqi; font-size: clamp(22px, 7.67cqi, 32px); }  /* 29 from the edge */
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__name { font-size: clamp(26px, 11.51cqi, 48px); line-height: 1.08; }  /* 2-line titles: 52px leading (Figma 1.01–1.23, mostly 1.08) */
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__body { max-width: 84.41cqi; margin-top: 6.25cqi; }  /* 352: reproduces 34 of the Figma's 35 body wraps; title baseline → body 35.6 */
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__icon { margin-top: 1.63cqi; }  /* glyph top +37 */
}

/* ---- Variant: 2 wide cards (Media Buying 4684:795, Web Design 4816:2 "Two sides of a website") --------
   Figma at 1920: two 844×748 cards at x101 / 976 (31px gap, the row 101→1820), the second 210px lower
   (24.88%); 63px from the rule to the cards (the 3/4-card layouts: 72). In card: photo 299×229 at
   +48,+48; numeral 32px (box +54, right edge ≈54 from the card's); title 48px (641–662 wide) at x+48 —
   on top beside the numeral (title_top, MB) or low (Web); body 20px, 715 box, 2–3 paragraphs; its last
   line ends 48 above the bottom (the mean: Figma 57 / 42 on MB, 54 / 39 on Web). */
@media (min-width: 641px) {
  .block-numbered-cards[data-count="2"] .block-numbered-cards__list { grid-auto-columns: minmax(0, 1fr); }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__item:nth-child(2) { margin-top: 24.88%; }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__card { aspect-ratio: 844 / 748; }
}
@media (min-width: 1025px) {
  .block-numbered-cards[data-count="2"] { --nc-gap: min(1.6146vw, 31px); --nc-shift: min(0.052vw, 1px); }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__list { margin-top: 62px; margin-right: 0; }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__card { padding: 6.4cqi 6.4cqi 5.69cqi 5.69cqi; }  /* 54 · 54 · 48 · 48 */
  .block-numbered-cards[data-count="2"] .block-numbered-cards__media { width: 35.43cqi; margin-top: -0.71cqi; }   /* 299 wide, top +48 */
  .block-numbered-cards[data-count="2"] .block-numbered-cards__num { font-size: clamp(22px, 3.79cqi, 32px); }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__name { max-width: 78.44cqi; font-size: clamp(26px, 5.69cqi, 48px); }  /* ≤662 */
  .block-numbered-cards[data-count="2"] .block-numbered-cards__body { max-width: 85.31cqi; margin-top: 5.09cqi; }   /* 715 box (+5, Figma's loose wrap); title baseline → body 56 */
}

/* ---- Variant: title_top (Media Buying) — the card title sits on the top row beside the numeral, the body
   stays anchored to the bottom (a photo, if any, drops under the title). -------------------------------- */
@media (min-width: 641px) {
  .block-numbered-cards--title-top .block-numbered-cards__card {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "name  num"
      "media ."
      ".     ."
      "body  body";
  }
  .block-numbered-cards--title-top .block-numbered-cards__name { margin-top: 0; }
  .block-numbered-cards.block-numbered-cards--title-top .block-numbered-cards__media { margin-top: 24px; }
  .block-numbered-cards--title-top .block-numbered-cards__body { margin-top: 32px; }
}

/* ---- 4–5 cards get too narrow for their copy below 1280: two staggered columns (as tablet) ---------- */
@media (min-width: 1025px) and (max-width: 1280px) {
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--nc-gap);
  }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(n) { margin-top: 0; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(2) { margin-top: 28.39%; }
  .block-numbered-cards:is([data-count="4"], [data-count="5"]) .block-numbered-cards__item:nth-child(2n+3) { margin-top: -28.39%; }
}

/* ---- Tablet: two staggered columns — even cards step down, odd cards close up under the one above ------ */
@media (max-width: 1024px) {
  .block-numbered-cards { --nc-gap: 20px; --nc-shift: 0px; padding: 64px 0 96px; }
  .block-numbered-cards__headrow.grid-2 { row-gap: 24px; }
  .block-numbered-cards__headrow.grid-2 .block-numbered-cards__title { min-height: 0; max-width: none; }
  .block-numbered-cards__intro { margin-right: 0; }
  .block-numbered-cards__headrow.grid-2 .block-numbered-cards__rule { margin-top: 33px; }
  .block-numbered-cards__title { font-size: 40px; }
  .block-numbered-cards__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--nc-gap);
    margin-top: 56px;
  }
  .block-numbered-cards__item:nth-child(n) { margin-top: 0; }
  .block-numbered-cards__item:nth-child(2) { margin-top: 28.39%; }
  .block-numbered-cards__item:nth-child(2n+3) { margin-top: -28.39%; }
  .block-numbered-cards[data-count="2"] .block-numbered-cards__item:nth-child(2) { margin-top: 24.88%; }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776 y 4779→5621, 402 wide) -------------------------------
   eyebrow y4779 (16px) · title y4811 (36px, box 132 = 3 lines) · rule 64×2 at y4972 · cards 360×424 from
   y5015, x22 (the heading and cards sit 2px inside the 20px gutter). Card: title 36px + numeral 32px on the
   top row (24px down, 28px in, numeral 27px from the right), body at the bottom (30px up), no photo; drop
   shadow 2/−4/18 at 13%. The cards overlap, each 91px lower than the one before (its title row shows),
   the card at the front green. Here that is a scroll-driven stack: every card is sticky at
   --nc-stack-top + (its index × --nc-peek), so each slides over the one before and the finished stack is
   the Figma's composition, built all the way up to 01. Each landed card is read (--nc-read of scroll) before
   the next covers it; each card's margin-bottom (cancelled by the next card's negative margin-top) stretches
   its sticky range so every card lets go together, once the last card has landed and been read (client #28).
   js/blocks/numbered-cards.js refines this per card: --nc-top / --nc-mb / --nc-mt (px) give each card a
   peek of its own title row + 23px (2–3-line titles stay readable; one-line titles keep the 91px; squeezed
   on a short screen so a landed card always ends above the fold), a read gap of ≥ 300px / 45% of the
   screen, and toggles .is-green on whichever card is currently at the front so its green swaps as each lands.
   At ≤640px js/main.js runs the page on native scroll (no ScrollSmoother, no wheel paging) — exactly like a
   real phone — so position:sticky holds and the stack works both on phones and in the preview at phone width.
   Variants on mobile: every layout (2/3/4/5 cards, title_top) becomes this same stack; photos stay hidden;
   an icon shows 56px under the title row. */
@media (max-width: 640px) {
  .block-numbered-cards {
    --nc-peek: 91px;
    --nc-n: 1;                           /* card count (set per data-count below) */
    --nc-read: 300px;                    /* scroll each card stays fully on screen before the next slides over it */
    --nc-stack-top: calc(var(--nav-stuck-h) + 10px);
    padding: 46px 0 48px;
  }
  .block-numbered-cards .container { padding-left: calc(var(--gutter) + 2px); }
  .block-numbered-cards__eyebrow,
  .block-numbered-cards__title { margin-left: 0; }
  .block-numbered-cards__eyebrow + .block-numbered-cards__headrow { margin-top: 12px; }
  .block-numbered-cards__title { font-size: 36px; line-height: 1.222; }
  .block-numbered-cards__line { display: inline; }   /* title_lines flow as one sentence */
  .block-numbered-cards__rule { width: 64px; margin-top: 28px; }
  .block-numbered-cards__headrow.grid-2 .block-numbered-cards__rule { margin-top: 28px; }

  .block-numbered-cards__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
    margin: 42px 0 0;
  }
  /* Every card sticks at its own slot (stack-top + the peeks above it), so each one holds near the top while
     the next slides over it, leaving a sliver of the earlier card showing. js reads each card's resolved
     sticky top to tell which card is currently at the front (→ green).
     Timing (client #28): a landed card stays fully visible for --nc-read of scroll before the next one starts
     to cover it (the flow gap between cards), and the stack holds together until the LAST card has landed and
     been read too — then every card lets go at once. A sticky card lets go when the list's end reaches its
     margin box: a spacer after the last card (--nc-read tall) is its hold, card i carries a bottom margin
     of (n − 1 − i) peeks so its margin box ends level with the last card's (all release together), and the
     next card's top margin (read gap − that margin) takes the extra back out of the flow. These equal-height,
     equal-peek values are the no-JS fallback; js/blocks/numbered-cards.js sets the measured --nc-top / --nc-mt
     / --nc-mb per card and --nc-read on the list. (A plain gap margin let each card go early: 03 slid over 02
     while 04 was still arriving, and the stack came apart after 03.) */
  .block-numbered-cards__list::after { content: ""; flex: 0 0 var(--nc-read); }   /* in the content box (padding would not hold a sticky card) */
  .block-numbered-cards__item {
    --nc-i: 0;
    position: sticky;
    top: calc(var(--nc-stack-top) + var(--nc-top, var(--nc-i) * var(--nc-peek)));
  }
  /* specific enough to replace the tablet staircase's nth-child margins (≤1024 rules above also match here) */
  .block-numbered-cards .block-numbered-cards__list > .block-numbered-cards__item:nth-child(n) {
    margin: var(--nc-mt, calc(min(var(--nc-i), 1) * (var(--nc-read) - (var(--nc-n) - var(--nc-i)) * var(--nc-peek)))) 0
            var(--nc-mb, calc((var(--nc-n) - 1 - var(--nc-i)) * var(--nc-peek)));
  }
  .block-numbered-cards__item:nth-child(2) { --nc-i: 1; }
  .block-numbered-cards__item:nth-child(3) { --nc-i: 2; }
  .block-numbered-cards__item:nth-child(4) { --nc-i: 3; }
  .block-numbered-cards__item:nth-child(5) { --nc-i: 4; }
  .block-numbered-cards__item:nth-child(6) { --nc-i: 5; }
  .block-numbered-cards[data-count="2"] { --nc-n: 2; }
  .block-numbered-cards[data-count="3"] { --nc-n: 3; }
  .block-numbered-cards[data-count="4"] { --nc-n: 4; }
  .block-numbered-cards[data-count="5"] { --nc-n: 5; }
  .block-numbered-cards[data-count="6"] { --nc-n: 6; }

  .block-numbered-cards__card {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "name num"
      ".    ."
      "body body";
    aspect-ratio: 360 / 424;
    padding: 24px 27px 30px 28px;
    box-shadow: 2px -4px 18px rgba(0, 0, 0, 0.13);
  }
  /* Green follows the front card (js, .is-live-green / .is-green) — see the shared rules above. Before js runs
     the first card is green (base rule), matching the resting design. */
  .block-numbered-cards__media { display: none; }
  .block-numbered-cards__name { margin-top: 0; font-size: 36px; line-height: 1.222; }
  .block-numbered-cards__num { font-size: 32px; line-height: 1.22; }
  .block-numbered-cards__body { margin-top: 24px; }

  .block-numbered-cards__card--icon {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "name num"
      "media ."
      ".    ."
      "body body";
  }
  .block-numbered-cards__icon { width: 56px; margin-top: 24px; }
}