/* Team · practices — an index of the seven beside one pane per practice (partials/team/practices.php).
   Without JavaScript every pane is on the page and the index jumps to it; assets/js/team/practices.js adds .is-tabs to
   [data-tm-prac], turns the index into tabs and shows one pane at a time. On phones the index is a row of chips that
   scrolls sideways above the pane. */
.tm-prac__wrap{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:var(--bdh-gap-l);align-items:start}
.tm-prac__nav{position:sticky;top:var(--bdh-sticky)}
.tm-prac__scroll{overflow:visible}   /* the list scrolls sideways only on phones and tablets (below) */
.tm-prac__index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tm-prac__index li{border-bottom:1px solid var(--line)}
.tm-prac__tab{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 8px 12px 0;color:var(--muted);font-size:var(--t-body);font-weight:500;line-height:1.3;
  transition:color var(--d1) var(--e-io),padding var(--d2) var(--e)}
.tm-prac__tab::before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:0;border-radius:2px;background:var(--blue);transform:translateY(-50%);transition:height var(--d2) var(--e)}
.tm-prac__tab:hover{color:var(--ink)}
.tm-prac__tn{flex:none;width:22px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;color:var(--faint)}
.tm-prac__tl{flex:1;min-width:0}
.tm-prac__tc{flex:none;min-width:24px;height:24px;padding:0 7px;display:inline-grid;place-items:center;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink);font-family:var(--f);font-size:var(--t-lbl)}
.is-tabs .tm-prac__tab[aria-selected="true"]{color:var(--ink);padding-left:6px}
.is-tabs .tm-prac__tab[aria-selected="true"]::before{height:26px}
.is-tabs .tm-prac__tab[aria-selected="true"] .tm-prac__tn{color:var(--blue)}

.tm-prac__panes{display:flex;flex-direction:column;gap:var(--bdh-block)}
.is-tabs .tm-prac__panes{display:grid}
.is-tabs .tm-prac__pane{grid-area:1 / 1}
.is-tabs .tm-prac__pane:not(.is-on){display:none}
.is-tabs .tm-prac__pane.is-on{animation:tm-pane-in .5s var(--e) both}
@keyframes tm-pane-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tm-prac__pane{scroll-margin-top:calc(var(--nav-h) + 40px)}
.tm-prac__pane:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:var(--r-sm)}

.tm-prac__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--bdh-gap);align-items:stretch}
.tm-prac__ph{aspect-ratio:4/3;margin:0;width:100%}   /* width: WebKit collapses a grid item that has an aspect ratio and only absolute children to 0×0 */
.tm-prac__chip{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tm-prac__chip span{color:var(--blue)}
.tm-prac__intro{display:flex;flex-direction:column;gap:14px;min-width:0;padding:4px 0}
.tm-prac__num{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;color:var(--faint)}
.tm-prac__t{font-family:var(--f-h);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:500;letter-spacing:-.022em;line-height:1.1;color:var(--ink)}
.tm-prac__p{font-size:var(--t-body);line-height:1.6;color:var(--txt);max-width:46ch}
.tm-prac__who{font-size:var(--t-sm);line-height:1.6;color:var(--muted);max-width:46ch}
.tm-prac__links{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:6px}
.tm-prac__links .tl{min-height:36px}
.tm-prac__none{font-size:var(--t-sm);color:var(--faint);min-height:36px;display:inline-flex;align-items:center}

.tm-prac__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bdh-gap);margin-top:var(--bdh-gap);padding-top:var(--bdh-gap);border-top:1px solid var(--line)}
.tm-prac__grid:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.tm-prac__box{display:flex;flex-direction:column;gap:14px;min-width:0}
.tm-prac__roles{display:flex;flex-wrap:wrap;gap:6px}
.tm-prac__seat{font-size:var(--t-sm);line-height:1.6;color:var(--txt)}
.tm-prac__lead{display:flex;align-items:center;gap:14px;min-height:64px;color:var(--ink)}
.tm-prac__lpic{position:relative;flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--paper-3)}
.tm-prac__lpic picture,.tm-prac__limg{display:block;width:100%;height:100%;object-fit:cover}
.tm-prac__lmono .tm-mono__i{font-size:1.25rem}
.tm-prac__lmono .tm-mono__dots{display:none}
.tm-prac__lb{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm-prac__lb b{font-family:var(--f-h);font-weight:500;font-size:1.0625rem;line-height:1.25}
.tm-prac__lb span{font-size:var(--t-sm);color:var(--muted);line-height:1.4}
a.tm-prac__lead:hover b{text-decoration:underline;text-underline-offset:3px}
.tm-prac__pairs{display:flex;flex-direction:column;gap:2px}
.tm-prac__pair{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--ink);font-size:var(--t-sm);font-weight:500}
.tm-prac__pair span{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;color:var(--blue)}
.tm-prac__pair:hover{text-decoration:underline;text-underline-offset:3px}
.tm-prac__pn{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

@media (max-width:1023px){
  .tm-prac__wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .tm-prac__nav{position:static;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter)}
  .tm-prac__scroll{overflow-x:auto}
  .tm-prac__scroll{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tm-prac__index{flex-direction:row;gap:6px;border:0;width:max-content;padding:2px 12px 2px 4px}
  .tm-prac__index li{border:0}
  .tm-prac__tab{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);white-space:nowrap;font-size:var(--t-sm)}
  .tm-prac__tab::before{display:none}
  .is-tabs .tm-prac__tab[aria-selected="true"]{padding-left:14px;background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
  .is-tabs .tm-prac__tab[aria-selected="true"] .tm-prac__tn{color:var(--on-ink-3)}
  .tm-prac__tn{width:auto}
  .tm-prac__tc{display:none}
}
@media (max-width:860px){
  .tm-prac__top{grid-template-columns:minmax(0,1fr)}
  .tm-prac__grid,.tm-prac__grid:has(> :nth-child(4)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:600px){
  .tm-prac__grid,.tm-prac__grid:has(> :nth-child(4)){grid-template-columns:minmax(0,1fr)}
  .tm-prac__pair{min-height:44px}
  .tm-prac__links .tl,.tm-prac__none{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .is-tabs .tm-prac__pane.is-on{animation:none}
  .tm-prac__tab,.tm-prac__tab::before{transition:none}
}

/* touch screens (phones and tablets): 44px tap targets (integrator, responsive pass) */
@media (pointer:coarse){
  .tm-prac__pair{min-height:44px}
}