/* =================================================================
   v3: v1 as the base, with picks from v2. Loads after main.css and v2.css.
   ================================================================= */

/* ---------- Hero: the three results arrive one by one ---------- */
.v3-proof-lines li { position: relative; }
.v3-proof-lines b span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  /* a short accent rule draws under each number as its line lands */
  .js .v3-proof-lines b { position: relative; }
  .js .v3-proof-lines b::after {
    content: ""; position: absolute; left: 0; right: 0.3em; bottom: -3px; height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: 0 50%;
    animation: v3-rule 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 650ms);
  }
}
@keyframes v3-rule { to { transform: scaleX(1); } }

/* ---------- Programs: compact accent panels, each with a photo ---------- */
.v3-programs .prog-title .section-bar { display: block; margin: 0; }
.v3-programs .prog-title .section-lede { margin-top: 16px; }
.prog-panel.pp-sm {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(20px, 2.4vw, 32px);
  min-height: 0; padding: clamp(20px, 2.2vw, 28px); align-items: stretch;
}
.pp-text { display: flex; flex-direction: column; gap: 12px; }
.pp-sm .mark { margin: 0 0 auto; padding-bottom: 12px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
.pp-sm p { font-size: 0.9875rem; }
.pp-photo { margin: 0; min-height: 200px; border-radius: var(--radius); overflow: hidden; background: rgba(21, 23, 31, 0.15); }
.pp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-content: center; background: transparent; }
.pp-faces img { aspect-ratio: 1; height: auto; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pp-photo img { transition: transform 600ms var(--ease-out); }
  .prog-panel.pp-sm:hover .pp-photo:not(.pp-faces) img { transform: scale(1.04); }
}
@media (max-width: 860px) {
  .prog-panel.pp-sm { grid-template-columns: 1fr; }
  .pp-photo:not(.pp-faces) { aspect-ratio: 16 / 9; min-height: 0; }
}
/* program pages: "Other programs" side by side */
.prog-panels-2 .prog-panel.pp-sm { grid-template-columns: 1fr; min-height: 0; }
.prog-panels-2 .pp-photo:not(.pp-faces) { aspect-ratio: 16 / 9; min-height: 0; }

/* ---------- AI tools index inside the v1 section ---------- */
.tools-sec .tool-index { margin-top: clamp(8px, 1.5vw, 20px); }

/* ---------- Career timeline: centred and roomier ---------- */
.v3-timeline .section-bar { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.v3-timeline .section-h { max-width: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); }
.v3-timeline .timeline-label { text-align: center; font-size: 1.125rem; margin-bottom: 28px; }
.v3-timeline .timeline-label-volunteer { margin-top: 72px; }
.v3-timeline .timeline-row { justify-content: center; gap: 36px 24px; }
.v3-timeline .timeline-item { width: 148px; }
.v3-timeline .timeline-year { font-size: 0.875rem; }
.v3-timeline .timeline-logo, .v3-timeline .timeline-badge { width: 84px; height: 84px; }
.v3-timeline .timeline-item::after { top: 67px; left: calc(50% + 42px); width: 88px; }
.v3-timeline .timeline-title { font-size: 0.9375rem; }
.v3-timeline .timeline-title span { font-size: 0.875rem; }
@media (max-width: 700px) {
  .v3-timeline .timeline-row { gap: 28px 12px; }
  .v3-timeline .timeline-item { width: 108px; }
  .v3-timeline .timeline-logo, .v3-timeline .timeline-badge { width: 64px; height: 64px; }
}