/* ============================================================
   Avrile — cs-numbers
   3 cartes arrondies avec préfixe + grand chiffre + suffixe + description.
   ============================================================ */

.avr-cs-numbers {
  width: 100%;
  padding: calc(var(--avr-space-section) / 2) var(--avr-space-gutter);
}

.avr-cs-numbers__inner {
  max-width: var(--avr-max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--avr-space-xs);
}

.avr-cs-numbers__card {
  background: color-mix(in oklab, var(--avr-fg) 5%, var(--avr-bg));
  border-radius: var(--avr-radius-sm);
  padding: var(--avr-space-sm) var(--avr-space-sm) var(--avr-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--avr-space-xs);
}

.avr-cs-numbers__value-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.avr-cs-numbers__prefix,
.avr-cs-numbers__suffix {
  font-family: var(--avr-font-italic);
  font-style: italic;
  font-weight: var(--avr-weight-light);
  font-size: clamp(36px, 3.2vw, 52px);
  line-height: 1;
  color: var(--avr-fg);
}

.avr-cs-numbers__number {
  font-family: var(--avr-font-italic);
  font-style: italic;
  font-weight: var(--avr-weight-light);
  font-size: clamp(56px, 7vw, 104px);
  line-height: 1;
  letter-spacing: var(--avr-tracking-tight);
  color: var(--avr-fg);
}

@media (max-width: 768px) {
  .avr-cs-numbers__inner {
    grid-template-columns: 1fr;
  }
}

.avr-cs-numbers__card:nth-child(2).avr-in { transition-delay: 120ms; }
.avr-cs-numbers__card:nth-child(3).avr-in { transition-delay: 240ms; }