/* PNGCORE — About PNGCORE (/about/, page-about.php) and the About-section components shared with
   Community impact (page-community-programs.php loads this file through the pc_template_css filter).
   Scope: body.pc-tpl-about / body.pc-tpl-community (set by the templates) and .pc-about-* classes. Tokens only. */

/* ---------- shared: list grids, icon cards ---------- */
.pc-about-list{list-style:none;margin:0;padding:0}
.pc-about-card{position:relative;height:100%}
.pc-about-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pc-s4)}
.pc-about-card-num{font-size:var(--pc-fs-meta);font-weight:700;font-stretch:112%;letter-spacing:.08em;line-height:1;color:var(--pc-muted);font-variant-numeric:tabular-nums lining-nums;padding-top:4px}
.pc-about-card-title{font-size:var(--pc-fs-h4);line-height:1.3;margin:0}
.pc-about-card-title a{color:var(--pc-ink);text-decoration:none}
.pc-about-card-title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.pc-about-card-title a:focus-visible{outline:none;box-shadow:none}
.pc-about-card:has(.pc-about-card-title a:focus-visible){outline:2px solid var(--pc-focus);outline-offset:2px;box-shadow:0 0 0 4px var(--pc-focus-halo)}
.pc-about-card p{margin:0;font-size:var(--pc-fs-small);line-height:1.55;color:var(--pc-muted)}
.pc-about-card .pc-chip-icon{flex:none}
.pc-about-card-more{margin-top:auto;padding-top:var(--pc-s1);font-size:var(--pc-fs-small)}
.pc-about-card.is-linked{transition:transform var(--pc-dur-2) var(--pc-ease),box-shadow var(--pc-dur-2) var(--pc-ease),border-color var(--pc-dur-2) var(--pc-ease)}
.pc-about-card.is-linked:hover{transform:translateY(-3px);box-shadow:var(--pc-shadow);border-color:var(--pc-brand-100)}
.pc-about-card.is-linked:hover .pc-about-card-title a{color:var(--pc-brand-800)}
.pc-about-card.is-linked:hover .pc-about-card-more .pc-icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.pc-about-card.is-linked:hover{transform:none}}
/* source line under a card's figures (pc_about_source_line(); the shared .pc-source look at card scale). Its links sit
   above the stretched heading link (z-index 1), so they stay clickable and focusable on their own. */
.pc-about-card .pc-about-card-source{position:relative;z-index:2;margin:0;font-size:var(--pc-fs-meta);line-height:1.5;color:var(--pc-muted)}
.pc-about-card-source a{display:inline-block;position:relative;z-index:2;min-height:24px;max-width:100%;color:inherit}
.pc-about-card-source a:hover{color:var(--pc-brand-800)}
.pc-about-link-tail{white-space:nowrap}

/* wide cards (two columns): icon beside the text from 720 px */
@media (min-width:720px){
  .pc-about-card--wide{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--pc-s5);row-gap:var(--pc-s3)}
  .pc-about-card--wide > *{grid-column:2}
  .pc-about-card--wide > .pc-about-card-head{grid-column:1;grid-row:1 / span 3}
  .pc-about-card--wide .pc-about-card-more{align-self:end;padding-top:var(--pc-s2)}
  .pc-about-card--wide.has-source{grid-template-rows:auto auto auto 1fr}
  .pc-about-card--wide.has-source > .pc-about-card-head{grid-row:1 / span 4}
}
/* phones: icon beside the title, text full width below (saves a row per card) */
@media (max-width:719px){
  .pc-about-what .pc-about-card,.pc-about-card--wide{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--pc-s4);row-gap:var(--pc-s3);align-items:center}
  .pc-about-what .pc-about-card > *,.pc-about-card--wide > *{grid-column:1 / -1}
  .pc-about-what .pc-about-card > .pc-about-card-head,.pc-about-card--wide > .pc-about-card-head{grid-column:1}
  .pc-about-what .pc-about-card > .pc-about-card-title,.pc-about-card--wide > .pc-about-card-title{grid-column:2}
}
.pc-about-governance-grid,.pc-community-programme-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.pc-about-governance-grid,.pc-community-programme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- on this page ---------- */
.pc-about-anchor-nav{padding:var(--pc-s2) 0}
.pc-about-anchor-nav .pc-chips{gap:var(--pc-s2);padding:2px}
.pc-about-anchor-nav .pc-chip{min-height:44px}
@media (max-width:1199px){.pc-about-anchor-nav .pc-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:32px}}
/* sticky under the header from 960 px (html scroll-padding-top clears the header; section padding clears this bar) */
@media (max-width:959px){.pc-about-anchor-nav{position:static}}

/* ---------- who we are ---------- */
.pc-about-who-grid{display:grid;gap:var(--pc-s7) var(--pc-gap);align-items:start}
@media (min-width:960px){.pc-about-who-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:center}}
.pc-about-who-text h2{margin-bottom:var(--pc-s5)}
.pc-about-who-prose > p:first-child{font-size:var(--pc-fs-lead);line-height:var(--pc-lh-lead);color:var(--pc-ink)}
.pc-about-purpose{margin:var(--pc-s6) 0 0;max-width:var(--pc-measure)}
.pc-about-purpose summary{min-height:44px}
.pc-about-purpose .pc-details-body p{margin:0}
.pc-about-intent{position:relative;overflow:hidden;margin:0;padding:clamp(32px,4vw,56px);border-radius:var(--pc-r-xl);background:var(--pc-brand-900);isolation:isolate}
.pc-about-intent::after{content:"";position:absolute;inset:auto -20% -55% 35%;height:130%;background:radial-gradient(closest-side,rgba(147,213,0,.16),transparent 70%);pointer-events:none;z-index:-1}
.pc-about-intent-mark{width:44px;height:44px;color:var(--pc-accent);stroke-width:1.5;margin-bottom:var(--pc-s5)}
.pc-about-intent blockquote{margin:0}
.pc-about-intent blockquote p{margin:0;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:600;line-height:1.4;letter-spacing:-.01em;color:#fff;text-wrap:pretty}
.pc-about-intent figcaption{margin-top:var(--pc-s5);padding-top:var(--pc-s4);border-top:1px solid var(--pc-on-dark-line);font-size:var(--pc-fs-eyebrow);font-weight:700;font-stretch:112%;letter-spacing:var(--pc-track-eyebrow);text-transform:uppercase;color:var(--pc-accent)}

/* ---------- what we do ---------- */
.pc-about-what-grid{gap:var(--pc-s5)}

/* ---------- values (navy band) ---------- */
.pc-about-values{position:relative;overflow:hidden;isolation:isolate}
.pc-about-values::before{content:"";position:absolute;inset:-40% 50% auto -15%;height:120%;background:radial-gradient(closest-side,rgba(0,130,203,.28),transparent 70%);pointer-events:none;z-index:-1}
.pc-about-values-grid{gap:var(--pc-s4)}
.pc-about-values .pc-about-card{background:rgba(255,255,255,.06);border-color:var(--pc-on-dark-line)}
.pc-about-values .pc-about-card-title{color:#fff}
.pc-about-values .pc-about-card p{color:var(--pc-on-dark-muted)}
.pc-about-values .pc-about-card-head{align-items:center;justify-content:flex-start;gap:var(--pc-s3)}
.pc-about-values .pc-about-card-num{display:inline-flex;align-items:center;min-width:2ch;padding:0;font-size:.875rem;font-stretch:100%;line-height:1;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em;color:var(--pc-accent)}
@media (min-width:720px) and (max-width:1199px){
  .pc-about-values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pc-about-values-grid > li{grid-column:span 2}
  .pc-about-values-grid > li:nth-child(4){grid-column:2 / span 2}
}
@media (min-width:1200px){.pc-about-values-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:719px){
  .pc-about-values .pc-about-card{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--pc-s3);padding:var(--pc-s5)}
  .pc-about-values .pc-about-card > *{grid-column:1}
  .pc-about-values .pc-about-card-head{grid-column:1;grid-row:auto;flex-direction:row}
  .pc-about-values .pc-chip-icon{width:44px;height:44px;border-radius:var(--pc-r)}
  .pc-about-values .pc-chip-icon .pc-icon{width:22px;height:22px}
}

/* ---------- strategic goals and 2026 priorities ---------- */
.pc-about-strategy-grid{display:grid;gap:var(--pc-s7) var(--pc-gap);align-items:start}
@media (min-width:960px){.pc-about-strategy-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px)}}
.pc-about-goals-col .pc-lead{margin:var(--pc-s3) 0 0;color:var(--pc-muted)}
.pc-about-goals{list-style:none;margin:var(--pc-s6) 0 0;padding:0;display:grid;gap:var(--pc-s3);grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr))}
.pc-about-goals li{display:flex;align-items:center;gap:var(--pc-s3);min-height:52px;margin:0;padding:var(--pc-s3) var(--pc-s4);background:var(--pc-surface);border:1px solid var(--pc-line);border-radius:var(--pc-r);font-size:var(--pc-fs-small);font-weight:600;line-height:1.35;color:var(--pc-ink)}
.pc-about-goals .pc-icon{width:20px;height:20px;color:var(--pc-brand-700);stroke-width:2.25}
@media (max-width:719px){
  .pc-about-goals{display:flex;flex-wrap:wrap;gap:var(--pc-s2)}
  .pc-about-goals li{min-height:44px;padding:var(--pc-s2) var(--pc-s4) var(--pc-s2) var(--pc-s3);border-radius:var(--pc-r-pill);gap:var(--pc-s2)}
  .pc-about-goals .pc-icon{width:18px;height:18px}
}
.pc-about-priorities{position:relative;overflow:hidden;padding:clamp(24px,3vw,40px);border-radius:var(--pc-r-xl);background:var(--pc-surface)}
.pc-about-priorities::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--pc-brand)}
.pc-about-priorities h3{font-size:var(--pc-fs-h4);margin:0 0 var(--pc-s5)}
.pc-about-priority-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--pc-s4)}
.pc-about-priority-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--pc-s4);align-items:start;margin:0}
.pc-about-priority-list .pc-chip-icon{width:44px;height:44px;border-radius:var(--pc-r);background:#fff}
.pc-about-priority-list .pc-chip-icon .pc-icon{width:22px;height:22px}
.pc-about-priority-list p{margin:0;padding-top:10px;font-size:var(--pc-fs-small);line-height:1.5;color:var(--pc-text)}
.pc-about-priority-list strong{color:var(--pc-ink)}
.pc-about-priorities .pc-source{margin-top:var(--pc-s5);padding-top:var(--pc-s4);border-top:1px solid var(--pc-line)}

/* ---------- history ---------- */
.pc-about-history-grid{display:grid;gap:var(--pc-s7) var(--pc-gap);align-items:start}
@media (min-width:960px){
  .pc-about-history-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px)}
  .pc-about-history-intro{position:sticky;top:calc(var(--pc-header-h) + 96px)}
}
.pc-about-history-lead p{margin:0;font-size:var(--pc-fs-lead);line-height:var(--pc-lh-lead);color:var(--pc-text)}
.pc-about-history-note{margin-top:var(--pc-s6);padding-top:var(--pc-s5);border-top:1px solid var(--pc-line-strong)}
.pc-about-history-note p{margin:0;font-size:var(--pc-fs-small);line-height:1.55;color:var(--pc-muted)}
.pc-about-timeline .pc-timeline-item{padding-bottom:var(--pc-s6)}
.pc-about-timeline .pc-timeline-item:last-child{padding-bottom:0}
.pc-about-timeline .pc-timeline-item p{color:var(--pc-text);font-size:var(--pc-fs-body);line-height:1.55}
.pc-about-history .pc-timeline-item::before{box-shadow:0 0 0 4px var(--pc-surface)}
.pc-about-history .pc-timeline::before{background:var(--pc-line-strong)}
.pc-about-timeline .pc-timeline-year time{font:inherit;color:inherit}
@media (min-width:720px){
  .pc-about-timeline .pc-timeline-item{grid-template-columns:72px 1fr}
  .pc-about-timeline::before{left:95px}
  .pc-about-timeline .pc-timeline-item::before{left:88px}
  .pc-about-timeline .pc-timeline-item > :not(.pc-timeline-year){padding-left:var(--pc-s7)}
}
.pc-about-timeline .pc-timeline-item:last-child::after{content:"";position:absolute;left:7px;top:24px;bottom:-8px;width:2px;background:var(--pc-surface)}
@media (min-width:720px){.pc-about-timeline .pc-timeline-item:last-child::after{left:95px}}
.pc-about-rebrand{display:flex;align-items:center;gap:var(--pc-s3);margin-top:var(--pc-s4);max-width:480px}
.pc-about-rebrand-logo{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:88px;padding:var(--pc-s3) var(--pc-s4);background:#fff;border:1px solid var(--pc-line);border-radius:var(--pc-r)}
.pc-about-rebrand-logo img{width:auto;height:auto;max-height:56px;max-width:100%}
.pc-about-rebrand-arrow{width:22px;height:22px;color:var(--pc-brand-700)}

/* ---------- community impact ---------- */
.pc-about-community-grid .pc-card-excerpt{font-size:var(--pc-fs-small);color:var(--pc-muted)}
.pc-about-photo-card .pc-card-title{font-size:var(--pc-fs-h4)}

/* CTA panel: .pc-dark on the wrapper paints var(--pc-bg) behind the rounded panel (square corners); keep it clear */
.pc-tpl-about .pc-cta--panel,.pc-tpl-community .pc-cta--panel{background:transparent}
/* the CTA panel follows the surface band directly */
.pc-tpl-about .pc-about-community + .pc-section{padding-top:var(--pc-section)}

/* ---------- utility bar on very narrow phones (local work-around; proposed for components.css in
   build/shared-requests/about.md): below 390 px the announcement's label, link and dismiss button no longer fit
   (page scrollWidth 387 at 360), so the ellipsised text is dropped and the label may shorten with an ellipsis. ---------- */
@media (max-width:389px){
  .pc-tpl-about .pc-utility-text,.pc-tpl-community .pc-utility-text{display:none}
  .pc-tpl-about .pc-utility-note strong,.pc-tpl-community .pc-utility-note strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* Meeting review: four focused sections with generous space. */
.pc-tpl-about .pc-section{padding-block:clamp(56px,7vw,96px)}
.pc-tpl-about .pc-section-head{margin-bottom:36px}
.pc-tpl-about .pc-about-what-grid{gap:24px}
.pc-tpl-about .pc-about-card{box-shadow:none;padding:32px}
.pc-tpl-about .pc-about-values-grid{gap:32px}
.pc-tpl-about .pc-about-values-grid .pc-about-card{padding:0;border:0;background:none}
.pc-tpl-about .pc-about-who-prose{max-width:60ch}
.pc-tpl-about .pc-about-intent{box-shadow:none}
@media(min-width:800px){.pc-tpl-about .pc-about-what-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* October review: full-width mission block and compact approved vacancy listings. */
.pc-tpl-about .pc-about-who-grid{grid-template-columns:minmax(0,1fr)}
.pc-about-mission-card{padding:clamp(28px,4vw,56px);border-radius:var(--pc-r-xl);background:var(--pc-brand-900);border-top:4px solid var(--pc-accent)}
.pc-about-mission-card h2{color:var(--pc-accent);margin:0 0 var(--pc-s5)}
.pc-about-mission-card p{color:#fff;font-size:var(--pc-fs-lead);line-height:var(--pc-lh-lead);margin:0;max-width:70ch}
.pc-about-vacancies{display:grid;gap:var(--pc-s4);margin-top:var(--pc-s6)}
.pc-about-vacancy{display:flex;align-items:center;justify-content:space-between;gap:var(--pc-s5);padding:var(--pc-s5);background:var(--pc-surface);border:1px solid var(--pc-line);border-radius:var(--pc-r)}
.pc-about-vacancy h3{font-size:var(--pc-fs-h4);margin:0 0 var(--pc-s2)}
.pc-about-vacancy p{margin:var(--pc-s2) 0 0}
.pc-about-vacancy a{flex:none;min-height:44px}
@media(max-width:719px){.pc-about-vacancy{align-items:flex-start;flex-direction:column}}