/* ==========================================================================
   Block: Card grid
   ========================================================================== */

.awx-card-grid__header {
  /* No max-width here — .awx-heading now carries its own
     --awx-measure-heading cap, computed against its own large font-size
     rather than this wrapper's ambient body-text size. A ch value set here
     instead would be far too narrow for a 44px display heading. */
  margin-bottom: var(--awx-space-lg);
  text-align: center;
}

.awx-card-grid__list {
  display: grid;
  gap: 1.5rem; /* ~24px measured, was --awx-space-lg (56px) */
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .awx-card-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .awx-card-grid__list {
    /* Set from the block's "Columns" field via an inline custom property —
       the same technique stats-band uses for its figure count. */
    grid-template-columns: repeat(var(--awx-card-grid-columns, 3), 1fr);
  }
}

/* 402.67x441 measured. Width still comes from the grid's own fr column
   (so it stays responsive rather than a fixed px regardless of viewport
   or column count), but aspect-ratio holds the measured proportion
   (402.67:441) at whatever width that column actually computes to.
   Padding is asymmetric (measured: top 60px, right 32px, bottom 40px,
   left 32px) — not the uniform padding this had before. gap: 32px is the
   space between the card's own title/body/link, not the previous mix of
   individual margins. */
/* border-radius was missing entirely before this pass — overflow: hidden
   alone clips to a square box; the 6px radius (spec: "Card radius 6px")
   is what makes it clip to a rounded one, and without it the corner wedge
   below was reading as a hard-edged rectangle even where it was correctly
   clipped. */
.awx-card-grid__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--awx-radius); /* 6px */
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
  aspect-ratio: 402.67 / 441;
  padding: 3.75rem 2rem 2.5rem 2rem; /* 60px 32px 40px 32px */
}

/* The gold corner itself (the ::before rotated rectangle) is a shared
   .awx-corner-wedge utility in base.css — see that file for the full
   reasoning, including the MEASURE note on rotation direction/placement
   being unverified. team-grid's portrait uses the same class rather than
   this being duplicated per block. */

.awx-card-grid__card-title {
  position: relative;
  margin: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: var(--awx-card-title-size); /* 32px, fixed — measured as its own element */
  font-weight: 700;
  line-height: var(--awx-leading-tight); /* 100% */
  text-align: center;
  text-transform: uppercase;
}

.awx-card-grid__card-body {
  position: relative;
  margin: 0;
  color: var(--surface-text);
  font-size: var(--awx-step-0);
}

/* margin-top: auto on the last flex child, not flex-grow on the body, so the
   link pins to the card's bottom edge regardless of how much copy sits
   above it — every card in a row lines up even when body length varies.
   The 32px gap above already provides the space before it, so no padding
   of its own is needed on top of that. */
.awx-card-grid__card-link {
  position: relative;
  margin-top: auto;
}