/* ==========================================================================
   Section: Key figures — Figma 69:578
   Four columns, 50px apart, divided by vertical rules that span the full
   section height, closed by a rule across the full section width.
   ========================================================================== */

/* `.trustav-section` adds --section-y (86px) vertical padding. This section
   carries its own padding on the items instead, so the section box is tight to
   the row and the rules can span it edge to edge. */
.trustav-figures {
  padding-block: 10px; /* Figma 94:1694 — the row sits 10px inside the section */
  background-color: var(--c-white);
  border-bottom: var(--border-width) solid var(--c-neutral-3);
}

/* Scoped to the block so it outweighs reset.css's `ul[role="list"]`, which is
   specificity (0,1,1) and otherwise zeroes the padding. */
.trustav-figures .trustav-figures__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The section's vertical padding lives here, so an item box is the full height
   of the section. */
.trustav-figures__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-block: 58px; /* Figma 94:1696 — 118px of text centred in the 235px row */
}

/* Vertical rule sits in the gap before every item but the first, spanning the
   full section height — Figma 69:564/565/566. */
.trustav-figures__item + .trustav-figures__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25px;
  width: var(--border-width);
  background-color: var(--c-neutral-3);
}

/* Figma: Lora 52 / 100% / -5%. */
.trustav-figures__value {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-black);
  white-space: nowrap;
}

.trustav-figures__stars {
  display: inline-flex;
  align-items: center;
  padding-block-end: 0.35em;
}

.trustav-figures__stars svg {
  width: 127px;
  height: 33px;
}

.trustav-figures__label {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .trustav-figures__stars svg {
    width: 96px;
    height: 25px;
  }
}

@media (max-width: 900px) {
  .trustav-figures .trustav-figures__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2xl);
  }

  /* Two rows of the desktop 58px padding plus a row gap made the strip taller
     than a tablet screen. */
  .trustav-figures__item {
    padding-block: var(--space-xl);
  }

  .trustav-figures__item:nth-child(n + 3) {
    border-top: var(--border-width) solid var(--c-neutral-3);
  }

  /* Vertical rules only between columns. */
  .trustav-figures__item + .trustav-figures__item::before {
    display: none;
  }

  .trustav-figures__item:nth-child(even)::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--space-2xl) / -2);
    width: var(--border-width);
    height: auto;
    transform: none;
    background-color: var(--c-neutral-3);
  }
}

@media (max-width: 560px) {
  .trustav-figures .trustav-figures__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .trustav-figures__item:nth-child(even)::before {
    display: none;
  }

  /* One column: the desktop 58px padding would make four rows a screen and a
     half tall, so rows get a compact rhythm and a horizontal rule instead. */
  .trustav-figures__item {
    gap: var(--space-xs);
    padding-block: var(--space-lg);
  }

  .trustav-figures__item + .trustav-figures__item {
    border-top: var(--border-width) solid var(--c-neutral-3);
  }

  .trustav-figures__value {
    white-space: normal;
  }
}