/* Public site — prevent horizontal crop / sideways scroll on phones & tablets.
   Applies to marketing remaster (.ua-mkt), custom landers (.ua-om), institutional heroes, homepage. */

@media (max-width: 991.98px) {
  html:not(.ua-portal-body) {
    max-width: 100%;
    overflow-x: hidden;
  }

  html:not(.ua-portal-body) body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
  }

  html:not(.ua-portal-body) header.header-with-topbar {
    max-width: 100%;
    overflow-x: hidden;
  }

  html:not(.ua-portal-body) .container,
  html:not(.ua-portal-body) .container-fluid,
  html:not(.ua-portal-body) .ua-wrap,
  html:not(.ua-portal-body) .ua-ld-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }

  html:not(.ua-portal-body) img,
  html:not(.ua-portal-body) video,
  html:not(.ua-portal-body) svg:not(.ua-inline-icon),
  html:not(.ua-portal-body) iframe {
    max-width: 100%;
    height: auto;
  }

  html:not(.ua-portal-body) .ua-mkt,
  html:not(.ua-portal-body) .ua-om,
  html:not(.ua-portal-body) .ua-homepage .ua-home,
  html:not(.ua-portal-body) .ua-hero,
  html:not(.ua-portal-body) .ua-section,
  html:not(.ua-portal-body) .ua-section-dark,
  html:not(.ua-portal-body) .ua-section-slate,
  html:not(.ua-portal-body) .ua-lbl-app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Grids: single column unless explicitly a 2-col that already has a mobile rule */
  html:not(.ua-portal-body) .ua-mkt [class*="grid"],
  html:not(.ua-portal-body) .ua-mkt .ua-split,
  html:not(.ua-portal-body) .ua-mkt .ua-card-grid,
  html:not(.ua-portal-body) .ua-mkt .ua-spine-row,
  html:not(.ua-portal-body) .ua-mkt .ua-quote-grid,
  html:not(.ua-portal-body) .ua-mkt .ua-photo-hero-grid,
  html:not(.ua-portal-body) .ua-om [class*="-grid"],
  html:not(.ua-portal-body) .ua-om [class*="-cards"],
  html:not(.ua-portal-body) .ua-om [class*="-roles"],
  html:not(.ua-portal-body) .ua-om [class*="-chips"],
  html:not(.ua-portal-body) .ua-om .ua-om-related,
  html:not(.ua-portal-body) .ua-om .ua-om-split,
  html:not(.ua-portal-body) .ua-om .ua-om-three {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  html:not(.ua-portal-body) .ua-mkt .ua-photo-hero-grid {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  html:not(.ua-portal-body) .ua-mkt h1,
  html:not(.ua-portal-body) .ua-mkt h2,
  html:not(.ua-portal-body) .ua-mkt h3,
  html:not(.ua-portal-body) .ua-mkt p,
  html:not(.ua-portal-body) .ua-om h1,
  html:not(.ua-portal-body) .ua-om h2,
  html:not(.ua-portal-body) .ua-om h3,
  html:not(.ua-portal-body) .ua-om p,
  html:not(.ua-portal-body) .ua-om li {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  html:not(.ua-portal-body) .ua-mkt [class*="card"] h3,
  html:not(.ua-portal-body) .ua-om [class*="cardh"] h3 {
    min-width: 0;
  }

  html:not(.ua-portal-body) .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  html:not(.ua-portal-body) .row > * {
    min-width: 0;
    max-width: 100%;
  }

  html:not(.ua-portal-body) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  html:not(.ua-portal-body) .ua-mkt .ua-actions,
  html:not(.ua-portal-body) .ua-om .ua-om-actions {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  html:not(.ua-portal-body) .ua-mkt .ua-actions {
    flex-direction: column;
    align-items: stretch;
  }

  html:not(.ua-portal-body) .ua-mkt .ua-btn-gold,
  html:not(.ua-portal-body) .ua-mkt .ua-btn-outline,
  html:not(.ua-portal-body) .ua-om .ua-btn-gold,
  html:not(.ua-portal-body) .ua-om .ua-btn-outline {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}