/**
 * who-we-help.css — Inspire Recovery Design System
 * Page-specific styles for who-we-help-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 here:
 * the belong centered statement, find-yourself prose recognition rows (NOT cards),
 * room two-column on blue glow, facing compact quiet beat, peak charcoal dark with
 * photo left. The final section is centered with a .calllink (different from the
 * homepage/about finals). The h3 size is slightly smaller here (1.28rem vs shared 1.3rem).
 */

/*
 * HERO — full-bleed cinematic (music group 1920×1080, ID 14500).
 * Same structural pattern as About: .hero-photo absolutely fills .hero;
 * .hero-inner is a positioned container holding the copy overlay.
 * Faces (upper half of image) are clear of copy (lower third, flex-end).
 * object-position: 50% 28% shifts crop slightly up to show both guitarists' heads.
 */
.hero {
  position: relative;
  padding: 0;
  background: var(--ink);
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  height: auto;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: none;
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22,32,31,.88) 0%, rgba(22,32,31,.54) 44%, rgba(22,32,31,.16) 70%, rgba(22,32,31,.04) 100%),
    linear-gradient(0deg, rgba(22,32,31,.68) 0%, rgba(22,32,31,0) 52%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(var(--wide), calc(100% - 44px)); margin: 0 auto;
  min-height: clamp(560px, 66vh, 720px);
  display: flex; align-items: flex-end;
  padding: clamp(60px, 8vh, 96px) 0 clamp(64px, 9vh, 104px);
  color: #fff;
}
.hero-copy { max-width: 580px; }
.hero-copy .lead { max-width: 46ch; color: rgba(255,255,255,.90); }
.hero .eyebrow { color: #fff; }
.hero-copy h1 { color: #fff; margin-bottom: 18px; }
.hero-copy .actions { margin-top: 32px; }
.hero-copy .btn.light { background: #fff; color: var(--brand-aqua-hover); }
.hero-copy .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }

/* h3 — slightly tighter than the shared 1.3rem */
h3 { font-size: 1.28rem; }

/* S2 EVERYONE BELONGS — Trans Pink tick = the defining identity/belonging statement */
.belong { background: var(--surface-soft-blue); text-align: center; }
.belong .inner { max-width: 880px; margin: 0 auto; }
.belong .eyebrow { justify-content: center; }
.belong .eyebrow::before { background: var(--accent-trans-pink); }
.belong h2 { margin-bottom: 20px; }
.belong .lead { margin: 0 auto; }

/* S3 FIND YOURSELF — centered intro + card grid */
.find { background: var(--surface-warm); }
.find-intro { max-width: 1060px; margin-left: auto; margin-right: auto; margin-bottom: clamp(40px, 5vh, 64px); text-align: center; }
.find-intro .eyebrow { justify-content: center; }
.find-intro h2 { margin-bottom: 20px; }
.find-intro .lead { max-width: 86ch; margin-left: auto; margin-right: auto; }
.entries { display: grid; gap: 20px; }
.entry {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: clamp(22px, 3vw, 32px);
  display: flex; flex-direction: column;
}
.entry h3 { color: var(--ink); margin-bottom: 8px; }
.entry p { color: var(--text-secondary); flex: 1; }
.entry .morelink { margin-top: 14px; }

/* S4 WHEREVER YOU ARE — two-column on soft blue glow */
.room { background: var(--surface-soft-blue); }
.room-grid { display: grid; gap: clamp(30px, 5vw, 64px); align-items: start; }
.room-grid h2 { max-width: 17ch; }
.room-grid .lead { max-width: 58ch; }

/* S5 WHATEVER YOU'RE FACING — warm brown: grounded, empathetic break between aqua sections */
.facing { background: #7F4E20; padding: var(--space-md) 0; }
.facing .eyebrow { color: rgba(255,255,255,.8); }
.facing-inner h2 { color: #fff; }
.facing-inner .lead { color: rgba(255,255,255,.82); }
.facing .morelink { color: rgba(255,255,255,.9); }
.facing .calllink { color: #fff; }
.facing-inner { max-width: 1060px; margin: 0 auto; text-align: center; }
.facing-inner .eyebrow { justify-content: center; }
.facing-inner h2 { margin: 0 auto 18px; max-width: 22ch; }
.facing-inner .lead { margin: 0 auto 20px; max-width: 80ch; }

/* S6 ONE COMMUNITY — charcoal peak, photo left / payoff right */
.peak { background: #fff; padding: var(--space-lg) 0; }
.peak-grid { display: grid; gap: clamp(34px, 4.5vw, 64px); align-items: center; }
.peak-photo {
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg);
  height: min(60vh, 520px); overflow: hidden; box-shadow: var(--shadow);
}
.peak-photo img { object-position: 50% 42%; }
.peak h2 { margin-bottom: 20px; }
.peak p { max-width: 54ch; }
.peak .payoff {
  margin-top: 18px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-family: "Roboto Slab", serif; line-height: 1.34;
}

/* S7 FINAL — centered; override shared 860px inner width */
.final .inner { max-width: 1060px; }
.final .eyebrow { justify-content: center; }
.final h2 { margin-bottom: 18px; }
.final .lead { color: var(--ink); margin: 0 auto 6px; max-width: 80ch; }
.final .actions { justify-content: center; margin-top: 30px; }
.final .btn { background: #fff; color: var(--brand-aqua-hover); border-color: #fff; }
.final .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* Cornerstone link — sits below identity entries grid */
.find-cornerstone-link {
  margin-top: clamp(28px, 3.5vw, 40px);
  text-align: center;
  font-size: .95rem;
  color: var(--text-secondary);
}
.find-cornerstone-link a {
  color: var(--brand-aqua-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* RESPONSIVE */
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 760px) {
  .entries { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .entries { grid-template-columns: 1fr 1fr 1fr; }
  .room-grid { grid-template-columns: 0.9fr 1fr; }
  .peak-grid { grid-template-columns: 0.95fr 1.05fr; }
}