/* ==========================================================================
   Leadership  (/company/leadership/)

   The second Company child, built like About. Shared: the page banner, the
   hub's .band (company.css) for the board, .pf-related (product-family.css).
   Page-local:
     .lead-jump       the banner's anchor links to the three blocks
     .lead-dir        a directory band: head, then a grid of cards
     .lead-card       photo, name, title and a "Read biography" toggle
     .lead-bio__*     the bio panel, driven by the shared accordion
                      (data-accordion-block="lead-bio"): open without
                      JavaScript, closed once the module stamps is-enhanced

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner              white          §4  board     neutral-2-100
     §2  executive team      neutral-2-100  §5  related   white
     §3  regional            white
   ========================================================================== */

#executive-team,#regional,#board{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §1 The anchor links under the banner's button
   -------------------------------------------------------------------------- */
.lead-jump{margin-top:28px}
.lead-jump__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}

/* --------------------------------------------------------------------------
   §2, §3 Directory bands
   -------------------------------------------------------------------------- */
.lead-dir{padding-block:48px}
.lead-dir__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.lead-dir__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.lead-dir__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.lead-dir__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;align-items:start;
}
@media (min-width:640px){
  .lead-dir{padding-block:64px}
  .lead-dir__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){.lead-dir{padding-block:80px}}
@media (min-width:1350px){
  .lead-dir__head,.lead-dir__grid{grid-column-start:2;grid-column-end:span 10}
}

/* A card: the photo beside the name, title and toggle; the bio underneath,
   across the card's full width, so a 250-word bio reads at a sane measure */
.lead-card{
  display:grid;grid-template-columns:84px minmax(0,1fr);gap:0 18px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:18px;scroll-margin-top:96px;
  transition:border-color .25s ease-out;
}
.lead-card:hover{border-color:var(--ps-color-neutral-2-500)}
.lead-card.is-open{border-color:var(--ps-color-neutral-3-500)}
.lead-dir--reg .lead-card{background:var(--ps-color-neutral-2-000)}
.lead-card__photo{
  width:84px;height:120px;object-fit:cover;border-radius:10px;
  background:var(--ps-color-neutral-2-100);
}
.lead-card__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lead-card__name{margin:2px 0 4px;font:500 17px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.lead-card__role{margin:0 0 12px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
@media (min-width:1024px){
  .lead-card{grid-template-columns:105px minmax(0,1fr);padding:22px}
  .lead-card__photo{width:105px;height:150px}
}

/* the toggle */
.lead-bio__question{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;padding:4px 0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);
}
.lead-bio__question:hover{color:var(--ps-color-brand-500)}
.lead-bio__question:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px;border-radius:4px}
.lead-bio__marker{position:relative;width:11px;height:11px;flex:none}
.lead-bio__marker::before,.lead-bio__marker::after{content:"";position:absolute;background:currentColor;transition:transform .25s ease-out,opacity .25s ease-out}
.lead-bio__marker::before{left:0;top:5px;width:11px;height:1px}
.lead-bio__marker::after{left:5px;top:0;width:1px;height:11px}
.lead-card.is-open .lead-bio__marker::after{transform:scaleY(0);opacity:0}
/* no JavaScript, no toggle: the bios are simply open */
.lead-dir__grid:not(.is-enhanced) .lead-bio__question{display:none}

/* the panel: open by default, closed once the module has enhanced the group.
   Padding sits on the child, never on the overflow:hidden inner, so a 0fr
   row closes all the way */
.lead-bio__answer{
  grid-column:1 / -1;
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1);
}
.lead-dir__grid.is-enhanced .lead-bio__item:not(.is-open) .lead-bio__answer{grid-template-rows:0fr}
.lead-bio__inner{overflow:hidden;min-height:0}
.lead-bio__body{padding-top:16px}
.lead-bio__body p{
  margin:0 0 12px;max-width:68ch;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.lead-bio__body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   §5 Related: four tiles, two across from 640, four from 1024
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.pf-related__inner{grid-column-start:2;grid-column-end:span 10}}

/* phones: the large buttons can be wider than a 320px column; let them wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.lead-board .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.lead-board .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .lead-card,.lead-bio__answer,.lead-bio__marker::before,.lead-bio__marker::after{transition:none}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.lead-dir--exec,.lead-board{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.lead-dir--reg,.pf-related{background:var(--sv-white)}
.pf-related__link{background:var(--ps-color-neutral-2-000)}

/* --------------------------------------------------------------------------
   The Leadership round (2026-09-28)
   -------------------------------------------------------------------------- */
/* each card's short summary between the title line and the toggle (C03-C20) */
.lead-card__summary{margin:0 0 12px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* the regional section's text link under its lead (C02) */
.lead-dir__more{margin:16px 0 0}
/* the board roster, one director per line (C01) */
.lead-board__roster{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.lead-board__roster li{font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.lead-board__name{font-weight:500;color:var(--ps-color-neutral-3-500)}