/* About Leadership only (AriseVida-About-Leadership-Mobile-v1). Linked from
   about.html after styles.css. Typography (Sep 2026) follows the Methadone
   page's mobile system: the section head uses the shared
   [data-av-mobile-section-heading] rules; cards/controls reuse the Methadone
   benefit-card, process-card, svcp-label and FAQ roles with the site fonts. */
#leadership > [data-avcl-mobile], #avcl-dialog{display:none}
@media (max-width:767.98px){
  /* Hide exactly the original direct container, including its desktop cards.
     Its markup, full bios, templates and controller remain unchanged. */
  #leadership > .container{display:none}
  #leadership{padding-block:40px 44px;background:#fdfaf7}
  #leadership > [data-avcl-mobile]{display:block;max-width:560px;margin-inline:auto;padding-inline:clamp(14px,4.4vw,24px)}
  #leadership [data-avcl-mobile], #avcl-dialog{color:#40566b;font-family:var(--font-sans,'Inter',sans-serif);font-size:1rem;font-weight:400;line-height:1.55;text-align:left;-webkit-text-size-adjust:100%}
  #leadership [data-avcl-mobile] *, #avcl-dialog *{box-sizing:border-box}
  #leadership .avcl-heading{text-align:center;margin:0 0 22px}
  /* eyebrow / title / intro: type, colour and rhythm come from the shared mobile section-head system;
     the title keeps its deliberate line composition (Methadone .av-methadone-benefits__title-line) */
  #leadership .avcl-title > span{display:block}
  #leadership .avcl-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
  #leadership .avcl-card{margin:0;padding:13px 13px 0;background:#fff;border:1px solid #d5e7e7;border-radius:14px;box-shadow:0 2px 8px rgb(18 69 67 / 2%)}
  #leadership .avcl-identity{display:grid;grid-template-columns:clamp(78px,24.6vw,112px) minmax(0,1fr);align-items:center;gap:14px;margin:0 0 13px}
  #leadership .avcl-portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:11px;max-width:none}
  /* card title role (Methadone benefit card h3) */
  #leadership .avcl-name{margin:0 0 5px;color:#0b1112;font-family:var(--font-display,Georgia,serif);font-size:18px;font-weight:500;line-height:1.12;letter-spacing:-.018em;text-transform:none}
  /* small label role (Methadone .av-svcp__media-label) */
  #leadership .avcl-role{margin:0;font-family:var(--font-sans,sans-serif);font-size:clamp(9.5px,2.6vw,11px);font-weight:700;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-700,#0f766e)}
  /* card body role (Methadone process card body) */
  #leadership .avcl-summary{margin:11px 0 0;font-size:clamp(12.75px,3.55vw,15.25px);font-weight:400;line-height:1.44;letter-spacing:0;color:#234d68}
  #leadership .avcl-profile{margin:0;border:0;border-top:1px solid #d5e7e7;padding:0}
  /* link/control role (Methadone hero secondary action) */
  #leadership .avcl-profile > summary{display:flex;align-items:center;gap:10px;min-height:47px;padding:8px 0;margin:0;color:var(--teal-700,#0f766e);font:600 16.5px/1.25 var(--font-sans,'Inter',sans-serif);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #leadership .avcl-profile > summary::-webkit-details-marker{display:none}
  #leadership .avcl-profile > summary::marker{content:''}
  #leadership .avcl-profile > summary svg{display:block;width:22px;height:22px;flex:none}
  /* expandable body role (Methadone FAQ answer) */
  #leadership .avcl-inline-bio{padding:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--ink-600,#3a5560)}
  #leadership .avcl-inline-bio p{margin:0 0 12px}
  #leadership .avcl-inline-bio p:last-child{margin-bottom:0}
  #leadership .avcl-profile > summary:focus-visible, #avcl-dialog button:focus-visible{outline:2px solid #007d84;outline-offset:4px;border-radius:4px}
  #avcl-dialog .avcl-dialog-scroll:focus-visible{outline:2px solid #007d84;outline-offset:-5px;border-radius:8px}
  /* Compact panel: height follows the content in every engine (only `top` is set,
     never `bottom`), horizontally centred by auto margins; the controller sets
     --avcl-top so the panel sits vertically centred on integer pixels, never under
     the status-bar safe area. max-height keeps long bios scrolling inside. */
  #avcl-dialog{position:fixed;transition:none!important;top:max(var(--avcl-top,16px),env(safe-area-inset-top,0px),16px);bottom:auto;inset-inline:0;box-sizing:border-box;width:calc(100% - 32px);max-width:430px;height:auto;min-height:0;max-height:calc(100vh - 32px);max-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);margin:0 auto;padding:0;border:1px solid #d4e3de;border-radius:22px;background:#fdfaf7;color:#314857;box-shadow:0 22px 65px rgb(8 36 35 / 24%);overflow:hidden;overscroll-behavior:contain}
  #avcl-dialog[open]{display:flex;flex-direction:column}
  #avcl-dialog::backdrop{background:rgb(11 35 35 / 52%);animation:avcl-scrim-in 220ms ease-out both}
  #avcl-dialog[data-closing]::backdrop{animation:avcl-scrim-out 220ms ease-in both}
  #avcl-dialog .avcl-dialog-top{flex:none;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between;min-height:54px;padding:6px 10px 6px 20px;border-bottom:1px solid #dde7e2;background:#fdfaf7}
  #avcl-dialog .avcl-dialog-kicker{flex:1 1 auto;min-width:0;margin:0;color:var(--teal-700,#0f766e);font:700 clamp(9.5px,2.6vw,11px)/1.4 var(--font-sans,'Inter',sans-serif);letter-spacing:.18em;text-transform:uppercase}
  /* button role (Methadone footer/CTA buttons) */
  #avcl-dialog .avcl-close{appearance:none;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--teal-700,#0f766e);font:600 15.5px/1.6 var(--font-sans,'Inter',sans-serif);letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #avcl-dialog .avcl-close svg{display:block;width:19px;height:19px;flex:none}
  #avcl-dialog .avcl-dialog-scroll{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 24px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  #avcl-dialog .avcl-dialog-identity{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:center;margin:0 0 18px}
  #avcl-dialog .avcl-dialog-portrait{display:block;aspect-ratio:1;width:78px;height:78px;object-fit:cover;object-position:center;border-radius:13px;max-width:none}
  /* large card title role (Methadone process card title) */
  #avcl-dialog .avcl-dialog-name{margin:0 0 6px;overflow-wrap:anywhere;color:#102838;font-family:var(--font-display,Georgia,serif);font-size:clamp(23px,6.7vw,29px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
  #avcl-dialog .avcl-dialog-role{margin:0;color:var(--teal-700,#0f766e);font-family:var(--font-sans,sans-serif);font-size:clamp(9.5px,2.6vw,11px);font-weight:700;line-height:1.4;letter-spacing:.18em;text-transform:uppercase}
  /* expandable body role (Methadone FAQ answer) */
  #avcl-dialog .avcl-dialog-bio{font-size:13.5px;line-height:1.7;letter-spacing:0;color:var(--ink-600,#3a5560)}
  #avcl-dialog .avcl-dialog-bio p{margin:0 0 12px}
  #avcl-dialog .avcl-dialog-bio p:last-child{margin-bottom:0}
  @keyframes avcl-scrim-in{from{background:rgb(11 35 35 / 0%)}to{background:rgb(11 35 35 / 52%)}}
  @keyframes avcl-scrim-out{from{background:rgb(11 35 35 / 52%)}to{background:rgb(11 35 35 / 0%)}}
}
/* Short viewports (landscape phones): tighten the panel chrome so the bio keeps
   the room; the header stays outside the scroll region so Close is always on screen. */
@media (max-width:767.98px) and (max-height:540px){
  #avcl-dialog .avcl-dialog-top{min-height:48px;padding-block:2px}
  #avcl-dialog .avcl-dialog-scroll{padding:12px 18px 16px}
  #avcl-dialog .avcl-dialog-identity{margin-bottom:10px}
}
@media (max-width:359px){
  #leadership .avcl-identity{gap:11px}
  #avcl-dialog .avcl-dialog-scroll{padding:16px 18px 20px}
  #avcl-dialog .avcl-dialog-identity{grid-template-columns:64px minmax(0,1fr);gap:12px}
  #avcl-dialog .avcl-dialog-portrait{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){#avcl-dialog::backdrop,#avcl-dialog[data-closing]::backdrop{animation:none}}
@media (forced-colors:active){
  #leadership .avcl-card,#avcl-dialog{border-color:CanvasText}
  #avcl-dialog::backdrop{background:rgb(0 0 0 / 65%)}
}