/* Feature grid (library block, T29). Styles Paths, Range and Figures; the cards
   themselves are the shared page card (css/shared/pageCard.css).
   Grid rules (B10) come from T02's .grid--3 / .grid--2: one column on phones;
   from 600 px two columns with an odd last card spanning the row (3 = 2 + 1);
   from 1024 px three columns. Four items: 2 x 2 on tablets, 4 across on desktop.
   Tokens only. Nothing animates except colour, which reduced motion switches off. */

.feature-grid__heading { margin-bottom: var(--space-8); }
.feature-grid__list { margin: 0; padding: 0; list-style: none; }
.feature-grid__item { margin: 0; min-width: 0; }

@media (min-width: 1024px) {
  .feature-grid__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Range: a card that spans the whole row on tablets lies on its side (photo on the right). */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .grid--3 > .feature-grid__item:last-child:nth-child(odd) > .page-card--range { flex-direction: row; }
  .grid--3 > .feature-grid__item:last-child:nth-child(odd) > .page-card--range > * { flex: 1 1 50%; }
  .grid--3 > .feature-grid__item:last-child:nth-child(odd) > .page-card--range .page-card__media {
    position: relative;
    aspect-ratio: auto;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
  }
  .grid--3 > .feature-grid__item:last-child:nth-child(odd) > .page-card--range .page-card__media > * {
    position: absolute;
    inset: 0;
  }
}

/* Figures: big light figures over one short line, under a hairline. */
.feature-grid__list--figures {
  /* Figure size follows the prototype: 34 px on phones and tablets, growing with the screen to
     48 px at 1440 (T29b; T46a, studio lead "keep as per design"). 48 px is not a design-system
     type step (the display sizes are 44 and 56), so it stays a plain value here. */
  --feature-grid-figure-size: clamp(34px, 3.4vw, 48px);
  --grid-gap: var(--space-8) var(--gutter);
  /* Space between the hairline and the figures: the prototype's clamp(32px, 3.4vw, 48px) (T46a). */
  padding-top: clamp(var(--space-8), 3.4vw, var(--space-12));
  border-top: var(--border-width) solid var(--color-hairline);
}
.feature-grid__figure-value {
  margin: 0 0 var(--space-3);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--feature-grid-figure-size);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-display);
  overflow-wrap: break-word;
}
.feature-grid__figure-line {
  max-width: 20em; /* the prototype's short measure (300 px at body size) */
  text-wrap: balance;
  margin: 0;
  overflow-wrap: break-word;
}
.feature-grid__figure-line a { text-decoration: underline; }

/* Standard: a third card that spans the row on tablets (2 + 1) keeps its photo as tall as the
   photos above it (B11 round 2): the spanning card is two cards plus a gap wide, so 3:1 matches
   their 3:2 photos to within a few pixels. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .grid--3 > .feature-grid__item:last-child:nth-child(odd) > .page-card--standard .page-card__media { aspect-ratio: 3 / 1; }
}