/*
 * component-team-2.css — team family part 2: wave/labeled staggers, mosaic, bento, feature split,
 * sliders, marquee, filter grid (:has radios), hover tiles, leadership, flip cards, spotlight switcher,
 * org chart, polaroid. Tokens only, no !important. CSS-only interactivity, fail-open without :has().
 */

/* ---- 6 stagger wave ---- */
.apb-tm-wavegrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 5), 1fr); gap: 16px; align-items: start; max-width: 1000px; margin: 0 auto; }
.apb-tm-wavec { margin: 0; }
.apb-tm-wavec.o1 { margin-top: 20px; } .apb-tm-wavec.o2 { margin-top: 40px; } .apb-tm-wavec.o3 { margin-top: 56px; }
.apb-tm-waveph { border-radius: calc(var(--apb-rx-radius) * 1.3); aspect-ratio: 3/5; background: var(--apb-rx-soft); }

/* ---- 7 stagger labeled ---- */
.apb-tm-slabgrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 5), 1fr); gap: 18px; align-items: start; max-width: 980px; margin: 0 auto; }
.apb-tm-slabc.o1 { margin-top: 20px; } .apb-tm-slabc.o2 { margin-top: 40px; }

/* ---- 8 mosaic ---- */
.apb-tm-mosgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 14px; max-width: 1000px; margin: 0 auto; }
.apb-tm-mostile { border-radius: calc(var(--apb-rx-radius) * 1.2); background: var(--apb-rx-soft); }
.apb-tm-mostile.feat { grid-row: span 2; }
.apb-tm-mostile.wide { grid-column: span 2; }

/* ---- 9 bento ---- */
.apb-tm-bengrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 14px; max-width: 1000px; margin: 0 auto; }
.apb-tm-bentile { border-radius: calc(var(--apb-rx-radius) * 1.2); background: var(--apb-rx-soft); position: relative; overflow: hidden; }
.apb-tm-bentile.feat { grid-column: span 2; grid-row: span 2; }
.apb-tm-bentile.wide { grid-column: span 2; }
.apb-tm-benstat { display: flex; align-items: center; justify-content: center; text-align: center; }
.apb-tm-benval { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: 22px; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }

/* ---- 10 feature split ---- */
.apb-tm-fsgrid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 4vw, 40px); align-items: stretch; }
.apb-tm-fsfeat { border-radius: calc(var(--apb-rx-radius) * 1.3); background: var(--apb-rx-soft); min-height: 340px; }
.apb-tm-fsminis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-content: start; }
.apb-tm-fsmini { text-align: center; }
.apb-tm-fsminiph { border-radius: var(--apb-rx-radius); aspect-ratio: 1; background: var(--apb-rx-soft); }
.apb-tm-fsmini .apb-tm-name { font-size: 13px; margin-top: 8px; }

/* ---- 11/12 sliders ---- */
.apb-tm-slmask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.apb-tm-sltrack, .apb-tm-sstrack { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 24px; }
.apb-tm-sltrack::-webkit-scrollbar, .apb-tm-sstrack::-webkit-scrollbar { display: none; }
.apb-tm-slc { flex: 0 0 280px; scroll-snap-align: center; position: relative; border-radius: calc(var(--apb-rx-radius) * 1.2); overflow: hidden; aspect-ratio: 4/5; background: var(--apb-rx-soft); }
.apb-tm-slc.gray .apb-tm-img { filter: grayscale(1); }
.apb-tm-slcard { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--apb-rx-surface); border-radius: calc(var(--apb-rx-radius) * .7); padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.apb-tm-slname { font-weight: 700; font-size: 15px; }
.apb-tm-slrole { font-size: 13px; color: var(--apb-rx-dim); }
.apb-tm-sstrack { align-items: center; padding: 24px; }
.apb-tm-ssc { flex: 0 0 240px; scroll-snap-align: center; position: relative; opacity: .7; transition: opacity var(--apb-rx-t, .3s), transform var(--apb-rx-t, .3s); cursor: pointer; }
.apb-tm-sscph { border-radius: calc(var(--apb-rx-radius) * 1.2); overflow: hidden; aspect-ratio: 1; background: var(--apb-rx-soft); }
.apb-tm-ssc .apb-tm-img { filter: grayscale(1); transition: filter var(--apb-rx-t, .3s); }
.apb-tm-ssc.on, .apb-tm-ssc:hover, .apb-tm-ssc:focus-within { opacity: 1; transform: scale(1.04); }
.apb-tm-ssc.on .apb-tm-img, .apb-tm-ssc:hover .apb-tm-img, .apb-tm-ssc:focus-within .apb-tm-img { filter: none; }
.apb-tm-ssc.on .apb-tm-sscph, .apb-tm-ssc:hover .apb-tm-sscph, .apb-tm-ssc:focus-within .apb-tm-sscph { box-shadow: 0 18px 40px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce) { .apb-tm-ssc { transition: none; } }

/* ---- 13 marquee ---- */
.apb-tm-mq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
@keyframes apb-tm-mqscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.apb-tm-mqtrack { display: flex; gap: 20px; width: max-content; animation: apb-tm-mqscroll 32s linear infinite; }
.apb-tm-mq:hover .apb-tm-mqtrack { animation-play-state: paused; }
.apb-tm-mqset { display: flex; gap: 20px; }
.apb-tm-mqc { text-align: center; width: 104px; }
.apb-tm-mqav { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--apb-rx-soft); margin: 0 auto; }
.apb-tm-mqc .apb-tm-name { font-size: 13px; margin-top: 8px; }
.apb-tm-mqc .apb-tm-role { font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .apb-tm-mqtrack { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .apb-tm-mqset[aria-hidden] { display: none; }
  .apb-tm-mq { -webkit-mask-image: none; mask-image: none; }
}

/* ---- 14 filter grid (radios hidden inside pill labels; :has() drives filtering, fail-open) ---- */
.apb-tfg-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(24px, 4vw, 56px); align-items: start; max-width: 1120px; margin: 0 auto; }
.apb-rx-tfg .apb-tm-head { text-align: left; margin: 0; }
.apb-tfg-side { position: sticky; top: 24px; }
.apb-tfg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.apb-tfg-pill { cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--apb-rx-line); color: var(--apb-rx-ink); transition: background var(--apb-rx-t-fast, .15s), color var(--apb-rx-t-fast, .15s), border-color var(--apb-rx-t-fast, .15s); }
.apb-tfg-pill input { position: absolute; opacity: 0; pointer-events: none; }
.apb-tfg-pill:has(input:checked) { background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); border-color: transparent; }
.apb-tfg-pill:has(input:focus-visible) { outline: 2px solid var(--apb-rx-brand); outline-offset: 2px; }
.apb-tfg-list { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 3), 1fr); gap: 18px; }
.apb-tfg-ph { border-radius: calc(var(--apb-rx-radius) * 1.1); aspect-ratio: 4/3; background: var(--apb-rx-soft); }
.apb-tfg-m .apb-tm-name { margin-top: 10px; }
/* pill k (2..6) checked -> only .d(k-1) cards show */
.apb-rx-tfg:has(.apb-tfg-pill:nth-child(2) input:checked) .apb-tfg-m:not(.d1),
.apb-rx-tfg:has(.apb-tfg-pill:nth-child(3) input:checked) .apb-tfg-m:not(.d2),
.apb-rx-tfg:has(.apb-tfg-pill:nth-child(4) input:checked) .apb-tfg-m:not(.d3),
.apb-rx-tfg:has(.apb-tfg-pill:nth-child(5) input:checked) .apb-tfg-m:not(.d4),
.apb-rx-tfg:has(.apb-tfg-pill:nth-child(6) input:checked) .apb-tfg-m:not(.d5) { display: none; }

/* ---- 15 hover tiles ---- */
.apb-tm-hvgrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 3), 1fr); gap: 18px; }
.apb-tm-hvtile { border-radius: calc(var(--apb-rx-radius) * 1.2); aspect-ratio: 4/5; background: var(--apb-rx-soft); }
.apb-tm-hvtile .apb-tm-ov { padding-bottom: 64px; } /* keep the bio clear of the always-on label */

/* ---- 16 leadership ---- */
.apb-tm-ldgrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 3), 1fr); gap: 24px; }
.apb-tm-ldcard { background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * 1.3); overflow: hidden; }
.apb-tm-ldph { aspect-ratio: 5/4; background: var(--apb-rx-soft); }
.apb-tm-ldbody { padding: 20px; }
.apb-tm-ldname { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: 18px; }
.apb-tm-ldrole { font-size: 13px; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); font-weight: 600; margin-top: 2px; }
.apb-tm-ldbio { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--apb-rx-dim); }

/* ---- 17 flip cards ---- */
.apb-tm-flgrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 3), 1fr); gap: 20px; }
.apb-tm-flc { perspective: 1000px; aspect-ratio: 3/4; cursor: pointer; }
.apb-tm-flin { position: relative; width: 100%; height: 100%; transition: transform var(--apb-rx-t-slow, .6s); transform-style: preserve-3d; }
.apb-tm-flc:hover .apb-tm-flin, .apb-tm-flc:focus-within .apb-tm-flin, .apb-tm-flc:focus .apb-tm-flin { transform: rotateY(180deg); }
.apb-tm-flfront, .apb-tm-flback { position: absolute; inset: 0; backface-visibility: hidden; border-radius: calc(var(--apb-rx-radius) * 1.2); overflow: hidden; }
.apb-tm-flfront { background: var(--apb-rx-soft); }
.apb-tm-flback { transform: rotateY(180deg); background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.apb-tm-flname { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: 17px; }
.apb-tm-flbio { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; opacity: .92; }
.apb-tm-flfact { margin-top: 14px; font-size: 12px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .apb-tm-flin { transition: none; } }

/* ---- 18 spotlight switcher (:has radios; fail-open = first panel) ---- */
.apb-tsw-wrap { max-width: 900px; margin: 0 auto; }
.apb-tsw-p { display: none; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 4vw, 44px); align-items: center; min-height: 300px; }
.apb-tsw-p:first-child { display: grid; }
.apb-tsw-ph { border-radius: calc(var(--apb-rx-radius) * 1.3); overflow: hidden; aspect-ratio: 1; background: var(--apb-rx-soft); }
.apb-tm-swbio { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--apb-rx-dim); }
.apb-tsw-rail { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.apb-tsw-th { cursor: pointer; }
.apb-tsw-th input { position: absolute; opacity: 0; pointer-events: none; }
.apb-tsw-thav { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--apb-rx-soft); outline: 3px solid transparent; outline-offset: 2px; }
.apb-tsw-th:has(input:checked) .apb-tsw-thav { outline-color: var(--apb-rx-brand); }
.apb-tsw-th:has(input:focus-visible) .apb-tsw-thav { outline-color: var(--apb-rx-brand); outline-style: dashed; }
/* any checked thumb hides all panels, then thumb k re-shows panel k (fail-open: first panel w/o :has) */
.apb-rx-tsw:has(.apb-tsw-th input:checked) .apb-tsw-p { display: none; }
.apb-rx-tsw:has(.apb-tsw-th:nth-child(1) input:checked) .apb-tsw-p:nth-child(1),
.apb-rx-tsw:has(.apb-tsw-th:nth-child(2) input:checked) .apb-tsw-p:nth-child(2),
.apb-rx-tsw:has(.apb-tsw-th:nth-child(3) input:checked) .apb-tsw-p:nth-child(3),
.apb-rx-tsw:has(.apb-tsw-th:nth-child(4) input:checked) .apb-tsw-p:nth-child(4),
.apb-rx-tsw:has(.apb-tsw-th:nth-child(5) input:checked) .apb-tsw-p:nth-child(5) { display: grid; }

/* ---- 19 org chart ---- */
.apb-toc-tree { display: flex; flex-direction: column; align-items: center; }
.apb-toc-node { display: flex; align-items: center; gap: 12px; background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: var(--apb-rx-radius); padding: 10px 14px; }
.apb-toc-root { border: 2px solid var(--apb-rx-brand); padding: 12px 18px; }
.apb-toc-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--apb-rx-soft); display: block; }
.apb-toc-info { text-align: left; }
.apb-toc-name { font-weight: 700; font-size: 14px; }
.apb-toc-role { font-size: 12px; color: var(--apb-rx-dim); }
.apb-toc-root .apb-toc-role { color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-toc-vline { width: 2px; height: 26px; background: var(--apb-rx-line); }
.apb-toc-row { display: flex; justify-content: center; gap: clamp(14px, 4vw, 56px); flex-wrap: wrap; position: relative; padding-top: 0; }
.apb-toc-branch { display: flex; flex-direction: column; align-items: center; }
.apb-toc-branch .apb-toc-vline { height: 22px; }

/* ---- 20 polaroid ---- */
.apb-tm-plrow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 36px); }
.apb-tm-plc { background: var(--apb-rx-surface); padding: 12px 12px 0; border-radius: 4px; box-shadow: 0 10px 26px rgba(0,0,0,.14); width: 190px; text-align: center; }
.apb-tm-plc.r0 { transform: rotate(-4deg); } .apb-tm-plc.r1 { transform: rotate(3deg); margin-top: 24px; }
.apb-tm-plc.r2 { transform: rotate(-2deg); } .apb-tm-plc.r3 { transform: rotate(5deg); margin-top: 18px; }
.apb-tm-plph { aspect-ratio: 1; background: var(--apb-rx-soft); border-radius: 2px; overflow: hidden; }
.apb-tm-plname { font-family: var(--apb-rx-font-display, inherit); font-style: italic; font-size: 19px; padding-top: 12px; }
.apb-tm-plcap { font-size: 12px; color: var(--apb-rx-dim); padding: 2px 4px 16px; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .apb-tm-wavegrid, .apb-tm-slabgrid { grid-template-columns: repeat(2, 1fr); }
  .apb-tm-wavec, .apb-tm-slabc { margin-top: 0; }
  .apb-tm-bengrid { grid-template-columns: repeat(2, 1fr); }
  .apb-tm-mosgrid { grid-template-columns: repeat(2, 1fr); }
  .apb-tm-fsgrid, .apb-tsw-p { grid-template-columns: 1fr; }
  .apb-tfg-grid { grid-template-columns: 1fr; }
  .apb-tfg-side { position: static; }
  .apb-tfg-list { grid-template-columns: repeat(2, 1fr); }
  .apb-tm-hvgrid, .apb-tm-ldgrid, .apb-tm-flgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .apb-tm-hvgrid, .apb-tm-ldgrid, .apb-tm-flgrid { grid-template-columns: 1fr; } }