/* KO_MOBILE_SHELL_161 — Correct the 0.10.155 nested event-link grid and
   stabilize mobile navigation in Edge/Chrome, including restored pages. */
@media (max-width: 760px) {
  /* Important: the layout contains <article> > <a.featured-event-card__main>
     > <span.featured-event-media> + <span.featured-event-copy>. The 155 patch
     styled ARTICLE as two columns but forgot the A wrapper. Consequently
     only the image fitted and the text was clipped beneath it. */
  html body .homepage-wide-events .featured-event-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 149px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main > .featured-event-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 149px !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main > .featured-event-copy {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main > .featured-event-copy > strong {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* The document has its own six-item dock. These selectors override both the
     older browser-only display:none and the authenticated-user variants.
     A mobile web page must not depend on a specific display-mode media match. */
  html body .mobile-app-nav,
  html body.portal-authenticated .mobile-app-nav,
  html body.mobile-app-context .mobile-app-nav {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 4px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid #dce5de !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 -6px 20px rgba(21, 44, 29, .1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 70 !important;
  }
  html body .mobile-app-nav > a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 54px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 1px !important;
    gap: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
  }
  html body .mobile-app-nav > a span {
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Defensive: on a partially cached guest template that lacks the dock,
     keep the login/profile action in the header accessible. */
  html body:not(:has(.mobile-app-nav)) .site-header .header-login-link,
  html body.portal-authenticated:not(:has(.mobile-app-nav)) .site-header .header-account-link {
    display: grid !important;
  }
}
@media (max-width: 360px) {
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main {
    grid-template-columns: 124px minmax(0, 1fr) !important;
  }
  html body .homepage-wide-events .featured-event-card > .featured-event-card__main > .featured-event-media {
    width: 124px !important;
  }
}