/*
  Aurora Design Systems mobile safety layer
  Applied only to legacy pages that do not already provide a valid phone reset.
*/
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body > header,
  body > nav,
  body > main,
  body > div,
  body > footer,
  .page,
  .page-shell,
  .site-shell,
  .shell,
  .wrap,
  .container,
  .prop-page,
  .main,
  .content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .site-header,
  .ads-header,
  .aurora-header,
  .aurora-uhd,
  .uhd-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    top: auto !important;
  }

  .brand,
  .ads-brand,
  .uhd-brand {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .brand-title,
  .brand-sub,
  .ads-title,
  .ads-sub,
  .uhd-title,
  .uhd-sub {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .search,
  .ads-search,
  .top-search,
  .uhd-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .top-nav,
  .ads-nav,
  .uhd-nav,
  .primary-nav,
  .subnav {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .layout,
  .prop-layout,
  .page-grid,
  .main-grid,
  .content-grid,
  .shell-grid,
  .hero-grid,
  .brief,
  .grid,
  .hub-grid,
  .card-grid,
  .domain-grid,
  .linked-grid,
  .gallery,
  .metric-grid,
  .mini-grid,
  .feature-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar,
  .space-sidebar {
    display: none !important;
  }

  .hero,
  .subhero,
  .sub-hero,
  .module-hero,
  .hero-copy,
  .hero-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-copy,
  .hero-content {
    padding-left: clamp(18px, 5vw, 30px) !important;
    padding-right: clamp(18px, 5vw, 30px) !important;
  }

  h1 {
    font-size: clamp(2.2rem, 12vw, 4rem) !important;
    overflow-wrap: anywhere;
  }

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

  img,
  video {
    height: auto !important;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}