/* ============================================================
   pages.css — extends styles.css for interior pages
   (Projects Overview, Project Detail).
   Does NOT modify any homepage selector. Reuses existing
   tokens (--ink, --paper, --lime, --sage, --pink, --orange,
   --forest, --white) and existing component classes
   (.nav, .kicker, .card, .tag, .facts, .project, .cta, footer)
   verbatim wherever possible.
   ============================================================ */

/* Page header — interior pages don't have a full hero, so this gives the
   fixed nav room without repeating the homepage hero markup.

   Two-column editorial composition on wide screens, the same grouping
   .about-manifesto and .values-panel already use: kicker + headline form
   one unit in a controlled left column, with the supporting paragraph
   beside them on the same row rather than stranded beneath a headline
   that left the right half of a wide viewport empty. Explicit grid-row
   placement is what puts the paragraph's top in line with the headline's
   rather than with the kicker above it. */
.page-intro{padding-block:170px 20px;padding-inline:max(7vw,calc((100% - var(--content-max))/2));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(36px,5vw,88px);align-items:start}
.page-intro .kicker{display:block;grid-column:1;grid-row:1;margin-bottom:16px}
.page-intro h1{grid-column:1;grid-row:2;font-size:var(--fs-h1-sub);line-height:1.02;letter-spacing:-.045em;margin:0}
.page-intro p{grid-column:2;grid-row:2;font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin:0}

/* Status legend — reuses .tag geometry, adds two color variants
   (Completed already = lime via .tag default). */
.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0 7vw 60px;font-size:14px;font-weight:600}
.legend a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:20px;background:#e9e6dc;transition:.25s}
.legend a:hover{transform:translateY(-2px)}
.legend .dot{width:9px;height:9px;border-radius:50%}
.legend .dot.completed{background:var(--lime)}
.legend .dot.ongoing{background:var(--sage)}
.legend .dot.planned{background:transparent;border:1.5px solid var(--ink)}

/* Tag variants (.tag.ongoing / .tag.planned) now live in styles.css
   as shared cross-page components, since index.html uses them too. */

/* Featured case study — static single instance of the homepage
   .project story block (no slider controls needed).
   IMPORTANT: .project must stay display:block here. The base
   .project rule in styles.css carries a latent 40%/60% grid-
   template-columns (used only when the carousel re-enables
   display:grid on .project itself); reactivating display:grid
   on .project in this static context reintroduces that grid and
   squeezes .project-slides into the first 40% column, which then
   nests ANOTHER 40/60 grid inside itself via .project-slide —
   clipping the heading/image and leaving the rest of the row
   blank. Only .project-slide should ever be the grid. */
/* The card is full-bleed inside .featured, so the inset lives on the
   wrapper — same measure top, bottom and both edges as every other
   large rounded card on the site. */
.featured{padding:var(--card-inset)}
.featured .project{display:block;overflow:visible;min-height:0;border-radius:120px 20px 20px 20px;isolation:isolate}
.featured .project-slides{position:static}
.featured .project-slide{opacity:1;pointer-events:auto;transform:none;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:center}
.featured .project-copy{padding:clamp(48px,4.4vw,70px) var(--project-gutter)}
.featured .project-img{margin:var(--card-inset);min-height:420px;height:auto;align-self:stretch}
@media(max-width:1000px){
  .featured .project-slide{grid-template-columns:1fr}
  .featured .project-img{min-height:0;height:380px;margin:0 var(--card-inset) var(--card-inset)}
}
@media(max-width:650px){
  .featured .project-copy{padding:clamp(40px,7vw,54px) var(--project-gutter) 28px}
  .featured .project-img{height:300px;margin:0 var(--card-inset) var(--card-inset)}
}

/* Site-plan presentation — used instead of hero photography when
   the only available image is an informational plan/legend
   graphic rather than a documentary photograph. Shown at its
   natural aspect ratio (object-fit:contain), never cropped, on a
   deliberately designed panel so it never reads as a photo. */
.plan-panel{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(135deg,#e9e6dc,#f4f1e8)}
.plan-panel img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 20px rgba(10,40,24,.14))}
.plan-panel .caption{background:var(--ink);color:var(--white)}

/* Gallery groups */
.gallery-group{padding:10px 7vw 30px}
.gallery-group+.gallery-group{padding-top:20px}
.group-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.group-head h2{font-size:var(--fs-h3-sm);letter-spacing:-.03em;margin:0}
.group-head span{font-size:var(--fs-xs);opacity:.65;font-weight:600}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Gallery card — an independent component, not the homepage
   .service-card. It owns its own box model (position/radius/
   overflow/gradient) so it never depends on, or collides with,
   any other card component's styling — this is why the previous
   ".gallery-card .tag{width:auto;height:auto;...}" /
   ".gallery-card .view-action{width:auto;height:auto;...}" resets
   have been removed below: they existed only to undo the homepage
   ".card span" arrow-bullet rule, which no longer matches gallery
   cards now that they don't share the .card class. Cards with no
   linked detail page render as a plain div (not <a>), with no
   arrow, signalling "more detail coming" without a dead link. */
.gallery-card{height:340px;position:relative;display:block;border-radius:16px;overflow:hidden}
.gallery-card:after{content:"";position:absolute;inset:0;background:var(--photo-scrim);pointer-events:none}
/* The card title used to inherit --ink from the anchor and sat straight on
   a dark photograph — the lowest-contrast text on the site. It is white on
   the scrim now, in the same padded safe area as the stat and the action. */
.gallery-card .card-content{position:absolute;z-index:2;bottom:clamp(12px,1.2vw,18px);left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);display:flex;align-items:end;justify-content:space-between;gap:10px}
.gallery-card .card-content b{color:var(--white);line-height:1.25}
.gallery-card .card-stat{position:absolute;z-index:2;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);bottom:72px;display:flex;flex-direction:column}
.gallery-card .card-stat strong{font-size:var(--fs-h4);line-height:1;letter-spacing:-.02em;color:var(--white)}
.gallery-card .card-stat small{font-size:var(--fs-2xs);color:var(--white);opacity:.85}
.gallery-card .related{position:absolute;z-index:2;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);bottom:72px;font-size:var(--fs-2xs);color:var(--white);opacity:.9;font-weight:600}
.gallery-card .view-action{background:var(--white);padding:11px 15px;border-radius:13px;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;flex-shrink:0}
.gallery-card.no-detail{cursor:default}
.gallery-card .soon-note{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;color:var(--white);opacity:.85;margin:0;background:rgba(10,40,24,.4);padding:7px 10px;border-radius:8px;align-self:flex-end;white-space:nowrap}

/* Planned initiatives strip — quiet, text-led, deliberately not card-shaped
   so it never reads as equivalent to delivered/active work. */
.planned-strip{margin:var(--card-inset) 7vw 90px;padding:46px 5vw;background:#e8e4d7;border-radius:18px;position:relative;overflow:hidden;isolation:isolate}
.planned-strip h2{font-size:var(--fs-h4);letter-spacing:-.02em;margin:14px 0 10px}
.planned-strip p{font-size:var(--fs-xs);line-height:1.6;max-width:640px}
.planned-list{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 18px}
.planned-list span{background:var(--white);border:1px solid #bcb8aa;border-radius:18px;padding:9px 16px;font-size:var(--fs-2xs);font-weight:600}
.planned-strip .fine{margin-top:0}

/* Responsive */
@media(max-width:1000px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  /* Back to a stack: at this width neither column has room for its own
     measure, so the two-column version reads as two cramped strips. */
  .page-intro{display:block}
  .page-intro h1{margin:0 0 18px}
  .page-intro p{max-width:62ch}
}
@media(max-width:650px){
  .page-intro{padding:150px 6vw 10px}
  .legend{padding:0 6vw 40px}
  .gallery-group{padding:10px 6vw 20px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-card{height:300px}
  .planned-strip{margin:var(--card-inset) 6vw 60px;padding:34px 6vw}
}

/* Breadcrumb back-to-Projects path */
.breadcrumb{padding:150px 7vw 0;font-size:14px;font-weight:600}
.breadcrumb a{border-bottom:1px solid transparent}
.breadcrumb a:hover{border-bottom-color:currentColor}
@media(max-width:650px){.breadcrumb{padding:130px 6vw 0}}

/* Placeholder-photo variety — the same "media-soon" panel repeats many
   times in a single gallery grid. A quiet tonal rotation keeps repeated
   empty cards from reading as wallpaper, without the accent glyphs that
   used to sit in the middle of each one. */
/* Quiet tonal rotation only — the placeholder glyphs are gone with the
   rest of the 'photography coming soon' scaffolding, so repeated empty
   cards vary without announcing themselves. */
.gallery-grid>*:nth-child(3n+2) .media-soon{background:var(--ink)}
.gallery-grid>*:nth-child(3n+3) .media-soon{background:var(--sage-deep)}

/* ---- Project Detail template ---- */
.detail-hero{position:relative;margin:var(--card-inset);height:520px;border-radius:120px 20px 20px 20px;overflow:hidden}
.detail-hero .tag{position:absolute;top:25px;left:25px;z-index:2}
/* Plan/legend graphics are informational, not photography — shown
   contained on a designed panel rather than cropped with cover. */
.detail-hero.plan-panel{background:linear-gradient(135deg,#e9e6dc,#f4f1e8)}
.detail-hero.plan-panel img{filter:drop-shadow(0 10px 26px rgba(10,40,24,.16))}

/* Text-led detail hero — used instead of a photo/plan hero when no
   documentary photograph exists for a project. Overrides the
   image-container assumptions of the base .detail-hero (fixed
   height, overflow:hidden, absolutely-positioned .tag) with a
   normal-flow text block, matching the sage-deep treatment used
   elsewhere on the site for text-on-color sections. */
.detail-hero-text{height:auto;overflow:visible;background:var(--sage-deep);color:var(--white);padding:60px 6vw 50px;display:block;position:relative;isolation:isolate}
.detail-hero-text .tag{position:static;display:inline-block;margin-bottom:18px}
.detail-hero-text .kicker{display:block;color:var(--lime);margin-bottom:14px}
.detail-hero-text h1{font-size:var(--fs-h1-sub);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px;max-width:800px}
.detail-hero-text .detail-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:var(--fs-xs);font-weight:600;opacity:.85;margin-bottom:22px}
.detail-hero-text p{font-size:var(--fs-md);line-height:1.55;max-width:640px;margin:0}
@media(max-width:650px){.detail-hero-text{padding:40px 6vw 34px}}

/* Dedicated site-plan module in the detail body — full plan at its
   natural aspect ratio, with caption and an accessible enlarge link. */
.detail-plan{padding:0 7vw 10px}
.detail-plan figure{margin:18px 0 0;background:linear-gradient(135deg,#e9e6dc,#f4f1e8);border-radius:18px;padding:24px;display:flex;flex-direction:column;align-items:center}
.detail-plan img{width:100%;height:auto;max-height:640px;object-fit:contain}
.detail-plan figcaption{margin-top:14px;font-size:var(--fs-2xs);line-height:1.55;opacity:.8;text-align:center;max-width:560px}
.detail-plan figcaption a{font-weight:700;opacity:1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){.detail-plan{padding:0 6vw 10px}.detail-plan figure{padding:16px}.detail-plan img{max-height:360px}}
/* Shared centered rail for the detail template — content maxes out
   around 1280px and centers on wide screens instead of clinging to
   the left edge; degrades to a plain vw gutter on narrow ones since
   the calc term goes negative and max() falls back to it. */
.detail-head{padding:50px max(7vw,calc((100% - 1280px)/2)) 10px}
.detail-head .kicker{display:block;margin-bottom:14px}
.detail-head h1{font-size:var(--fs-h1-sub);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px;max-width:800px}
.detail-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:var(--fs-xs);font-weight:600;opacity:.75}

.detail-facts{display:grid;grid-template-columns:repeat(4,1fr);column-gap:0;row-gap:24px;padding:40px max(7vw,calc((100% - 1280px)/2)) 10px}
.detail-facts div{display:flex;flex-direction:column;padding-left:28px;border-left:1px solid rgba(10,40,24,.12)}
.detail-facts div:nth-child(4n+1){border-left:none;padding-left:0}
.detail-facts strong{font-size:42px;letter-spacing:-.02em}
.detail-facts small{font-size:var(--fs-2xs);opacity:.7}

.detail-body{padding:30px max(7vw,calc((100% - 1280px)/2))}
.detail-body h2{font-size:var(--fs-h4);letter-spacing:-.02em;margin:46px 0 14px}
.detail-body h2:first-child{margin-top:0}
.detail-body h2 small{font-weight:400;opacity:.55;font-size:14px}
.detail-body p{font-size:var(--fs-sm);line-height:1.65;margin:0 0 14px;max-width:680px}
.detail-body ul{padding-left:20px;margin:0 0 14px;font-size:var(--fs-sm);line-height:1.6;max-width:680px}
.detail-note{font-size:var(--fs-2xs);opacity:.65;margin-top:6px}

/* Two-column split for detail bodies with a "highlight panel" section
   (e.g. IFRC Park's Story + Four interventions) — unused, harmless
   markup on single-column detail pages that don't opt in. */
.detail-columns{display:grid;grid-template-columns:1.1fr .9fr;column-gap:60px;row-gap:60px;align-items:start}
.detail-columns p,.detail-columns ul{max-width:none}
.detail-panel{background:var(--pale-green);border-radius:28px;padding:36px 38px}
.detail-panel h2{margin-top:0}
.detail-panel ul{margin-bottom:0}
.detail-columns+.detail-note{margin-top:36px;padding-top:22px;border-top:1px solid rgba(10,40,24,.12);max-width:none}

.detail-related{padding:60px max(7vw,calc((100% - 1280px)/2)) 20px}
.detail-related h2{font-size:var(--fs-h4);letter-spacing:-.02em;margin:0 0 26px}
.detail-related .gallery-grid{grid-template-columns:repeat(2,1fr)}

@media(max-width:900px){
  .detail-facts{grid-template-columns:repeat(2,1fr)}
  .detail-facts div:nth-child(4n+1){border-left:1px solid rgba(10,40,24,.12);padding-left:28px}
  .detail-facts div:nth-child(2n+1){border-left:none;padding-left:0}
  .detail-columns{grid-template-columns:1fr}
}

@media(max-width:650px){
  .detail-hero{margin:var(--card-inset);height:320px;border-radius:70px 15px 15px 15px}
  .detail-hero-text{height:auto;border-radius:70px 15px 15px 15px}
  .detail-head{padding:40px 6vw 10px}
  .detail-facts{grid-template-columns:1fr;padding:30px 6vw 10px;row-gap:20px}
  .detail-facts div{border-left:none;padding-left:0}
  .detail-body{padding:20px 6vw}
  .detail-panel{padding:26px 24px}
  .detail-related{padding:40px 6vw 10px}
  .detail-related .gallery-grid{grid-template-columns:1fr}
}