/* ============================================================
   Website V2 — public content pages (About / Universities /
   Contact / Blog / Events / Ambassadors). Extends tokens.css +
   components.css; loaded only by pages that push it.
   ============================================================ */

/* ---- Page hero: compact navy band under the site header ---- */
.page-hero { background: var(--grad-navy); color: var(--c-on-dark); padding: calc(72px + var(--sp-10)) 0 var(--sp-10); }
.page-hero .eyebrow { color: #6FD0FF; }
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-extrabold); color: #fff; margin-top: var(--sp-3); max-width: 22ch; }
.page-hero__lead { font-size: var(--fs-body-lg); color: var(--c-on-dark-muted); line-height: var(--lh-body); margin-top: var(--sp-5); max-width: 58ch; }
.page-hero--tight { padding: calc(72px + var(--sp-7)) 0 var(--sp-7); }

/* ---- Prose blocks (readable measure) ---- */
.prose { max-width: 68ch; }
.prose p { margin-top: var(--sp-4); line-height: var(--lh-body); color: var(--c-ink); }
.prose p:first-child { margin-top: 0; }

/* ---- Value / feature cards ---- */
.value-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.value-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-xs); }
.value-card h3 { font-size: var(--fs-h4); color: var(--c-navy); font-weight: var(--fw-bold); }
.value-card p { margin-top: var(--sp-2); color: var(--c-muted); font-size: var(--fs-small); line-height: 1.55; }
.value-card__icon { width: 26px; height: 26px; color: var(--c-green-600); margin-bottom: var(--sp-3); }

/* ---- Timeline (About) ---- */
.timeline { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.timeline__item { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-4); align-items: baseline; }
.timeline__year { font-weight: var(--fw-extrabold); color: var(--c-primary); font-size: var(--fs-body-lg); }
.timeline__item p { color: var(--c-ink); line-height: 1.55; }

/* ---- University cards ---- */
.uni-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.uni-tile { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-xs); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.uni-tile:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.uni-tile__logo { height: 56px; display: flex; align-items: center; }
.uni-tile__logo img { max-height: 56px; max-width: 160px; object-fit: contain; }
.uni-tile__logo--fallback { width: 56px; border-radius: var(--r-md); background: var(--c-surface-3); color: var(--c-primary); font-weight: var(--fw-extrabold); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.uni-tile__name { font-weight: var(--fw-bold); color: var(--c-navy); font-size: var(--fs-body-lg); line-height: 1.3; }
.uni-tile__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: 13px; color: var(--c-muted); }
.uni-tile__meta .pill { font-size: 12px; padding: .2rem .6rem; }
.uni-tile__cta { margin-top: auto; font-weight: var(--fw-semibold); color: var(--c-primary); font-size: var(--fs-small); }

/* ---- Facts grid (university detail) ---- */
.facts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fact { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); }
.fact .k { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.fact .v { margin-top: 4px; font-weight: var(--fw-bold); color: var(--c-navy); }

/* ---- Filter bar ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.filter-bar .field { display: grid; gap: 6px; }
.filter-bar label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.filter-bar input[type="search"], .filter-bar select { min-height: 44px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: 0 var(--sp-4); font: inherit; color: var(--c-ink); background: #fff; }
.filter-bar input[type="search"]:focus, .filter-bar select:focus { outline: none; border-color: var(--c-vibrant); box-shadow: var(--sh-focus); }

/* ---- Forms (contact & co) ---- */
.form-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-7); box-shadow: var(--sh-sm); }
.form-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field > label { font-weight: var(--fw-semibold); color: var(--c-navy); font-size: var(--fs-small); }
.field .hint { font-size: 12.5px; color: var(--c-muted); }
.field input, .field select, .field textarea { min-height: 46px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: 10px var(--sp-4); font: inherit; color: var(--c-ink); background: #fff; width: 100%; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-vibrant); box-shadow: var(--sh-focus); }
.field .error { color: #B3261E; font-size: 13px; font-weight: var(--fw-semibold); }
.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.field--consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--c-primary); }
.field--consent span { font-size: 13.5px; color: var(--c-muted); line-height: 1.5; }
/* Honeypot: moved out of flow, still focusable-hidden from humans. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Office cards (contact) ---- */
.office-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6); }
.office-card h3 { color: var(--c-navy); font-weight: var(--fw-bold); font-size: var(--fs-h4); }
.office-card address { font-style: normal; margin-top: var(--sp-3); color: var(--c-muted); line-height: 1.6; font-size: var(--fs-small); }
.office-card a { color: var(--c-primary); font-weight: var(--fw-semibold); }

/* ---- Content cards (blog / events) ---- */
.content-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.post-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.post-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--c-surface-3); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--c-primary); font-weight: var(--fw-extrabold); font-size: 24px; }
.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.post-card__kicker { display: flex; gap: var(--sp-3); align-items: center; font-size: 12.5px; color: var(--c-muted); font-weight: var(--fw-semibold); }
.post-card__title { font-weight: var(--fw-bold); color: var(--c-navy); font-size: var(--fs-body-lg); line-height: 1.35; }
.post-card__excerpt { color: var(--c-muted); font-size: var(--fs-small); line-height: 1.55; }
.post-card__cta { margin-top: auto; color: var(--c-primary); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: .25rem .7rem; font-size: 12px; font-weight: var(--fw-bold); }
.status-pill--upcoming { background: #E7F4E4; color: #2F5E14; }
.status-pill--past { background: var(--c-surface-3); color: var(--c-muted); }

/* ---- Article page ---- */
.article { max-width: 720px; }
.article__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; color: var(--c-muted); font-size: var(--fs-small); }
.article__body { margin-top: var(--sp-6); line-height: 1.7; color: var(--c-ink); overflow-wrap: break-word; }
.article__body h2, .article__body h3 { color: var(--c-navy); margin-top: var(--sp-6); }
.article__body p { margin-top: var(--sp-4); }
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.article__body table { display: block; overflow-x: auto; max-width: 100%; }

/* (Ambassador tiles live in components.css — shared with the homepage.) */

/* ---- Sections meta ---- */
.updated-note { font-size: 12.5px; color: var(--c-muted); }
.pager { display: flex; justify-content: center; margin-top: var(--sp-8); }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .page-hero__title { max-width: none; }
}

/* ===== Legal pages (/privacy, /terms) — quiet document typography ===== */
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--c-navy); margin-top: var(--sp-9); letter-spacing: var(--ls-tight); }
.legal h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--c-ink); margin-top: var(--sp-6); }
.legal p { margin-top: var(--sp-4); line-height: var(--lh-body); color: var(--c-ink); }
.legal ul { margin-top: var(--sp-4); padding-left: 1.25rem; display: grid; gap: var(--sp-2); }
.legal li { line-height: var(--lh-body); color: var(--c-ink); }
.legal a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }
.legal .legal__meta { margin-top: var(--sp-8); font-size: 13px; color: var(--c-muted); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }