/* Testing labs section (#testing-labs). It reuses the home page's
   "Everything already built for you" components (.infra, .tabs, .pan, .mini,
   .spots, .map, .pin) from main.css; this file only adds what that section
   does not have: a wrapping tab row, lab counts, count pins and a district
   filter bar. See inc/testing-labs.php. */

.tlab{padding-block:clamp(3.5rem,7vw,6rem);scroll-margin-top:calc(var(--hdr-h,72px) + var(--util-h,0px))}

/* tabs: ten disciplines wrap onto more than one row on narrow screens, so the
   sliding pill moves in two directions here */
.tlab .tabs{border-radius:28px;width:max-content;max-width:100%}
.tlab .tab{padding:.6rem 1rem;font-size:.84rem;gap:.45rem}
.tlab .tabs__pill{top:0;bottom:auto;left:0;border-radius:var(--r-pill)}

.tlab .pan{min-height:560px}
.tlab .spot__d{background:var(--sky)}
.tlab .spot b{overflow-wrap:anywhere}

/* one small dot per lab */
.tlab .pin{--pin:11px}
.tlab .pin::after{content:"";position:absolute;inset:-7px;border-radius:50%}   /* a larger target than the dot */
.tlab .pin__halo{display:none}
.tlab .pin__badge{background:#fff;box-shadow:0 0 0 2px #0483ce inset,0 1px 5px rgba(10,12,43,.4)}
.tlab .pin.is-on{z-index:6}
.tlab .pin.is-on .pin__badge{
  transform:scale(1.9);background:#fdcd30;
  box-shadow:0 0 0 2px #fff,0 3px 12px rgba(253,205,48,.7);
}
.tlab .pin__tip{max-width:240px}
.tlab .pin__tip em{opacity:.8}
.tlab.tabs-scope:has(.pin.is-on) .pin:not(.is-on){opacity:.35;filter:none}
.tlab .spot.is-on .spot__d{background:#fdcd30}

/* a touch screen has no hover, so no tooltip: the caption does that job */
@media (hover:none){.tlab .pin__tip{display:none}}

/* the scrolling strip of prominent labs: its own row under the list and the map,
   as wide as the container */
.tlab__mq{display:grid;gap:.8rem;margin-top:clamp(2.4rem,4vw,3.4rem)}
.tlab__mqh{
  font-family:var(--f-head);font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#98d048;
}
.tlab__mqv{
  overflow:hidden;border-radius:16px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tlab__mqt{
  display:flex;gap:.8rem;width:max-content;margin:0;padding:.2rem 0;list-style:none;
  animation:tlabMq 70s linear infinite;
}
.tlab__mqv:hover .tlab__mqt{animation-play-state:paused}
@keyframes tlabMq{to{transform:translateX(calc(-50% - .4rem))}}
.tlab__mqi{
  flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:clamp(150px,15vw,200px);height:clamp(92px,9vw,116px);
  padding:.6rem 1.1rem;border-radius:16px;
  background:#fff;box-shadow:0 10px 26px rgba(1,15,107,.28);
}
.tlab__emb{
  display:block;height:100%;aspect-ratio:92/125;
  background-repeat:no-repeat;background-position:0 50%;background-size:auto 100%;
}
.tlab__mqi img{display:block;max-width:100%;max-height:100%;min-height:0;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){
  .tlab__mqt{animation:none}
  .tlab__mqv{overflow-x:auto;-webkit-mask:none;mask:none}
}
html.no-motion .tlab__mqt{animation:none}
html.no-motion .tlab__mqv{overflow-x:auto;-webkit-mask:none;mask:none}

@media (max-width:960px){
  .tlab .pan{min-height:0}
  .tlab .tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tlab .tabs::-webkit-scrollbar{display:none}
  .tlab .tab{flex:none}
}
@media (max-width:640px){
  .tlab .tab{padding:.52rem .8rem;font-size:.8rem}
  .tlab .pin{--pin:12px}
  .tlab .pan__h{font-size:clamp(1.5rem,6.4vw,1.9rem)}
  .tlab .mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tlab .mini__i{padding-block:.9rem}
  .tlab .mini__i + .mini__i::before{top:.9rem;bottom:.9rem}
  .tlab .mini__n{font-size:1.45rem}
  .tlab .mini__l{font-size:.58rem;letter-spacing:.09em}
  .tlab .mini__i{padding-right:.5rem}
  .tlab .mini__i + .mini__i{padding-left:.7rem}
  .tlab .map__legend{font-size:.58rem}
}