/* ============================================================================
   INNER PAGES — country / programme pages
   ----------------------------------------------------------------------------
   Loaded after style.css and hero-image.css. Reuses the homepage components
   (orb, difference band, CTA, footer) and adds only what an inner page needs:
   a shorter photographic hero with a breadcrumb, a fact list, a photo
   gallery and its lightbox.
   ========================================================================== */

/* =========================================================================
   HERO — shorter than the homepage banner, same photographic treatment
   ====================================================================== */
.v-image-banner .page-hero{
  min-height:100vh; min-height:100svh;   /* full first screen */
  padding-bottom:110px;
}
@media (max-width:1100px){
  .v-image-banner .page-hero{ padding-bottom:90px; }
}

.page-hero .display{
  font-size:clamp(3.4rem, 8.6vw, 7.4rem);
  line-height:1;
  letter-spacing:-.03em;
  max-width:none;
  margin-bottom:.32em;
}
.hero-sub{
  font-size:clamp(1.08rem, 1.6vw, 1.42rem);
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:36ch;
  margin:0;
}

/* ---- One block per country: the photograph and its focal point ----------
   Everything else about the banner is shared below, on .page-hero. */
.v-image-banner .hero-ghana{
  --hero-img: url('../img/Ghana/Ghana-4.jpg');
  --hero-pos: 50% 50%;
}
.v-image-banner .hero-south-africa{
  --hero-img: url('../img/South-Africa/sa-school-toilet-block.jpg');
  --hero-pos: 50% 58%;
}
.v-image-banner .hero-ethiopia{
  --hero-img: url('../img/Ethopia/Ethopia-Photos-12.jpg');
  --hero-pos: 72% 50%;
}
.v-image-banner .hero-nepal{
  --hero-img: url('../img/Nepal/nepal-1-mhm-rally.jpg');
  --hero-pos: 58% 52%;
}
.v-image-banner .hero-sri-lanka{
  --hero-img: url('../img/Sri-Lanka/sl-1-period-friendly-toilet.jpg');
  --hero-pos: 56% 44%;
}
.v-image-banner .hero-afghanistan{
  --hero-img: url('../img/Afghanistan/af-1-complex-facade-signboard.jpg');
  --hero-pos: 56% 52%;
}
.v-image-banner .hero-bhutan{
  --hero-img: url('../img/Bhutan/bt-2-complex-entrance-signboard.jpg');
  --hero-pos: 58% 48%;
}

/* ---- One block per area of work -----------------------------------------
   The five 'What we do' pages use the same banner component as the country
   pages, so only the photograph and its focal point change. */
.v-image-banner .hero-sanitation{
  --hero-img: url('../img/what-we-do/wash-school-ablution-block.jpg');
  --hero-pos: 50% 62%;
}
.v-image-banner .hero-menstrual-hygiene{
  --hero-img: url('../img/what-we-do/mh-padyatra.png');
  --hero-pos: 46% 54%;
}
.v-image-banner .hero-health-hygiene{
  --hero-img: url('../img/grf-women-and-children.jpeg');
  --hero-pos: 50% 46%;
}
.v-image-banner .hero-capacity-building{
  --hero-img: url('../img/grf-africa-for-africa-women-summit.jpg');
  --hero-pos: 50% 42%;
}
.v-image-banner .hero-partnerships{
  --hero-img: url('../img/what-we-do/programme-clean-water-sanitation-wash.jpg');
  /* Pushed right and down: the copy sits over the open road on the left, and
     this keeps the banner and the marchers — four partner organisations in one
     frame — inside the crop once the photograph is cover-cropped. */
  --hero-pos: 56% 58%;
}



/* Copy centred top-to-bottom in the banner, with equal padding above and
   below, and the scrim's dark well and the ring centred on it so the type
   keeps its contrast over the photograph. */
@media (min-width:1101px){
  .v-image-banner .page-hero{
    justify-content:center;
    padding-block:110px;
  }
  .v-image-banner .page-hero .hero-copy{ max-width:520px; }
  .v-image-banner .page-hero .display{ font-size:clamp(3rem, 4.8vw, 4.8rem); }
  .v-image-banner .page-hero .crumbs{ margin-bottom:1.6em; }
  .v-image-banner .page-hero .eyebrow{ margin-bottom:1em; }
  .v-image-banner .page-hero .hero-ring{ top:50%; }
  .v-image-banner .page-hero .hero-scrim{
    background:
      radial-gradient(ellipse 36% 60% at 22% 50%,
        rgba(0,20,18,.82) 0%, rgba(0,20,18,.6) 40%,
        rgba(0,20,18,.16) 80%, rgba(0,20,18,0) 100%),
      linear-gradient(90deg, rgba(0,18,16,.5) 0%, rgba(0,18,16,.22) 30%, rgba(0,18,16,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 25%, transparent 80%, rgba(0,0,0,.3) 100%),
      linear-gradient(0deg, rgba(0,22,20,.14), rgba(0,22,20,.14));
  }
}
/* Narrow screens: the copy would fill the frame and land on the children, so
   the photograph takes the top of the banner and fades into black, and the
   copy sits below it on the dark ground. */
@media (max-width:1100px){
  .v-image-banner .page-hero{ justify-content:flex-end; }
  .v-image-banner .page-hero .hero-bg{ bottom:42%; }
  .v-image-banner .page-hero .hero-scrim{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%,
        rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 56%, var(--ink) 60%);
  }
  .v-image-banner .page-hero .hero-ring{ top:auto; bottom:-14%; margin-top:0; }
}

/* ---- breadcrumb ---- */
.crumbs{ margin-bottom:2.2em; }
.crumbs ol{
  display:flex; flex-wrap:wrap; gap:.7em;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.crumbs li{ display:flex; align-items:center; gap:.7em; }
.crumbs li + li::before{
  content:''; width:18px; height:1px; background:currentColor; opacity:.5;
}
.crumbs a{ transition:color .3s var(--ease); }
.crumbs a:hover{ color:#fff; }
.crumbs [aria-current]{ color:var(--cyan); }

/* =========================================================================
   INTRO
   ====================================================================== */
.page-intro .who-copy h2{ margin-bottom:.6em; }
.page-intro .who-copy .lead{ max-width:40ch; font-size:clamp(1.05rem,1.35vw,1.25rem); }

.text-link{
  color:var(--deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .3s var(--ease);
}
.text-link:hover{ color:var(--green); }

/* Facts set as label / value rows — the same rhythm as the homepage .loc rows */
.facts{
  margin-top:clamp(32px,3.6vw,52px);
  border-top:1px solid var(--line);
  position:relative;
}
.facts::before{
  content:''; position:absolute; left:0; top:-1px; width:44px; height:3px;
  background:var(--grad); border-radius:2px;
}
.facts > div{
  display:grid; grid-template-columns:minmax(110px,.32fr) 1fr; gap:var(--gap);
  align-items:baseline;
  padding-block:16px;
  border-bottom:1px solid var(--line);
}
.facts dt{
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--deep);
}
.facts dd{ color:var(--ink); font-size:.98rem; }
@media (max-width:480px){
  .facts > div{ grid-template-columns:1fr; gap:4px; }
}

/* =========================================================================
   WEST AFRICA BAND — reuses .difference, adds body copy and a link
   ====================================================================== */
.diff-body{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.6; color:rgba(255,255,255,.78);
  max-width:40ch;
}
.diff-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:1.6em;
  font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  padding-bottom:7px; border-bottom:1px solid rgba(46,178,133,.35);
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.diff-link:hover{ border-color:var(--green); gap:16px; }

/* =========================================================================
   GALLERY — masonry columns, so every photograph keeps its own shape
   ====================================================================== */
.page-gallery{
  background:var(--mist);
  padding-top:clamp(48px, 6vw, 88px);      /* tighter than the default section rhythm */
  padding-bottom:clamp(24px, 2.6vw, 40px);
}
.page-gallery .sec-head{ margin-bottom:clamp(28px, 3.4vw, 48px); }

.gallery{
  columns:3 260px;
  column-gap:var(--gap);
  /* Cancels the last tile's bottom margin, so the gap under the gallery
     matches the gap above the heading. */
  margin-bottom:calc(-1 * clamp(24px,2.6vw,40px));
}
.gallery > li{
  break-inside:avoid;
  margin-bottom:clamp(24px,2.6vw,40px);
}
/* ---- Short galleries -----------------------------------------------------
   Masonry needs enough tiles to fill its columns. With four photographs across
   three columns the last column takes two and the other two are left hanging,
   which opens a large hole under the row. Below five photographs the gallery
   runs as an even grid on a fixed crop instead, so every row ends level.
   Five or more keeps the masonry, where the varied shapes are the point. */
.gallery:has(> li:last-child:nth-child(-n+4)){
  columns:auto;
  display:grid;
  gap:clamp(24px,2.6vw,40px);
  margin-bottom:0;
}
.gallery:has(> li:last-child:nth-child(-n+4)) > li{ margin-bottom:0; }
.gallery:has(> li:last-child:nth-child(-n+4)) img{
  aspect-ratio:3/2;                       /* the ratio most of the supplied
                                             photographs already are */
  object-fit:cover;
  object-position:50% 50%;
}

@media (min-width:761px){
  /* Two and four sit square: 2-up and 2 × 2. Three runs as a single row. */
  .gallery:has(> li:last-child:nth-child(2)),
  .gallery:has(> li:last-child:nth-child(4)){ grid-template-columns:repeat(2,1fr); }
  .gallery:has(> li:last-child:nth-child(3)){ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .gallery:has(> li:last-child:nth-child(-n+4)){ grid-template-columns:1fr; }
}

/* A lone photograph reads as a closing feature rather than a stray tile. */
.gallery:has(> li:only-child){ grid-template-columns:1fr; }
.gallery:has(> li:only-child) img{ aspect-ratio:16/9; }
:is(.gallery, .gallery-rows) a{
  display:block; position:relative; overflow:hidden;
  border-radius:22px;
  cursor:zoom-in;
  background:var(--line);
}
:is(.gallery, .gallery-rows) img{
  width:100%;
  transition:transform 1s var(--ease);
}
/* An open ring appears on hover — the identity marking the tile as live */
:is(.gallery, .gallery-rows) a::after{
  content:''; position:absolute; right:18px; bottom:18px;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid #fff; border-right-color:transparent;
  transform:rotate(-40deg) scale(.7); opacity:0;
  transition:opacity .45s var(--ease), transform .6s var(--ease);
}
:is(.gallery, .gallery-rows) a:hover img{ transform:scale(1.045); }
:is(.gallery, .gallery-rows) a:hover::after{ opacity:1; transform:rotate(60deg) scale(1); }
:is(.gallery, .gallery-rows) figcaption{
  margin-top:14px;
  font-size:.82rem; letter-spacing:.02em; color:var(--slate);
}

/* =========================================================================
   PHOTO GROUPS — one group per site, each a justified row
   ----------------------------------------------------------------------------
   Every tile carries its photograph's aspect ratio as --ar. Growing each tile
   in proportion to --ar gives every tile in a row the same height while each
   photograph keeps its own shape, and the row always ends flush. One <ul> is
   one row; a group with more photographs than fit runs two <ul>s.
   ====================================================================== */
.photo-group + .photo-group{
  margin-top:clamp(40px, 5vw, 72px);
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--line);
  position:relative;
}
.photo-group + .photo-group::before{          /* one stroke from the ring */
  content:''; position:absolute; left:0; top:-1px; width:44px; height:3px;
  background:var(--grad); border-radius:2px;
}
.group-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 24px;
  margin-bottom:clamp(18px, 2vw, 26px);
}
.group-head h3{ font-weight:300; font-size:clamp(1.3rem, 2.1vw, 1.85rem); }
.group-meta{
  margin:0;
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--deep);
}

.gallery-rows{
  display:flex;
  gap:var(--gap);
}
.gallery-rows + .gallery-rows{ margin-top:clamp(20px, 2.4vw, 32px); }
.gallery-rows > li{
  flex:var(--ar) 1 0;
  min-width:0;
}
.gallery-rows img{
  width:100%;
  aspect-ratio:var(--ar);
  object-fit:cover;
}

/* Phones: a justified row of five would leave each tile a sliver, so the
   group becomes a two-up grid on a square crop. The full photograph is one
   tap away in the lightbox. */
@media (max-width:640px){
  .gallery-rows{ display:grid; grid-template-columns:1fr 1fr; gap:22px 14px; }
  .gallery-rows img{ aspect-ratio:1; }
  .gallery-rows figcaption{ margin-top:10px; font-size:.78rem; }
}

/* =========================================================================
   LIGHTBOX
   ====================================================================== */
.lightbox{
  border:0; padding:0; margin:0;
  width:100vw; height:100vh; height:100dvh;
  max-width:none; max-height:none;
  background:transparent; color:#fff;
}
.lightbox::backdrop{ background:rgba(0,12,11,.94); }
.lightbox[open]{ animation:lb-in .35s var(--ease); }
@keyframes lb-in{ from{ opacity:0; } to{ opacity:1; } }

.lb-inner{
  width:100%; height:100%;
  display:grid; place-items:center;
  padding:72px clamp(16px,8vw,120px) 32px;
}
.lb-fig{ display:flex; flex-direction:column; align-items:center; max-height:100%; }
.lb-img{
  max-width:100%;
  max-height:calc(100dvh - 170px);
  width:auto; height:auto;
  object-fit:contain;
  border-radius:16px;
}
.lb-cap{
  margin-top:18px; text-align:center;
  font-size:.9rem; color:rgba(255,255,255,.8);
}
.lb-btn{
  position:absolute;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.06); color:#fff;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lb-btn svg{ width:22px; height:22px; }
.lb-btn:hover{ background:var(--deep); border-color:var(--deep); }
.lb-close{ top:16px; right:16px; }
.lb-prev{ left:16px;  top:50%; margin-top:-26px; }
.lb-next{ right:16px; top:50%; margin-top:-26px; }
@media (max-width:640px){
  .lb-prev,.lb-next{ top:auto; bottom:16px; margin-top:0; }
  .lb-inner{ padding-bottom:88px; }
  .lb-img{ max-height:calc(100dvh - 220px); }
}

@media (prefers-reduced-motion:reduce){
  .lightbox[open]{ animation:none; }
}

/* The flags photograph is cropped to 16:9 to match the other landscape in its
   column, which keeps the three masonry columns ending level. */
.gallery .g-wide img{ aspect-ratio:16/9; object-fit:cover; object-position:50% 55%; }