/* ==========================================================================
   Section 03 — Trust stats
   Four cards straddle the hero's bottom wave, and the office photo slides up
   underneath them. Measured from the PDF: the photo covers roughly the lower
   70% of the card height, so the cards read as floating between both layers.
   ========================================================================== */

.stats {
  position: relative;
  z-index: 3;
  /* Pull the whole block up into the navy hero. The pull has to exceed the
     photo's offset inside the stack PLUS the hero wave's height, otherwise the
     wave turns white above the photo's top edge and that white shows through
     the gaps between cards — the seam this section had before. */
  margin-top: calc(-1 * clamp(9rem, 16vw, 17rem));
}

.stats__grid {
  position: relative;
  top: 20px;
  z-index: var(--z-content);
  display: grid;
  margin: 0px 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 1.5vw, var(--sp-5));
  /* Overlap is handled by .stats__stack now, not by a negative margin. */
}

/* Spacing is set with margins rather than a flex `gap` so the icon, the value
   and the description each get their own rhythm. Nothing is pushed to the
   bottom: every card stacks from the top, which is what keeps the four values
   on one line even when their descriptions wrap to different heights. */
.stats__card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--sp-5), 2vw, var(--sp-7));
  border-radius: var(--r-lg);
  background-color: var(--c-white);
  box-shadow: var(--sh-float);
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.stats__icon {
  margin-bottom: var(--sp-6);
  color: var(--c-blue);
  font-size: 3.6rem;
  transition: color var(--dur) var(--ease);
}

/* --- Hover ---------------------------------------------------------------- */
/* The PDF fills the first card permanently. Here that treatment is the hover
   state of every card, so no single stat looks pre-selected. Behind
   `hover: hover` so touch devices never latch into the filled state. */

@media (hover: hover) {
  .stats__card:hover {
    background-color: var(--c-sky);
    transform: translateY(-6px);
  }

  .stats__card:hover .stats__icon {
    color: var(--c-navy);
  }
}

.stats__value {
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
}

.stats__desc {
  color: var(--c-ink-muted);
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* --- Stack ---------------------------------------------------------------- */
/* Cards and photo share one grid cell. Pinning both to the same row start is
   what guarantees the photo's top edge never sits below the cards' — a gap
   there lets the hero's navy show through between the cards as strips the
   photo cuts off flat, which reads as a stray line. The negative margin this
   replaces depended on the card height, so it broke at some widths. */

.stats__stack {
  display: grid;
}

.stats__stack > * {
  grid-area: 1 / 1;
  align-self: start;
}

/* The design has the cards straddling the boundary: their top third over the
   navy hero, the rest over the photo. Offsetting the photo inside the stack
   reproduces that, and because the offset is measured from the shared row
   start it does not depend on how tall the cards happen to be. */
.stats__stack > .stats__photo {
  margin-top: clamp(48px, 6vw, 110px);
}

.stats__stack > .carousel {
  position: relative;
  z-index: var(--z-content);
}

/* --- Photo ---------------------------------------------------------------- */

.stats__photo {
  position: relative;
  z-index: var(--z-decor);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stats__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(22 39 62 / 0.4);
  pointer-events: none;
}

.stats__photo img {
  width: 100%;
  aspect-ratio: 2.24 / 1;
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.180);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1023px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__photo img {
    aspect-ratio: 16 / 9;
  }
}

/* Below 768px the carousel block further down owns the vertical rhythm — it is
   the last matching rule, so the margins it sets win. Nothing to restate here. */
@media (max-width: 599px) {
  .stats__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats__photo img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Carousel (mobile only) ----------------------------------------------- */
/* A fractional slide count leaves the next card peeking, which is the cue that
   the row scrolls. The bleed clears the cards' large float shadow. */

@media (max-width: 767px) {
  .stats__carousel {
    --slides: 1.06;
    --carousel-gap: var(--sp-4);
    /* No drop shadow on mobile, so the vertical bleed only has to clear the
       cards' own rounding. */
    --carousel-bleed-y: var(--sp-2);
    --carousel-bleed-x: 0;
  }

  .stats__card {
    box-shadow: none;
  }

  /* On mobile the cards carry carousel controls underneath, so the desktop
     overlap has to relax at both ends: less bite into the hero above, and
     real clearance before the photo below. */
  .stats {
    margin-top: calc(-1 * clamp(1.5rem, 5vw, 3rem));
  }

  .stats__grid {
    margin-bottom: 0;
  }

  /* No stacking on mobile: the carousel controls live between the cards and
     the photo, so the two have to sit in normal flow instead of sharing a cell. */
  .stats__stack {
    display: block;
  }

  .stats__photo {
    margin-top: var(--sp-9);
  }
}

/* Digits change width as they count up; tabular figures stop the line jumping. */
.counter {
  font-variant-numeric: tabular-nums;
}