/* KIAC Mentor as a Veteran — page-specific sections, transcribed from
   design/Mentor as a Veteran.dc.html (locked). Pair-shared patterns live in
   involved.css, form primitives in site.css. Deviations (hero band
   normalization, doors-card link fix, copy typo fixes) are logged in
   docs/DECISIONS.md 2026-08-06. */

/* ---------- Hero variants ---------- */

.phero__img { background-image: url('/assets/photos/KIAC-118.jpg'); background-position: 62% 30%; }

/* ---------- Why a veteran ---------- */

.why { padding: 68px var(--gutter) 60px; background: #fff; }
.why .section-header { margin-bottom: 34px; }
.why .section-header h2 { font-size: 48px; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.why__copy p { margin: 0; font: 400 17.5px/1.65 var(--font-serif); color: var(--ink); }
.why__copy p + p { margin-top: 18px; }
.why .text-link { margin-top: 26px; }
.why__photo { min-height: 420px; }
.why__photo .photo__img { background-image: url('/assets/photos/kiac-121-2-ms80m39d-ky8f.jpg'); background-position: center 42%; }
.why__photo .photo__caption { padding: 64px 28px 18px; font-weight: 600; color: rgba(255, 255, 255, .84); }

/* ---------- The role: two ledger cards ---------- */

.role { padding: 66px var(--gutter) 62px; background: #FAF9F7; border-top: 1px solid rgba(41, 42, 60, .12); }
.role .section-header { margin-bottom: 34px; }
.role .section-header h2 { font-size: 48px; }
.role__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.role .lcard { background: #FAF9F7; padding: 6px 30px 10px; }
.role .lcard__kicker { padding: 20px 0 14px; }
.role .lcard__row { gap: 0 24px; }
.role .lcard__term { min-width: 104px; }
.role .lcard__def { font-size: 16.5px; line-height: 1.5; }

/* ---------- How matching works (full-width ink band, steps on the rail) ---------- */

.match { padding: 66px var(--gutter) 68px; background: var(--ink); }
.match .section-header { margin-bottom: 38px; }
.match .section-header h2 { font-size: 48px; color: #fff; }
.match .section-header .summary { color: rgba(255, 255, 255, .86); }
.match__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .16); }
.mstep { background: var(--ink); padding: 26px 28px 30px; }
.mstep__num { font-family: var(--font-condensed); font-weight: 700; font-size: 46px; line-height: 1; color: var(--light-teal); }
.mstep__title { margin-top: 12px; font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: 1.1; color: #fff; }
.mstep__body { margin-top: 10px; font: 400 16px/1.5 var(--font-serif); color: rgba(255, 255, 255, .86); }
.mstep__meta { margin-top: 14px; font: 500 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* ---------- Who qualifies: status ledger ---------- */

.qualify { padding: 66px var(--gutter) 62px; background: #fff; }
.qualify .section-header { margin-bottom: 42px; }
.qualify .section-header h2 { font-size: 48px; }
/* DOM order is term → status → desc; explicit columns + dense flow keep the
   desktop layout (desc backfills col 2 after status lands in col 3) while
   letting the mobile restack put the pill beside the term */
.qualify__table { display: grid; grid-template-columns: auto 1fr auto; grid-auto-flow: dense; align-items: baseline; border-top: 1px solid rgba(41, 42, 60, .2); }
.qualify__term { grid-column: 1; padding: 18px 28px 18px 0; font: 500 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
.qualify__desc { grid-column: 2; padding: 18px 28px 18px 0; font: 400 16.5px/1.5 var(--font-serif); color: var(--ink); }
.qualify__status { grid-column: 3; padding: 18px 0; font: 500 11px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--deep-teal); }
.qualify__status--muted { color: rgba(41, 42, 60, .66); }
/* "Hard stop" is one of this page's negative clay accents (see DECISIONS) */
.qualify__status--clay { color: var(--clay); }
.qualify__rule { grid-column: 1 / -1; height: 1px; background: rgba(41, 42, 60, .14); }

/* ---------- Questions we get ---------- */

.vfaq { padding: 66px var(--gutter) 60px; background: #F5F3EE80; border-top: 1px solid rgba(41, 42, 60, .12); }
.vfaq .section-header { margin-bottom: 50px; }
.vfaq .section-header h2 { font-size: 48px; }
.vfaq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.vfaq__item { padding: 22px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.vfaq__q { font-family: var(--font-condensed); font-weight: 700; font-size: 20px; line-height: 1.08; color: var(--ink); }
.vfaq__a { margin: 11px 0 0; font: 400 16.5px/1.55 var(--font-serif); color: var(--ink); }

/* ---------- Application ---------- */

.vapply { padding: 68px var(--gutter) 70px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.vapply .section-header { margin-bottom: 36px; }
.vapply .section-header h2 { font-size: 48px; }
.vapply .lcard { background: var(--paper-alpha); }
.vapply .chips { gap: 10px; }

/* ---------- Doors variant ---------- */

.doors__head .section-header { align-items: center; }

/* ==================== Responsive collapse ==================== */

@media (max-width: 1032px) {
   .why .section-header h2, .role .section-header h2, .match .section-header h2,
   .qualify .section-header h2, .vfaq .section-header h2, .vapply .section-header h2 { font-size: clamp(34px, 5.5vw, 48px); }

   .why__grid { grid-template-columns: 1fr; gap: 40px; }
   .why__photo { min-height: 380px; }

   .role__grid { grid-template-columns: 1fr; gap: 26px; }
   .role .lcard { padding: 6px 3px 10px; }

   .match__grid { grid-template-columns: 1fr 1fr; }
   .mstep__num { font-size: clamp(38px, 6vw, 46px); }
   .doors__head .section-header { align-items: start; }
}

@media (max-width: 767px) {
   .why { padding-block: 52px 48px; }
   .why__photo { min-height: 340px; }
   .why__photo .photo__caption { padding: 48px 20px 16px; }

   .role { padding-block: 52px 48px; }

   .match { padding-block: 52px; }
   .match__grid { grid-template-columns: 1fr; }
   .mstep { padding: 26px 0 30px; }

   /* rows restack: term + status pill share the top line, desc below
      (works because DOM order is term → status → desc) */
   .qualify { padding-block: 52px 48px; }
   .qualify__table { grid-template-columns: 1fr auto; }
   .qualify__term { padding: 16px 20px 2px 0; }
   .qualify__status { grid-column: 2; padding: 16px 0 2px; }
   .qualify__desc { grid-column: 1 / -1; padding: 4px 0 16px; font-size: 16px; }

   .vfaq { padding-block: 52px 48px; }
   .vfaq__grid { grid-template-columns: 1fr; }
   .vfaq__a { font-size: 16px; }

   .vapply { padding-block: 52px 56px; }
}