/* =============================================
   REWIRE WELLNESS — Services Page Styles v2.0
   ============================================= */

/* ==================
   Services Grid — Full Page Version
   ================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.service-card {
  background: var(--bg-card-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--clr-teal), var(--clr-accent));
  opacity: 0;
  transition: opacity var(--t-base);
}

.service-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.service-card:hover::before { opacity: 1; }

.service-card .icon-box { margin-bottom: var(--sp-3); }

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--clr-navy);
  margin-bottom: var(--sp-2);
}

.service-card__text {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-light);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
  flex: 1;
}

.service-card__benefits {
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--clr-border-light);
}

.service-card__benefits li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-body-sm);
  color: var(--clr-text);
  padding: 5px 0;
}

.service-card__benefits li svg {
  width: 16px; height: 16px; color: var(--clr-success); flex-shrink: 0;
}

.service-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--clr-teal);
  transition: all var(--t-base) var(--ease-out);
  margin-top: auto; padding-top: var(--sp-2);
}

.service-card__link:hover { gap: 12px; }
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--t-base); }
.service-card__link:hover svg { transform: translateX(3px); }

/* ==================
   Responsive
   ================== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: var(--sp-4); }
}