/* PD - Stat Cards
   The intro, then white cards in 2 or 3 columns. One column on phones and
   two from 768px; three from 1024px when chosen.

   Each card has an optional tag (a small pill) and title, then the figure
   and its label. The cards' shape and colors are shared (css/main.css,
   section 8): pd-card gives the padding, border and corners, and
   pd-section--bg-white the white card's colors, so a white card on a white
   section gets a light edge. The card's accent color (slate or green)
   applies to the tag and the figure only.

   Where subgrid is supported, each card's parts sit on rows shared with
   the other cards in the row, so titles start level and figures line up.
   Elsewhere each card is a column. No heights are set, so cards grow with
   zoom and text spacing. */

/* Intro, then cards */
.pd-stat-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-xl);               /* 40 → 60px */
}

/* The intro is easier to read at most 50rem (800px) wide */
.pd-stat-cards__inner > .pd-intro {
  max-width: 50rem;
}

.pd-stat-cards__inner > .pd-intro--center {
  width: 100%;
  margin-inline: auto;
}

/* Balanced lines on phones: "You decide how / involved to be." */
.pd-stat-cards__inner > .pd-intro > :is(h2, h3) {
  text-wrap: balance;
}

/* minmax(0, 1fr): a long word wraps instead of widening the column */
.pd-stat-cards__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pd-space-lg);               /* 24 → 40px */
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Cards */

.pd-stat-cards__card {
  display: flex;
  flex-direction: column;
}

/* Accent colors, both on the white card: slate 4.97:1, green 4.98:1 */
.pd-stat-cards__card--slate {
  --pd-stat-cards-accent: var(--pd-slate);
}

.pd-stat-cards__card--green {
  --pd-stat-cards-accent: var(--pd-green);
}

/* The global pill at 14px and in capitals, at its own width, in the accent
   color with white text (4.97 and 4.98:1). Two classes, so it wins over
   .pd-pill whichever stylesheet HubSpot loads first. */
.pd-stat-cards .pd-stat-cards__tag {
  --pd-pill-bg: var(--pd-stat-cards-accent, var(--pd-slate));
  --pd-pill-text: var(--pd-white);
  align-self: flex-start;
  justify-self: start;
  margin-bottom: var(--pd-space-md);     /* 20 → 30px */
  font-size: 0.875rem;
  text-transform: uppercase;
}

.pd-stat-cards__title {
  margin-bottom: var(--pd-space-md);     /* 20 → 30px */
}

/* The figure paragraph fills its row (subgrid) and its width decides
   whether the label fits beside the figure (the container query below).
   The container is the paragraph, not the card: the layout containment
   that comes with it would stop the card being a subgrid. */
.pd-stat-cards__stat {
  display: grid;
  container-type: inline-size;
}

/* The figure and its label, hidden from screen readers (module.html reads
   them as one sentence). In narrow cards the label is below the figure,
   and figures line up at the top of the row. */
.pd-stat-cards__figure {
  display: flex;
  flex-direction: column;
  align-self: start;
  align-items: flex-start;
  gap: var(--pd-space-xs);               /* 10px */
}

/* 28 → 36px, bold, in the accent color. min-width: 0 lets a long value
   wrap instead of widening the card. */
.pd-stat-cards__value {
  min-width: 0;
  max-width: 100%;
  color: var(--pd-stat-cards-accent, var(--pd-slate));
  font-size: clamp(1.75rem, 1.6071rem + 0.7143vw, 2.25rem);
  font-weight: 700;
  line-height: var(--pd-line-height-heading);
  letter-spacing: var(--pd-letter-spacing-heading);
}

/* Editor notes under the figure */
.pd-stat-cards__notes {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-sm);
  padding-top: var(--pd-space-sm);       /* 16 → 20px */
}

/* With at least 384px of text width, the label sits beside the figure,
   16 → 20px from it and centered on it, as designed. A figure too long to
   leave it 12rem still wraps it below. The figure is centered in its row,
   so figures line up across a row whatever the labels' length. */
@container (min-width: 24rem) {
  .pd-stat-cards__figure {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    column-gap: var(--pd-space-sm);
  }

  .pd-stat-cards__label {
    flex: 1 1 12rem;
  }
}


/* Rows shared across the cards in a row (subgrid). Each card spans the
   rows of the list's grid that its parts sit on, and the spacing between
   parts is margins and padding, so a part that no card in the row has
   takes no space.
   The list has no row gap: it would also sit between the rows inside each
   card and leave extra space next to a row no card uses. The space between
   rows of cards is each card's bottom margin instead, and the list's
   negative margin takes it back off after the last row. */
@supports (grid-template-rows: subgrid) {
  .pd-stat-cards__list {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--pd-space-lg));
  }

  /* minmax(0, 1fr): a long word wraps instead of widening the card */
  .pd-stat-cards__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
    margin-bottom: var(--pd-space-lg);   /* 24 → 40px */
  }

  .pd-stat-cards__tag {
    grid-row: 1;
  }

  .pd-stat-cards__title {
    grid-row: 2;
  }

  .pd-stat-cards__stat {
    grid-row: 3;
  }

  .pd-stat-cards__notes {
    grid-row: 4;
  }
}

/* Tablets: two columns */
@media (min-width: 768px) {
  .pd-stat-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3 columns from 1024px */
@media (min-width: 1024px) {
  .pd-stat-cards__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}