/* =============================================================================
   MODULE · b-columns-two — heading above, short list items in two columns

   Grid rather than CSS multi-column. Multicol packs items down-then-across,
   which is what Formula does, but it also breaks an item across the column
   boundary when the item is tall. These items are short and the list is edited
   by hand, so predictable left-to-right pairs are the safer behaviour.

   The marker is a sage square. Sage is a decorative mark here, never a text
   colour — 2.0:1 on the page ground, which is why nothing in this file sets
   type in it.
   ========================================================================== */

.b-columns-two__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* --- head ---------------------------------------------------------------- */

.b-columns-two__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--measure);
}

.b-columns-two__eyebrow,
.b-columns-two__lede { margin: 0; }

.b-columns-two__h { text-wrap: balance; }

/* --- list ---------------------------------------------------------------- */

.b-columns-two__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

.b-columns-two__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Square, because --radius is 0 and every other mark on the site is square. */
.b-columns-two__item::before {
  content: "";
  width: var(--sp-2);
  height: var(--sp-2);
  margin-top: 0.62em;          /* optical centring against the first line */
  background: var(--sage);
}

/* --- slot primitives (scoped) -------------------------------------------- */

.b-columns-two .slot {
  color: var(--soft);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  margin: 0;
}

.b-columns-two .slot--inline {
  display: inline;
  border: 0;
  border-bottom: 1px dashed var(--sage);
}

.b-columns-two .slot--line {
  display: block;
  padding: var(--sp-2) var(--sp-3);
}

/* --- two columns --------------------------------------------------------- */

@media (min-width: 760px) {
  .b-columns-two__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--sp-10), 5vw, var(--sp-16));
    row-gap: var(--sp-5);
  }
}