/* ==========================================================================
   Meta Church VR: about.html extras
   Loaded AFTER styles.css, on about.html only. Tokens only: no raw colours,
   no new font sizes. Everything here is prefixed so it cannot leak into
   shared components.
     1. "On this page" jump row
     2. Mission split (small tweaks)
     3. Our approach to ministry (intro + passage card + note)
     4. Proof band on evergreen
     5. Team: Pastor Mike feature card, staff strip
     6. The Apostles' Creed (liturgical block)
     7. Then and now (four photos that step up in size)
   ========================================================================== */

/* ---------- 1. "On this page" jump row ---------- */
.about-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.about-jump__label {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.about-jump ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }

/* ---------- 2. Mission ---------- */
.about-mission .split__media { --focus-pos: 38% 50%; }   /* keeps Pastor Mike's wave and the campfire in the 4:5 crop */
.about-mission .split__text > .lede--serif { max-width: 26em; }
@media (min-width: 62em) {
  .about-mission .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- 3. Our approach to ministry ---------- */
.approach { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--gap-grid); }
.approach > * { min-width: 0; }
.approach__head > .lede { margin-top: 1.5rem; }

.approach__passage {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.approach__passage .verse { position: relative; }
.approach__passage .verse p + p { margin-top: .85em; }
.approach__passage .verse cite { margin-top: 1.4rem; }
/* leaf watermark, bottom-right corner of the card */
.approach__leaf {
  position: absolute;
  right: -2.5rem;
  bottom: -3rem;
  width: clamp(9rem, 22vw, 15rem);
  height: clamp(9rem, 22vw, 15rem);
  color: var(--sand);
  opacity: .55;
  pointer-events: none;
}

.approach__note .notice { padding: 1.25rem 1.4rem 1.3rem 1.5rem; font-size: var(--fs-400); }
.approach__note .notice__title {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: var(--fs-200);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.approach__note .notice__title .icon { width: 1.2em; height: 1.2em; color: var(--accent-2); }

@media (min-width: 62em) {
  .approach {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .approach__head { grid-column: 1; grid-row: 1; }
  .approach__passage { grid-column: 2; grid-row: 1 / span 2; }
  .approach__note { grid-column: 1; grid-row: 2; }
}

/* ---------- 4. Proof band ---------- */
.about-proof__head { display: grid; gap: 1rem var(--gap-grid); align-items: end; }
.about-proof__head > * { min-width: 0; }
.about-proof__head .eyebrow { margin-bottom: .9rem; }
.about-proof__head p:not(.eyebrow) { color: var(--fg-soft); max-width: 34em; }
.about-proof .proof { margin-top: clamp(2rem, 4vw, 3.25rem); }
.about-proof .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 62em) {
  .about-proof__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ---------- 5. Team ---------- */
.about-lead {
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  align-items: center;
}
.about-lead__photo { margin: 0; min-width: 0; overflow: hidden; border-radius: calc(var(--r-lg) - .4rem); background: var(--sand); }
/* 3:2 keeps both the wave and the thumbs-up in frame (see STYLEGUIDE image rules) */
.about-lead__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.about-lead__body { min-width: 0; padding: 0 clamp(.5rem, 2vw, 1.5rem) clamp(.75rem, 2vw, 1.5rem); }
.about-lead__body h3 { font-size: var(--fs-700); line-height: 1.08; letter-spacing: -.018em; }
.about-lead__body .person__role { margin-top: .5rem; }
.about-lead .about-lead__body .about-lead__bio { margin-top: 1.5rem; }
.about-lead .about-lead__body .about-lead__bio p { margin-top: 0; font-size: var(--fs-400); line-height: 1.65; color: var(--fg-soft); max-width: 36em; }
.about-lead .about-lead__body .about-lead__bio p + p { margin-top: .9rem; }
.about-lead .about-lead__body .verse { margin-top: 1.75rem; }
.about-lead .about-lead__body .verse p { margin-top: 0; font-size: var(--fs-500); line-height: 1.45; color: var(--fg); }
@media (min-width: 56em) {
  .about-lead { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .about-lead__body { padding: clamp(.75rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem) clamp(.75rem, 2vw, 1.5rem) 0; }
}

.about-staff {
  display: grid;
  gap: .25rem var(--gap-grid);
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.about-staff > * { min-width: 0; }
.about-staff .eyebrow { margin-bottom: .5rem; }
.about-staff__mission {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-600);
  line-height: 1.34;
  letter-spacing: -.008em;
  max-width: 30em;
}
@media (min-width: 62em) {
  .about-staff { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: baseline; }
}

.about-team .person .text-link { justify-self: start; font-size: var(--fs-300); }
.about-team__more { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 6. The Apostles' Creed ---------- */
.creed-grid { display: grid; gap: var(--gap-grid); }
.creed-grid > * { min-width: 0; }
.creed-grid__figure { margin: 0; width: 100%; max-width: 24rem; justify-self: center; }
.creed-grid__figure .arch { --focus-pos: 47% 50%; }
.creed-grid__figure figcaption {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--amber);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--fg-soft);
}

.creed {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
/* thin gold keyline set inside the card, like a printed order of service */
.creed::before {
  content: "";
  position: absolute;
  inset: .7rem;
  border: 1px solid var(--gold);
  border-radius: calc(var(--r-lg) - .45rem);
  opacity: .75;
  pointer-events: none;
}
.creed__mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--maple-deep);
}
.creed__mark .icon { width: 1.5rem; height: 1.5rem; }
.creed__article {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: balance;
}
.creed__article span { display: block; }
.creed__article .creed__first {
  margin-bottom: .2em;
  font-weight: 400;
  font-size: var(--fs-600);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.creed__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.6rem auto;
  max-width: 14rem;
  color: var(--amber);
}
.creed__sep::before, .creed__sep::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.creed__sep .leaf { width: .9rem; height: .9rem; color: inherit; }
.creed__amen {
  margin-top: 1.1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-700);
  line-height: 1.1;
  color: var(--accent);
}
.creed-grid__text .actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (min-width: 62em) {
  .creed-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .creed-grid__figure { order: -1; justify-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* short laptop windows: the stuck figure would be taller than the viewport and lose its caption */
@media (min-width: 62em) and (max-height: 46em) {
  .creed-grid__figure { position: static; }
}

/* ---------- 7. Then and now ---------- */
.eras { display: grid; gap: clamp(2rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.75rem); }
.era { display: grid; grid-template-rows: auto auto; margin: 0; min-width: 0; }
.era img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus-pos, 50% 50%);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
/* early-days-seaside.webp is low-res: keep it small, and crop to its left three quarters (the group by the sea) */
.era--early { max-width: 20rem; }
.era--early img { object-position: 0% 50%; }
/* service-sunset-congregation.webp: 1:1 pinned to the left 10%, exactly as the homepage does.
   This keeps the outdated in-world "service times" poster out of frame. Do not change. */
.era--sunset img { aspect-ratio: 1 / 1; object-position: 10% 50%; }
.era--now img { box-shadow: var(--shadow-lift); }

.era figcaption {
  position: relative;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--fg-soft);
}
.era figcaption::before {
  content: "";
  position: absolute;
  top: -.4rem;
  left: 0;
  width: .75rem;
  height: .75rem;
  border-radius: var(--r-leaf);
  background: var(--amber);
}
.era--now figcaption::before { background: var(--maple); }
.era__label {
  display: block;
  margin-bottom: .3rem;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.about-story .actions { margin-top: clamp(2rem, 4vw, 3rem); }

@media (min-width: 40em) {
  .eras { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .era--early { max-width: none; }
}
@media (min-width: 62em) {
  .eras { grid-template-columns: minmax(0, 2.4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4.2fr); }
}
/* Where subgrid exists, photos share one row and captions the next, so the photos sit on a common
   baseline and step up in size from "then" to "now". Without it, each figure simply stacks. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40em) {
    .era { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .era img { align-self: end; }
  }
}