/* =========================================================
   Services section — assets/css/section-services.css
   Scoped under #services. Uses global tokens only.
   ========================================================= */

#services .services__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

#services .services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}

/* 3-up desktop cap, 2-up tablet, 1-up mobile */
@media (min-width: 980px) {
  #services .services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) and (max-width: 979.98px) {
  #services .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 619.98px) {
  #services .services__grid { grid-template-columns: 1fr; }
}

#services .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Gradient accent sweep on hover */
#services .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
#services .card:hover::before { opacity: .7; }

#services .card .icon {
  color: var(--accent-2);
  transition: color .3s ease, transform .3s ease;
}
#services .card:hover .icon {
  color: var(--accent);
  transform: translateY(-2px);
}

#services .card h3 {
  font-size: 1.2rem;
  margin: 0 0 .5rem;
}

#services .card p {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
}