/* =========================================================================
   HOME SERVICES — "Our Services" grid + trust strip
   Loaded on index.php via theme_head()'s $extraCss. Scoped under
   .services-grid / .sv-* so it never touches .card-wa on other pages.
   Calibrated to a user-supplied reference screenshot (round 49): flat,
   light, clean — no glassmorphism/heavy glow, just a light border, a
   layered icon with an overlapping badge, a thin green accent bar, a
   pill "Popular" badge, and a trust strip with dividers.
   ========================================================================= */

.services-grid .card-wa {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 20px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.services-grid .card-wa:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
}

/* thin green accent bar along the bottom edge of every card */
.services-grid .card-wa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--wa-action), var(--wa-green));
}

.services-grid .card-link { margin-top: auto; padding-top: .5rem; }

/* Popular card */
.services-grid .card-wa.popular { border: 1px solid var(--wa-green); }

.sv-badge {
  position: absolute; top: 0.4rem; right: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: var(--wa-green); color: var(--wa-ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.sv-badge i { color: #FBBF24; font-size: .78rem; }

/* Header row — icon sits inline with the title */
.sv-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }

/* Layered icon: tinted square + small badge chip overlapping its corner */
.sv-icon { position: relative; flex: 0 0 auto; width: 58px; height: 56px; }
.sv-icon-main {
  width: 56px; height: 56px; border-radius: 16px; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, .12);
  color: var(--wa-teal);
}
.sv-icon-sub {
  position: absolute; right: -6px; bottom: -6px;
  width: 26px; height: 26px; border-radius: 9px; font-size: .68rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa-surface); color: var(--wa-action);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}

.services-grid .card-wa h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--wa-teal); }
.services-grid .card-wa p { color: var(--wa-muted); font-size: .95rem; line-height: 1.65; margin-bottom: 0; }

/* Trust strip below the grid */
.sv-trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1rem 2.5rem; margin-top: 2rem; padding: 1.4rem 2rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: 20px;
}
.sv-trust-item { position: relative; display: flex; align-items: center; gap: .85rem; }
.sv-trust-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, .12); color: var(--wa-teal); font-size: 1.1rem;
}
.sv-trust-text strong { display: block; font-size: .92rem; font-weight: 700; color: var(--wa-ink); line-height: 1.25; }
.sv-trust-text span { font-size: .82rem; color: var(--wa-muted); }

@media (min-width: 768px) {
  .sv-trust-item + .sv-trust-item { padding-left: 2.5rem; }
  .sv-trust-item + .sv-trust-item::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 1px; height: 34px; transform: translateY(-50%);
    background: var(--wa-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-grid .card-wa { transition: none; }
}