/* Public blog mobile layer loaded after blog/home styles. */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html.is-public-menu-open,
  body.is-public-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.public-blog-home .public-header,
  body.bdf-public-shell .public-header {
    min-width: 0 !important;
    width: 100% !important;
  }

  .public-blog-home .public-brand-lockup,
  .public-blog-home .public-brand-copy {
    min-width: 0 !important;
  }

  .public-blog-home .public-brand-copy strong,
  .public-blog-home .public-brand-copy span {
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.public-blog-home .public-header.is-menu-open .mega-nav.blog-menu,
  body.bdf-public-shell .public-header.is-menu-open .mega-nav.blog-menu,
  .public-blog-home .public-header.is-menu-open #public-main-menu.blog-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1301 !important;
  }

  .public-blog-home .public-header.is-menu-open::after {
    background: rgba(7, 18, 37, 0.42) !important;
    pointer-events: auto !important;
  }

  .public-blog-home .blog-menu__item,
  .public-blog-home .blog-menu__dropdown > summary {
    min-height: 48px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  .public-blog-home .blog-menu__search {
    min-width: 0 !important;
    width: 100% !important;
  }

  .public-blog-home .blog-menu__dropdown-panel,
  .public-blog-home .blog-menu__tree-children {
    max-width: 100% !important;
  }

  .public-blog-home .public-archive-grid,
  .public-blog-home .public-blog-layout,
  .public-blog-home .public-home-grid,
  .public-blog-home .public-section-grid {
    grid-template-columns: 1fr !important;
  }

  .public-blog-home img,
  .public-blog-home video,
  .public-blog-home canvas,
  .public-blog-home svg {
    max-width: 100%;
    height: auto;
  }
}