/* ==========================================================================
   Recognition page components only. Everything shared lives in site.css.
   ========================================================================== */

/* --- Hero (editorial text, no photo: the spark watermark and the four
   institution names carry the right column instead) ------------------------ */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.25rem);
}
.hero h1 { max-width: none; }
.hero .lede { max-width: 46ch; }

.hero__creds {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(220px, 26vw, 360px);
}
.hero__creds .spark--wm {
  top: 50%;
  right: -8%;
  translate: 0 -50%;
  width: clamp(240px, 28vw, 400px);
}
.hero__creds-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.125rem);
  width: 100%;
  max-width: 30ch;
}
.hero__creds-item {
  padding-top: 0.75rem;
  border-top: 2px solid var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--navy);
  text-wrap: balance;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero .lede { max-width: 46ch; }
  .hero__creds { min-height: 0; }
}
/* At the narrowest supported width the first headline line needs a little
   room it does not have, so the type steps down rather than breaking mid line. */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.25rem; }
}

/* --- Lead award: 7/5 split, justified by the dl callout on the right ----- */
.lead-award {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.lead-award__main {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
.lead-award__badge {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gold-ink);
}
.lead-award__org {
  font-weight: 500;
  color: var(--ink-2);
}
.lead-award__body {
  color: var(--ink-2);
  max-width: 58ch;
}
.lead-award__aside {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* The single gold mark on this page, sized up from the default 14px so it
   reads as an emblem in the corner of the callout rather than a bullet. */
.lead-award__gold { width: 40px; height: 40px; }
.lead-award__dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  row-gap: clamp(1rem, 2vw, 1.25rem);
  column-gap: 1rem;
}
.lead-award__dl dt {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-ink);
}
.lead-award__dl dd {
  color: var(--ink);
}
@media (max-width: 800px) {
  .lead-award { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .lead-award__dl { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .lead-award__dl dt { margin-bottom: 0.25rem; }
}

/* --- Programs: three rows, hairline between rows, a typographic year tile
   closing each one out (real data: the year and the length or placement). */
.program-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2rem);
}
.program-row + .program-row { border-top: 1px solid var(--rule); }
.program-row__lead { display: flex; flex-direction: column; gap: 0.25rem; }
.program-row__org {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.program-row__title { margin: 0; }
.program-row__body { color: var(--ink-2); max-width: 55ch; }
.program-row__tile { width: 108px; justify-self: end; }
@media (max-width: 800px) {
  .program-row { grid-template-columns: minmax(0, 1fr); }
  .program-row__tile { width: 108px; justify-self: start; }
}

/* --- Also advanced in: 2-column pair, a teal rule over each name echoes the
   hero credits list rather than a fabricated data tile (no year data here). */
.also-advanced__head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.also-advanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.also-advanced__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.875rem;
  border-top: 2px solid var(--teal);
}
.also-advanced__name { margin: 0; }
.also-advanced__body { color: var(--ink-2); }
@media (max-width: 800px) {
  .also-advanced { grid-template-columns: minmax(0, 1fr); }
}

/* --- Closing CTA ------------------------------------------------------------
   Mist callout, vertical stack, one button, the plate corner behind and the
   spark watermark clipped inside (shared pattern, see chrome.md 11.5). */
.cta { --flow: 1rem; }
.cta p { max-width: 46ch; color: var(--ink-2); }
.cta .btn { margin-top: 0.5rem; }
.cta > :not(.spark) { position: relative; z-index: 1; }