/* Mobile handling for the design-system header (the DS export ships
   desktop-only navigation styles). */
@media (max-width: 767.98px) {
  .site-header .utility-right {
    display: none;
  }

  .site-header .utility-container,
  .site-header .nav-container {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .site-header .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    padding: 0;
  }

  .site-header .logo {
    font-size: 1.6rem;
  }
}

@media (max-width: 767.98px) {
  /* The dc pages set desktop grid templates inline (min column widths beyond
     small screens); collapse every inline grid to one column on mobile. */
  main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  main [style*="grid-template-columns"] > * {
    min-width: 0;
  }

  /* Inline flex rows (tag lists, meta rows) must wrap instead of overflowing. */
  main [style*="display:flex"],
  main [style*="display: flex"] {
    flex-wrap: wrap;
  }

  main svg {
    max-width: 100%;
    height: auto;
  }
}