/* ── ita_chip_grid ──────────────────────────────────────────────────
   Reused from cinematic_marquee. The source block scrolls
   horizontally and duplicates its item list once for a seamless
   loop; ITA's chip grids are static and wrapped, so:
     - animation is disabled and .cm-track wraps
     - the second (non-editable) copy is hidden via the same
       attribute selector the editor already uses to tell the two
       loops apart ([data-list-item] = the real, addressable copy)
     - each .cm-item reuses the shared .chip component wholesale
       (border/bg/dot-cycling all come from shared/styles.css) —
       this file only handles the track layout + strip/header bits.
   Tokens only. */

/* No explicit `background` here on purpose — a section can carry a
   .strip-gold/red/teal class (see render.php's `strip` field), and
   this rule ties in specificity with the shared .strip-* background
   rule; source order would make THIS file win (it loads after
   shared/styles.css) and silently blank out the strip color. Same
   bug class as the footer grid/comment issues found earlier in this
   build — see shared/styles.css's own note on the strip block. */
/* No padding override — spacing to neighboring blocks now comes from
   an explicit ita_spacer block in the page, not block CSS. */

.block-ita_chip_grid .cm-track {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0; margin-top: 26px;
  white-space: normal;
  animation: none;
}
/* header-less usage (no label/title/intro) needs no top margin */
.block-ita_chip_grid .section-head + .cm-track,
.block-ita_chip_grid > .wrap > .cm-track:first-child { margin-top: 0; }

.block-ita_chip_grid .cm-item:not([data-list-item]) { display: none; }

.block-ita_chip_grid .cm-outro { margin-top: 30px; max-width: 680px; }

/* Strip variant — chip look adapts via the shared .strip-* rules
   (they already target .chip); nothing extra needed here beyond the
   section itself carrying the strip-* class from render.php. */

/* ── size + top-tier variants (used for the award-levels list) ────── */
.block-ita_chip_grid.ita-chips--large .cm-item {
  padding: 19px 20px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.block-ita_chip_grid.ita-chips--large .cm-item .dot { width: 8px; height: 8px; }
.block-ita_chip_grid .cm-item.ita-chip--top {
  background: var(--color-fg); color: #fff; border-color: var(--color-fg); font-weight: 700;
}
.block-ita_chip_grid .cm-item.ita-chip--top .dot { background: var(--color-accent-2); }

/* ── Card-grid layout — uniform tiles instead of variable-width wrapped
   pills. Built for long, same-shape lists (e.g. an 18-item "what can
   be entered" scope list) where flex-wrapped pills of very different
   widths read as a messy ragged block; a fixed-column grid of small
   left-aligned tiles reads as organized regardless of list length. ── */
.block-ita_chip_grid.ita-chips--cards .cm-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.block-ita_chip_grid.ita-chips--cards .cm-item {
  border-radius: 10px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}