/* ==========================================================================
   BROCA — Leadership: overlapping portrait-card fan (#leadership only)
   Applies only once leadership-slider.js has run (.lf-ready); without the
   script (or without GSAP) the original 3-column grid is shown unchanged.

   The first three members in a centred, overlapping fan; the remaining
   members below in matching fans (currently 4–6 as a second fan of three, centred).
   No show-more button.
   Hover / focus / tap gently separates a fan and reveals name + position.

   TO RESTORE THE PREVIOUS VERSION: copy the two files from
   _backup_leadership_2026-10-28_v9_fan_toggle back over these.
   ========================================================================== */

#leadership.lf-ready{
  --lf-w:clamp(176px,16vw,232px);          /* lead fan card width            */
  --lf-w-sm:clamp(148px,12.4vw,184px);     /* the two fans revealed below    */
  --lf-card-a:#1a1b1c;                     /* charcoal card, top             */
  --lf-card-b:#0c0d0d;                     /* charcoal card, bottom          */
  --lf-edge:rgba(214,179,122,.2);          /* gold hairline                  */
  --lf-cap:rgba(8,9,9,.92);                /* caption veil                   */
  --lf-shadow:0 34px 60px -26px rgba(0,0,0,.85),0 10px 24px -12px rgba(0,0,0,.6);
}
[data-theme=light] #leadership.lf-ready{
  --lf-card-a:#f3f2ec;--lf-card-b:#e4e2d9;
  --lf-edge:rgba(134,102,46,.24);
  --lf-cap:rgba(250,249,246,.94);
  --lf-shadow:0 30px 56px -28px rgba(53,60,42,.38),0 8px 20px -12px rgba(53,60,42,.22);
}

#leadership .lf{position:relative;margin:clamp(40px,5vw,72px) auto 0;max-width:1120px}

/* ---- a fan of three cards ------------------------------------------------ */
#leadership .lf-deck{
  --w:var(--lf-w);
  position:relative;width:100%;
  height:calc(var(--w) * 1.27 + 50px);     /* card (4:5) + lift/rotation room */
  margin:0 auto;list-style:none;padding:0;
  touch-action:manipulation;
}
#leadership .lf-more .lf-deck{--w:var(--lf-w-sm)}

#leadership .lf-card{
  position:absolute;left:50%;top:18px;
  width:var(--w);margin:0 0 0 calc(var(--w) / -2);padding:0;
  border:0;background:none;outline:none;
  transform-origin:50% 100%;               /* fans open from the base */
  will-change:transform;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#leadership .lf-face{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;
  background:
    radial-gradient(70% 52% at 50% 30%,rgba(214,179,122,.10),rgba(214,179,122,0) 72%),
    linear-gradient(180deg,var(--lf-card-a),var(--lf-card-b));
  box-shadow:var(--lf-shadow),inset 0 0 0 1px var(--lf-edge);
  transition:box-shadow .5s ease;
}
#leadership .lf-face::after{                /* hairline drawn above the photo */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--lf-edge);transition:box-shadow .5s ease;
}
#leadership .lf-card .portrait{
  display:block;width:100%;height:100%;max-height:none;margin:0;
  object-fit:cover;object-position:50% 100%;border-radius:0;background:none;box-shadow:none;transform:none;
  filter:brightness(.86) saturate(.9);
  transition:filter .6s ease;
  -webkit-user-drag:none;user-select:none;
}
[data-theme=light] #leadership .lf-card .portrait{filter:brightness(.97) saturate(.92)}
#leadership .lf-card.lf-wide .portrait{scale:1.5}

/* name + position: inside the card, revealed when the card is active */
#leadership .lf-cap{
  position:absolute;inset:auto 0 0;padding:44px 14px 16px;text-align:center;
  background:linear-gradient(to top,var(--lf-cap) 38%,rgba(0,0,0,0));
  opacity:0;translate:0 10px;pointer-events:none;
  transition:opacity .45s ease,translate .55s cubic-bezier(.22,1,.36,1);
}
[data-theme=light] #leadership .lf-cap{background:linear-gradient(to top,var(--lf-cap) 38%,rgba(250,249,246,0))}
#leadership .lf-cap h3{margin:0;padding:0;font-size:15px;line-height:1.45;color:var(--text)}
#leadership .lf-cap p{margin:3px 0 0;padding:0;font-size:11.5px;line-height:1.6;color:var(--muted)}
#leadership .lf-more .lf-cap h3{font-size:13.5px}
#leadership .lf-more .lf-cap p{font-size:10.5px}

#leadership .lf-card.is-active .lf-cap{opacity:1;translate:0 0}
#leadership .lf-card.is-active .portrait{filter:none}
#leadership .lf-card.is-active .lf-face::after{box-shadow:inset 0 0 0 1px rgba(214,179,122,.5)}
#leadership .lf-deck.is-open .lf-card:not(.is-active) .portrait{filter:brightness(.62) saturate(.75)}
[data-theme=light] #leadership .lf-deck.is-open .lf-card:not(.is-active) .portrait{filter:brightness(.9) saturate(.7)}
#leadership .lf-card:focus-visible .lf-face{box-shadow:var(--lf-shadow),0 0 0 2px var(--bg),0 0 0 3px var(--gold)}

/* ---- the remaining members, below ------------------------------------------------------ */
#leadership .lf-more{position:relative}
#leadership .lf-more-inner{
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px);
  padding:clamp(28px,3.4vw,48px) 0 clamp(10px,2vw,24px);
}

#leadership .lf-more-inner--single{grid-template-columns:1fr}   /* a single fan below sits centred */

@media (max-width:900px){
  #leadership.lf-ready{--lf-w:clamp(150px,30vw,210px);--lf-w-sm:clamp(140px,28vw,190px)}
  #leadership .lf-more-inner{grid-template-columns:1fr;row-gap:10px}
}
@media (max-width:600px){
  #leadership.lf-ready{--lf-w:min(41vw,176px);--lf-w-sm:min(38vw,160px)}
  #leadership .lf-face{border-radius:12px}
  #leadership .lf-cap{padding:34px 8px 11px}
  #leadership .lf-cap h3,#leadership .lf-more .lf-cap h3{font-size:12.5px}
  #leadership .lf-cap p,#leadership .lf-more .lf-cap p{font-size:10px;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  #leadership .lf-cap,#leadership .lf-card .portrait{transition:none}
}