/**
 * Section: Trust strip (assurance-strip)
 *
 * Ported from _mockups/index.html `.c-assure`. One page, no drift.
 *
 * Band: default, so the ground is the page's own --mist. This section sets its
 * own padding rather than taking `.section`, exactly as the mock-up does: the
 * strip is a rule under the cards above it, not a band of its own.
 *
 * Contrast measured on --mist #f7f4ee, which is the ground this strip always
 * lands on:
 *
 *   --ink-soft  #45524d  on --mist   7.45:1   the point text
 *   --forest    #0e4038  on --mist  10.57:1   the bold opening words
 *   --gold-deep #7e622e  on the .ph-badge ground
 *               (--gold-tint-10 striped over --mist)   4.75:1
 *
 * All clear WCAG AA for normal text. The badge is the tightest of the three
 * and it is the shared `.ph-badge` component in components.css, not something
 * this file sets: if it ever needs more room it moves there, not here.
 *
 * --gold on the separator dot is 2.33:1 on --mist. It is decorative
 * punctuation and carries no meaning of its own, so it is not held to a text
 * ratio. Removing it would change nothing a screen reader hears, because a
 * CSS ::before is not in the accessibility tree in any engine that matters.
 */

.assurance-strip {
  padding-block: var(--s-4) 0;
}

.assurance-strip-list {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em 0;
  border-block: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.assurance-strip-list li {
  display: inline-flex;
  align-items: center;
}

.assurance-strip-list li + li::before {
  content: "\00b7";
  margin-inline: .9em;
  font-weight: 700;
  color: var(--gold);
}

.assurance-strip-list strong {
  font-weight: 600;
  color: var(--forest);
}

/* THE SECOND INTERPUNCT, which is not the one above.
 *
 * The mock-up's first item is `<strong>HK-licensed</strong>&nbsp;· Cap. 57`:
 * a dot INSIDE the item, in the item's own colour and weight, entirely
 * separate from the gold dot `li + li::before` puts BETWEEN items. Splitting
 * that item into a `lead` field and a `text` field dropped it, and a `gap` on
 * the `li` put a plain space there instead, so the line read "HK-licensed
 * Cap. 57" where the design reads "HK-licensed · Cap. 57".
 *
 * A pseudo-element rather than markup, on the same reasoning as the separator
 * above and as `.pasia-ticklist`'s tick: it is punctuation between two parts
 * of one point, the words on either side carry the meaning, and this way no
 * client-entered string has to contain it. Non-breaking on both sides so the
 * dot never starts or ends a line.
 *
 * The adjacent-sibling selector is doing real work. It puts the dot BETWEEN
 * the two parts and only when there are two: an item with an opening word and
 * nothing after it gets no trailing dot, and an item with no opening word gets
 * no leading one. On the rest rather than on the <strong> so it inherits the
 * list's own --ink-soft and 500 rather than the <strong>'s forest and 600,
 * which is what the mock-up's dot is. */
.assurance-strip-list strong + .assurance-strip-rest::before {
  content: "\00a0\00b7\00a0";
}

/* The licence item wraps as one unit. The badge is wider than the words
   around it, and a line break between "EA Licence No." and the number would
   read as two separate points. The gap is this item's alone: its two parts are
   a phrase and a badge with no punctuation between them, where every other
   item is one run of text. */
.assurance-strip-licence {
  flex-wrap: nowrap;
  gap: .4em;
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 *
 * Below 620 the points stack, one per line, and the separator dots go with
 * them: a dot at the start of every line reads as a bullet the design never
 * asked for. The line is still a line at every width the mock-up was signed
 * off at.
 * ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .assurance-strip-list {
    flex-direction: column;
    gap: var(--s-1);
    text-align: center;
  }

  .assurance-strip-list li + li::before {
    content: none;
  }
}