/* Nightshot — mobile horizontal overflow guard v1
   Scope: phones only. Does not change carousel geometry or desktop/tablet layout. */
@media (max-width:760px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overscroll-behavior-x:none;
  }
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overscroll-behavior-x:none;
  }

  /* Prevent padding/borders from making components wider than the viewport. */
  *,*::before,*::after{box-sizing:border-box}

  main,section,article,aside,header,footer,nav,form,fieldset,
  .wrap,.container,.content,.panel,.card{
    max-width:100%;
  }

  /* Grid/flex children are a common source of accidental horizontal growth. */
  main > *,section > *,article > *,form > *,
  .grid > *,.form-grid > *,.account-grid > *,
  .partner-grid > *,.partner-form > *{
    min-width:0;
  }

  img,picture,video,canvas,svg,iframe{
    max-width:100%;
  }

  input,select,textarea,button{
    max-width:100%;
  }
  input,select,textarea{
    min-width:0;
  }

  /* Long URLs/names must wrap instead of stretching the whole page. */
  p,li,dd,td,th,label,.meta-row,.partner-event-place{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Fixed header/search must remain inside the device safe area. */
  .ns-global-header,
  .ns-mainbar,
  .ns-mobile-menu,
  .ns-global-search{
    max-width:100%!important;
  }
  .ns-mainbar{
    width:100%!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  .ns-global-brand,
  .ns-global-search,
  .ns-global-search input{
    min-width:0!important;
  }

  /* Keep intentional horizontal rails scrollable inside themselves,
     while preventing them from widening the document. */
  .ns-venue-rail,.partner-tabs,[class*="carousel"],[class*="rail"]{
    max-width:100%;
  }
}

/* V2 — component-level overflow hardening for phones and narrow tablets.
   This is a safety net after fixing the actual component widths; it does not
   alter event-carousel slide geometry. */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
  main,header,footer,section,article,aside,nav,form,fieldset{min-width:0;max-width:100%}
  .ns-global-header,.ns-mainbar,.ns-global-search,.ns-mobile-menu,.ns-site-footer,.ns-site-footer-inner{max-width:100%!important;min-width:0!important}
  .ns-global-search input,.ns-global-search button,input,select,textarea{min-width:0;max-width:100%}
  .ns-event-page,.ns-city-page,.d,.wrap,.ns-admin-main{max-width:100%}
  .ns-event-grid,.ns-event-facts,.ns-related-grid,.ns-city-grid,.bodygrid,.evg{min-width:0}
  .ns-event-info,.ns-event-flyer,.ns-related-card,.ns-city-card,.panel,.card{min-width:0;max-width:100%}
  .ns-breadcrumb,.ns-event-info h1,.ns-footer-col a,.ns-footer-static,.fact strong,.fact a{overflow-wrap:anywhere}
  img,picture,video,canvas,svg,iframe{max-width:100%}
  .ns-share,.ns-event-card-share,.actions{max-width:100%;min-width:0}
  table{max-width:none}
}


/* V3 — portrait viewport lock + adaptive layout hardening.
   No transform/scale hacks: components reflow inside the viewport.
   Intentional rails/carousels keep their own internal movement. */
@media (orientation:portrait) and (max-width:1024px){
  html,body{
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:clip!important;
    overscroll-behavior-x:none;
    touch-action:pan-y pinch-zoom;
  }
  body{position:relative}
  #topbar,.ns-global-header,.ns-global-header-spacer,
  main,.ns-site-footer,.ns-site-footer-inner{
    width:100%;
    max-width:100vw!important;
    min-width:0!important;
  }
  *,*::before,*::after{box-sizing:border-box}
  main *,header *,footer *,section *,article *,aside *,nav *,form *,fieldset *{min-width:0}
  .wrap,.container,.content,.panel,.card,.grid,
  .comm-wrap,.comm-feed,.comm-post,.comm-post-main,.comm-page-head,.comm-discovery,.comm-discovery-banner,
  .ns-event-page,.ns-city-page,.ns-admin-main{
    max-width:100%!important;
    min-width:0!important;
  }
  .grid,.form-grid,.account-grid,.partner-grid,.partner-form,
  .comm-category-grid,.comm-geo-grid,.ns-event-grid,.ns-related-grid,.ns-city-grid{
    min-width:0!important;
  }
  img,picture,video,canvas,svg,iframe{
    max-width:100%!important;
    height:auto;
  }
  input,select,textarea,button{
    min-width:0!important;
    max-width:100%!important;
  }
  h1,h2,h3,h4,p,a,span,label,li,dd,dt,td,th,strong,small{
    overflow-wrap:anywhere;
  }
  pre,code{max-width:100%;overflow:auto}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ns-mobile-menu{left:0!important;right:0!important;width:100%!important;max-width:100vw!important}
  .ns-mainbar{
    width:100%!important;max-width:100vw!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  .ns-global-brand-logo{max-width:min(150px,38vw)!important;height:auto!important}
  .ns-site-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ns-footer-bottom{max-width:100%;flex-wrap:wrap;gap:8px}
  .comm-actions,.comm-account,.comm-page-head,.comm-discovery-banner{max-width:100%;flex-wrap:wrap}
  .comm-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comm-geo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Deliberately horizontal components stay contained in their own viewport.
     Event carousel slide dimensions/4s autoplay are untouched. */
  .ns2-eventi-shell,.ns2-eventi-viewport,.ns2-eventi-track,
  [class*="carousel"],[class*="rail"],.comm-topic-chips,.partner-tabs{
    max-width:100%!important;
  }
  .ns2-eventi-viewport,[class*="rail"],.comm-topic-chips,.partner-tabs{
    overscroll-behavior-x:contain;
  }
}
@media (orientation:portrait) and (max-width:600px){
  .ns-site-footer-inner,.comm-category-grid,.comm-geo-grid{grid-template-columns:1fr!important}
  .ns-site-footer-inner,.ns-footer-bottom{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .comm-wrap{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  .comm-post{max-width:100%!important}
}