/* ==================================================================
   Shareholders page (/investors/) — page-only layout.
   Shared pieces (inv-card type, video facade, header, footer, CTA)
   live in main.css; this file only sets how they sit on this page.
   ================================================================== */

/* ---------- Shareholder grid ----------
   Flex rows with a fixed column count per breakpoint, so every row is
   full and the final partial row sits centred instead of hanging left.
   138 cards (2026-10-01): 6 cols -> exact; 5 -> last row of 3 centred; 3 -> exact; 2 -> exact. */
.inv-grid.ix-grid{
  --cols:6;
  --gx:clamp(1rem,1.6vw,1.6rem);
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:var(--gx);
  row-gap:clamp(1.8rem,2.6vw,2.6rem);
}
.ix-grid>.inv-card{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));
  min-width:0;gap:.8rem;
}
/* Captions: every card reserves two lines of title so rows share one rhythm */
.ix-grid .inv-card .nm{text-wrap:balance}
.ix-grid .inv-card .tl{min-height:calc(2 * 1.42em);text-wrap:pretty}

/* Per-card framing for the loosest source crops. A card can carry
   style="--z:1.25;--zo:50% 40%": the photo is enlarged about --zo (a point
   near the head) so small, low-set heads sit closer to the rest of the set.
   --z is always >= 1, so the frame stays filled and no face is ever cut. */
.ix-grid .inv-card .ph img{scale:var(--z,1);transform-origin:var(--zo,50% 50%)}

/* A shareholder with no photo yet: the same frame in the card tone with their initials, set like the
   site's display type. Swap the div for the usual <img> when a headshot arrives. */
.ix-grid .ph--none{display:grid;place-items:center;background:#E4DFD6}
.ix-grid .ph--none span{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(2.2rem,3.4vw,3.4rem);letter-spacing:.02em;color:rgba(18,63,60,.42)}

@media (max-width:1199px){.inv-grid.ix-grid{--cols:5}}
@media (max-width:879px){.inv-grid.ix-grid{--cols:3}}

/* ---------- Filter by expertise ----------
   A dropdown over the grid's first row: a ghost button that opens a panel of seven checkboxes with a
   Clear at its foot. The button names what is ticked (or "3 selected"). A filtered grid is no longer the full set, so its last row sits left like the rows above it. */
.ix-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-bottom:clamp(1.6rem,2.6vw,2.4rem)}
.ix-filter[hidden]{display:none}
.ix-dd{position:relative}
/* the trigger: cut like the site's ghost buttons ("Filter by expertise" and a chevron), sized to its words.
   With something ticked it reads "Expertise" in the soft tone, then the names in teal. */
.ix-dd__btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.7rem;max-width:100%;
  padding:.95rem 1.25rem .95rem 1.45rem;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);
  font:inherit;font-family:var(--f-serif);font-size:1.02rem;font-weight:var(--w-btn);letter-spacing:.008em;line-height:1.25;text-align:left;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.ix-dd__v{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-dd__v:empty{display:none}
.ix-dd.has-value .ix-dd__k{color:var(--ink-soft);font-weight:400}
.ix-dd.has-value .ix-dd__v{color:var(--teal)}
.ix-dd__btn svg{flex:none;width:13px;height:13px;margin-left:.35rem;transition:transform .35s var(--ease-out)}
.ix-dd__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ix-dd__btn:hover{border-color:var(--ink)}
.ix-dd__btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ix-dd__btn[aria-expanded="true"]{border-color:var(--pine);background:var(--card)}
.ix-dd__panel{
  position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:max(100%,15.5rem);width:max-content;
  background:var(--card);border:1px solid rgba(20,24,26,.16);box-shadow:0 18px 40px -18px rgba(13,47,45,.35),0 2px 6px rgba(13,47,45,.06);
}
.ix-dd__panel[hidden]{display:none}
.ix-dd__panel:focus{outline:none}
.ix-dd__panel ul{list-style:none;margin:0;padding:.4rem 0}
.ix-opt{position:relative;display:flex;align-items:center;gap:.8rem;padding:.62rem 1.6rem .62rem 1.1rem;cursor:pointer;font-family:var(--f-serif);font-size:1.02rem;line-height:1.3;color:var(--ink)}
.ix-opt:hover{background:var(--paper-2)}
.ix-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ix-opt__box{flex:none;width:1.05rem;height:1.05rem;border:1px solid rgba(20,24,26,.38);background:var(--card);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.ix-opt__box::after{content:'';width:.52rem;height:.28rem;margin-top:-.12rem;border-left:1.6px solid var(--paper);border-bottom:1.6px solid var(--paper);transform:rotate(-45deg) scale(0);transition:transform .2s var(--ease-out)}
.ix-opt input:checked+.ix-opt__box{background:var(--pine);border-color:var(--pine)}
.ix-opt input:checked+.ix-opt__box::after{transform:rotate(-45deg) scale(1)}
.ix-opt input:focus-visible+.ix-opt__box{outline:2px solid var(--teal);outline-offset:2px}
.ix-dd__clear{
  -webkit-appearance:none;appearance:none;cursor:pointer;display:block;width:100%;
  padding:.7rem 1.1rem;border:0;border-top:1px solid var(--line);background:none;color:var(--teal);
  font:inherit;font-family:var(--f-serif);font-size:.96rem;text-align:left;
}
.ix-dd__clear:hover{text-decoration:underline;text-underline-offset:.18em}
.ix-dd__clear:disabled{color:var(--ink-faint);cursor:default;text-decoration:none}
.ix-dd__clear:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.ix-filter__n{margin:0;font-size:.98rem;color:var(--ink-soft)}
.ix-filter__n:empty{display:none}
.ix-grid>.inv-card[hidden]{display:none}
.inv-grid.ix-grid.is-filtered{justify-content:flex-start}
@media (max-width:599px){
  .ix-dd{flex:1 1 100%}
  .ix-dd__btn{display:flex;width:100%}
  .ix-dd__btn svg{margin-left:auto}
  .ix-dd__panel{min-width:100%}
  .ix-opt{padding-block:.75rem}
}
@media (prefers-reduced-motion:reduce){.ix-dd__btn svg,.ix-opt__box::after{transition:none}}

/* phones: two across; every card shows (the "Show all" toggle was removed 2026-10-13) */
@media (max-width:599px){
  .inv-grid.ix-grid{--cols:2;--gx:.9rem;row-gap:1.6rem}
  .ix-grid>.inv-card{gap:.6rem;scroll-margin-top:calc(var(--hdr) + 1rem)}
  .ix-grid .inv-card .nm{font-size:.95rem}
  .ix-grid .inv-card .tl{font-size:.82rem}
}

/* ---------- Gatherings (event films) ---------- */
.ix-events__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1rem,1.8vw,1.8rem);
  row-gap:clamp(2rem,3vw,2.8rem);
}
@media (max-width:1099px){.ix-events__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.ix-events__grid{grid-template-columns:1fr;row-gap:2rem}}
.ix-ev{margin:0;display:grid;gap:.95rem;align-content:start}
/* Stills are true 16:9 frames (the Vimeo player's shape), so nothing is cropped
   and the player drops in without a height jump. The rule stays as a guard. */
.ix-events .video-facade img{aspect-ratio:16/9;height:auto;object-fit:cover}

/* Play control: a small solid disc in the bottom-left corner. Most stills carry
   a centred printed title, which the site's big centred ring used to cover. */
.ix-events .video-facade .play{place-items:end start;padding:clamp(.7rem,1.2vw,1rem)}
.ix-events .video-facade .ring{
  width:clamp(44px,3.6vw,52px);height:clamp(44px,3.6vw,52px);
  background:var(--paper);
  box-shadow:0 1px 2px rgba(13,47,45,.16),0 8px 22px -8px rgba(13,47,45,.5);
}
.ix-events .video-facade .ring svg{width:32%;height:32%}
.ix-events .video-facade:hover .ring,
.ix-events .video-facade:focus-visible .ring{box-shadow:0 0 0 7px rgba(247,245,240,.3),0 8px 22px -8px rgba(13,47,45,.5)}
/* The 2023 still has a printed white frame (inner edge 9.1% from the left,
   15.1% of the height from the bottom): tuck the disc inside its corner.
   Padding percentages resolve against the width, hence 8.5% for the bottom. */
.ix-ev--framed .video-facade .play{padding:0 0 calc(8.5% + .55rem) calc(9.1% + .55rem)}
.ix-ev figcaption{display:grid;gap:.15rem;line-height:1.35}
.ix-ev__t{font-weight:var(--w-name);font-size:1.05rem;color:var(--ink);letter-spacing:-.005em}
.ix-ev__m{font-size:.95rem;color:var(--ink-soft);font-variant-numeric:lining-nums}

/* "Our power is our network." sits centred in the open space beside the film (client request 2026-09-24),
   not hard against the left edge of its column */
.story-grid .story-side{justify-items:center;text-align:center}
.story-grid .story-side .d2{text-wrap:balance}