/* css/page-services.css : services.html. Owner: wave C.
   Body composition: mvendo-int/02 textbook index (adapted spec: v2-specs/interiors-spec-services.md).
   Loaded LAST, after tokens.css + site.css + interior.css. Page rules only: every selector is one of
   this page's own classes inside .sheet-body; the chassis (.sheet, .sheet-title, .pill, .contact-band,
   chrome) is never restyled.
   Pass 1b: mvendo's widths are fixed px in a fixed 1000 well; ours is the fluid chassis well, so each
   recipe WIDTH is its ratio of the well (hairlines 100%, thumb 34%, gap 2%, text 64%).
   Vertical spacings are the recipe's px (height independent in the recipe and the chassis).
   owner 2026-09-26 (class A): the lead proof photo and the phone capsule are both dropped (the capsule
   repeated the header's phone line); the chapter opens the body, prose left with a photo to its right. */

/* text links on this page (mvendo-interactive/05: colour change on hover, underline kept) */
.svc-row__text p a, .svc-link {
  color: var(--steel); text-decoration: underline; text-underline-offset: 3px;
}
.svc-row__text p a:hover, .svc-link:hover { color: var(--ink); }
/* a phone number never breaks across lines */
.svc-row__text a[href^="tel:"] { white-space: nowrap; }
/* stand-alone links are 44px targets (class B); their text keeps the recipe's line box */
.svc-link { display: inline-flex; align-items: center; min-height: 44px; font: 400 18px/25.2px var(--font-body); }

/* ------------------------------------------------------------------ chapter (mvendo "Root Canal Treatment") */
.svc-chapter { margin-top: 30px; }
.sheet-body > .svc-chapter:first-child { margin-top: 0; }
.svc-chapter__h { margin: 0 0 26px; font: 400 24px/28.8px var(--font-display); color: var(--steel); text-align: center; text-wrap: balance; }
/* owner 2026-09-26 (class A): prose left, photo right. Text 54% of the well (~60ch at 1440), a 4% gap, photo 42%
   at 4:3; the two columns centre on each other, so neither leaves a dead band at 1440 or 1024 */
.svc-chapter__split { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: 4%; align-items: center; }
.svc-chapter p {
  max-width: 70ch; margin: 0 0 19px;             /* class B: 70ch measure kept when the split stacks (S-B1) */
  font: 400 18px/25.2px var(--font-body); color: var(--body-ink);
}
.svc-chapter p.svc-chapter__more { margin: calc((25.2px - 44px) / 2) 0 calc((25.2px - 44px) / 2); }
.svc-chapter__media { margin-block: 0; box-shadow: var(--shadow-df); border-radius: 0; }
.svc-chapter__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------------ divider: hairlines + our sun-ray glyph */
.svc-divider { margin-top: calc(50px - (44px - 25.2px) / 2); display: flex; align-items: center; gap: 19px; }
.svc-divider::before, .svc-divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--steel); }
.svc-divider svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--sun); stroke-width: 1.6; stroke-linecap: round; }

/* ------------------------------------------------------------------ section head + rows */
.svc-list { margin-top: 31px; }
.svc-list__h { margin: 0; font: 400 24px/28.8px var(--font-display); color: var(--steel-pale); text-align: center; }

.svc-rows { margin: 0; padding: 0; list-style: none; }
.svc-row {
  display: grid; grid-template-columns: 34% 1fr; column-gap: 2%; align-items: start;
  padding: 46px 0 45px;
}
.svc-row + .svc-row { border-top: 1px solid var(--steel); }
.svc-row:last-child { padding-bottom: 0; }
.svc-row__media { margin-block: 0; box-shadow: var(--shadow-df); border-radius: 0; }
.svc-row__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.svc-row__h { margin: 0 0 20px; font: 400 20px/24px var(--font-display); color: var(--steel); }
.svc-row__text p { margin: 0 0 12px; font: 400 18px/25.2px var(--font-body); color: var(--body-ink); }
.svc-row__text > :last-child { margin-bottom: 0; }
.svc-row__text p.svc-row__more { margin-top: calc(4px - (44px - 25.2px) / 2); }
.svc-t1 { margin: 0; padding-left: 26px; list-style: disc; font: 400 18px/25.2px var(--font-body); color: var(--body-ink); }

/* ------------------------------------------------------------------ stack (<= 767; house threshold, S-A3) */
@media (max-width: 767px) {
  .svc-row { grid-template-columns: 1fr; row-gap: 20px; padding: 28px 0 27px; }
  .svc-row__media { order: -1; }            /* image first, explicit (mobile.md) */
}

/* chapter split stacks at <= 900 (chassis tablet step): below it the 54% prose column runs ~12 lines beside a
   ~230px photo, which leaves dead bands above and below the photo. Photo first, like the rows */
@media (max-width: 900px) {
  .svc-chapter__split { grid-template-columns: 1fr; row-gap: 20px; }
  .svc-chapter__media { order: -1; }
}

/* ------------------------------------------------------------------ phone system (<= 600) */
@media (max-width: 600px) {
  /* media full-bleed to the sheet's inner edges (chassis .bleed); a full-bleed image has no card
     to lift, so its shadow goes (mobile.md: delete articulation devices) */
  .svc-row__media, .svc-chapter__media { box-shadow: none; }
  .svc-chapter { margin-top: 18px; }
  .svc-chapter__h { margin-bottom: 16px; }
  .svc-chapter__split { row-gap: 16px; }
  .svc-chapter p { margin-bottom: 11px; }
  .svc-divider { margin-top: calc(30px - (44px - 25.2px) / 2); }
  .svc-list { margin-top: 19px; }
  .svc-row { row-gap: 16px; }
  .svc-row:first-child { padding-top: 28px; }
  .svc-row__h { margin-bottom: 12px; }
}