/* pages/css/about.css — layout only; every color/size comes from tokens.css */

/* ========== HERO (photo band: portrait on phones, landscape on desktop) ========== */
.about-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(480px, 72svh, 720px); padding: var(--space-10) 0 var(--space-8); }
.about-hero__media { position: absolute; inset: 0; z-index: -1; }
.about-hero__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; }
.about-hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 30%, transparent) 0%, color-mix(in srgb, var(--color-bg) 15%, transparent) 30%, color-mix(in srgb, var(--color-bg) 90%, transparent) 72%, var(--color-bg) 100%); }
.about-hero__inner { max-width: 64ch; }
.about-hero h1 { margin-bottom: var(--space-3); }
.about-hero .lead { color: var(--color-text); margin: 0; }
@media (min-width: 768px) { .about-hero__media img { object-position: 50% 22%; } }

/* ========== MISSION (image + copy) ========== */
.mission__grid { display: grid; gap: var(--space-6); align-items: center; }
.mission__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-surface); }
.mission__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.mission__copy .lead { margin-bottom: 0; }
@media (min-width: 900px) { .mission__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-9); } }

/* ========== BIOS ========== */
.bio__grid { display: grid; gap: var(--space-4); max-width: 960px; margin: 0 auto; }
.bio { text-align: center; }
.bio__photo { position: relative; width: min(200px, 60%); aspect-ratio: 1; margin: 0 auto var(--space-5); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sarah's own crop from the couples portrait: image runs wider than its square box and
   sits shifted left, so the visible window is her side (image x ≈ 35–94%, y ≈ 18–57%). */
.bio__photo--sarah img { position: absolute; top: 0; left: -60%; width: 170%; max-width: none; height: 100%; object-position: 50% 30%; }
.bio h3 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-h3); margin-bottom: 2px; }
.bio__role { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange); margin-bottom: var(--space-3); }
.bio p { margin: 0; color: var(--color-text-muted); }
@media (min-width: 700px) { .bio__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

/* ========== SCRIPTURE (text band) ========== */
.scripture { position: relative; overflow: hidden; text-align: center; }
/* purple as atmosphere only, bounded so it never widens the page */
.scripture::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(600px, 100%); height: 60%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-purple) 14%, transparent) 0%, transparent 70%); pointer-events: none; }
.scripture blockquote { position: relative; margin: 0 auto var(--space-3); max-width: 30ch; font-size: var(--text-h2); font-weight: 500; line-height: 1.4; text-wrap: balance; }
.scripture blockquote strong { color: var(--brand-orange-hot); font-weight: 700; }
.scripture cite { position: relative; display: block; font-style: normal; color: var(--color-text-muted); }

/* ========== PILLARS (2-col list) ========== */
.pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.pillars li { padding-left: var(--space-4); border-left: 2px solid var(--brand-orange); }
.pillars h3 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-h3); margin-bottom: var(--space-2); }
.pillars p { margin: 0; color: var(--color-text-muted); }
@media (min-width: 768px) { .pillars { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); } }

/* ========== CTA ========== */
.about-cta { max-width: 800px; margin: 0 auto; text-align: center; padding: var(--space-7) var(--space-5); }
.about-cta h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-h2); }
.about-cta .lead { margin: 0 auto var(--space-5); }
.about-cta .cluster { justify-content: center; }
@media (min-width: 768px) { .about-cta { padding: var(--space-9) var(--space-8); } }