/* Services area: /services/, the five service pages, /brain-injury/ and /trauma-and-ptsd/.
   Builds on the tokens and components in /assets/css/site.css. Every class is scoped with svc-.
   Calm standard (docs/CALM-STANDARD.md): one decorative motif per page (the hero, from site.css),
   no icons outside service cards, borders rather than boxes, left-aligned text, a steady rhythm.
   The .more disclosure is styled in site.css and is not restyled here.
   Text/background pairs used here are role tokens from site.css: text, muted and heading on
   surface, page and tint, checked in both themes by tools/check-contrast.py. */

/* ======================================================================
   1. Hero: one primary button, the phone as a quiet text link
   ====================================================================== */
.svc-hero-actions { --cluster-gap: 0.5rem 1.25rem; }
.svc-hero-phone { margin: 0; color: var(--color-muted); }
.svc-hero-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
}

/* ======================================================================
   2. How we help: short prose, then the approaches as a compact list
   ====================================================================== */
.svc-prose p { color: var(--color-text); }
.svc-list-lead { margin: 1.5rem 0 0; max-width: var(--measure); color: var(--color-text); }

.svc-approaches {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  max-width: 1040px;
}
@media (min-width: 768px) {
  .svc-approaches { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.svc-approach { padding-block: 1.1rem 1.2rem; border-top: 1px solid var(--color-border); }
.svc-approach__name { margin: 0 0 0.3rem; font-size: var(--step-1); line-height: 1.3; }
.svc-approach__name a { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.svc-approach__name a:hover { text-decoration-color: var(--color-heading); }
.svc-approach__line { margin: 0; color: var(--color-muted); }
.svc-approach .more { margin-top: 0.25rem; }

/* ======================================================================
   3. Who you might work with: compact clinician cards
   ====================================================================== */
/* One column on phones; two from 768 px; three from 1100 px for 3, 5 and 6 cards (4 stays a 2 x 2 block).
   Every column is minmax(0, 1fr), so nothing forces a width and there is no sideways scroll at 320 px. */
.svc-people { display: grid; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 768px) {
  .svc-people--2, .svc-people--3, .svc-people--4, .svc-people--5, .svc-people--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .svc-people--3, .svc-people--5, .svc-people--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-people--1 { max-width: 640px; }
.svc-person {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding-block: 1.1rem;
  border-top: 1px solid var(--color-border);
}
.svc-person .headshot { width: 84px; max-width: 84px; margin: 0.15rem 0 0; }
.svc-person__name { margin: 0 0 0.15rem; font-size: var(--step-1); line-height: 1.3; }
.svc-person__name a { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.svc-person__name a:hover { text-decoration-color: var(--color-heading); }
.svc-person__role { margin: 0 0 0.45rem; color: var(--color-muted); font-size: 0.9375rem; font-weight: 600; }
/* The availability label (site.css .profile__status, as on the team page) is the card's last line, under the title:
   no one-line description (option A, Tim 2026-10-04). */
.svc-person .profile__status { margin: 0; }

/* When no clinician is named yet (intensive therapy, telehealth): a short note and a link to the team. */
.svc-team-note { max-width: var(--measure); }
.svc-team-note p { color: var(--color-text); }

/* ======================================================================
   4. Getting started: the steps, then two one-line notes
   ====================================================================== */
.svc-notes {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--edge-rgb), 0.12);
  max-width: 860px;
}
.svc-notes li { color: var(--color-text); }
.svc-notes strong { color: var(--color-heading); }
.svc-notes .arrow-link { white-space: nowrap; }

/* Brain injury page: families and caregivers, a short note under the steps. */
.svc-family {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  max-width: 860px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.08);
}
.svc-family__title { margin: 0 0 0.4rem; font-size: var(--step-1); }
.svc-family p { margin: 0; color: var(--color-text); }
.svc-family a { font-weight: 700; white-space: nowrap; }

/* ======================================================================
   5. FAQ
   ====================================================================== */
.svc-faq .section-head { margin-bottom: 1.25rem; }
.svc-faq .faq__item { background: var(--color-page); box-shadow: none; }

/* ======================================================================
   6. Related services: three quiet links above the closing band
   ====================================================================== */
.svc-related-wrap { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.svc-related__title { margin: 0 0 0.75rem; font-size: var(--step-2); }
.svc-related { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.svc-related .arrow-link { min-height: 44px; font-weight: 600; }

/* ======================================================================
   7. Services hub (/services/)
   ====================================================================== */
.svc-hub-grid .service-grid { margin-top: 0.5rem; }
/* "What We Help With" (2026-10-14, #87): 2.5rem between the six cards and the quiet list below them, as the approved
   Picture 6 shows (it replaces the margin under the former pair of featured cards). */
.svc-help .specialty-list { margin-top: 2.5rem; }

/* Trauma page: veterans and military families, first responders (two short blocks). */
.svc-groups { display: grid; gap: 1.25rem clamp(2rem, 4vw, 4rem); max-width: 1040px; }
@media (min-width: 768px) { .svc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-group { padding-top: 1.1rem; border-top: 3px solid var(--amber-400); scroll-margin-top: calc(var(--header-h) + 1rem); }
.svc-group__title { margin: 0 0 0.4rem; font-size: var(--step-1); line-height: 1.3; }
.svc-group p { margin: 0; color: var(--color-text); }
.svc-group p + p { margin-top: 0.6rem; }