/* NOTW v11: unified roster tiles - Founders, Moderation and Warzone Pro. */
/* Use a single physical tile dimension and flexible centered rails regardless of team size. */
body.notw-universe .teams-hub-page{
  --notw-roster-card-width:clamp(218px,21vw,260px);
  --notw-roster-meta-height:148px;
}
body.notw-universe .teams-hub-page :is(
  .compact-staff .staff-rail,
  .compact-staff .staff-rail-four,
  .compact-team-view .hub-roster
){
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  grid-template-columns:none!important;
  scroll-snap-type:none!important;
}
body.notw-universe .teams-hub-page :is(
  .compact-staff .staff-rail .staff-person,
  .compact-staff .staff-rail-four .staff-person,
  .compact-team-view .hub-roster .hub-person
){
  display:flex!important;
  flex:0 0 var(--notw-roster-card-width)!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
  width:var(--notw-roster-card-width)!important;
  min-width:var(--notw-roster-card-width)!important;
  max-width:var(--notw-roster-card-width)!important;
  height:calc(var(--notw-roster-card-width) + var(--notw-roster-meta-height))!important;
  min-height:calc(var(--notw-roster-card-width) + var(--notw-roster-meta-height))!important;
  max-height:calc(var(--notw-roster-card-width) + var(--notw-roster-meta-height))!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  border:1px solid rgba(98,169,250,.28)!important;
  background:linear-gradient(160deg,#142643,#0b192e)!important;
  scroll-snap-align:none!important;
}
body.notw-universe .teams-hub-page :is(
  .compact-staff .staff-rail .staff-media,
  .compact-staff .staff-rail-four .staff-media,
  .compact-team-view .hub-roster .hub-person-visual
){
  display:block!important;
  flex:0 0 var(--notw-roster-card-width)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:var(--notw-roster-card-width)!important;
  min-height:var(--notw-roster-card-width)!important;
  max-height:var(--notw-roster-card-width)!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  border:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#0b1528!important;
}
body.notw-universe .teams-hub-page :is(
  .compact-staff .staff-rail .staff-media img,
  .compact-staff .staff-rail-four .staff-media img,
  .compact-team-view .hub-roster .hub-person-visual img
){
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  background:transparent!important;
}
/* The BeroSoza emblem is a square graphic, unlike the photographic portraits. */
body.notw-universe .teams-hub-page .staff-person[data-person="berosoza"] .staff-media img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#eef0f2!important;
}
body.notw-universe .teams-hub-page :is(
  .compact-staff .staff-rail .staff-person-meta,
  .compact-staff .staff-rail-four .staff-person-meta,
  .compact-team-view .hub-roster .hub-person-meta
){
  display:flex!important;
  flex:1 0 var(--notw-roster-meta-height)!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  height:var(--notw-roster-meta-height)!important;
  min-height:var(--notw-roster-meta-height)!important;
  max-height:var(--notw-roster-meta-height)!important;
  padding:16px 17px!important;
  margin:0!important;
  background:linear-gradient(180deg,#101e34,#0c1729)!important;
  overflow:hidden!important;
}
body.notw-universe .teams-hub-page :is(.staff-person-meta h3,.hub-person-meta h3){
  font-size:clamp(27px,2.2vw,33px)!important;
  line-height:1.05!important;
  overflow-wrap:anywhere!important;
}
body.notw-universe .teams-hub-page :is(.staff-person-meta .person-socials,.hub-person-meta .person-socials){margin-top:auto!important}
body.notw-universe .teams-hub-page .hub-person-meta .hub-profile-link{margin-top:7px!important}
@media(max-width:720px){
  body.notw-universe .teams-hub-page{--notw-roster-card-width:min(78vw,260px);}
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail,.compact-staff .staff-rail-four,.compact-team-view .hub-roster){
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    gap:18px!important;
  }
}


/* v13: mobile team sections should swipe left/right instead of stacking downward. */
@media(max-width:720px){
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail,.compact-staff .staff-rail-four,.compact-team-view .hub-roster){
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    padding:0 6px 10px!important;
    gap:14px!important;
  }
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail .staff-person,.compact-staff .staff-rail-four .staff-person,.compact-team-view .hub-roster .hub-person){
    flex:0 0 min(76vw,260px)!important;
    width:min(76vw,260px)!important;
    min-width:min(76vw,260px)!important;
    max-width:min(76vw,260px)!important;
    height:calc(min(76vw,260px) + var(--notw-roster-meta-height))!important;
    min-height:calc(min(76vw,260px) + var(--notw-roster-meta-height))!important;
    max-height:calc(min(76vw,260px) + var(--notw-roster-meta-height))!important;
    scroll-snap-align:start!important;
  }
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail .staff-media,.compact-staff .staff-rail-four .staff-media,.compact-team-view .hub-roster .hub-person-visual){
    flex-basis:min(76vw,260px)!important;
    height:min(76vw,260px)!important;
    min-height:min(76vw,260px)!important;
    max-height:min(76vw,260px)!important;
  }
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail,.compact-staff .staff-rail-four,.compact-team-view .hub-roster)::-webkit-scrollbar{height:8px}
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail,.compact-staff .staff-rail-four,.compact-team-view .hub-roster)::-webkit-scrollbar-thumb{background:rgba(98,169,250,.35);border-radius:999px}
  body.notw-universe .teams-hub-page :is(.compact-staff .staff-rail,.compact-staff .staff-rail-four,.compact-team-view .hub-roster)::-webkit-scrollbar-track{background:rgba(9,16,31,.35)}
}