/* Shared zoom reflow for DIFMEDIA public pages and the editorial control center. */
.difmedia-site,
.admin-shell {
  min-width: 0;
}

.difmedia-site :is(main, section, article, aside, header, footer),
.admin-shell :is(main, section, article, aside, header, footer, form, details) {
  min-width: 0;
}

.difmedia-site :is(img, video, iframe, svg),
.admin-shell :is(img, video, iframe, svg) {
  max-width: 100%;
}

.difmedia-site :is(h1, h2, h3, p, li),
.admin-shell :is(h1, h2, h3, p, li, dd, td) {
  overflow-wrap: anywhere;
}

.admin-shell .admin-main,
.admin-shell .admin-page-content,
.admin-shell .admin-page-content > * {
  min-width: 0;
  max-width: 100%;
}

.admin-shell :is(.panel, .editor, .demo-card, .demo-batch, .demo-actions, .stat-card) {
  min-width: 0;
  max-width: 100%;
}

.admin-shell :is(.admin-form, .inlineform, .inline-editor, .demo-rights-form) > * {
  min-width: 0;
}

.admin-shell :is(.tablewrap, .table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 900px) {
  /* The main navigation is already present in the disclosure below the app bar. */
  .admin-shell > .sidebar {
    display: none !important;
  }

  .admin-page:not(.admin-navigation-ready) .mobile-nav {
    display: block;
  }

  .admin-page.admin-navigation-ready .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .admin-shell .admin-page-content {
    gap: 16px;
  }

  .admin-shell .admin-page-content :is(.stats, .stats-grid, .demo-showcase, .demo-rights-form) {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-shell .demo-layout-magazine,
  .admin-shell .demo-layout-longform {
    grid-column: auto;
  }

  .admin-shell .dashboard-quick-actions > *,
  .admin-shell .demo-actions > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  /* Keep the three controls and centered mark in separate header cells. */
  .difmedia-site .site-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
  }

  .difmedia-site .site-header .brand-text {
    display: none !important;
  }

  .difmedia-site .site-header .identity {
    justify-self: center !important;
    width: 36px !important;
    max-width: 36px !important;
  }

  .difmedia-site .site-header .identity :is(.logo, .brand-mark) {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }

  .difmedia-site .site-header :is(.home-menu-toggle, .theme-toggle, .header-cta) {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
}

@media (max-height: 320px) and (max-width: 900px) {
  /* A fixed bottom bar obscures the banner when browser zoom leaves a short viewport. */
  .difmedia-site .mobile-tabbar {
    display: none !important;
  }

  .difmedia-site.home-page .hero-copy-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 18px !important;
    background: #111 !important;
    color: #fff !important;
  }

  .difmedia-site.home-page {
    padding-bottom: 0;
  }
}