/* Programmes page - page-specific layout only.
 *
 * Everything that could be reused on another page already lives in styles.css or css/shared.css
 * and is used from there: .phero, .strip, .mcard, .steps, .band--forest, .band--sage, .dtable,
 * .facts, .disc, .notice, .tiles-mini, .cta, .grid-3. What is left here is the handful of
 * arrangements only this page has: the programme card's overlapping icon, the
 * programme-versus-campaign explainer, the approach band's copy/steps split, the story trio,
 * the India map block and the support cards.
 *
 * This file loads AFTER styles.css and shared.css and only ADDS selectors. Every class below
 * starts with p- or is scoped under one that does, so nothing here can reach the home page.
 */

/* ------------------------------------------------------------------ programme area cards
   .mcard from shared.css does the work; the icon disc that straddles the photograph's bottom
   edge and the funding line under the facts are the only additions. */
.pcard .mcard__body { position: relative; padding-top: 38px; }
.pcard__disc { position: absolute; top: -26px; left: 22px; width: 54px; height: 54px; border: 3px solid var(--warm-white); box-shadow: var(--shadow); }
.pcard__disc .icon { width: 24px; height: 24px; }
.pcard__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 2px; }
.pcard__facts .facts__value { font-size: 1.05rem; }
.pcard__fund { display: grid; gap: 7px; margin-top: 2px; }
.pcard__fund .bar { height: 9px; background: var(--sage); }
.pcard__pct { font-size: .82rem; color: var(--muted); }
.pcard__pct strong { color: var(--forest); font-variant-numeric: tabular-nums; }
.pcard .mcard__foot { padding-top: 2px; }

/* the no-JavaScript line stands in for all three cards, so it spans the whole row */
[data-role="programmes"] > .empty { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ programme vs campaign
   Two short columns on a tinted panel: the client asked for the difference in plain words. */
.pdiff { margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); background: var(--sage-2); border: 1px solid var(--sage-3); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 34px); }
.pdiff__col { min-width: 0; }
.pdiff__col .disc { margin-bottom: 12px; }
.pdiff__col h3 { margin: 0 0 6px; }
.pdiff__col p { margin: 0; color: var(--muted); font-size: .95rem; }
.pdiff__col .link-btn { padding-bottom: 0; }
@media (max-width: 767px) { .pdiff { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ approach band
   Copy on the left, the four numbered steps on the right, the way the design has it. */
.approach { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.approach__copy h2 { margin-bottom: .4em; }
.approach__copy p { max-width: 38ch; margin-bottom: 22px; }
@media (max-width: 1099px) { .approach { grid-template-columns: 1fr; } .approach__copy p { max-width: 56ch; } }

/* ------------------------------------------------------------------ evidence table
   The indicator bar sits in its own cell and must not stretch the row. */
.ptable-meter { display: grid; gap: 5px; min-width: 150px; }
.ptable-meter .bar { height: 9px; background: var(--sage); width: 100%; }
.ptable-meter__text { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ptable-meter__text strong { color: var(--forest); }
.ptable-meter__text .pover { color: var(--leaf-dark); }
@media (max-width: 699px) {
  .dtable td[data-label="Against target"] { display: block; text-align: left; }
  .dtable td[data-label="Against target"]::before { display: block; margin-bottom: 6px; }
  .ptable-meter { min-width: 0; }
}

/* ------------------------------------------------------------------ stories trio
   One featured card beside two stacked row cards; one column from tablet down. */
.pstories { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.pstories__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); min-width: 0; }
.pstories__note { margin: 18px 0 0; }
/* the side cards are stretched to match the feature card's height, so their content is
   centred rather than pinned top and bottom with a hole in the middle */
.pstories__side .mcard__body { justify-content: center; gap: 8px; }
.pstories__side .mcard__foot { margin-top: 8px; }
.pstories__side .pill { align-self: flex-start; }
@media (max-width: 899px) {
  .pstories { grid-template-columns: 1fr; }
  .pstories__side { grid-template-rows: auto auto; }
  .pstories__side .mcard__body { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ where we work
   Copy, map, presence card. The map is decoration over a list that always carries the facts. */
.pmap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.pmap__copy h2 { margin-bottom: .4em; }
.pmap__copy p { color: var(--muted); max-width: 40ch; }
.pmap__figure { min-width: 0; }
.pmap__svg { display: grid; justify-items: center; }
.pmap__svg svg { width: min(100%, 280px); height: auto; overflow: visible; }
.pmap__land { fill: var(--sage); stroke: var(--leaf); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.pmap__shadow { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .16; }
.pmap__halo { fill: var(--yellow); opacity: .18; }
.pmap__ring { fill: none; stroke: var(--forest); stroke-width: 1.8; opacity: .4; }
.pmap__pin { fill: var(--yellow); stroke: var(--forest); stroke-width: 1.8; stroke-linejoin: round; }
.pmap__pin-dot { fill: var(--forest); }
.pmap__legend { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.pmap__key { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); border: 1.5px solid var(--forest); flex: none; }
.pmap__list { list-style: none; margin: 20px 0 0; display: grid; gap: 10px; }
.pmap__list li { display: flex; align-items: center; gap: 12px; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.pmap__list .disc { width: 36px; height: 36px; }
.pmap__list .disc .icon { width: 18px; height: 18px; }
.pmap__where { min-width: 0; }
.pmap__where strong { display: block; color: var(--forest); font-size: .95rem; }
.pmap__where span { display: block; font-size: .8rem; color: var(--muted); }
.pmap__card { background: var(--warm-white); }
.pmap__card h3 { margin-bottom: 16px; }
.pmap__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.pmap__card .small { margin-bottom: 4px; }
.pmap__card .link-btn { padding-bottom: 0; }
@media (max-width: 1099px) {
  .pmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmap__copy { grid-column: 1 / -1; }
  .pmap__copy p { max-width: 62ch; }
}
@media (max-width: 767px) {
  .pmap { grid-template-columns: 1fr; }
  .pmap__svg svg { width: min(100%, 210px); }
}

/* ------------------------------------------------------------------ support cards */
.penable { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.penable h3 { margin: 0; font-size: 1.1rem; }
.penable__prog { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf-dark); }
.penable p { margin: 0; color: var(--muted); font-size: .93rem; flex: 1; }
.penable__cost { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); }
.penable__cost strong { font-size: 1.5rem; font-weight: 800; color: var(--forest); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.penable__cost span { font-size: .8rem; color: var(--muted); }
.penable .link-btn { padding-bottom: 0; }
.psupport__note { margin-top: clamp(20px, 2.4vw, 30px); }

/* ------------------------------------------------------------------ transparency row
   Four tiles here rather than the home page's six, so the row needs its own track count. */
.ptrans .tiles-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ptrans__note { margin: 16px 0 0; }
@media (max-width: 899px) { .ptrans .tiles-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ptrans .tiles-mini { grid-template-columns: 1fr; } }