/**
 * about.css — Inspire Recovery Design System
 * Page-specific styles for about-v3.html.
 *
 * Shared foundation: ../main.css (tokens, base, layout, typography, navigation,
 * components, forms, animations).
 *
 * This file contains ONLY CSS unique to the About page. The hero here is a dark
 * cinematic overlay (ink scrim, white text) — distinct from the paper-scrim homepage
 * hero and the two-column heroes on later pages. All other sections are About-specific.
 * The .final .inner max-width is 820px (overrides the shared 720px default).
 */

/* HERO — dark cinematic, ink scrim, copy in lower third */
/*
 * Structural note: min-height sits on .hero (not .hero-inner) so the
 * absolutely-positioned .hero-photo always fills the full hero height.
 * .hero-inner uses padding-top (not flex align-items:flex-end) to position
 * copy — this prevents content from overflowing below the image on short
 * viewports. At 1440px wide the 4:3 source scales to 1440×1080; a 960px
 * hero with object-position:50% 0% shows the full staff group with 0 top
 * crop and 120px bottom crop (floor/pavement area).
 */
.hero { position: relative; padding: 0; min-height: clamp(440px, 50vh, 540px); }
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  height: 100%; /* override shared height: min(66vh,560px) — inset:0 alone can't win when height is explicit */
  border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden;
}
.hero-photo img { object-position: 50% 30%; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(92deg, rgba(22,32,31,.88) 0%, rgba(22,32,31,.66) 40%, rgba(22,32,31,.30) 74%, rgba(22,32,31,.12) 100%),
    linear-gradient(0deg, rgba(22,32,31,.76) 0%, rgba(22,32,31,0) 78%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(var(--wide), calc(100% - 44px)); margin: 0 auto;
  padding: clamp(60px, 8vh, 100px) 0 clamp(52px, 7vh, 80px); color: #fff;
}
.hero-copy { max-width: 660px; }
.hero .eyebrow { color: #fff; }
.hero-copy h1 { margin-bottom: 22px; max-width: 14ch; }
.hero-copy .lead { color: rgba(255,255,255,.92); max-width: 50ch; }
.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,.5); }
.hero-copy .reflect {
  margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.26);
  max-width: 54ch; color: rgba(255,255,255,.86);
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
}

/* THE BEGINNING — Donna portrait + narrative */
.beginning { background: #FFFFFF; }
.beginning-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
.portrait {
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); overflow: hidden;
  height: 540px; box-shadow: var(--shadow);
}
.portrait img { object-position: 50% 28%; }
.beginning h2 { margin-bottom: 24px; }
.beginning p { color: var(--text-secondary); max-width: 52ch; }
.beginning p + p { margin-top: 18px; }
.beginning .turn {
  margin-top: 24px; color: var(--ink);
  font-family: "Roboto Slab", Georgia, serif; font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.38; max-width: 42ch;
  border-left: 3px solid var(--brand-brown);
  padding-left: 20px;
}
.cap { margin-top: 18px; font-size: .9rem; color: var(--text-secondary); }

/* WHAT WE BELIEVE — Trans Pink tick on eyebrow = identity/values statement */
.believe { background: var(--surface-soft-blue); }
.believe .eyebrow::before { background: var(--accent-trans-pink); }
.believe-head { text-align: center; margin-bottom: clamp(40px, 6vh, 68px); }
.believe-head .eyebrow { justify-content: center; }
.believe-head h2 { max-width: 28ch; margin-left: auto; margin-right: auto; }
.creed { display: grid; gap: 20px; }
.creed-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: clamp(24px, 3vw, 36px);
}
.creed-card p {
  font-family: "Roboto Slab", Georgia, serif; font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.35; color: var(--ink);
  margin-bottom: 10px;
}
.creed-card span {
  display: block;
  font-family: Roboto, sans-serif; font-weight: 400;
  font-size: 1rem; line-height: 1.58; color: var(--text-secondary);
}

/* THE PEOPLE — gallery: white */
.people { background: #fff; }
.people .head { max-width: var(--measure); margin-bottom: clamp(36px, 5vh, 60px); }
.people h2 { margin-bottom: 18px; }
.gallery { display: grid; gap: 18px; }
.frame { border-radius: var(--r-md); overflow: hidden; height: 340px; box-shadow: var(--shadow); }
.frame.tall { height: 520px; border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); }
.frame img { object-position: 50% 42%; }
.people .caption {
  margin-top: 26px; max-width: 100%; text-align: center;
  font-weight: 400; font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.6; color: var(--text-primary);
}

/* BEYOND TREATMENT — warm brown */
.beyond { background: var(--brand-brown); }
.beyond .eyebrow { color: rgba(255,255,255,.75); }
.beyond .eyebrow::before { background: var(--accent-trans-pink); }
.beyond-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.beyond h2 { max-width: none; margin-bottom: 0; color: #fff; }
.beyond p { max-width: 56ch; font-weight: 400; font-size: clamp(1.12rem, 1.8vw, 1.4rem); line-height: 1.6; color: rgba(255,255,255,.82); }
.beyond p + p { margin-top: 20px; }
.beyond strong { color: #fff; }

/* LOOKING FORWARD — centered hopeful: aqua wash separates from Beyond and leads into final */
.forward { background: var(--surface-soft-blue); text-align: center; padding: var(--space-md) 0; }
.forward .inner { max-width: 840px; margin: 0 auto; }
.forward h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.forward .lead { margin: 24px auto 0; max-width: 50ch; }

/* FINAL — border-top breaks forward(aqua-wash)→final(brand-aqua) adjacent-family merge */
.final { border-top: 1px solid rgba(14,95,122,.2); }
.final .inner { max-width: 820px; }
.final .lead { color: var(--ink); margin: 22px auto 0; max-width: 44ch; }

/*
 * Production additions (not in shared prototype CSS):
 * These replace two inline style="" attributes from the prototype HTML
 * that cannot be reproduced in a PHP template without inline CSS.
 *
 * 1. The .forward .eyebrow has justify-content:center in the prototype —
 *    moves the lime tick + label to the center of the centered section.
 * 2. The .final .btn.ghost needs --ink text/border (not --blue-deep)
 *    because the .final section has a bright --blue background.
 */
.forward .eyebrow { justify-content: center; }
/* .final .btn.ghost ink override removed — now handled centrally in components.css */

/*
 * Photo placeholder geometry — ensures .ph fills photo containers while
 * images are pending upload. Mirrors the pattern used in homepage.css.
 *
 * .hero-photo is position:absolute; inset:0 — .ph must match that positioning.
 * .portrait and .frame/.frame.tall use height — .ph fills automatically via height:100%.
 *
 * These rules are removed once all images are uploaded and $xxx_img_id
 * variables in page-about.php are set to real attachment IDs.
 */
.hero-photo .ph { position: absolute; inset: 0; }
.portrait .ph { height: 540px; }
.frame .ph { height: 340px; }
.frame.tall .ph { height: 520px; }

/* RESPONSIVE */
@media (max-width: 680px) {
  .hero { min-height: 480px; }
  .hero-inner { padding-top: clamp(100px, 16vh, 160px); padding-bottom: clamp(36px, 5vh, 48px); }
}
@media (min-width: 760px) {
  .beginning-grid { grid-template-columns: 0.82fr 1fr; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; }
  .creed { grid-template-columns: 1fr 1fr; }
  .beyond-grid { grid-template-columns: 0.82fr 1fr; }
}