/* Homepage-only v2 additions (MIDIR structure) — loaded after styles.css
   AND styles-v2.css, on index.html/index.fr.html only. The shared v2
   tokens and generic component overrides live in styles-v2.css now
   (moved there 2026-09-05 so country/corridor/corridors pages can reuse
   them); this file keeps only the markup that's genuinely homepage-only:
   the hero photo panel and the "Who it serves" segments section. */

/* Header logo swap (2026-09-05) -- the .brand-logo-img rule itself moved to
   styles.css (2026-09-05, logo-extension pass) since every page's header/
   footer brand mark uses it now, not just the homepage; keeping it here
   too would have been a second definition of the same rule. */

/* Hero photo — sits above the existing live stat card, inside the same
   right-hand column, so the real heroAccess data is untouched. */
.hero-photo{position:relative;height:220px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-2);margin-bottom:1rem;box-shadow:var(--shadow-md);}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo-cap{position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(14,26,36,.72));color:#fff;
  padding:22px 14px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;}

/* "Who it serves" — new section, added after the hero, styled per the v2
   segment-card pattern. Three cards carry real CEMAC photography; the
   fourth (DFIs & financiers) intentionally carries none — see caption. */
.segments{padding:var(--sp-16) 0;border-top:1px solid var(--divider);}
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2rem;}
.seg-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.seg-photo{height:140px;overflow:hidden;background:var(--surface-2);}
.seg-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.seg-photo.seg-photo-none{display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding:0 1rem;}
.seg-body{padding:1.1rem 1.2rem 1.3rem;}
.seg-tag{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.seg-body h3{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin:.4rem 0 0;color:var(--text);}
.seg-body p{font-size:.8rem;color:var(--muted);line-height:1.55;margin-top:.5rem;}

@media(max-width:900px){.seg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.seg-grid{grid-template-columns:1fr;}}