/* ==========================================================================
   METRIX LAB - services.css
   Section: Services (page order 5). The core service grid.
   ALL rules scoped under #services to avoid collisions with other sections.
   Reuses foundation tokens + .card / .card--service / .glow-border components.
   ========================================================================== */

#services {
  overflow: hidden; /* contain the decorative parallax glows */
}

/* --------------------------------------------------------------------------
   Decorative parallax glows - soft orange light pooling behind the grid.
   z-index below content; aria-hidden in markup.
   -------------------------------------------------------------------------- */
#services .services__glow {
  position: absolute;
  z-index: var(--z-decor);
  width: clamp(20rem, 40vw, 36rem);
  height: clamp(20rem, 40vw, 36rem);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
#services .services__glow--a {
  top: -8%;
  left: -10%;
  background: radial-gradient(circle, var(--color-accent-tint-2), transparent 70%);
}
#services .services__glow--b {
  bottom: -12%;
  right: -8%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.10), transparent 70%);
}

/* keep header + grid above the glows */
#services .section-header,
#services .services__grid {
  position: relative;
  z-index: var(--z-content);
}

/* --------------------------------------------------------------------------
   GRID - mobile-first 1 col -> 2 (640px) -> 3 (1024px) via .grid--3 helper.
   We only tune gap + the last-row centering here.
   -------------------------------------------------------------------------- */
#services .services__grid {
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  #services .services__grid { gap: var(--space-xl); }
}

/* --------------------------------------------------------------------------
   CARD - extends .card--service. Pointer-tracking spotlight via CSS vars
   (--mx / --my) set by services.js; falls back gracefully to a centered
   sheen when JS is absent (vars default to 50%).
   -------------------------------------------------------------------------- */
#services .services__card {
  --mx: 50%;
  --my: 0%;
  isolation: isolate;
}

/* override the default top-anchored ::after sheen with a cursor-tracked one */
#services .services__card::after {
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    var(--color-accent-tint-2),
    transparent 68%
  );
}

/* icon: smooth scale + the glow-border hover already flips fill to solid */
#services .services__card .card__icon {
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
}
#services .services__card:hover .card__icon {
  transform: translateY(-2px) scale(1.06);
}

/* nudge body copy spacing so cards read evenly */
#services .services__card .card__text {
  margin-top: auto; /* push description to align baselines on uneven titles */
  padding-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Reduced motion - neutralise the icon micro-interaction. (Reveals/parallax
   are already handled globally in animations.css / parallax.js.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #services .services__card:hover .card__icon {
    transform: none;
  }
  #services .services__glow {
    opacity: 0.35;
  }
}