/* chip_strip block. A header plus a horizontal strip of level chips.
   The block emits its own `.chip-strip__*` shell and `.level-chip` cards; neither
   was styled (the old stub assumed shared .chips, which the block does not emit),
   so chips stacked vertically and the header was unstyled. `.level-chip*` ported
   from design-export/base.css. No literal colour, every value a token. */

.chip-strip--grey { background: var(--light); }

.chip-strip__header { margin-bottom: 1.6rem; }
.chip-strip__header--center { text-align: center; }
.chip-strip__title { margin-bottom: .6rem; }
.chip-strip__intro { color: var(--muted); max-width: 62ch; }
.chip-strip__header--center .chip-strip__intro { margin-inline: auto; }

/* .level-chip cards themselves are styled in css/components/chip.css (flex-basis
   180px, accent top edge). This block only needed its container to be a flex row
   so the chips sit horizontally rather than stacking. */
/* Auto-fit the chips across the full width so they stretch to fill the row
   instead of sitting at their 180px flex-basis with trailing empty space. */
.chip-strip__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
/* The shared .level-chip caps itself at max-width:240px (right for a loose flex
   row). In this grid each chip must fill its track, so lift the cap here; grid
   already stretches items to the full track width. */
.chip-strip__chips .level-chip { max-width: none; }

.chip-strip__cta-wrap { margin-top: 1.6rem; }