/**
 * Container: Vertical Counting Numbers
 *
 * Two-column layout: sticky header on the left (~40%), 2–4 counting-number
 * molecules stacked vertically and right-aligned on the right (~50%).
 * A separator line divides the top of the right column from the rest.
 *
 * Breakpoints:
 *   Mobile  (< 768px):  single column, header then numbers
 *   Tablet+ (≥ 768px):  two-column grid, header left / numbers right
 *   Desktop (≥ 1600px): wider outer padding
 *
 * Figma file: N6kF1KIiLZbouSzQ6Hc92E  Node: 863:28623
 */

/* ── Outer wrapper ── */
.container-vertical-counting-numbers {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-400, 32px);
  padding-inline: var(--grid-margin, 16px);
  width: 100%;
}

@media (min-width: 768px) {
  .container-vertical-counting-numbers {
    grid-template-columns: 2fr 3fr;
    column-gap: var(--grid-gutter, 24px);
    row-gap: 0;
    /* align-items: stretch (default) — left cell must fill full row height for sticky to work */
  }

  .container-vertical-counting-numbers__items {
    align-self: start;
  }
}

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

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

@media (min-width: 768px) {
  .container-vertical-counting-numbers__header-inner {
    position: sticky;
    top: 0;
  }
}

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

/* ── Right column: stacked numbers with separator ── */
.container-vertical-counting-numbers__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600, 48px);
  border-top: 1px solid var(--trust, #550a2d);
  padding-top: var(--spacing-400, 32px);
}

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

/* ── Right-align counting numbers within this layout ── */
.container-vertical-counting-numbers__item .counting-number {
  align-items: flex-end;
  width: 100%;
}

.container-vertical-counting-numbers__item .counting-number__description {
  text-align: right;
}