/**
 * therapies.css — Inspire Recovery Design System
 * Page-specific styles for therapies-v3.html.
 *
 * Shared foundation: ../main.css (tokens, base, layout, typography, navigation,
 * components, forms, animations).
 *
 * This page uses the standard two-column hero (.hero-grid). Unique patterns:
 * under (two-column text), room (prose only — photography audit: interior photo removed
 * 2026-07-15), change (charcoal centered peak with centered eyebrow in light blue),
 * path (editorial approach blocks with hairline rules — NOT cards),
 * alongside (copy left / photo right on soft glow).
 * The h3 here is 1.22rem (smaller than shared 1.3rem — therapy approach items are
 * descriptive headings, not section titles). The .final is centered with .calllink.
 * The .btn.light:hover is overridden to stay white (same as shared — no override needed).
 */

/* HERO — shared .hero-grid; this page's lead is tighter */
.hero { padding: 0; }
.hero-copy h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; margin-bottom: 14px; }
.hero-copy .lead { max-width: 46ch; font-size: clamp(.95rem, 1.4vw, 1.05rem); }

/* h3 — editorial approach headings are slightly smaller */
h3 { font-size: 1.22rem; }

/* S2 UNDERNEATH — two-column text: border-top breaks hero→under soft-blue visual merge */
.under { background: var(--surface-soft-blue); border-top: 1px solid var(--border-light); }
.under-grid { display: grid; gap: clamp(30px, 5vw, 64px); align-items: start; }
.under-grid h2 { max-width: 18ch; }
.under-grid .lead { max-width: 58ch; }

/* S3 IN THE ROOM — prose only (photography audit: interior photo removed 2026-07-15) */
.room { background: var(--surface-warm); }
.room-inner { max-width: 960px; margin-left: auto; margin-right: auto; text-align: center; }
.room-inner .eyebrow { justify-content: center; }
.room-inner h2 { margin-bottom: 18px; max-width: none; }
.room-inner .lead { max-width: 74ch; margin-left: auto; margin-right: auto; }

/* S4 HOW CHANGE HAPPENS — charcoal centered peak */
.change { background: var(--surface-soft-blue); padding: var(--space-lg) 0; text-align: center; }
.change .inner { max-width: 920px; margin: 0 auto; }
.change .eyebrow { justify-content: center; }
.change h2 { margin-bottom: 22px; }
.change p { margin: 0 auto; max-width: 88ch; }

/* S5 ONE PATH — intro + six editorial approach blocks; Trans Pink tick on eyebrow = identity/belonging */
.path { background: var(--surface-warm); }
.path .eyebrow::before { background: var(--accent-trans-pink); }
.path-intro { max-width: none; margin-bottom: clamp(34px, 4.5vh, 58px); }
.path-intro h2 { margin-bottom: 20px; }
.approaches { display: grid; gap: clamp(30px, 4vw, 50px) clamp(34px, 4.5vw, 64px); }
.approach { border-top: 1px solid var(--border-light); padding-top: 22px; }
.approach h3 { color: var(--ink); margin-bottom: 10px; }
.approach p { color: var(--text-secondary); margin-bottom: 14px; max-width: 54ch; }
.path-close {
  margin: clamp(36px, 5vh, 60px) auto 0; max-width: 60ch; text-align: center;
  font-family: "Roboto Slab", serif; font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.34; color: var(--ink);
}

/* S6 ALONGSIDE YOU — copy left, photo right: warm brown — therapist presence, human and grounded */
.alongside { background: #7F4E20; }
/* White ring separates photo from brown background */
.alongside .eyebrow { color: rgba(255,255,255,.8); }
.alongside h2 { color: #fff; }
.alongside .lead { color: rgba(255,255,255,.82); }
.alongside .morelink { color: rgba(255,255,255,.9); }
.alongside .calllink { color: #fff; }
.alongside-grid { display: grid; gap: clamp(34px, 4.5vw, 60px); align-items: center; }
.alongside h2 { margin-bottom: 18px; max-width: 18ch; }
.alongside .lead { max-width: 56ch; }
.alongside-photo {
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  height: min(58vh, 500px); overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22), var(--shadow);
}
.alongside-photo img { object-position: 50% 18%; }

/* S7 FINAL — centered, .calllink ink on blue; inherits 860px max-width from components.css */
.final .eyebrow { justify-content: center; }
.final h2 { margin-bottom: 18px; }
.final .lead { color: var(--ink); margin: 0 auto; max-width: 54ch; }
.final .actions { justify-content: center; margin-top: 30px; }
.final .calllink { color: var(--ink); }

/* RESPONSIVE */
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; }
  .approaches { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .under-grid { grid-template-columns: 0.9fr 1fr; }
  .alongside-grid { grid-template-columns: 1.02fr 0.98fr; }
}