/* Team · hero — the claim beside the board of roles (partials/team/hero.php, assets/js/team/hero.js).
   The board is a 3 × 3 grid: eight square tiles around a dark readout that names the squad lit up. On phones it becomes
   a list, two to a row: each role (or person) named beside a small picture, lit or dimmed as on the full board, with the
   readout — the squad's seats in words — underneath. */
.tm-hero{padding-top:var(--bdh-hero-t);overflow:hidden}
.tm-hero__dots{position:absolute;top:0;bottom:0;right:0;width:58%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.tm-hero__wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:var(--bdh-gap-l);row-gap:56px;align-items:center}
.tm-hero__h{max-width:12.5ch}
.tm-hero__lead{margin-top:24px;max-width:50ch}
.tm-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ---------- the board ---------- */
.tm-board{--g:10px;position:relative;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.tm-board__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:46px;padding:10px 16px;border-bottom:1px solid var(--line-2);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;line-height:1.4;color:var(--muted)}
.tm-board__bt{color:var(--ink);text-transform:uppercase;letter-spacing:.14em}
.tm-board__bf{min-width:0}
.tm-board__ill{margin-left:auto;display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border:1px dashed var(--line-3);border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

.tm-board__grid{position:relative;padding:14px}
.tm-board__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);
  grid-template-areas:"t1 t2 t3" "t4 ro t5" "t6 t7 t8"}
.tm-board__tiles>:nth-child(1){grid-area:t1}.tm-board__tiles>:nth-child(2){grid-area:t2}.tm-board__tiles>:nth-child(3){grid-area:t3}
.tm-board__tiles>:nth-child(4){grid-area:t4}.tm-board__tiles>:nth-child(5){grid-area:t5}.tm-board__tiles>:nth-child(6){grid-area:t6}
.tm-board__tiles>:nth-child(7){grid-area:t7}.tm-board__tiles>:nth-child(8){grid-area:t8}

.tm-tile{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--paper-3);transition:box-shadow .5s var(--e)}
.tm-tile__a{position:absolute;inset:0;display:block;border-radius:inherit}
a.tm-tile__a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tm-tile__pic{position:absolute;inset:0}
.tm-tile__pic picture,.tm-tile__img{display:block;width:100%;height:100%}
.tm-tile__img{object-fit:cover;filter:saturate(.84) contrast(1.03);transition:filter .6s var(--e),opacity .6s var(--e)}
.tm-tile.is-off .tm-tile__img{filter:grayscale(1) contrast(.92);opacity:.4}
.tm-tile.is-on{box-shadow:var(--tm-ring)}
.tm-tile__cap{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:var(--r-xs);background:var(--paper);box-shadow:var(--sh-1);
  transition:opacity .5s var(--e)}
.tm-tile__cap b{font-size:var(--t-xs);font-weight:600;line-height:1.25;color:var(--ink)}
.tm-tile__cap span{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.tm-tile.is-off .tm-tile__cap{opacity:.72}

/* the readout, laid over the centre cell (the tiles are square, so the grid is too) */
.tm-board__ro{position:absolute;left:calc(14px + (100% - 28px - 2 * var(--g)) / 3 + var(--g));top:calc(14px + (100% - 28px - 2 * var(--g)) / 3 + var(--g));
  width:calc((100% - 28px - 2 * var(--g)) / 3);aspect-ratio:1/1;border-radius:var(--r);background:var(--ink);color:var(--on-ink-2)}
.tm-board__prog{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:14px;animation:tm-ro-in .45s var(--e) both}
.tm-board__prog[hidden]{display:none}
.tm-board__k{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3)}
.tm-board__name{font-family:var(--f-h);font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--on-ink)}
.tm-board__counts{font-family:var(--f);font-size:var(--t-xs);line-height:1.4;color:var(--on-ink-2)}
.tm-board__roles{display:none}
.tm-board__more{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;font-size:var(--t-xs);font-weight:500;line-height:1.3;color:var(--on-ink)}
.tm-board__more .i{color:var(--blue)}
.tm-board__more:hover{text-decoration:underline;text-underline-offset:3px}
@keyframes tm-ro-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* programme buttons and the pause toggle (shown by JS); the toggle's name stays the same, pressed while paused */
.tm-board__ctl{display:flex;align-items:center;gap:10px;padding:0 14px 14px}
.tm-board__ctl[hidden]{display:none}
.tm-board__seg{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.tm-board__b{min-height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--muted);font-size:var(--t-xs);font-weight:500;line-height:1.25;
  transition:background var(--d1) var(--e-io),color var(--d1) var(--e-io)}
.tm-board__b:hover{color:var(--ink)}
.tm-board__b[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.tm-board__pause{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-3);color:var(--ink)}
.tm-board__pause:hover{border-color:var(--ink)}
.tm-board__pi{position:absolute;left:50%;top:50%;width:10px;height:12px;transform:translate(-50%,-50%);border-left:3px solid currentColor;border-right:3px solid currentColor}
.tm-board__pause[aria-pressed="true"] .tm-board__pi{width:0;height:0;border-left:10px solid currentColor;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:1px}
.tm-board__pl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layouts ---------- */
@media (max-width:1180px){.tm-hero__wrap{grid-template-columns:minmax(0,1fr) minmax(0,520px)}.tm-board__name{font-size:1rem}}
@media (max-width:1023px){
  .tm-hero__wrap{grid-template-columns:minmax(0,1fr)}
  .tm-board{max-width:640px}
  .tm-hero__dots{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 75%);mask-image:linear-gradient(180deg,transparent 30%,#000 75%)}
}
@media (max-width:600px){
  .tm-board{border-radius:var(--r-lg)}
  .tm-board__ill{margin-left:0}
  .tm-board__grid{padding:12px}
  /* the board as a list: two to a row, each picture named beside it */
  .tm-board__tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:none;gap:12px 10px}
  .tm-board__tiles>:nth-child(n){grid-area:auto}
  .tm-tile,.tm-tile.is-on{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;column-gap:10px;aspect-ratio:auto;overflow:visible;background:none;border-radius:0;box-shadow:none}
  .tm-tile__a{position:static;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;column-gap:10px;grid-column:1 / -1;min-height:52px}
  .tm-tile__pic{position:relative;inset:auto;display:block;width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-3);transition:box-shadow .5s var(--e)}
  .tm-tile.is-on .tm-tile__pic{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--blue)}
  .tm-tile__cap{position:static;min-width:0;padding:0;background:none;box-shadow:none;border-radius:0}
  .tm-tile__cap b{font-size:var(--t-sm);line-height:1.3}
  .tm-tile.is-off .tm-tile__cap{opacity:.55}
  .tm-board__ro{position:relative;left:auto;top:auto;width:auto;aspect-ratio:auto;margin-top:14px}
  .tm-board__prog{position:relative;inset:auto;padding:16px}
  .tm-board__roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .tm-board__roles li{padding:4px 9px;border-radius:var(--r-pill);background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-line);
    font-size:var(--t-xs);line-height:1.35;color:var(--on-ink-2)}
  .tm-board__more{margin-top:10px;min-height:44px}
  .tm-board__ctl{flex-wrap:wrap;padding:0 12px 12px}
  .tm-board__b{min-height:44px;padding:0 14px}
  .tm-board__pause{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .tm-tile,.tm-tile__img,.tm-tile__cap,.tm-tile__pic{transition:none}
  .tm-board__prog{animation:none}
}

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