/* Guarantee — full-bleed ink band. Type and strings only.

   v4: this was a saturated accent surface. APWA survey pink is a marking colour,
   and a marking colour laid across a whole band stops reading as a mark and
   starts reading as cosmetics. The band is ink; the pink stays on the strings,
   the numeral and the pills. Art-director's call, recorded in art-direction.md. */

.guarantee {
  padding-block: var(--section-gap);
  background: var(--surface-ink);
  color: var(--text-on-ink);
}

.guarantee__inner {
  display: grid;
  gap: var(--block-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.guarantee__figure { display: grid; gap: var(--space-md); align-content: start; }

/* A bare numeral takes --text-numeral. A currency or percentage string is longer than the
   column and takes the heading scale instead, which is why the city pages were overprinting. */
.guarantee__figure--string .guarantee__num { font-size: var(--text-h2); }

.guarantee__unit {
  max-width: 240px;
  color: var(--text-on-ink-accent);
}

.guarantee__unit::before,
.guarantee__unit::after { background: var(--accent-on-ink); }

.guarantee__num {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-numeral);
  line-height: var(--lh-numeral);
  letter-spacing: var(--track-numeral);
  color: var(--text-on-ink-accent);
}

.guarantee__list {
  display: grid;
  gap: var(--block-gap);
}

.guarantee__tick {
  grid-row: 1 / 3;
  align-self: start;
  /* optical centring on the cap height of --text-h4, not on the whole block */
  margin-top: 0.35em;
  color: var(--text-on-ink-accent);
}

.guarantee__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-sm);
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: var(--border-datum-on-ink);
  font-size: var(--text-small);
}

.guarantee__lead {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
}

@media (min-width: 900px) {
  .guarantee__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: start;
  }
  .guarantee__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}