/* =========================================================================
   OUR SERVICES TEMPLATE (template-our-services.php)

   Same content-driven pattern as doctor.css/cdcp.css: the hero and the
   services grid are pasted as Custom HTML into the_content(), this file
   only styles the classes that markup uses. Prefixed svcs- (not svc-,
   already owned by service.css's single-treatment hero, and not svc1-,
   already owned by service-1.css) so this can load next to either without
   a name collision.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.svcs-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.svcs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}

.svcs-hero-shot {
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.svcs-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svcs-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }
.svcs-hero-copy .lead { margin-top: var(--sp-3); }
.svcs-hero-copy .body { margin-top: var(--sp-3); }
.svcs-hero-copy .body p + p { margin-top: var(--sp-3); }

.svcs-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------------------------
   SERVICES GRID — one card per treatment, linking out to that treatment's
   own page (built from template-service.php or template-service-1.php).
   Styled directly off .docpg-specialty in doctor.css; kept as its own
   ruleset rather than sharing the selector since the two pages load
   different stylesheets and this one needs to be a link, not a div.
   ------------------------------------------------------------------------- */
.svcs-grid.fold { padding-block: calc(var(--fold) / 2); }
.svcs-grid-lead { margin-top: 0; max-width: 62ch; }

.svcs-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-5);
}
.svcs-card {
  display: block;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.svcs-card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  transition: transform var(--t-2) var(--ease);
}
.svcs-card-icon svg { width: 22px; height: 22px; }
.svcs-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.svcs-card p { margin-top: 0.3rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-mid); }
.svcs-card-more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 700; color: var(--leaf);
}
.svcs-card-more svg { width: 16px; height: 16px; transition: transform var(--t-2) var(--ease); }
@media (hover: hover) {
  .svcs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .svcs-card:hover .svcs-card-icon { transform: scale(1.1) rotate(-4deg); }
  .svcs-card:hover .svcs-card-more svg { transform: translateX(3px); }
}

/* -------------------------------------------------------------------------
   CLOSING CTA — this page's content above is pasted the_content(), not a
   folds.css section, so it carries no bottom spacing of its own; give the
   CTA its own top space instead of butting straight up against it.
   ------------------------------------------------------------------------- */
.svcs-cta { padding-top: 80px; }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svcs-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .svcs-hero-shot { order: -1; aspect-ratio: 16 / 9; }
  .svcs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Mobile-only unification: every reference page's CTA lands on the same
     top space here, though each keeps its own desktop value above. */
  .svcs-cta { padding-top: var(--sp-5); }
  .svcs-hero.fold { padding-bottom: var(--sp-5); }
  .svcs-hero-actions .btn i { display: none; }
  .svcs-cards { grid-template-columns: minmax(0, 1fr); }
}