/* Explore: Intelligence | Topics | Art Argentum Original.
   This scoped rule overrides TreeSelector.css's default two-column menus.
   Keep the other (Markets/Agents/etc.) dropdowns unchanged. */
.aa-global-menu--explore .aa-global-menu-panel--originals {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 32px) !important;
  /* The desktop menu opens after the brand column; reserve its offset and a
     safe right gutter, otherwise an 830px panel can leave the viewport. */
  width: min(830px, calc(100vw - var(--aa-brand-nav-w, 220px) - 64px)) !important;
  max-width: calc(100vw - var(--aa-brand-nav-w, 220px) - 64px) !important;
  box-sizing: border-box !important;
}

.aa-global-menu--explore .aa-global-menu-panel--originals .aa-global-menu-group {
  min-width: 0 !important;
  max-width: none !important;
}

.aa-global-menu--explore .aa-global-menu-group--originals .aa-global-menu-group-title {
  white-space: normal !important;
}

/* TreeSelector.css positions the top-nav dropdown against the viewport on
   tablets and narrow screens, so use viewport-based sizing in that mode. */
@media (max-width: 980px) {
  .aa-global-menu--explore .aa-global-menu-panel--originals {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 720px) {
  .aa-global-menu--explore .aa-global-menu-panel--originals {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-height: min(75dvh, 680px) !important;
    overflow-y: auto !important;
  }
}