/* ==========================================================================
   Block: numbered-columns — display heading, then a row of numbered columns (src/blocks/numbered-columns.html)
   Figma "Web Design & Development" 4816:2 at 1920 (page y; Content Writing 5160:659 is the same block 3px left):
     eyebrow  dot x103, label x124 y6403 (20px)
     title    x97   y6449  80px Blauer Nue Medium, uppercase, 1163 box, 2 lines (152)  → 21 under the eyebrow box
     columns  labels y6667 (218 under the title top), 4 × 417 at x98 / 535 / 970 / 1405
       rule   y6716 centre (top 6715), 2px white, full column width                   → 48 under the label top
       title  y6737 box (lh 1.23 → glyphs as a 1.01 box at +4.4), 40px Blauer Nue Regular
       body   y6852, 20px, 415 wide, one shared row (105 under a 1-line title top; 115 under Web's 2-line one)
   The columns are the 1720 content width in four (17.3px gutters: x100 / 534 / 969 / 1403 — Web within 2px,
   CW within 5 where its frame sits 3px left). Rows: label | rule + title | body, shared by every column via
   subgrid, so the bodies start level whatever the title wraps to.
   Section padding (Figma, see the report): 110 above; 333 below = CW's gap to the scroll-stack eyebrow (2902)
   minus that block's 70 top padding (Web's gap to the numbered-cards eyebrow is 69px larger).
   ========================================================================== */

.block-numbered-columns {
  --nudge: min(0.1563vw, 3px);
  --gap: 17.33px;                        /* the Figma gutters (17–20); constant so narrower columns keep their air */
  padding: min(5.7292vw, 110px) 0 min(17.3438vw, 333px);
}

/* ---- Head ------------------------------------------------------------------ */
.block-numbered-columns__eyebrow { margin-left: var(--nudge); }                /* x103 */
.block-numbered-columns__eyebrow + .block-numbered-columns__headrow { margin-top: 21px; }   /* eyebrow box 6428 → title 6449 */
.block-numbered-columns__title {
  max-width: 14.54em;                    /* the Figma's 1163 box at 80px — keeps its 2-line wrap as the size steps down */
  margin-left: calc(var(--nudge) * -1);  /* x97: the Figma's text box (Blauer Nue's side bearing) */
  font-size: var(--fs-h1);               /* 80 at 1920 (the site's display scale below 1440) */
}
.block-numbered-columns__intro {
  padding-left: var(--nudge);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  white-space: pre-line;
}

/* ---- Columns --------------------------------------------------------------- */
.block-numbered-columns__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* always the 4-up width: 2–3 items leave the row short */
  column-gap: var(--gap);
  row-gap: 0;
  margin-top: 66px;                      /* title bottom 6601 → labels 6667 */
}
.block-numbered-columns__item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;           /* label | rule + title | body — shared across the row */
  min-width: 0;
}
.block-numbered-columns__num { align-self: start; }
.block-numbered-columns__name {
  margin-top: 23.2px;                    /* label box bottom 6691.8 → rule top 6715 */
  padding-top: calc(20px + 0.11em);      /* rule bottom → the 1.23 box (+20) → a 1.01 box's glyphs (+0.11em) */
  min-height: calc(22px + 1.875em);      /* 97 at 40px: a 1-line title's body lands 105 under the Figma box */
  border-top: 2px solid var(--fg);
  padding-right: 3.6%;                   /* text box 402 of the 417 column: "Service-led websites" (412) wraps as designed */
  font-family: var(--font-display);
  font-weight: 400;                      /* Blauer Nue Regular */
  font-size: clamp(28px, 2.0833vw, 40px);
  line-height: 1.01;                     /* the Figma's wrapped leading ("Service-led websites", 80 for 2 lines) */
}
.block-numbered-columns__body {
  max-width: 415px;
  margin-top: 30px;                      /* a 2-line title's body at +115 (Web), a 1-line one's at +105 (min-height) */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---- Column images (optional item.image — client #36, Figma 5010:888) -------------------------------------
   The alternate Web frame draws column 02 hovered: a 417×260 image where the rule sat (y6716, full column
   width) and the rule, title and body 293 lower (rule 7009 = image + 33). Built as a hover on desktop: the image
   wipes open downwards while the rule / title / body slide down by its height + 33 — a transform, so the column
   itself never reflows; the room it needs below the row opens with it (see the spacer below). Columns without an
   image — and blocks with none (Content Writing) — are untouched. */
.block-numbered-columns__media { margin: 0; overflow: hidden; aspect-ratio: 417 / 236; }   /* MX's supplied images (#36) */
.block-numbered-columns__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1025px) {
  .block-numbered-columns__list {
    container-type: inline-size;         /* 100cqi = the row, for the descendants below */
    --media-shift: calc((100cqi - 3 * var(--gap)) / 4 * 236 / 417 + min(1.7188vw, 33px));   /* image height + 33 */
    /* an open column's extra depth: the drop less the section's bottom padding (capped at --section-pad-max
       since #20 / #37, or the block's own 333), + 24px so it never runs into the next section */
    --media-room: max(0px, calc(var(--media-shift) + 24px - var(--section-pad-max, min(17.3438vw, 333px))));
    --media-ease: cubic-bezier(.22, 1, .36, 1);
  }
  /* Room for an open column: a spacer under the row, ALWAYS --media-room tall (Pete, 29 Sep: "the space under it
     should be there, not push the page down"), so opening a column never moves the page. (#37 had it grow only
     while a column was open, which kept the section gap tighter at rest but slid the page below.) */
  .block-numbered-columns__list:has(> .block-numbered-columns__item--media)::after {
    content: "";
    grid-column: 1 / -1;
    height: var(--media-room);           /* always reserved (Pete, 29 Sep): opening a column never moves the page */
  }
  .block-numbered-columns__item--media { position: relative; }
  .block-numbered-columns__item--media .block-numbered-columns__media {
    position: absolute;
    grid-row: 2;                         /* the rule + title row of the subgrid … */
    top: 23.2px;                         /* … at the rule's top (the title's margin-top) */
    left: 0;
    width: 100%;
    clip-path: inset(0 0 100% 0);
    opacity: 0;                          /* expands downwards AND fades in (Pete, 29 Sep) */
    transition: clip-path .7s var(--media-ease), opacity .6s ease;
  }
  .block-numbered-columns__item--media .block-numbered-columns__name,
  .block-numbered-columns__item--media .block-numbered-columns__body { transition: transform .7s var(--media-ease); }
}
/* Open: hover (mouse / trackpad). js/blocks/numbered-columns.js marks the section [data-nc-js] and sets .is-open only
   on real pointer movement, so a column never opens because the page scrolled under a resting pointer (client #37
   follow-up); without the script, plain :hover. */
@media (min-width: 1025px) and (hover: hover) {
  .block-numbered-columns:not([data-nc-js]) .block-numbered-columns__item--media:hover .block-numbered-columns__media,
  .block-numbered-columns__item--media.is-open .block-numbered-columns__media { clip-path: inset(0); opacity: 1; }
  .block-numbered-columns:not([data-nc-js]) .block-numbered-columns__item--media:hover .block-numbered-columns__name,
  .block-numbered-columns:not([data-nc-js]) .block-numbered-columns__item--media:hover .block-numbered-columns__body,
  .block-numbered-columns__item--media.is-open .block-numbered-columns__name,
  .block-numbered-columns__item--media.is-open .block-numbered-columns__body { transform: translateY(var(--media-shift)); }
  /* the open column's hover area follows it down (the 33px under the image and the moved text are outside the
     item's own box), so moving the pointer from the image down to the text never closes it on the way */
  .block-numbered-columns:not([data-nc-js]) .block-numbered-columns__item--media:hover::after,
  .block-numbered-columns__item--media.is-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--media-shift);
  }
}
/* … and on wide touch screens, which cannot hover, every column shows its image */
@media (min-width: 1025px) and (hover: none) {
  .block-numbered-columns__item--media .block-numbered-columns__media { clip-path: none; opacity: 1; }
  .block-numbered-columns__item--media .block-numbered-columns__name,
  .block-numbered-columns__item--media .block-numbered-columns__body { transform: translateY(var(--media-shift)); }
}
/* ≤1024: the image sits in the flow above the rule (a column with one drops the shared rows) */
@media (max-width: 1024px) {
  .block-numbered-columns__item--media { display: flex; flex-direction: column; }
  .block-numbered-columns__item--media .block-numbered-columns__media { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .block-numbered-columns__media,
  .block-numbered-columns__name,
  .block-numbered-columns__body,
  .block-numbered-columns__list::after { transition: none !important; }
}

/* ---- Tablet: 2 × 2 (each pair shares its rows) ------------------------------ */
@media (max-width: 1024px) {
  .block-numbered-columns { --nudge: 0px; --gap: 32px; padding: 72px 0 104px; }
  .block-numbered-columns__headrow.grid-2 { row-gap: 24px; }
  .block-numbered-columns__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .block-numbered-columns__item:nth-child(n+3) .block-numbered-columns__num { margin-top: 56px; }
  .block-numbered-columns__name { font-size: 34px; }
  .block-numbered-columns__body { max-width: none; }
}

/* ---- Mobile (no Figma: Mobile Category 4148:2776 language) -------------------
   eyebrow 16px, title 46px display (12 under the eyebrow), list 40 under it; each item: label, 2px rule 16 under
   it, 28px title 16 under the rule, body 16 under the title; 40px between items. */
@media (max-width: 640px) {
  .block-numbered-columns { padding: 46px 0 56px; }
  .block-numbered-columns__eyebrow + .block-numbered-columns__headrow { margin-top: 12px; }
  .block-numbered-columns__title { font-size: 46px; line-height: 1; }
  .block-numbered-columns__list { display: block; margin-top: 40px; }
  .block-numbered-columns__item { display: block; }
  .block-numbered-columns__item + .block-numbered-columns__item { margin-top: 40px; }
  .block-numbered-columns__item:nth-child(n+3) .block-numbered-columns__num { margin-top: 0; }
  .block-numbered-columns__num { display: flex; }
  .block-numbered-columns__name {
    min-height: 0;
    margin-top: 16px;
    padding-top: 16px;
    font-size: 28px;
    line-height: 1.1;
  }
  .block-numbered-columns__body { margin-top: 16px; }
}