/* ===== Phone & tablet polish (loaded last; desktop is untouched above 760px) ===== */
img,video,iframe{max-width:100%}
.hscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.svc-grid{grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.sol-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.cup-banner .duel-x,.cup-banner .trophy{flex:0 0 auto}
.svc-n{flex-shrink:0}

@media (max-width:760px){
  /* typing in a box no longer zooms the page on iPhone */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  /* buttons and links big enough for a thumb */
  .hn-tabs{margin-left:-1rem!important;margin-right:-1rem!important;padding-left:1rem!important;padding-right:1rem!important;max-width:calc(100% + 2rem)}
  .hn-tabs a,.sol-units button,.chip,.stats-chips button{min-height:40px;display:inline-flex;align-items:center}
  .site-footer li a{display:inline-block;padding:.35rem 0}
  .svc-more{display:inline-block;padding:.6rem .2rem}
  details>summary{min-height:40px}
  /* hero buttons: one tidy column, all the same width */
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-ctas>a,.hero-ctas>button{flex:0 0 auto!important;width:100%;max-width:20rem;justify-content:center;margin:0!important}
  /* labels that were too small to read */
  .hc-lbl{font-size:.7rem}
  .hc-clock small{font-size:.6rem!important}
  .text-\[10px\]{font-size:11px!important}
  /* long names and links wrap instead of pushing the page sideways */
  h1,h2,h3,.font-heading{overflow-wrap:anywhere}
  .svc-row{min-width:0}
  .svc-who b{white-space:normal;overflow-wrap:anywhere}
}
@media (max-width:400px){
  .hn-tabs a{padding:.4rem .65rem}
  .svc-row{gap:.55rem;padding:.65rem}
}

/* site menu on phones: the list scrolls by itself and the page behind stays put */
#mobile-menu aside{display:flex;flex-direction:column;height:100%;height:100dvh;max-height:100dvh}
#mobile-menu aside>nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:2rem}
html:has(#mobile-menu.open),html:has(#mobile-menu.open) body{overflow:hidden!important}

/* pop-ups (photo viewer, medal list, join box): the page behind stays put, the pop-up scrolls on its own */
html:has(body.modal-open),html:has(#lightbox:not([hidden])),html:has(dialog[open]),
body.modal-open,body:has(#lightbox:not([hidden])),body:has(dialog[open]){overflow:hidden!important}
.recip-modal,.recip-list,#lightbox,dialog{overscroll-behavior:contain}
.recip-list{min-height:0;-webkit-overflow-scrolling:touch}
dialog{max-height:calc(100dvh - 2rem);overflow-y:auto}
#lightbox{overflow-y:auto}
/* the recruiting table no longer traps your thumb in its own little scroll box on phones */
@media (max-width:760px){.rc-scroll{max-height:none!important}}