/* Youth Futures Canada — About Us. Mobile first; tokens from theme.css only.
   Skeleton (2026 editorial rework): page-head → full-bleed stat band → sticky horizontal jump strip →
   full-width stacked sections (mission pull-quote, stage tiles, a tabbed "who it's for" panel, a two-panel
   how-it-works split, a numbered commitment grid, FAQ) → closing CTA. No sidebar TOC, no repeated card grid. */

/* ---------- header: three actions are too many for the right-hand column, so they sit under the lead ---------- */
@media (min-width: 768px) { .about-head .page-head__inner { grid-template-columns: minmax(0, 1fr); } }
.about-head .page-head__actions { margin-top: 4px; }

/* ---------- stat band: big numbers in a row, not a grid of cards ---------- */
.about-stats-band { background: var(--cc-navy-50); border-bottom: 1px solid var(--kds-border); }
.about-stats { list-style: none; margin: 0 auto; padding: 20px 16px; display: flex; flex-wrap: wrap; gap: 20px 0; }
.about-stats li { flex: 1 1 50%; padding: 8px 20px 8px 0; border-right: 1px solid var(--cc-line-strong); }
.about-stats li:nth-child(2n) { border-right: 0; }
.about-stats strong { display: block; font: 800 1.75rem/1.1 var(--cc-font-display); color: var(--cc-navy); }
.about-stats span { font-size: .75rem; color: var(--kds-fg-muted); }
@media (min-width: 640px) { .about-stats { flex-wrap: nowrap; padding: 28px 24px; } .about-stats li { flex: 1 1 0; border-right: 1px solid var(--cc-line-strong); padding-right: 20px; } .about-stats li:last-child { border-right: 0; } }
@media (min-width: 1024px) { .about-stats strong { font-size: 2rem; } }

/* ---------- jump strip: a sticky horizontal tab bar in place of a sidebar TOC ---------- */
.about-jump { position: sticky; top: var(--cc-header-h); z-index: 60; background: #fff; border-bottom: 1px solid var(--kds-border); }
.about-jump__list { list-style: none; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.about-jump__list::-webkit-scrollbar { display: none; }
.about-jump__list a { display: block; padding: 12px 14px; white-space: nowrap; text-decoration: none; font-size: .875rem; font-weight: 600; color: var(--kds-fg-muted); border-bottom: 3px solid transparent; }
.about-jump__list a:hover { color: var(--cc-navy); }

.about-main { display: grid; gap: 0; }
.about-section { scroll-margin-top: calc(var(--cc-header-h) + 52px); padding: 40px 0; }
@media (min-width: 768px) { .about-section { padding: 56px 0; } }
.prose strong { color: var(--cc-navy); }
.prose a { font-weight: 500; }

/* ---------- quick answers: a running numbered list, not a card grid ---------- */
.about-quick { display: grid; gap: 0; counter-reset: quick; padding-top: 32px; padding-bottom: 8px; border-top: 1px solid var(--kds-border); }
.about-quick__item { counter-increment: quick; position: relative; display: grid; gap: 4px; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--kds-border); }
.about-quick__item::before { content: counter(quick, decimal-leading-zero); position: absolute; left: 0; top: 18px; font: 800 .8125rem/1 var(--cc-font-display); color: var(--cc-line-strong); }
.about-quick dt { font: 700 1.0625rem/1.3 var(--cc-font-display); color: var(--cc-navy); }
.about-quick dd { margin: 0; font-size: .9375rem; color: var(--kds-fg-muted); }
@media (min-width: 768px) { .about-quick { grid-template-columns: repeat(2, 1fr); gap: 0 40px; padding-top: 40px; } }

/* ---------- mission: an oversized pull-quote column beside the supporting prose column ---------- */
.about-quote { padding-top: 8px; }
.about-quote__inner { display: grid; gap: 24px; }
.about-quote__lede-col { display: grid; gap: 4px; }
.about-quote__mark { margin: 0; line-height: .6; font: 800 4.5rem/1 Georgia, serif; color: var(--cc-red-700); }
.about-quote__lede { margin: 0; max-width: 18ch; }
.about-quote__text { max-width: 62ch; }
@media (min-width: 1024px) {
  .about-quote__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .about-quote__lede-col { position: sticky; top: calc(var(--cc-header-h) + 68px); }
}

/* ---------- audiences (stage tiles): a numbered index row, matching the site's editorial job-card language ---------- */
.grid--5 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.about-aud { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: aud; }
.about-aud__card { counter-increment: aud; position: relative; display: grid; gap: 8px; align-content: start; background: #fff; border: 0; border-radius: 2px; padding: 22px 20px 18px; transition: background .15s, color .15s; }
.about-aud__card::before { content: counter(aud, decimal-leading-zero); position: absolute; top: 16px; right: 18px; font: 800 .8125rem/1 var(--cc-font-display); color: var(--cc-line-strong); }
.about-aud__card--student:hover { background: var(--cc-navy); }
.about-aud__card--intern_coop:hover { background: var(--cc-spark); }
.about-aud__card--graduate:hover { background: var(--cc-teal); }
.about-aud__card--early_career:hover { background: var(--cc-orange); }
.about-aud__card--skilled:hover { background: #a3860a; }
.about-aud__card:hover::before { color: color-mix(in srgb, #fff 35%, transparent); }
.about-aud__card:hover h3 a, .about-aud__card:hover p { color: #fff; }
.about-aud__card--intern_coop:hover::before, .about-aud__card--early_career:hover::before { color: color-mix(in srgb, var(--cc-ink) 35%, transparent); }
.about-aud__card--intern_coop:hover h3 a, .about-aud__card--intern_coop:hover p,
.about-aud__card--early_career:hover h3 a, .about-aud__card--early_career:hover p { color: var(--cc-ink); }
.about-aud__card h3 { margin: 0; }
.about-aud__card h3 a { text-decoration: none; }
.about-aud__card h3 a::after { content: ""; position: absolute; inset: 0; }
.about-aud__card p { margin: 0; font-size: .9375rem; color: var(--kds-fg-muted); }
.about-aud__card .aud { justify-self: start; margin-top: 4px; }

/* ---------- who it's for: a CSS-only tabbed panel (progressive: no JS needed, radios drive the state) ---------- */
.about-tabs { scroll-margin-top: calc(var(--cc-header-h) + 52px); }
.about-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.about-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--kds-border); margin-bottom: 28px; }
.about-tabs__nav label { cursor: pointer; padding: 14px 18px; font: 700 .9375rem/1 var(--cc-font-display); color: var(--kds-fg-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.about-tabs__nav label:hover { color: var(--cc-navy); }
.about-tabs__body { display: grid; gap: 28px; }
.about-tabs__panel { display: none; max-width: 62ch; }
.about-tabs__aside-card { background: var(--cc-navy-50); border-radius: var(--kds-radius-lg); padding: 22px; display: grid; gap: 14px; }
.about-tabs__aside-card .eyebrow { margin: 0; }
.about-tabs__aside-card dl { margin: 0; display: grid; gap: 8px; }
.about-tabs__aside-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--kds-border); font-size: .9375rem; }
.about-tabs__aside-card dt { color: var(--kds-fg-muted); }
.about-tabs__aside-card dd { margin: 0; font-weight: 700; color: var(--cc-navy); }
@media (min-width: 1024px) {
  .about-tabs__body { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }
  .about-tabs__aside { position: sticky; top: calc(var(--cc-header-h) + 68px); }
}
#tab-employers:checked ~ .about-tabs__nav label[for="tab-employers"],
#tab-consultants:checked ~ .about-tabs__nav label[for="tab-consultants"],
#tab-seekers:checked ~ .about-tabs__nav label[for="tab-seekers"] { color: var(--cc-navy); border-bottom-color: var(--cc-red-700); }
#tab-employers:checked ~ .about-tabs__body .about-tabs__panel--employers,
#tab-consultants:checked ~ .about-tabs__body .about-tabs__panel--consultants,
#tab-seekers:checked ~ .about-tabs__body .about-tabs__panel--seekers { display: block; }
.about-tabs__panel h4 { margin-top: 1.4em; }

/* ---------- how it works: a two-panel split (post a job / find a job), not two plain cards ---------- */
.about-flow__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.about-flow__panel { background: var(--cc-surface); border-radius: 2px; overflow: hidden; }
.about-flow__panel--alt { background: var(--cc-orange-100); }
.about-flow__head { padding: 16px 24px; font: 800 1.0625rem/1 var(--cc-font-display); color: #fff; background: var(--cc-navy); }
.about-flow__panel--alt .about-flow__head { background: var(--cc-orange-700); }
.about-flow__panel .about-steps__list { padding: 24px; }
@media (min-width: 768px) { .about-flow__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- how it works (numbered lists inside the split panels) ---------- */
.about-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.about-steps__list li { position: relative; padding-left: 44px; counter-increment: step; }
.about-steps__list li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cc-navy); font: 700 .9rem/1 var(--cc-font-display); }
.about-steps__list strong { color: var(--cc-navy); }

/* ---------- commitment: a numbered tinted tile grid, not bordered cards ---------- */
.about-commit-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; grid-template-columns: 1fr; background: var(--kds-border); }
.about-commit-tile { position: relative; background: var(--cc-surface); padding: 24px 22px; display: grid; gap: 6px; align-content: start; }
.about-commit-tile__n { font: 800 1.5rem/1 var(--cc-font-display); color: var(--cc-line-strong); }
.about-commit-tile--a .about-commit-tile__n { color: var(--cc-navy); opacity: .5; }
.about-commit-tile--b .about-commit-tile__n { color: var(--cc-red-700); opacity: .5; }
.about-commit-tile--c .about-commit-tile__n { color: var(--cc-teal); opacity: .5; }
.about-commit-tile--d .about-commit-tile__n { color: var(--cc-orange); opacity: .5; }
.about-commit-tile h3 { margin: 0; }
.about-commit-tile p { margin: 0; font-size: .9375rem; color: var(--kds-fg-muted); }
@media (min-width: 640px) { .about-commit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-commit-grid { grid-template-columns: repeat(4, 1fr); } }
.about-cite { margin-top: 28px; padding: 16px 18px; border-left: 4px solid var(--cc-teal); background: var(--cc-teal-100); border-radius: 0 12px 12px 0; max-width: 72ch; }
.about-cite h3 { margin: 0 0 6px; font-size: .9375rem; }
.about-cite p { margin: 0; font-size: .9rem; }
.about-cite q { font-style: italic; }

/* FAQ: shared "Need to know" component, see public/css/landing.css .needknow* — no page-specific rules needed here. */

/* ---------- closing CTA band (inside .section) ---------- */
.cta-band { display: grid; gap: 16px; align-items: center; }
.cta-band h2, .cta-band p { margin: 0; }
.cta-band p { margin-top: 6px; max-width: 60ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-band__actions .kds-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .cta-band__actions .kds-btn { flex: 0 0 auto; } }
@media (min-width: 768px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }