/* ===================================================================
   SERVE — /serve/
   Nine team cards. Uses the same card anatomy as the campus and event
   cards so the page reads as part of the site rather than a list.
   =================================================================== */

/* Drew's fragment stack in the hero — narrow measure so the short lines
   read as deliberate, matching /next-steps/ where this copy also runs. */
.serve-lines { max-width: 34rem; margin: 1.25rem auto 0; text-align: center; }
.serve-lines p { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.65; color: var(--slate); }
.serve-lines p:last-child { margin-bottom: 0; }

.serve-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.serve-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(18, 18, 19, 0.08);
}
.serve-media { aspect-ratio: 16 / 9; }
/* The body fills the card so the button can be pinned to the bottom —
   the descriptions vary a lot in length and the buttons would otherwise
   sit at nine different heights. */
.serve-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
}
.serve-name {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);
}
.serve-copy {
  /* The bottom margin is the important one. margin-top:auto on the button
     pins it to the card's base, but that auto space collapses to nothing
     the moment the copy is long enough to fill the card — and then the
     button sits flush against the last line of text. This guarantees a gap
     either way. Flex containers don't collapse margins, so the two add. */
  margin: 0.85rem 0 clamp(1.5rem, 2.6vw, 2rem);
  font-size: 0.95rem; line-height: 1.7; color: var(--slate);
}
.serve-link { margin-top: auto; }

@media (max-width: 62rem) { .serve-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .serve-grid { grid-template-columns: 1fr; } }