/* KIAC Get Involved recruitment pages — patterns Partner Your Church and
   Mentor as a Veteran share with each other, transcribed from their
   design/*.dc.html prototypes (locked) with the DECISIONS system in place
   of raw prototype gutters/hovers: 56px --gutter rail + 1450px cap, motion
   tokens, arrow-as-::after, right-aligned section-header summaries. Hero and
   strip recipes follow sponsor.css; form primitives live in site.css.
   Page-specific sections live in church.css / veteran.css. */

/* ---------- Split hero (sponsor .shero recipe; same seam x≈742 @1280) ---------- */

/* Text column starts on the rail (padding-inline-start on the full-width
   container so the %-based --gutter resolves correctly); the photo column
   bleeds to the right viewport edge. */
.phero { display: grid; grid-template-columns: 1.275fr 1fr; min-height: 560px; background: #FAF9F7; padding-inline-start: var(--gutter); }
.phero__copy { padding: 72px 52px 60px 0; display: flex; flex-direction: column; justify-content: center; }
.phero .eyebrow { gap: 12px; margin-bottom: 24px; }
.phero .eyebrow .rule { width: 34px; }
.phero .eyebrow .label { color: var(--deep-teal); }
.phero h1 { margin: 0; font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: .94; letter-spacing: -.015em; text-transform: uppercase; color: var(--ink); }
/* deep-teal filled highlight line — the prototypes' hand-dragged fixed boxes
   are normalized to this shared band (docs/DECISIONS.md 2026-08-06) */
.phero__h1-band { display: inline-block; align-self: flex-start; padding: 0 10px; background: var(--deep-teal); font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: 1; letter-spacing: -.015em; text-transform: uppercase; color: #fff; }
.phero__lede { margin: 24px 0 0; max-width: 470px; font: 400 17px/1.6 var(--font-serif); color: var(--ink); }
.phero__lede--follow { margin-top: 14px; }
.phero__ctas { display: flex; align-items: center; gap: 26px; margin-top: 32px; }

.phero__photo { position: relative; background: var(--photo-ink); }
/* hero photo stays B&W — no hover reveal (matches Home/Sponsor heroes) */
.phero__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: var(--photo-filter); }
.phero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 40px 20px; background: linear-gradient(to top, rgba(20, 21, 30, .9), rgba(20, 21, 30, 0)); font: 600 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* ---------- Scope strip under the hero (sponsor .sstats band recipe:
   paper band full width, grid on the rail, gap-hack dividers) ---------- */

.scope { padding: 0 var(--gutter-scope); background: var(--paper); position: relative; }
.scope::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--ink); z-index: 1; }
.scope__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(41, 42, 60, .18); }
.scope__cell { background: var(--paper); border-top: 3px solid var(--ink); padding: 36px 30px; transition: background-color var(--t-med) var(--ease); z-index: 2; }
.scope__cell:hover { background-color: color-mix(in srgb, var(--paper) 97%, var(--ink)); }
.scope__cell--teal { border-top-color: var(--teal); }
.scope__cell--teal .scope__label { color: var(--deep-teal); }
.scope__cell--teal:hover { background-color: color-mix(in srgb, var(--paper) 97%, var(--deep-teal)); }
.scope__label { font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .66); }
.scope__body { margin-top: 11px; font: 400 16px/1.5 var(--font-serif); color: var(--ink); }

@media (min-width: 1033px) and (max-width: 1577px) { 
   .scope__cell:first-child { padding-left: 56px }
   .scope__cell:last-child { padding-right: 56px }
}

/* ---------- Section-header refinements shared by both pages ---------- */

.section-header h2 { line-height: 1.1; letter-spacing: -.02em; max-width: 700px; }
.section-header .summary { max-width: 360px; }
/* prototype headers that top-align the summary instead of the default flex-end */
.section-header--top { align-items: flex-start; }

/* ---------- Ledger card: 3px top rule, kicker, hairline term/def rows ---------- */

.lcard { border-top: 3px solid var(--teal); background: #fff; padding: 4px 26px 10px; }
.lcard--ink { border-top-color: var(--ink); }
.lcard--deep { border-top-color: var(--deep-teal); }
.lcard__kicker { padding: 18px 0 4px; font: 600 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-teal); }
.lcard__kicker--clay { color: var(--clay); }
.lcard__row { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(41, 42, 60, .14); }
.lcard__term { font: 500 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); min-width: 66px; }
.lcard__def { font: 400 16px/1.45 var(--font-serif); color: var(--ink); }

/* ---------- Contact / application form section (fields = site.css
   primitives; static mock — nothing is submitted) ---------- */

.cform { display: grid; grid-template-columns: 1.4fr .75fr; gap: 56px; align-items: start; }
.cform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.cform__row { margin-top: 26px; }
.cform__row > .flabel { display: block; margin-bottom: 9px; }
.cform__actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.cform__submit { padding: 16px 34px; border: 0; border-radius: 0; background: var(--deep-teal); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.cform__submit:hover { background-color: color-mix(in srgb, var(--deep-teal) 86%, black); }
.cform__submit:active { background-color: color-mix(in srgb, var(--deep-teal) 78%, black); transition-duration: 40ms; }
.cform__note { font: 400 15.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .74); }

/* inline link inside body copy (tel:/mailto:) — sponsor aside-card recipe */
.plink { color: var(--deep-teal); border-bottom: 1px solid rgba(31, 110, 102, .45); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.plink:hover { color: var(--ink); border-color: rgba(41, 42, 60, .45); }

/* ---------- Doors fork: "Three other ways to show up" ---------- */

.doors { background: #FAF9F7; border-top: 1px solid rgba(41, 42, 60, .12); }
.doors__head { padding: 64px var(--gutter) 34px; }
.doors__head .section-header { margin-bottom: 0; }
.doors__head h2 { font-size: 52px; line-height: .94; letter-spacing: -.015em; max-width: none; }
/* cards on the rail (DECISIONS: no full-bleed content grids); the band runs
   full width and the cards share its background, so only the dividers stop */
.doors__band { padding: 0 var(--gutter) 30px; }
.doors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #E2E2E2; }
.door { background: #FAF9F7; border-top: 3px solid var(--ink); padding: 34px 30px 32px; }
.door--teal { border-top-color: var(--deep-teal); }
.door__kicker { font: 600 10.5px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(41, 42, 60, .68); margin-bottom: 14px; }
.door h4 { margin: 0; font-family: var(--font-condensed); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink); }
.door__body { margin: 12px 0 0; font: 400 16px/1.55 var(--font-serif); color: var(--ink); }
.door__geo { margin-top: 16px; font: 500 11px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: rgba(41, 42, 60, .74); }
.door__geo--clay { color: var(--clay); }
.door .text-link { margin-top: 20px; }

/* ==================== Responsive collapse ====================
   Two breakpoints (docs/DECISIONS.md 2026-08-04): tablet ≤1032px restacks,
   mobile ≤767px densifies. Display type scales with clamp(); every clamp
   reaches its max below 1032px so the locked desktop render is untouched.
   .section-header stacking (headline first, summary left) is site.css. */

@media (max-width: 1032px) {
   /* Hero → single column, text first; the photo becomes a full-bleed band
      below the copy (sponsor recipe) */
   .phero { grid-template-columns: 1fr; min-height: 0; padding-inline-start: 0; }
   .phero__copy { padding: 56px var(--gutter) 44px; }
   .phero h1, .phero__h1-band { font-size: clamp(40px, 8.5vw, 68px); }
   .phero__ctas { flex-wrap: wrap; }
   .phero__photo { min-height: 420px; }

   .scope { padding: 0; }
   .scope__grid { grid-template-columns: 1fr 1fr; }

   .section-header h2 { font-size: clamp(34px, 5.5vw, 50px); }

   /* Form stacks form-first; sidebar follows */
   .cform { grid-template-columns: 1fr; gap: 40px; }

   .doors__head h2 { font-size: clamp(34px, 5.5vw, 52px); }
   /* stacked cards keep their dividers via the 1px grid gap */
   .doors__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
   .phero__copy { padding: 48px var(--gutter) 40px; }
   .phero__photo { min-height: 340px; }
   .phero__caption { padding: 48px 20px 16px; }

   .scope__grid { grid-template-columns: 1fr; }

   .lcard { padding-inline: 20px; }

   .cform__fields { grid-template-columns: 1fr; gap: 20px; }
   .cform__actions { gap: 16px; }
   .cform__note { font-size: 16px; }

   .doors__head { padding-block: 48px 26px; }
   .door { padding: 30px 24px; }
}