/* ==========================================================================
   Block: awards-list — heading + intro, then a ruled list of award marks with their category labels
   (src/blocks/awards-list.html). Static; reveals come from js/main.js.
   Figma "Search Engine Optimisation" 4641:2 at 1920 (page y):
     eyebrow  dot x103, label x124 y1271 (20px)
     title    x103  y1322  729 wide, 48px Blauer Nue Regular, 2 lines (118)   → 26 under the eyebrow box
     rule     x100  y1485  125 × 2 green (top edge 1484)                      → 44 under the title
     body     x974  y1322  849 wide, 20px, 2 paragraphs (5 lines, bottom 1446)
     list     x973→1823, 2px white rules at y1534 / 1720 / 1914 / 2098 (centres): rows 188 apart here
              (Figma 186 / 194 / 184 — its drift; first and last rules exact), logo 287 × 92 at +42 under
              the rule, labels at x1408 (435 of the 850 column), last baseline on the logo's bottom edge.
     list top = max(body bottom + 87, rule top) — see the grid below (About 5257:155 has the list level with
     the green rule because its body is one line).
   Columns = the .grid-2 split (860fr | 849fr, 11px gap: right column at x971).
   Section padding: 68 above (the work-showcase / device-mockup header convention), 161 below (last rule 2099
   → numbered-cards eyebrow 2330 minus that block's 70 top padding).
   ========================================================================== */

.block-awards-list {
  --nudge: min(0.1563vw, 3px);          /* Figma text boxes sit 3px inside the 100px gutter */
  padding: min(3.5417vw, 68px) 0 min(8.3854vw, 161px);
}

/* Row 1: head | body; row 2: — | list. The head's −2px bottom margin makes row 1 end at the green rule's
   TOP edge, the body's 87px bottom padding makes it end 87 under the body: the list starts at whichever is
   lower. */
.block-awards-list__grid {
  display: grid;
  grid-template-columns: minmax(0, 860fr) minmax(0, 849fr);
  grid-template-areas:
    "head body"
    ".    list";
  column-gap: var(--col-gap);
  align-items: start;
}

/* ---- Head: eyebrow, title, rule ---------------------------------------------- */
.block-awards-list__head { grid-area: head; margin-bottom: -2px; }
.block-awards-list__eyebrow { margin-left: var(--nudge); }
.block-awards-list__title {
  max-width: 729px;
  margin-left: var(--nudge);
  font-family: var(--font-display);
  font-weight: 400;                     /* Blauer Nue Regular, sentence case */
  font-size: 48px;
  line-height: 1.23;                    /* 59px lines: 2 lines = the Figma's 118 box */
}
.block-awards-list__eyebrow + .block-awards-list__title { margin-top: 26px; }   /* eyebrow box bottom 1296 → title 1322 */
.block-awards-list__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin-top: 44px;                     /* title bottom 1440 → line top 1484 */
  background: var(--accent);
}

/* ---- Body (right column, level with the title) --------------------------------- */
.block-awards-list__body {
  grid-area: body;
  max-width: 849px;
  padding: 0 0 min(4.5313vw, 87px) var(--nudge);
}
.block-awards-list:has(.block-awards-list__eyebrow) .block-awards-list__body { padding-top: calc(24.8px + 26px); }
.block-awards-list__body p { font-size: var(--fs-body); line-height: var(--lh-body); }
.block-awards-list__body p + p { margin-top: calc(var(--lh-body) * 1em); }   /* one blank line */

/* ---- List ---------------------------------------------------------------------- */
.block-awards-list__list {
  grid-area: list;
  margin: 0 calc(var(--nudge) * -1) 0 calc(var(--nudge) * 2 / 3);   /* x973 → 1823 (850 wide) */
}
.block-awards-list__row {
  display: grid;
  grid-template-columns: minmax(0, 435fr) minmax(0, 415fr);   /* labels at x1408 */
  align-items: last baseline;           /* the labels' last baseline sits on the logo's bottom edge */
  padding: 42px 0 52px;                 /* 2 + 42 + 92 + 52 = the 188px row */
  border-top: 2px solid var(--fg);
}
.block-awards-list__row:last-child { border-bottom: 2px solid var(--fg); }

.block-awards-list__logo-link { display: block; width: fit-content; max-width: 100%; }
.block-awards-list__logo {
  display: block;
  width: 287px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 287 / 92;
  object-fit: contain;
  object-position: left center;
}
.block-awards-list__labels { min-width: 0; }
/* The label's line box hangs 0.29em (5.8px) under its baseline; cancel it so the row's height is set by the
   logo (as in the Figma, where the label box overhangs the logo's bottom into the row's padding). */
.block-awards-list__label:last-child { margin-bottom: -0.29em; }
.block-awards-list__label + .block-awards-list__label { margin-top: 7px; }   /* About row 4: labels 32px apart */

/* ---- Tablet: one column, the list full width under the head and body ------------- */
@media (max-width: 1024px) {
  .block-awards-list { --nudge: 0px; padding: 64px 0 96px; }
  .block-awards-list__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "list";
  }
  .block-awards-list__head { margin-bottom: 0; }
  .block-awards-list__title { font-size: 40px; }
  .block-awards-list__body,
  .block-awards-list:has(.block-awards-list__eyebrow) .block-awards-list__body { max-width: 760px; padding: 32px 0 0; }
  .block-awards-list__list { margin: 56px 0 0; }
}

/* ---- Mobile (no Figma: Mobile Category 4148:2776 language) -----------------------
   eyebrow 16px, title 36px, 64px rule 28 under it, body 32 under the rule, list 40 under the body; rows:
   logo 180 × 58, its label(s) (16px) 14 under it, 24 above / 28 below each row. (Logo | labels side by side
   was tried: at 402 the labels wrap to two ragged lines beside the logo, so the row stacks.) */
@media (max-width: 640px) {
  .block-awards-list { padding: 46px 0 48px; }
  .block-awards-list__eyebrow + .block-awards-list__title { margin-top: 12px; }
  .block-awards-list__title { font-size: 36px; line-height: 1.222; }
  .block-awards-list__rule { width: 64px; margin-top: 28px; }
  .block-awards-list__body,
  .block-awards-list:has(.block-awards-list__eyebrow) .block-awards-list__body { padding-top: 32px; }
  .block-awards-list__list { margin-top: 40px; }
  .block-awards-list__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    align-items: start;
    padding: 24px 0 28px;
  }
  .block-awards-list__logo { width: 180px; }
  .block-awards-list__label:last-child { margin-bottom: 0; }
  .block-awards-list__label + .block-awards-list__label { margin-top: 6px; }
}