/* OE Boilerplate Stats
 *
 * A row of figures: big number, coloured label, short description, with
 * optional lines between them. 1–6 across; 2 across below 900px of block
 * width, 1 across below 520px (container queries, so it also works in a
 * narrow column).
 *
 * Hex exception (this block only, approved 2026-10-19): teal, plum and gold
 * label colours have no --oe-* token. Everything else uses tokens.
 */

.oe-block-boilerplate {
  --oe-boilerplate-teal: #347074;
  --oe-boilerplate-plum: #61385C;
  --oe-boilerplate-gold: #B38D2F;
  --oe-boilerplate-line: color-mix(in srgb, var(--oe-color-heritage-blue) 12%, transparent);
  --oe-boilerplate-c: var(--oe-color-sky-blue);

  container: oe-boilerplate / inline-size;
  box-sizing: border-box;
  width: 100%;
}

.oe-block-boilerplate *,
.oe-block-boilerplate *::before,
.oe-block-boilerplate *::after {
  box-sizing: border-box;
}

.oe-block-boilerplate .oe-block-boilerplate__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oe-block-boilerplate--cols-1 .oe-block-boilerplate__list { grid-template-columns: minmax(0, 1fr); }
.oe-block-boilerplate--cols-2 .oe-block-boilerplate__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oe-block-boilerplate--cols-3 .oe-block-boilerplate__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oe-block-boilerplate--cols-5 .oe-block-boilerplate__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.oe-block-boilerplate--cols-6 .oe-block-boilerplate__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.oe-block-boilerplate .oe-block-boilerplate__stat {
  margin: 0;
  padding: calc(var(--oe-spacing-medium) - var(--oe-spacing-3xsmall)) calc(var(--oe-spacing-large) - var(--oe-spacing-2xsmall)) 6px;
}

.oe-block-boilerplate--dividers .oe-block-boilerplate__stat {
  border-left: var(--oe-spacing-5xsmall) solid var(--oe-boilerplate-line);
}

.oe-block-boilerplate .oe-block-boilerplate__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Label colours */
.oe-block-boilerplate__c--sky-blue { --oe-boilerplate-c: var(--oe-color-sky-blue); }
.oe-block-boilerplate__c--teal { --oe-boilerplate-c: var(--oe-boilerplate-teal); }
.oe-block-boilerplate__c--plum { --oe-boilerplate-c: var(--oe-boilerplate-plum); }
.oe-block-boilerplate__c--gold { --oe-boilerplate-c: var(--oe-boilerplate-gold); }
.oe-block-boilerplate__c--turquoise { --oe-boilerplate-c: var(--oe-color-primary); }
.oe-block-boilerplate__c--royal-blue { --oe-boilerplate-c: var(--oe-color-secondary-8); }
.oe-block-boilerplate__c--navy { --oe-boilerplate-c: var(--oe-color-heritage-blue); }
.oe-block-boilerplate__c--grey { --oe-boilerplate-c: var(--oe-color-cool-grey); }

.oe-block-boilerplate .oe-block-boilerplate__number {
  margin: 0;
  font-size: clamp(calc(var(--oe-font-size-base) * 2.375), 3.6vw, calc(var(--oe-font-size-base) * 3.375));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--oe-color-heritage-blue);
  font-variant-numeric: tabular-nums;
}

.oe-block-boilerplate .oe-block-boilerplate__label {
  margin: var(--oe-spacing-2xsmall) 0 0;
  font-size: clamp(calc(var(--oe-font-size-base) * 1.125), 1.6vw, calc(var(--oe-font-size-base) * 1.375));
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-boilerplate-c);
}

.oe-block-boilerplate .oe-block-boilerplate__description {
  margin: var(--oe-spacing-small) 0 0;
  font-size: calc(var(--oe-font-size-base) * .9375);
  line-height: 1.5;
  color: var(--oe-color-cool-grey);
}

/* Two across */
@container oe-boilerplate (max-width: 900px) {
  .oe-block-boilerplate .oe-block-boilerplate__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: calc(var(--oe-spacing-large) - var(--oe-spacing-2xsmall));
  }

  .oe-block-boilerplate--cols-1 .oe-block-boilerplate__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .oe-block-boilerplate .oe-block-boilerplate__stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* One across */
@container oe-boilerplate (max-width: 520px) {
  .oe-block-boilerplate .oe-block-boilerplate__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .oe-block-boilerplate .oe-block-boilerplate__stat {
    padding: calc(var(--oe-spacing-medium) - var(--oe-spacing-3xsmall)) 0;
    border-left: 0;
  }

  .oe-block-boilerplate--dividers .oe-block-boilerplate__stat + .oe-block-boilerplate__stat {
    border-top: var(--oe-spacing-5xsmall) solid var(--oe-boilerplate-line);
  }
}