/**
 * Container: Counting Numbers
 *
 * Optional full-width header (headline + paragraph) above a row of 2–4
 * counting-number molecules. A separator line divides header from numbers.
 *
 * Breakpoints for the numbers row:
 *   Mobile  (< 768px):    single column, stacked
 *   Tablet  (768–1599px): 2×2 grid, equal width
 *   Desktop (≥ 1600px):   auto-fit equal columns (2–4 items)
 *
 * Figma file: N6kF1KIiLZbouSzQ6Hc92E  Node: 863:28593
 */

/* ── Outer wrapper: vertical stack ── */
.container-counting-numbers {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400, 32px);
  padding-inline: var(--grid-margin, 16px);
  padding-block: var(--spacing-1000, 80px);
  width: 100%;
}

@media (min-width: 1600px) {
  .container-counting-numbers {
    padding-inline: 100px;
  }
}

/* ── Header area ── */
.container-counting-numbers__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300, 24px);
}

.container-counting-numbers__header h1,
.container-counting-numbers__header h2,
.container-counting-numbers__header h3,
.container-counting-numbers__header h4,
.container-counting-numbers__header h5,
.container-counting-numbers__header h6,
.container-counting-numbers__header p {
  margin-block: 0;
}

/* ── Separator line between header and numbers ── */
.container-counting-numbers__items {
  border-top: 1px solid var(--trust, #550a2d);
  padding-top: var(--spacing-400, 32px);
}

.container-counting-numbers--trust .container-counting-numbers__items {
  border-top-color: var(--white, #ffffff);
}

.container-counting-numbers--trust .counting-number__description {
  color: var(--white, #ffffff);
}

/* Article full view: no top spacing */
.node--type-article .node-article__body .container-counting-numbers {
  padding-block-start: 0;
}

/* ── Numbers row: mobile — single column ── */
.container-counting-numbers__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-600, 48px);
}

/* ── Numbers row: tablet — 2 equal columns ── */
@media (min-width: 768px) {
  .container-counting-numbers__items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-600, 48px) var(--grid-gutter, 24px);
  }

  .container-counting-numbers__items:has(> .container-counting-numbers__item:only-child) {
    grid-template-columns: 1fr;
  }
}

/* ── Numbers row: desktop — equal columns for however many items exist ── */
@media (min-width: 1600px) {
  .container-counting-numbers__items {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--grid-gutter, 24px);
    align-items: start;
  }
}

.container-counting-numbers__item {
  min-width: 0;
}