/* Awards & Recognition — the "Awards Page" frame from the design file
   (Website 2.0 → Awards, node 1:3407, reference frame 1440×2562).

   Layers on tech.css, which already provides .sec, .wrap, .sec-head and the
   contact block — the same way team.css does for the other About page.

   Everything resolves to the design-system tokens in base.css: type from the
   --fs/--fw/--lh scale, colour from the palette. Two values the global scale
   has no step for — the 384px logo column and the 36px timeline dot — are local
   tokens rather than numbers repeated inline, as in team.css and ai.css.
   Headings carry no tracking, per base.css. The design draws the h1 at 700;
   the About family renders it at --fw-h1-hero (400), as team.css already does,
   and staying consistent with the sibling page wins over that one value. */
:root { --aw-col: 384px; /* logo column: the design's 30→414 band */
        --aw-gap: 120px; /* logo column → timeline (444 - 384 + track inset) */
        --aw-dot: 36px; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
/* the frame's hero sits on a 617px wash that stops dead at the section edge */
.aw-hero { padding: var(--hero-pt) 0 var(--hero-pb); min-height: var(--hero-min); display: flex; flex-direction: column; justify-content: center; text-align: center;
  /* the same wash every other hero carries, and the stops the frame draws */
  background: var(--grad-card); }
/* the frame gives this hero the h1-big role and a navy lead (1481:335) */
.aw-hero h1 { font-size: var(--fs-h1-big); font-weight: 500;
  line-height: var(--lh-h1-big); color: var(--ink); margin-bottom: 16px; }
.aw-hero .lead { font-size: var(--fs-subtitle); line-height: var(--lh-lead);
  color: var(--ink); max-width: 660px; margin: 0 auto; }

/* Three white chips, 50px tall on a 5px radius in the design. Each holds one of
   the footer badges, which are self-describing composites — height is what keeps
   them even, since the three have different aspect ratios (2.6 / 2.6 / 3.5). */
.aw-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 48px; }
.aw-trust-item { display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-sm); }
.aw-trust-item img { display: block; width: auto; height: 48px; object-fit: contain; }

/* the design's "See Projects" affordance — here it points at the awards below */
.aw-jump { display: inline-flex; align-items: center; gap: 16px; margin-top: 64px;
  font-size: var(--fs-p-small); color: var(--ink); transition: color var(--dur-fast), transform var(--dur-fast); }
.aw-jump svg { width: 24px; height: 24px; flex-shrink: 0; }
/* the same link behaviour as everywhere else -- emphasis on hover, not less of it */
.aw-jump:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.aw-jump svg { transition: transform var(--dur) var(--ease); }
.aw-jump:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .aw-jump:hover svg { transform: none; } }

/* ── Winners of ────────────────────────────────────────────────────────────── */
.aw-intro { padding-top: 96px; padding-bottom: 0; }
.aw-intro h2 { font-size: var(--fs-h2-bigger); font-weight: var(--fw-h2-bigger);
  line-height: var(--lh-h2-bigger); color: var(--ink); margin-bottom: 24px; }
/* the frame centres this band and its copy (1481:278) */
.aw-intro { text-align: center; }
.aw-intro p { font-size: var(--fs-subtitle); line-height: 1.5; color: var(--text); max-width: 783px; margin-left: auto; margin-right: auto; }

/* ── The award rows ────────────────────────────────────────────────────────── */
/* Each group is a logo column and a timeline, split by a full-height rule, with
   a hairline above every group — the design's separator pattern. */
.aw-list { padding-top: 96px; }
.aw-group { display: grid; grid-template-columns: var(--aw-col) 1fr; gap: 0 var(--aw-gap);
  border-top: 1px solid var(--card-border); padding: 96px 0; }
.aw-group:last-child { border-bottom: 1px solid var(--card-border); }
.aw-brand { display: flex; align-items: flex-start; padding-right: 48px;
  border-right: 1px solid var(--card-border); }
.aw-brand img { display: block; width: 100%; max-width: 246px; height: auto;
  /* the artwork is navy and the design shows it as a mid grey — .42 took it so
     far back it read as a placeholder rather than a mark */
  opacity: .68; filter: grayscale(1); }

.aw-track { list-style: none; margin: 0; padding: 0; position: relative; }
.aw-track li { position: relative; display: grid; grid-template-columns: 80px var(--aw-dot) 1fr;
  align-items: start; gap: 0 32px; padding-bottom: var(--s-7); }
.aw-track li:last-child { padding-bottom: 0; }
/* the amber run connecting the dots — drawn from each item to the next, so the
   line stops at the last dot instead of overshooting the group */
.aw-track li:not(:last-child)::before { content: ""; position: absolute; z-index: 0;
  left: calc(80px + 32px + (var(--aw-dot) / 2) - 1px); top: var(--aw-dot); bottom: -2px;
  width: 2px; background: var(--amber); }
.aw-year { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--aw-dot);
  color: var(--ink); text-align: center; }
/* amber ring with an amber core and a white gap between — three concentric
   circles in the design, one element with a border and a radial fill here */
.aw-dot { position: relative; z-index: 1; width: var(--aw-dot); height: var(--aw-dot);
  border-radius: 50%; background:
    radial-gradient(circle, var(--amber) 0 7px, #fff 7px 11px, var(--amber) 11px 100%);
  box-shadow: 0 0 0 6px #fff; }
.aw-track h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3);
  color: var(--ink); margin: 0; }

/* ── Certifications ────────────────────────────────────────────────────────── */
.aw-certs .aw-cert-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aw-cert-list li { padding: 24px 32px; border: 1px solid var(--card-border);
  border-radius: var(--r); background: var(--bg-soft); }
.aw-cert-list b { display: block; font-size: var(--fs-p); font-weight: 500;
  line-height: 1.3; color: var(--ink); margin-bottom: 6px; }
.aw-cert-list span { display: block; font-size: var(--fs-descriptor);
  line-height: var(--lh-descriptor); color: var(--text-dim); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* The frame is a desktop one. Below it the logo column loses its rule and sits
   above the timeline, and the year moves onto its own line so a long award
   title keeps a usable measure. */
@media (max-width: 1100px) {
  :root { --aw-col: 280px; --aw-gap: 64px; }
  .aw-track li { grid-template-columns: 92px var(--aw-dot) 1fr; gap: 0 24px; }
  .aw-track li:not(:last-child)::before { left: calc(92px + 26px + (var(--aw-dot) / 2) - 1px); }
}
@media (max-width: 940px) {
  :root { --aw-dot: 28px; }
  .aw-hero { padding: 120px 0 64px; min-height: 0; }
  .aw-jump { margin-top: 48px; }
  .aw-intro { padding-top: 64px; }
  .aw-list { padding-top: 64px; }
  .aw-group { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
  .aw-brand { padding-right: 0; border-right: none; }
  .aw-brand img { max-width: 190px; }
  .aw-track li { grid-template-columns: var(--aw-dot) 1fr; gap: 0 24px; padding-bottom: 48px; }
  .aw-track li:not(:last-child)::before { left: calc((var(--aw-dot) / 2) - 1px); }
  /* year above the title, both in the third column */
  .aw-year { grid-column: 2; grid-row: 1; text-align: left; font-size: var(--fs-h5);
    line-height: 1.2; color: var(--text-dim); margin-bottom: 4px; }
  .aw-dot { grid-column: 1; grid-row: 1; }
  .aw-track h3 { grid-column: 2; grid-row: 2; }
  .aw-certs .aw-cert-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .aw-trust { gap: 16px; }
  .aw-trust-item { padding: 8px 16px; }
  .aw-certs .aw-cert-list { grid-template-columns: 1fr; }
}

/* Touch targets: these draw at the size the design file specifies, which reads
   well under a mouse and falls short of the 44px a finger needs. A minimum
   height leaves the padding, the rhythm and the look exactly as designed. */
@media (hover: none) and (pointer: coarse) {
  .aw-jump { min-height: 44px; }
}

.aw-hero > .wrap { width: 100%; }