/* Homepage "activities" grid (.stats-section): icon cards instead of loose red text. */
.stats-section { padding: clamp(56px, 7vw, 88px) 0 !important; }
.stats-section .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--page-gutter); }
.stats-section .container::before {
  content: "What's on at the event"; display: block; margin: 0 0 28px; text-align: center;
  font: 700 .72rem/1 var(--font-mono); letter-spacing: 5px; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.stats-section .stats-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important;
}
.stats-section .stat-card {
position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px;
  padding: 18px 18px 20px; border-radius: 12px;
  background: var(--color-surface-panel); border: 1px solid var(--color-border-soft);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.stats-section .stat-card::before {
  content: ""; position: absolute; top: 16px; left: 18px; width: 26px; height: 26px;
  background: var(--color-accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.stats-section .stat-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 28px;
  background: var(--color-accent); transition: width .3s ease;
}
.stats-section .stat-card:hover {
  border-color: var(--color-accent-strong); background: var(--color-surface-panel-strong);
  transform: translateY(-2px);
}
.stats-section .stat-card:hover::after { width: 100%; }
.stats-section .stat-value {
  font-family: var(--font-headline); font-size: 1.45rem !important; line-height: 1.05;
  letter-spacing: 1px; color: var(--color-text-primary); margin: 0 0 8px;
}
.stats-section .stat-label {
  font-family: var(--font-mono); font-size: .62rem !important; letter-spacing: 3px !important;
  font-weight: 700; color: var(--color-text-muted);
}
/* One icon per activity, in the order the bundle renders them (10n+k so the floating copies match). */
.stats-section .stat-card:nth-child(10n+1) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.5%22/%3E%3Cpath d=%22M12 14.5V21M9.6 11.3 3.4 9.5M14.4 11.3l6.2-1.8%22/%3E%3C/svg%3E"); } /* steering */
.stats-section .stat-card:nth-child(10n+2) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 17H3v-5l2-5h11l3 5h2v5h-2%22/%3E%3Ccircle cx=%227.5%22 cy=%2217%22 r=%222%22/%3E%3Ccircle cx=%2216.5%22 cy=%2217%22 r=%222%22/%3E%3Cpath d=%22M9.5 17h5M3 12h18%22/%3E%3C/svg%3E"); } /* car */
.stats-section .stat-card:nth-child(10n+3) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 21V4h13l-2.5 4 2.5 4H5%22/%3E%3C/svg%3E"); } /* flag */
.stats-section .stat-card:nth-child(10n+4) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z%22/%3E%3C/svg%3E"); } /* crown */
.stats-section .stat-card:nth-child(10n+5) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 15v-3a9 9 0 0 1 18 0v3%22/%3E%3Crect x=%223%22 y=%2214%22 width=%224%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2217%22 y=%2214%22 width=%224%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E"); } /* headphones */
.stats-section .stat-card:nth-child(10n+6) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8z%22/%3E%3Cpath d=%22M19 14v6M16 17h6%22/%3E%3C/svg%3E"); } /* sparkle */
.stats-section .stat-card:nth-child(10n+7) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225.5%22 cy=%2216.5%22 r=%223.5%22/%3E%3Ccircle cx=%2218.5%22 cy=%2216.5%22 r=%223.5%22/%3E%3Cpath d=%22M5.5 16.5 9.5 10h5l4 6.5M9.5 10 8 7H5.5M14.5 10 16 6h2.5%22/%3E%3C/svg%3E"); } /* bike */
.stats-section .stat-card:nth-child(10n+8) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223.5%22/%3E%3Cpath d=%22M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6%22/%3E%3C/svg%3E"); } /* users */
.stats-section .stat-card:nth-child(10n+9) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%223%22 width=%226%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6%22/%3E%3C/svg%3E"); } /* mic */
.stats-section .stat-card:nth-child(10n) { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2214%22 r=%227%22/%3E%3Cpath d=%22M12 14l3-3M10 3h4M12 3v4M19 7l1.5-1.5%22/%3E%3C/svg%3E"); } /* stopwatch */
@media (max-width: 900px) {
  .stats-section .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stats-section .stat-card { min-height: 108px; padding: 14px 14px 16px; }
  .stats-section .stat-card::before { top: 13px; left: 14px; width: 22px; height: 22px; }
  .stats-section .stat-value { font-size: 1.1rem !important; }
  .stats-section .stat-label { font-size: .56rem !important; letter-spacing: 2px !important; }
}

/* Floating line: home-activities.js copies the cards once and adds .is-floating,
   so the track can slide by exactly half its width and loop without a jump. */
.stats-section .stats-grid.is-floating {
  display: flex !important; width: max-content; max-width: none; gap: 0 !important;
  padding: 4px 0; animation: enx-activities-float 48s linear infinite reverse;
}
.stats-section .stats-grid.is-floating .stat-card { flex: 0 0 220px; margin-right: 14px; }
.stats-section .stats-float-mask {
  overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.stats-section .stats-float-mask:hover .stats-grid { animation-play-state: paused; }
@keyframes enx-activities-float { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .stats-section .stats-grid.is-floating { animation-duration: 36s; }
  .stats-section .stats-grid.is-floating .stat-card { flex-basis: 170px; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-section .stats-grid.is-floating { animation: none; }
  .stats-section .stats-float-mask { overflow-x: auto; }
}
