/* ============================================================================
   VARIANT — PHOTOGRAPHIC HERO BANNER
   ----------------------------------------------------------------------------
   Loaded only by index-image-banner.html, after style.css.

   This restores the earlier banner treatment for client comparison: a
   full-bleed photograph with a centred dark scrim, white centred type, the
   reversed white lockup over the image, and the locations rail at the foot.

   Nothing below the hero is touched — both pages share one design system,
   one set of components and one content set. The only difference is the
   banner and the header treatment that has to go with it.
   ========================================================================== */

/* =========================================================================
   HERO — photograph
   ====================================================================== */
.v-image-banner .hero{
  /* Swap these three to change the banner. --hero-veil is flat darkening on
     top of the radial scrim; photography needs far more of it than graphics.
     Real programme photography — Pan-African Transformational Leadership
     Summit 2026. The focal point favours the right of frame, where the
     delegates stand, so the scrim's dark centre falls on the LED wall rather
     than on faces. */
  --hero-img:  url('../img/grf-leadership-summit-2026.jpg');
  --hero-pos:  56% 44%;
  --hero-veil: .27;   /* was .34 — 20% less flat darkening */

  background:var(--ink);
  padding-top:140px;
  padding-bottom:150px;
}

.v-image-banner .hero-bg{
  position:absolute; inset:0; z-index:-3;
  background:var(--hero-img) var(--hero-pos) / cover no-repeat;
}

/* The copy sits left, so the shadow does too: a well under the type rather
   than across the middle of the frame, plus a left-to-right fall-off. That
   concentrates the darkness where the text needs it and lets the right of the
   frame — where the delegates stand — open up. Net effect is a materially
   brighter photograph with *better* contrast behind the words than the old
   centred scrim gave. §04 — the reversed lockup over photography needs this. */
.v-image-banner .hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 32% 88% at 26% 60%,
      rgba(0,20,18,.8) 0%, rgba(0,20,18,.60) 35%,
      rgba(0,20,18,.18) 78%, rgba(0,20,18,0) 100%),
    linear-gradient(90deg,
      rgba(0,18,16,.55) 0%, rgba(0,18,16,.28) 22%,
      rgba(0,18,16,.04) 72%, rgba(0,18,16,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 10%, transparent 40%, rgba(0,0,0,.48) 100%),
    linear-gradient(0deg, rgba(0,22,20,var(--hero-veil)), rgba(0,22,20,var(--hero-veil)));
}

/* The ring follows the copy to the left rather than staying on the viewport
   axis. Its left edge lands on the shell's content edge, computed the same way
   the shell computes it — but from `100%` of .hero rather than `100vw`, so the
   scrollbar does not throw it out by a few pixels against the text above it. */
.v-image-banner .hero-ring{
  opacity:.45;
  left:max(var(--pad), calc((100% - var(--shell)) / 2 + var(--pad)));
  margin-left:0;
}

/* ---- Copy aligned left ---- */
.v-image-banner .hero-copy{
  margin-inline:0;
  max-width:720px;
  text-align:left;
}
.v-image-banner .hero-copy .eyebrow{ justify-content:flex-start; }
.v-image-banner .hero .display{ margin-inline:0; }
/* Scoped to .hero: the CTA section reuses .hero-actions for its own button
   row, and an unscoped rule here would out-cascade `.cta .hero-actions` and
   drag the CTA's buttons off centre. */
.v-image-banner .hero .hero-actions{ justify-content:flex-start; }

/* Type reversed out of the scrim. Resilience Green is AAA on a dark ground
   (§11), so the emphasis word carries colour here. */
.v-image-banner .hero .display{ color:#fff; }
.v-image-banner .hero .display em{ color:var(--green); }
.v-image-banner .hero-copy .eyebrow{ color:var(--cyan); }

/* Deep Green separates cleanly from a dark scrim, so the brand button returns. */
.v-image-banner .hero .hero-actions .btn-solid{ background:var(--deep); }
.v-image-banner .hero .hero-actions .btn-solid:hover{ background:var(--green); }

/* =========================================================================
   HEADER — transparent over the photograph, white once past it
   ====================================================================== */
.v-image-banner .site-header{
  background:transparent;
  transition:background .45s var(--ease), padding .45s var(--ease),
             box-shadow .45s var(--ease);
}
.v-image-banner .site-header.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
}

/* §06 — full colour needs a white or black ground; over the photograph the
   reversed white variant is the correct one. Crossfading the two approved
   variants avoids interpolating the symbol through unbranded colours, which
   a filter transition would do. */
.v-image-banner .brand-mark{ transition:opacity .4s var(--ease); }
.v-image-banner .brand-white{
  position:absolute; inset:0;
  filter:brightness(0) invert(1);
}
.v-image-banner .site-header:not(.is-stuck) .brand-colour{ opacity:0; }
.v-image-banner .site-header.is-stuck  .brand-white{ opacity:0; }

/* Nav reverses with the header */
.v-image-banner .nav a:not(.nav-cta){ color:#fff; }
.v-image-banner .nav a:not(.nav-cta)::after{ background:currentColor; }
.v-image-banner .site-header.is-stuck .nav a:not(.nav-cta){ color:var(--ink); }
.v-image-banner .site-header.is-stuck .nav a:not(.nav-cta):hover{ color:var(--deep); }

.v-image-banner .site-header:not(.is-stuck) .nav-cta{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); color:#fff;
}
.v-image-banner .site-header:not(.is-stuck) .nav-cta:hover{ background:#fff; color:var(--deep); }
.v-image-banner .site-header.is-stuck .nav-cta{ background:var(--deep); color:#fff; }
.v-image-banner .site-header.is-stuck .nav-cta:hover{ background:var(--green); color:#fff; }

.v-image-banner .burger span{ background:#fff; }
.v-image-banner .site-header.is-stuck .burger span{ background:var(--ink); }

/* =========================================================================
   LEADERSHIP BOARD — portraits with biographies
   ----------------------------------------------------------------------------
   The compact 4 + 3 portrait grid in style.css has no room for a paragraph, so
   this variant switches each member to a two-column card: portrait left, name
   and biography right. Still flex-wrapped and centred, so the odd seventh card
   centres itself on the last row exactly as the portrait grid does.
   ====================================================================== */
.v-image-banner .board-grid{
  gap:clamp(38px,4vw,54px) clamp(32px,3.5vw,56px);
  align-items:start;
}
.v-image-banner .board-member{
  width:min(100%, 560px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px,2vw,26px);
  align-items:start;
  text-align:left;
}
.v-image-banner .board-orb{
  width:clamp(96px, 10vw, 128px);
}
.v-image-banner .board-member h3{
  margin:0 0 .55em;
  font-size:clamp(1rem, 1.15vw, 1.1rem);
  font-weight:400; line-height:1.32;
  text-wrap:balance;
}
.v-image-banner .board-bio{
  margin:0;
  font-size:.86rem;
  line-height:1.65;
  color:var(--slate);
}

@media (max-width:560px){
  /* Stack rather than shrink the portrait to a token */
  .v-image-banner .board-member{
    width:100%;
    grid-template-columns:1fr;
    gap:18px;
  }
  .v-image-banner .board-orb{ width:112px; }
}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1100px){
  .v-image-banner .hero{ padding-top:120px; padding-bottom:150px; --hero-pos:46% 38%; }
  /* Narrow viewports: the copy fills most of the width, so the well widens and
     leans only slightly left. Still lighter overall than the previous pass. */
  .v-image-banner .hero-scrim{
    background:
      radial-gradient(ellipse 120% 62% at 34% 52%,
        rgba(0,20,18,.76) 0%, rgba(0,20,18,.50) 58%, rgba(0,18,16,.18) 100%),
      linear-gradient(180deg, rgba(0,20,18,.36) 0%, transparent 30%, rgba(0,16,14,.74) 100%),
      linear-gradient(0deg, rgba(0,22,20,var(--hero-veil)), rgba(0,22,20,var(--hero-veil)));
  }
}

@media (max-width:1080px){
  /* Menu panel goes back to black, so its type reverses with it. */
  .v-image-banner .nav{
    background:var(--ink);
  }
  .v-image-banner .nav a:not(.nav-cta){ color:#fff; }
  /* Both classes sit on <body>, so they compound rather than nest. */
  .v-image-banner.menu-open .burger span{ background:#fff; }
  .v-image-banner.menu-open .brand-colour{ opacity:0; }
  .v-image-banner.menu-open .brand-white{ opacity:1; }
}