/*
 * facts-band.css — the facts band (work package 2, T8 — M8 `facts-band`).
 *
 * Belongs to unit M8 of the Divi Library. The markup lives in template-parts/facts-band.php
 * and reaches a Divi code module through the shortcode [wildisland_facts] — the same pattern
 * as header, footer and the download list: shell in the builder, markup in the repo
 * (AI/architecture/divi-fallstricke.md, section 1).
 *
 * Why the CSS stands here and not at the module: E7 of the plan. Module-bound custom CSS is
 * copied along when the module is duplicated and can no longer be changed centrally; Divi's
 * "Custom CSS" field is out because CSS in a database field is no source code that could be
 * handed over (offer 2.1 r, 4.4).
 *
 * All values come from tokens.css and were measured there on the RENDERED legacy site
 * (`scripts/measure-bestand.sh 1920 zahlen`). That was no methodical resolve here but the
 * only option: in the legacy site the band is a raw HTML element without a single class of
 * its own — there is no rule one could have copied.
 *
 * Two classes in every selector — the specificity rule from divi-fallstricke.md, section 2.
 * A `<dl>` in builder content sits under Divi's defaults for description lists; a one-class
 * `.wi-facts__list` would lose against them, regardless of the loading order.
 *
 * The breakpoints stand as numbers in the @media rules and not as tokens: CSS does not resolve
 * custom properties in media queries, the reference would be inert and nobody would notice.
 * They are the legacy steps (1300 / 550), found by narrowing the window while measuring — at
 * 1301px the label stands at 22px, at 1300px at 18px, at 551px at 18px, at 550px at 16px.
 * Divi's steps (980 / 767) are not the right ones here: the band is own markup and not a Divi
 * row.
 */

/* ------------------------------------------------------------------ *
 * The grid
 * ------------------------------------------------------------------ */

/*
 * Two columns for all rows together, not a split of its own per row. That is exactly the
 * reason for the grid on the `<dl>` instead of a flex row per entry: in the legacy site the
 * number column is as wide as the LONGEST number (measured 106px at 1920px, the same for all
 * five rows), and all numbers end at the same right edge. A flex row per entry could only do
 * that with a fixed width — and that would break as soon as the editors enter a longer number.
 *
 * `max-content` in the first column does exactly what the legacy table did with
 * `table-layout: auto`: as wide as its widest content.
 *
 * `<dt>` and `<dd>` are DIRECT children of the grid. That is why a description list stands
 * here and not a `<ul>` with `<li>`: a list would need `display: contents` on the `<li>` to get
 * number and word into the grid columns — and in older browsers that removed the list
 * semantics from the accessibility tree. The price of the description list is that the NUMBER
 * is formally the term and the word its description; read aloud it is still "3,000 — river
 * kilometres", the order that also stands in the picture.
 */
.wi-facts .wi-facts__list {
  display: grid;
  grid-template-columns: max-content 1fr;

  /*
   * The font size stands HERE and not only at number and word, and that is no matter of
   * tidiness: the gap between the two is an `em` value, and in `column-gap` `em` resolves
   * against the font size of the grid itself — not against that of its children. With the size
   * at the children the check measured 4px instead of the measured 6px: the value was right,
   * its reference was not. In the legacy site the gap is a spacer cell at the LABEL's size
   * (22px, 6px wide), so the label's size is the one that stands here. The word inherits it;
   * the number carries its own, larger size below.
   */
  font-size: var(--wi-facts-size);
  column-gap: var(--wi-facts-gap);

  /* The legacy band row: 40px high, content centred vertically in it (the table has no class
   * and thus `vertical-align: middle`). As a minimum and not as a fixed height: a label that
   * wraps on narrow windows already fills the 40px. */
  grid-auto-rows: minmax(var(--wi-facts-row-height), auto);
  align-items: center;

  /* Divi gives description lists in builder content margins of their own. Taken back because
   * in the legacy site the band stands directly below the heading. */
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ *
 * Number and label
 * ------------------------------------------------------------------ */

/*
 * Right-aligned, and that is measured and not read from the markup: the legacy site puts the
 * Bootstrap class `text-right` on the paragraph, and it takes effect there — `text-align`
 * computes to `right`. Without this line the numbers would stand left-aligned in a column as
 * wide as the longest of them; that would look like a mistake nobody made.
 */
.wi-facts .wi-facts__number {
  margin: 0;
  text-align: right;
  /* Larger than the label, 30px against 22px — and that was missed until NA3 (2026-10-06,
   * AI/plans/done/nacharbeiten.md): the probe reported the size of the cell, and the number
   * sits in a `<strong>` with a rule of its own (`td p strong { font-size: 30px }`). The line
   * height stays at the row's 20px, as in the legacy site, where the `<strong>` inherits it;
   * the 40px row holds the taller glyphs. Explicit and not left out: Divi sets sizes of its
   * own on description lists in builder content, and those would stand here otherwise. */
  font-size: var(--wi-facts-number-size);
  line-height: var(--wi-facts-line-height);
  font-weight: var(--wi-facts-number-weight);

  /* No colour of its own: in the legacy site the band stands in the dark hero and inherits its
   * white. In a light section it inherits `#707070`. That is the condition from the definition
   * of done — no unit brings colour values of its own. */
  color: inherit;
}

/*
 * `margin: 0` is mandatory here and no cosmetics: the browser gives every `<dd>` a 40px inset
 * of its own. Without taking it back the label would stand 40px away from its column instead
 * of next to its number, and the measured 6px gap would be inert.
 */
.wi-facts .wi-facts__label {
  margin: 0;
  /* Inherited from the list, see there. Explicit for the same reason as at the number. */
  font-size: inherit;
  line-height: var(--wi-facts-line-height);
  font-weight: var(--wi-facts-label-weight);
  color: inherit;
}

/* Two places per step: the list (label and gap) and the number. The gap goes along because it
 * is a ratio to the label's size — measured 6 / 5 / 4px, like the legacy `&nbsp;`. */
@media only screen and (max-width: 1300px) {
  .wi-facts .wi-facts__list {
    font-size: var(--wi-facts-size-medium);
  }

  .wi-facts .wi-facts__number {
    font-size: var(--wi-facts-number-size-medium);
  }
}

@media only screen and (max-width: 550px) {
  .wi-facts .wi-facts__list {
    font-size: var(--wi-facts-size-narrow);
  }

  .wi-facts .wi-facts__number {
    font-size: var(--wi-facts-number-size-narrow);
  }
}

/* ------------------------------------------------------------------ *
 * The notice for the editors
 * ------------------------------------------------------------------ */

/*
 * Visible only to logged-in editors, and only while the unit is empty or a line lacks the
 * separator. As with the download list: a unit that silently drops a line it cannot read looks
 * in the builder like one that has not been filled yet.
 */
.wi-facts .wi-facts__notice {
  display: block;
  font-size: var(--wi-facts-size-narrow);
  line-height: var(--wi-facts-line-height);
  color: inherit;
  border: var(--wi-border-width-button) dashed currentcolor;
  padding: calc(var(--wi-facts-row-height) / 4);
}