/* Programme detail page - page-specific layout only.
 *
 * The hero, strip, cards, bands, bars, donut and CTA all come from styles.css and
 * css/shared.css. What is here is the handful of arrangements only this page has: the
 * indicator cards, the campaign grid, the fund panel (a light island on the forest band),
 * the "other programmes" links and the chooser / not-found state.
 *
 * Loads after styles.css and shared.css; every selector is new and prefixed pg-, so nothing
 * here can reach the home page or any other page's markup.
 */

/* ------------------------------------------------------------------ what it does */
.pgcta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pgnote { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 70ch; }

/* ------------------------------------------------------------------ indicators
   Two, three or one - the grid is sized to the count so a short row is never a wide,
   lonely pair of cards on a 1920 projector. */
.pgmetrics { display: grid; gap: var(--gap); align-items: stretch; }
.pgmetrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgmetrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; }
.pgmetrics--1 { grid-template-columns: minmax(0, 460px); }
@media (max-width: 1023px) { .pgmetrics--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .pgmetrics, .pgmetrics--3, .pgmetrics--2, .pgmetrics--1 { grid-template-columns: 1fr; max-width: none; } }

.pgmetric { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pgmetric .chip { align-self: flex-start; }
.pgmetric__title { margin: 0; font-size: 1.05rem; }
.pgmetric__nums { margin: auto 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pgmetric__nums strong { font-size: clamp(1.8rem, 1.3rem + 1vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--forest); font-variant-numeric: tabular-nums; }
.pgmetric__nums span { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pgmetric .bar { height: 10px; background: var(--sage); }
.pgmetric__foot { margin: 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pgmetric__foot strong { color: var(--forest); }
.pgmetric__foot strong.pgmet { color: var(--leaf-dark); }

/* ------------------------------------------------------------------ campaigns */
.pgcamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.pgcamps .mcard__meta { margin-top: 2px; }
.pgcamps .meterline { margin-bottom: 2px; }
@media (max-width: 1023px) { .pgcamps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the fund
   A light card dropped on the forest band. shared.css already restores light text on
   .card--light; the donut's own greys are the only thing it does not reach, so they are
   put back here rather than by editing the shared file. */
.pgfund { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 52px); align-items: center; padding: clamp(24px, 2.6vw, 38px); }
.pgfund__copy { min-width: 0; }
.pgfund__name { margin: 12px 0 6px; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
.pgfund__purpose { margin: 0 0 18px; max-width: 52ch; }
.pgfund__facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 20px; }
.pgfund__meter { display: grid; gap: 7px; margin-bottom: 4px; }
.pgfund__meter .bar { height: 10px; }
.pgfund__meter-text { margin: 0; font-size: .85rem; color: var(--muted); }
.pgfund__meter-text strong { color: var(--forest); font-variant-numeric: tabular-nums; }
.pgfund__chart { min-width: 0; }
.pgfund .donut { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
.pgfund .donut__legend { width: 100%; max-width: 320px; }
.pgfund .donut__track { stroke: var(--sage-2); }
.pgfund .donut__label { color: var(--forest); }
.pgfund .donut__value { color: var(--muted); }
.pgfund .donut__swatch { box-shadow: inset 0 0 0 1px rgba(8, 39, 29, .14); }
.pgfund .link-btn { padding-bottom: 0; }
@media (max-width: 899px) { .pgfund { grid-template-columns: 1fr; } .pgfund__chart { justify-self: center; } }

/* ------------------------------------------------------------------ the other programmes */
.pgothers__title { margin-bottom: 18px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.pgothers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pgother { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.pgother:hover { border-color: var(--leaf); transform: translateY(-3px); box-shadow: var(--shadow); }
.pgother:hover .pgother__arrow { transform: translateX(4px); }
.pgother__body { min-width: 0; flex: 1; }
.pgother__body strong { display: block; color: var(--forest); font-size: 1.02rem; }
.pgother__body span { display: block; font-size: .88rem; color: var(--muted); }
.pgother__arrow { color: var(--leaf); flex: none; width: 22px; height: 22px; transition: transform var(--dur-2) var(--ease-out); }
@media (max-width: 767px) { .pgothers { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ chooser / not found */
.pgpick h1 { max-width: 18ch; }
.pgpick .lead { margin-bottom: clamp(26px, 3vw, 40px); }
.pgpick__card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.pgpick__card:hover { border-color: var(--leaf); transform: translateY(-3px); box-shadow: var(--shadow); }
.pgpick__card strong { color: var(--forest); font-size: 1.05rem; }
.pgpick__card > span:last-child { font-size: .9rem; color: var(--muted); }
.pgpick__back { margin: clamp(24px, 3vw, 36px) 0 0; }