/* LUNARTECH RISE ACADEMY: "Every number tells a story." The four headline numbers on index.html, driven by js/lunartech-metrics.js.
   Each number is plain text in the markup (so it reads without JavaScript); the script turns its digits into small
   columns that roll to their value once the block scrolls into view. Suffixes (+, M, K) stay still. Four columns on
   desktop, two from tablet down; the grid never gets wider than its column, so the page never scrolls sideways. */

.lt-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2vw; align-items: start; width: 100%; }
.lt-metric { min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }

/* ---------- Number ---------- */

.lt-metric-num { margin: 0; font-size: clamp(2.6rem, 4vw, 6.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: #f5f5f5; white-space: nowrap; }
.lt-metric-roll { display: flex; align-items: flex-start; height: 1.1em; }

/* A column is as wide as the digit it lands on (the script sets that), so "144" sets as tight as "77". The clip only
   trims top and bottom; the wider digits it rolls past may spill sideways without being cut. */
.lt-metric-col { flex: none; height: 1.1em; clip-path: inset(0 -0.5em); }
.lt-metric-strip { display: flex; flex-direction: column; align-items: center; width: 100%; transform: translateY(0); }
.lt-metric-strip > span { display: block; height: 1.1em; }
.lt-metrics.is-live .lt-metric-strip { transform: translateY(calc(var(--d, 0) * -10%)); transition: transform 1.6s cubic-bezier(0.16, 0.84, 0.24, 1); transition-delay: calc(var(--i, 0) * 90ms + var(--n, 0) * 140ms); }

.lt-metric-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Description ---------- */

.lt-metric .metrics-line { margin: 0; }
.lt-metric-desc { margin: 0; max-width: 24ch; font-size: 13.5px; font-weight: 300; line-height: 1.65; letter-spacing: 0.01em; color: #8b8b8b; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1199px) {
  .lt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2rem; }
  .lt-metric-num { font-size: clamp(2.6rem, 7vw, 5rem); }
  .lt-metric-desc { max-width: 30ch; }
}

/* The template keeps the numbers in a column 80% wide, pushed to the right; on tablet and phone that leaves too little
   room, so they take the full width. */
@media (max-width: 991px) {
  .lt-metrics-trigger { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-metrics.is-live .lt-metric-strip { transition: none; }
}