/* =========================================================================
   SERVICE 1 TEMPLATE (template-service-1.php)

   Hero + the interactive treatments tab group. Colours/spacing/radii are
   all existing tokens — the "dark on active" tab treatment mirrors
   .tx-card in folds.css so a selected tab reads as the same brand gesture
   as the treatments grid on the homepage, not a new one. Every rule here
   is presentation only — the words it styles are copied verbatim from the
   live page into template-service-1.php, not invented by this stylesheet.
   ========================================================================= */

/* .fold gives equal top/bottom padding, but the hero only needs the top
   half of that (to clear the fixed header) — the bottom half was just
   adding dead white space before the next section's own padding kicks in.
   .svc-hero.fold (two classes) outranks .fold (one class) so this wins
   regardless of stylesheet load order. */
.svc-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-7); }

.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.svc-hero-shot { margin-top: 0.3rem; }
/* h1 inherits margin:0 from the reset, and --lh-display's 1.04 leaves
   almost no natural leading above its glyphs, so without this the eyebrow
   label and the heading render nearly flush against each other. */
.svc-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }
.svc-hero-copy .lead { margin-top: var(--sp-3); }
.svc-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}
.svc-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px; /* ~130px taller than the plain 4:3 box this replaced */
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.svc-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .svc-hero-shot:hover img { transform: scale(1.05); }
}

/* .cta carries no padding of its own (front-page.php relies on whatever
   precedes it for spacing) — on this template the gray treatments section
   comes right before it, so without this the panel photo starts flush
   against the gray with no white gap at all. Scoped to this template's own
   .svc1-cta class rather than editing the shared .cta rule in folds.css,
   which the homepage still uses as-is. */
.svc1-cta { padding-top: var(--sp-6); }

/* Half of .fold's default padding-block — the treatments section doesn't
   need the same generous top/bottom breathing room a full homepage fold
   does, scoped here rather than touching .fold globally. */
.svc1-treatments.fold { padding-block: calc(var(--fold) / 2); }

/* -------------------------------------------------------------------------
   TABS
   ------------------------------------------------------------------------- */
.svc1-tablist {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-3);
  border-bottom: var(--hair) solid var(--rule);
  padding-bottom: var(--sp-4);
}
.svc1-tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--surface-quiet);
  color: var(--ink-mid);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track-tight);
  cursor: pointer;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.svc1-tab svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-2) var(--ease); }
.svc1-tab:hover { color: var(--ink); box-shadow: inset 0 0 0 var(--hair) var(--rule); }
.svc1-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.svc1-tab.is-active {
  background: var(--deep); color: var(--on-deep);
  box-shadow: 0 14px 28px -16px rgba(var(--deep-rgb), 0.55);
}
.svc1-tab.is-active svg { transform: scale(1.15) rotate(-6deg); }
@media (hover: hover) {
  .svc1-tab:not(.is-active):hover { transform: translateY(-1px); }
  .svc1-tab:not(.is-active):hover svg { transform: scale(1.1); }
}

.svc1-panels { margin-top: var(--sp-5); position: relative; }
.svc1-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.svc1-panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .svc1-panel {
    animation: svc1-panel-in var(--t-3) var(--ease);
  }
  @keyframes svc1-panel-in {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/* Contained card rather than text floating on the quiet gray background —
   gives the copy a defined measure to read against instead of stretching
   edge-to-edge on a wide viewport. */
.svc1-panel-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  box-shadow: 0 26px 50px -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);
}
@media (hover: hover) {
  .svc1-panel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 60px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .svc1-panel-card:hover .svc1-panel-icon { transform: scale(1.08) rotate(-4deg); }
}
.svc1-panel-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
  transition: transform var(--t-2) var(--ease);
}
.svc1-panel-icon svg { width: 26px; height: 26px; }
.svc1-panel-t {
  margin-top: var(--sp-3);
  font-size: var(--fs-card-t); font-weight: 700;
  letter-spacing: var(--track-display); line-height: 1.2;
}
.svc1-panel-d { margin-top: var(--sp-3); font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-mid); }

/* No fixed aspect-ratio/height here on purpose — align-items:stretch on
   .svc1-panel means this box's height comes only from .svc1-panel-card
   next to it, so the photo always exactly matches the card regardless of
   how long that panel's copy is, on any service page using this
   template. */
.svc1-panel-fig {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  min-height: 260px;
  box-shadow: 0 26px 50px -34px rgba(var(--deep-rgb), 0.3);
}
.svc1-panel-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
.svc1-panel-fig--contain img { object-fit: contain; padding: var(--sp-4); }
/* Zoom on hover for the two real photos only — the tooth graphic already
   has its own float animation below, and animating transform from two
   places at once would fight rather than combine. */
@media (hover: hover) {
  .svc1-panel-fig:not(.svc1-panel-fig--contain):hover img { transform: scale(1.06); }
}

/* Per-tab override — only the Dental bonding panel opts into this taller
   crop (it has more copy now, from the two closing paragraphs folded into
   it), the other two tabs stay at the 330px default above. A fixed height
   instead of raising max-height: aspect-ratio:4/3 was already resolving
   to a shorter height than the old 330px cap at this column's width, so
   the cap itself was never the binding constraint — max-height alone
   can't win against that without also loosening aspect-ratio. */
.svc1-panel-fig--tall { aspect-ratio: auto; height: 665px; max-height: none; }

/* Gentle float — same cta-callout-float keyframe front-page.php's CTA
   band already uses, reused here rather than a new one, on the decorative
   tooth graphic only (a real photograph floating would look like a bug,
   not a feature). Neutralised automatically for prefers-reduced-motion by
   the global rule in tokens.css. */
.svc1-panel-fig--contain img { animation: cta-callout-float 4.5s ease-in-out infinite; }

@media (max-width: 1024px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-hero-shot { order: -1; aspect-ratio: 16 / 9; height: auto; }

  .svc1-panel { grid-template-columns: minmax(0, 1fr); }
  .svc1-panel-fig { order: -1; aspect-ratio: auto; max-height: none; }

  /* Desktop's crop for this photo is correct as-is (default center) — only
     the mobile shape needs the subject re-centred. */
  .svc1-panel-fig--tall img { object-position: 80% 15%; }

  /* The tooth graphic is tall and narrow (680x1208) — forced into the same
     wide 16:9 box as the two real photos above left it shrunk small inside
     a lot of empty card, and that card's height put it right where the
     site-wide fixed "Book online" tab (vertically centred, right: 0) can
     land on top of it while scrolling. Auto sizing here, on the image
     itself rather than the box, means its real height comes from its own
     ratio at whatever width it's given — no oversized empty box, and a lot
     less of the page for a right-edge fixed element to ever overlap. */
  .svc1-panel-fig--contain {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    background: none;
    box-shadow: none;
  }
  .svc1-panel-fig--contain img {
    position: static;
    width: auto; height: auto;
    max-width: 45%;
    margin: 0 auto;
    padding: var(--sp-3) 0;
  }
}
@media (max-width: 640px) {
  .svc1-tablist { gap: 0.45rem; }
  .svc1-tab { padding: 0.6rem 0.9rem; font-size: var(--fs-xs); }
}