/* Initiative and Project pages (#126): templates/page-initiative.html, page-project.html.
   From design-source/initiative.html and project.html, scoped to the templates' .ceec-program.
   Loaded on those pages (inc/programs.php) and in the editor. */

/* ---------- hero ---------- */
.ceec-program .phero__init { margin-top:16px; }
/* initiative: the icon tile beside the label and the title */
.ceec-program--initiative .phero__init { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:20px; align-items:center; }
/* display:contents also on the editor's preview wrappers around the label, so the grid holds there too */
.ceec-program--initiative .program-head, .ceec-program--initiative .phero__init div:has(.program-head) { display:contents; }
.ceec-program--initiative .program-head .badge { grid-row:span 2; flex-shrink:0; height:76px; width:76px; border-radius:var(--radius-xl); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; }
.ceec-program--initiative .program-head .badge i { font-size:40px; color:var(--orange-soft); }
/* #120: the tile holds to the top, beside the label, so a title running to several lines does not
   leave it floating halfway down */
.ceec-program--initiative .program-head .badge { align-self:start; }
.ceec-program--initiative .program-head .eyebrow { align-self:end; }
.ceec-program--initiative .phero__init h1 { align-self:start; }
/* project: the label with the status pill on the right, the title below */
.ceec-program--project .program-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ceec-program--project .program-head .pill { margin-top:2px; }
.ceec-program .program-head .eyebrow { display:block; color:var(--orange-soft); }
.ceec-program .phero h1.wp-block-post-title { margin-top:6px; font-size:clamp(30px,4.4vw,46px); max-width:none; }
.ceec-program--project .phero h1.wp-block-post-title { font-size:clamp(32px,5vw,54px); }
/* a long title (over 60 characters, marked by inc/programs.php) is set smaller, so it stays a few
   lines and not a wall of display type (#120) */
.ceec-program .phero h1.wp-block-post-title.is-long { font-size:clamp(26px,3vw,36px); line-height:1.2; }
.ceec-program .phero__lead p { margin-top:18px; }
/* the excerpt block's "read more" field (editor only): not used here */
.ceec-program .phero__lead .wp-block-post-excerpt__more-text, .ceec-program .phero__lead .wp-block-post-excerpt__more-link { display:none; }
.ceec-program .phero__media { aspect-ratio:4/3.1; margin:0; }
/* hero figures: one that runs long is set smaller, so the figures share a line and the labels line up */
.ceec-program .phero__stats .n--long { font-size:clamp(18px,1.6vw,23px); line-height:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ceec-program .phero__media img { display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- two columns: the page body and the automatic sections, the sidebar ---------- */
.ceec-program .layout { display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
/* the columns never widen to fit a long unbroken word or URL in the page body: it breaks */
.ceec-program .program-main, .ceec-program .side { min-width:0; overflow-wrap:break-word; }
@media (max-width:900px){ .ceec-program .layout { grid-template-columns:1fr; } }
/* the sidebar is far shorter than the main column: it stays in view while scrolling */
/* (sticky without its own scroll box: a sidebar taller than the window cut off its last card,
   with no scrollbar to reach it; a tall one now scrolls with the page) */
.ceec-program .side { position:sticky; top:96px; align-self:start; }
@media (max-width:900px){ .ceec-program .side { position:static; max-height:none; } }
.ceec-program .program-main > * + *, .ceec-program .program-body > * + *, .ceec-program .side > * + * { margin-top:22px; }

/* the cards */
.ceec-program .block { border:1px solid var(--panel-border); border-radius:var(--radius-2xl); background:#fff; padding:26px; }
.ceec-program .block h3 { font-size:20px; font-weight:700; }
.ceec-program .block p.lead { margin-top:12px; font-size:15.5px; line-height:1.7; color:var(--text-soft); }
.ceec-program .block h4.sub { margin-top:26px; font-size:17px; font-weight:700; font-family:var(--font-display); color:var(--ink); }
.ceec-program .block h4.sub + p { margin-top:8px; font-size:15px; line-height:1.75; color:var(--text); }
.ceec-program .block .bnote { margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--text-soft); max-width:62ch; }
.ceec-program .block .wp-block-buttons { margin-top:24px; }
.ceec-program .block .wp-block-image { margin-top:18px; border-radius:var(--radius-xl); overflow:hidden; }
.ceec-program .infogrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.ceec-program .infogrid--1 { grid-template-columns:1fr; margin-top:20px; }
.ceec-program .infogrid--2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:620px){ .ceec-program .infogrid { grid-template-columns:1fr; } }
.ceec-program .infocell { border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:16px; }
.ceec-program .infocell p.eyebrow { font-size:10.5px; }
.ceec-program .infocell p:not(.eyebrow) { font-size:13.5px; color:var(--text-soft); margin-top:6px; line-height:1.5; }

/* Outputs: initiative rows */
.ceec-program .orows { margin-top:16px; display:flex; flex-direction:column; }
/* each row highlights as a soft rounded card on hover, reaching a little past the text; the divider
   is drawn inside the text width and hides beside the hovered row, so no hard edges show */
.ceec-program .orow { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 14px; margin:0 -14px; border-radius:var(--radius-md); text-decoration:none; color:inherit; transition:background-color .2s ease; }
.ceec-program .orow + .orow::before { content:""; position:absolute; top:0; left:14px; right:14px; border-top:1px solid var(--panel-border); transition:opacity .2s ease; }
.ceec-program .orow:hover::before, .ceec-program .orow:hover + .orow::before { opacity:0; }
.ceec-program .orow:hover { background:var(--cream); }
.ceec-program .orow h4 { font-size:15.5px; font-weight:600; line-height:1.4; color:var(--ink); font-family:var(--font-sans); transition:color .2s ease; }
.ceec-program .orow:hover h4 { color:var(--orange-deep); }
.ceec-program .orow:hover .orow__meta .tag { background:rgba(0,68,85,.11); }
.ceec-program .orow p { margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--text-soft); }
.ceec-program .orow__meta { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.ceec-program .orow__meta .tag { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; background:rgba(0,68,85,.07); color:var(--primary); border-radius:999px; padding:4px 10px; transition:background-color .2s ease; }
.ceec-program .orow__meta .oy { font-size:13px; color:var(--text-soft); }
@media (max-width:640px){ .ceec-program .orow { grid-template-columns:1fr; gap:8px; } .ceec-program .orow__meta { white-space:normal; } }
/* Outputs: project lead + rows */
.ceec-program .output-lead { margin-top:16px; display:flex; gap:16px; align-items:flex-start; border:1px solid var(--orange-soft); background:linear-gradient(180deg,#fff,var(--cream)); border-radius:var(--radius-xl); padding:20px 22px; text-decoration:none; color:inherit; transition:all .2s; }
.ceec-program .output-lead:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ceec-program .output-lead__ic { flex-shrink:0; display:grid; place-items:center; height:52px; width:52px; border-radius:var(--radius-md); background:var(--gradient-orange); color:#fff; }
.ceec-program .output-lead__ic i { font-size:26px; }
.ceec-program .output-lead h4 { font-size:18px; font-weight:700; font-family:var(--font-display); color:var(--ink); margin-top:4px; }
.ceec-program .output-lead p { font-size:13.5px; color:var(--text-soft); margin-top:6px; line-height:1.5; font-family:var(--font-sans); }
.ceec-program .output-lead__go { margin-left:auto; color:var(--orange-deep); font-size:20px; flex-shrink:0; transition:transform .2s; }
.ceec-program .output-lead:hover .output-lead__go { transform:translateX(4px); }
.ceec-program .outrows { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.ceec-program .outrow { display:flex; gap:14px; align-items:center; border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:13px 16px; text-decoration:none; color:inherit; transition:all .2s; }
.ceec-program .outrow:hover { border-color:rgba(233,97,21,.45); background:var(--cream); }
.ceec-program .outrow > i { color:var(--primary); font-size:20px; flex-shrink:0; }
.ceec-program .outrow h4 { font-size:14.5px; font-weight:600; font-family:var(--font-sans); color:var(--ink); }
.ceec-program .outrow .m { font-size:12.5px; color:var(--text-soft); }
.ceec-program .program-more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--orange-deep); text-decoration:none; }
.ceec-program .program-more::after { content:""; width:14px; height:14px; background:currentColor; -webkit-mask:var(--ceec-arrow) center/contain no-repeat; mask:var(--ceec-arrow) center/contain no-repeat; transition:transform .2s; }
.ceec-program .program-more:hover::after { transform:translateX(3px); }

/* Projects under this initiative */
.ceec-program .prows { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.ceec-program .prow { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:16px 18px; text-decoration:none; color:inherit; transition:all .2s; }
.ceec-program .prow:hover { border-color:rgba(233,97,21,.45); background:var(--cream); }
.ceec-program .prow h4 { font-size:16px; font-weight:600; font-family:var(--font-display); color:var(--ink); }
.ceec-program .prow p { font-size:13px; color:var(--text-soft); margin-top:2px; }
/* the title takes the room; a long status is cut short with "…" (the full text on hover) */
.ceec-program .prow > div { flex:1 1 auto; min-width:0; }
.ceec-program .prow .pill { flex:0 1 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; }
/* Members (Global Water Initiative organisations) */
.ceec-program .program-members { scroll-margin-top:110px; }
.ceec-program .mems { margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ceec-program .mem { display:block; border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:14px 16px; text-decoration:none; color:inherit; transition:all .2s; }
.ceec-program a.mem:hover { border-color:rgba(233,97,21,.45); background:var(--cream); }
.ceec-program .mem h4 { font-size:15px; font-weight:600; font-family:var(--font-display); color:var(--ink); line-height:1.35; }
.ceec-program .mem__abbr { font-weight:500; color:var(--text-soft); }
/* a member with a website: the arrow says the card opens it */
.ceec-program .mem--link { position:relative; padding-right:40px; }
.ceec-program .mem__go { position:absolute; top:15px; right:14px; font-size:16px; color:var(--orange-deep); }
.ceec-program .mem p { font-size:12.5px; color:var(--text-soft); margin-top:3px; }
/* Part of our work (project) */
.ceec-program .iprows { margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.ceec-program .iprow { display:flex; align-items:center; gap:14px; border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:14px 16px; text-decoration:none; color:inherit; transition:all .2s; }
.ceec-program a.iprow:hover { border-color:rgba(233,97,21,.45); background:var(--cream); }
.ceec-program .iprow .it { flex-shrink:0; display:grid; place-items:center; height:46px; width:46px; border-radius:var(--radius-md); background:var(--muted); color:var(--primary); }
.ceec-program .iprow .it i { font-size:24px; }
.ceec-program .iprow h4 { font-size:16px; font-weight:600; font-family:var(--font-display); color:var(--ink); }
.ceec-program .iprow .sub { font-size:12.5px; color:var(--text-soft); margin-top:1px; }
.ceec-program .iprow .go { margin-left:auto; color:var(--orange-deep); font-size:18px; flex-shrink:0; transition:transform .2s; }
.ceec-program .iprow:hover .go { transform:translateX(4px); }

/* ---------- the sidebar ---------- */
.ceec-program .side h4 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); font-family:var(--font-display); }
.ceec-program .side .side-note { font-size:13px; color:var(--text-soft); margin:8px 0 4px; }
.ceec-program .reslink { display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--panel-border); text-decoration:none; color:inherit; }
.ceec-program .reslink:first-of-type { border-top:none; }
.ceec-program .reslink i { color:var(--primary); font-size:18px; flex-shrink:0; }
.ceec-program .reslink span { font-size:13.5px; line-height:1.4; color:var(--text); }
.ceec-program .reslink:hover span { color:var(--primary); }
.ceec-program .side-all { margin-top:16px; width:100%; }
.ceec-program .block--cta { background:var(--gradient-teal); border:none; color:#fff; }
.ceec-program .block--cta h3 { color:#fff; }
.ceec-program .block--cta p { color:var(--teal-mist); font-size:14px; margin-top:10px; line-height:1.6; }
.ceec-program .block--cta .wp-block-buttons { margin-top:16px; }
.ceec-program .block--cta .wp-block-button, .ceec-program .block--cta .wp-block-button__link { width:100%; }
.ceec-program .block--cta .wp-block-button__link { padding:12px 24px; font-size:14.5px; }