/**
 * Value tiles.
 *
 * The navy ground, the white headings and the gold glow behind the band are all
 * `.dark-band` in pages.css §5, so none of that is repeated here. This file adds
 * the two-column frame and the tile itself.
 *
 * Every translucent value resolves to an --on-dark-* token rather than a fresh
 * rgba(): the design leans on white at a fixed set of opacities, and naming them
 * is what stops each new section inventing another.
 *
 * Ported from `_mockups/index-c.html`, the `.c-why__grid`, `.c-why__list` and
 * `.c-why__item` rules.
 */

.value-tiles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
}
/* No heading and no paragraph: the tiles take the whole width rather than
   leaving an empty grid track beside them. */
.value-tiles__grid--solo { grid-template-columns: 1fr; }

.value-tiles__intro h2 { margin-block: var(--s-3) var(--s-4); }

.value-tiles__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.value-tiles__item {
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-hairline-soft);
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-s);
  color: var(--on-dark-strong);
}
.value-tiles__item b {
  display: block;
  font-family: var(--display);
  color: var(--gold);
  margin-block-end: 0.25em;
}

@media (max-width: 900px) {
  .value-tiles__grid,
  .value-tiles__list { grid-template-columns: 1fr; }
}