/**
 * @file
 * Statistics section — shared styles for both the legacy hardcoded block
 * (.sml-stats) and the configurable Stats Alt block (.sml-stats--alt).
 *
 * Layering strategy
 * ─────────────────
 * The primary artwork card (z-index 2) sits on top in normal flow.
 * The secondary white card BACKGROUND (z-index 1) is absolutely
 * positioned behind it, peaking out to the right.
 * The secondary TEXT CONTENT (z-index 3) is absolutely positioned above
 * both cards, right-aligned into the visible strip to the right of the
 * primary card.
 *
 * This mirrors the Figma design where the text labels are page-level
 * absolute elements layered independently of the white card shape.
 *
 * Layout strategy
 * ───────────────
 * Mobile (< 768 px)        — single column; offset-card composition.
 * Tablet (768 px–1499 px)  — two columns; same offset-card within each.
 * Large  (≥ 1500 px)       — two columns; Figma desktop pixel geometry.
 *
 * At ≥ 1500 px the .sml-section__inner has max-width 1416 px with no
 * horizontal padding, giving each of the two grid columns 692 px
 * ((1416 - 32 px gap) / 2).  Primary card: 544 px.  Secondary bg card:
 * 543 px starting at 149 px from the group left.  Visible right strip:
 * 692 - 544 = 148 px.
 */

/* ── Section band ─────────────────────────────────────────────────────────── */

/* Light-gray band matching the Figma background rectangle (#ececec). */
.sml-stats {
  background: var(--sml-gray);
}

/* ── Mobile base — single column, offset-card ─────────────────────────────── */

.sml-stats__grid {
  display:               grid;
  grid-template-columns: 1fr;
  /* Extra vertical gap gives the footnote room to breathe without the
   * groups crowding each other. */
  gap: clamp(5rem, 12vw, 7rem);
}

/*
 * Drupal's field template wraps a multi-value entity reference field in
 * a single block-level <div>, which would collapse both stat groups into
 * one grid column. Using display:contents makes those wrapper elements
 * transparent to the grid so each .sml-stats__group is a direct grid child.
 */
.sml-stats__grid > .field,
.sml-stats__grid > .field > .field__item {
  display: contents;
}

/*
 * Group container: min-height ensures the group is always at least as
 * tall as the primary artwork card.  Position is no longer relative here
 * because the secondary elements are now anchored to the composition
 * wrapper below, not to the full group (which includes the title and
 * footnote and would skew the vertical-centering math).
 */
.sml-stats__group {
  min-height: 370px;
}

/*
 * Composition wrapper — surrounds only the gradient card + secondary bg
 * + secondary text overlay.  position:relative makes it the containing
 * block for the absolutely-positioned secondary elements so that
 * top:50%/translateY(-50%) centers them against the card itself, not
 * against the taller group element that also contains the title and
 * footnote.
 */
.sml-stats__composition {
  position: relative;
}

/* Code Pro Bold LC to match Figma group title weight. */
.sml-stats__group-title {
  margin:      0 0 0.75rem;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 400;
  /* Figma: 24 px mobile, 32 px desktop. */
  font-size:   clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
}

/*
 * Primary stat card — stays in normal flow so the group is sized by this
 * taller element.  z-index 2 keeps it above the secondary bg card.
 *
 * Width ~68 % mirrors the Figma mobile ratio (268 / 393).
 * The four-sided shape (vertices: top-left, top-right, 44% bottom-right
 * diagonal, bottom-left) is applied as a scalable SVG mask so all corners
 * can be rounded.  An SVG path in a 0 0 100 100 viewBox mirrors the same
 * four points with r=2 corner radii (~11 px on the desktop 544 px card,
 * matching the Figma design); fill="white" works in both luminance and
 * alpha mask modes.  preserveAspectRatio="none" and mask-size:100% 100%
 * stretch it to the element at every breakpoint.
 * The clip-path polygon is kept as a sharp fallback for the rare browser
 * that lacks CSS mask support; the @supports block below replaces it.
 */
.sml-stats__card {
  position:        relative;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  width:           68%;
  min-height:      360px;
  padding:         1.5rem 1.25rem;
  color:           var(--sml-white);
  /* Sharp fallback for browsers without CSS mask-image support. */
  clip-path:       polygon(0 0, 100% 0, 44% 100%, 0 100%);
}

/*
 * Rounded mask — applied when the browser supports mask-image.
 * Overrides the clip-path fallback above.
 *
 * Arc endpoint geometry (viewBox 0 0 100 100, r=2 for all corners):
 *
 * For a non-right-angle vertex the tangent distance along each edge is
 * d = r / tan(α/2), where α is the interior angle.  Using d=r only works
 * for 90° corners; for other angles it places the arc endpoints too close
 * to the vertex, forcing the arc center near the vertex itself and bowing
 * the curve outward (creating a "bulge").
 *
 * Vertex A (0,0)   α=90°  d=2.000  → from (0,2)    to (2,0)
 * Vertex B (100,0) α=60.7° d=3.407  → from (96.593,0) to (98.334,2.970)
 * Vertex C (44,100) α=119.3° d=1.181 → from (44.578,98.970) to (42.819,100)
 * Vertex D (0,100) α=90°  d=2.000  → from (2,100)   to (0,98)
 *
 * All arcs use sweep-flag=1 (CW on screen) and large-arc-flag=0.
 */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .sml-stats__card {
    clip-path:           none;
    -webkit-mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M 0,2 A 2,2 0 0 1 2,0 L 96.593,0 A 2,2 0 0 1 98.334,2.970 L 44.578,98.970 A 2,2 0 0 1 42.819,100 L 2,100 A 2,2 0 0 1 0,98 Z'/%3E%3C/svg%3E");
    -webkit-mask-size:   100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M 0,2 A 2,2 0 0 1 2,0 L 96.593,0 A 2,2 0 0 1 98.334,2.970 L 44.578,98.970 A 2,2 0 0 1 42.819,100 L 2,100 A 2,2 0 0 1 0,98 Z'/%3E%3C/svg%3E");
    mask-size:           100% 100%;
    mask-repeat:         no-repeat;
  }
}

/*
 * Per-group gradient backgrounds approximating the Figma mesh artwork.
 * Group 1: red-orange to dark purple (bottom-left warm, top-right cool).
 * Group 2: dark black-purple to mid-purple (cooler, deeper palette).
 */
.sml-stats__group--1 .sml-stats__card {
  background: linear-gradient(
    168deg,
    #5a1a86  0%,
    #2a0b40 18%,
    #0d0512 38%,
    #7a1f1a 55%,
    #e8401a 74%,
    #ff5226 92%,
    #ff6a3e 100%
  );
}

.sml-stats__group--2 .sml-stats__card {
  background: linear-gradient(
    170deg,
    #14082b  0%,
    #1c0a30 22%,
    #3a1247 38%,
    #b0418f 52%,
    #8b2f9e 66%,
    #6a26a0 82%,
    #4a1580 100%
  );
}

/*
 * Stat labels — FATALITIES / NOT WEARING SEAT BELT.
 * Uppercase per Figma.  Primary label is white (on the gradient card);
 * secondary label inherits dark text from the white card context.
 * Figma: 20 px mobile, 22 px desktop.
 */
.sml-stats__label {
  font-family:    var(--sml-font-jost);
  font-weight:    600;
  font-size:      clamp(1.25rem, 2.5vw, 1.375rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height:    1.3;
}

.sml-stats__label--primary {
  color: var(--sml-white);
}

.sml-stats__secondary-content .sml-stats__label {
  max-width:  55%;
  word-break: normal;
}

/*
 * Large stat numbers — fluid between 4.5 rem (72 px, mobile) and
 * 7.5 rem (120 px, desktop), matching Figma values at both breakpoints.
 */
.sml-stats__value {
  font-family: var(--sml-font-code-pro);
  font-weight: 400;
  font-size:   clamp(4.5rem, 9vw, 7.5rem);
  line-height: 1;
}

/* Secondary value is purple (seatbelt %) — matches Figma token #6b52a2. */
.sml-stats__value--secondary {
  color: var(--sml-purple);
}

/* ── Secondary stat — white card background (z-index 1) ──────────────────── */

/*
 * White card background — absolutely positioned behind the gradient card
 * (z-index 1 < 2).  Peeks out to the right.
 * Width ~77% mirrors the Figma mobile ratio (302 / 393).
 * right: 0 aligns the right edge to the composition wrapper's right edge.
 *
 * top:50% + translateY(-50%) vertically centers the white card against
 * the gradient card at every viewport width.  The composition wrapper
 * (position:relative) is sized by the gradient card in normal flow, so
 * 50% always resolves to the card's true midpoint — no fixed pixel
 * offsets that drift as the card height changes between breakpoints.
 * min-height: 299px sets the card's own size (Figma mobile value).
 */
.sml-stats__secondary-bg {
  position:      absolute;
  top:           50%;
  right:         0;
  z-index:       1;
  width:         77%;
  min-height:    299px;
  background:    var(--sml-white);
  border-radius: 10px;
  box-shadow:    0 4px 25px rgba(0, 0, 0, 0.35);
  transform:     translateY(-50%);
}

/* ── Secondary stat — text content (z-index 3) ───────────────────────────── */

/*
 * Text content for the secondary stat.  Matches .sml-stats__secondary-bg
 * exactly in position/dimensions but carries z-index 3 so it floats above
 * the gradient card (z-index 2).
 *
 * top:50% + translateY(-50%) keeps this overlay in sync with the bg card
 * at all viewport sizes (same centering approach as .sml-stats__secondary-bg).
 * justify-content: flex-end pushes the label/value to the card bottom,
 * matching the Figma design where the percentage sits below the diagonal
 * artwork edge.  align-items: flex-end keeps content right-aligned.
 */
.sml-stats__secondary-content {
  position:        absolute;
  top:             50%;
  right:           0;
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  justify-content: flex-end;
  gap:             0.375rem;
  width:           77%;
  min-height:      299px;
  padding:         1.5rem;
  text-align:      right;
  transform:       translateY(-50%);
}

/* ── Per-group footnote ───────────────────────────────────────────────────── */

/*
 * Per-group footnote — right-aligned, in normal flow after the primary
 * card.  Because the primary card (min-height 360 px) is taller than
 * the secondary card's visual bottom (~360 px), the footnote always
 * clears both overlapping cards.
 *
 * Each line is wrapped in a <span class="sml-stats__footnote-line"> by
 * the paragraph template so stacking is browser-consistent without
 * relying on <br> display-block tricks inside flex containers.
 */
.sml-stats__footnote {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  margin:         1.5rem 0 0;
  font-family:    var(--sml-font-jost);
  font-size:      0.875rem;
  line-height:    1.7;
  text-align:     right;
}

.sml-stats__footnote-line {
  display: block;
}

/* ── Tablet (768 px – 1499 px): two-column offset-card grid ──────────────── */

@media (min-width: 768px) and (max-width: 1499px) {
  .sml-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   clamp(1.5rem, 3vw, 2.5rem);
  }

  /* Taller groups because each column is narrower than at ≥ 1500 px, so
   * the fluid font sizes produce slightly taller text blocks. */
  .sml-stats__group {
    min-height: 400px;
  }

  .sml-stats__card {
    min-height: 380px;
  }

  /*
   * At tablet widths each column is narrower.  55% of the secondary
   * container keeps the label in whole-word wraps within the white area
   * across the 768px–1499px range.  word-break is inherited from the
   * base rule.
   */
  .sml-stats__secondary-content .sml-stats__label {
    max-width: 55%;
  }

}

/* ── Large screen (≥ 1500 px): full Figma desktop overlap layout ─────────── */

@media (min-width: 1500px) {
  .sml-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   2rem;
  }

  .sml-stats__group {
    min-height: 695px;
  }

  .sml-stats__group-title {
    margin-bottom: 0.875rem;
    font-size:     2rem; /* 32 px */
  }

  /*
   * Primary gradient card — fixed Figma desktop dimensions.
   * Width: 544 px.  Height: 543 px.
   */
  .sml-stats__card {
    z-index:    2;
    width:      544px;
    min-height: 543px;
    padding:    4rem 2rem 2rem;
  }

  /*
   * White card background — positioned behind gradient card (z-index 1).
   * At 1416 px inner width each column is 692 px; secondary width 543 px
   * ends flush right.  top/transform are inherited from the base rule
   * (top:50% + translateY(-50%)) which keeps the card centered against
   * the gradient card at this breakpoint as well.
   * min-height: 448 px matches the Figma desktop white card height.
   */
  .sml-stats__secondary-bg {
    right:      0;
    width:      543px;
    min-height: 448px;
  }

  /*
   * Secondary text content — same geometry as .sml-stats__secondary-bg
   * (z-index 3 floats it above the gradient card).  top/transform
   * inherited from base for consistent centering.
   */
  .sml-stats__secondary-content {
    right:      0;
    width:      543px;
    min-height: 448px;
    padding:    2rem;
  }

  .sml-stats__label {
    font-size: 1.375rem; /* 22 px */
  }

  /*
   * At desktop the text sits at the bottom where the diagonal cut
   * exposes most of the secondary card as white.  200 px allows
   * "NOT WEARING / SEAT BELT" to wrap on word boundaries without
   * any mid-word breaks.
   */
  .sml-stats__secondary-content .sml-stats__label {
    max-width: 200px;
  }

  .sml-stats__value {
    font-size: 7.5rem; /* 120 px */
  }

  .sml-stats__footnote {
    margin-top: 1.5rem;
    font-size:  0.875rem;
    max-width:  100%;
  }
}