/* Responsive layer for the public site. The landing/portal use CSS-variable
   inline styles, so we override with !important inside the mobile breakpoint
   (a stylesheet !important beats an inline non-important rule). */

.vwa-navtoggle { display: none; }

@media (max-width: 860px) {
  /* Any multi-column grid stacks to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Fluid horizontal padding on the shared container */
  .vwa-container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Tame the big fixed vertical section paddings */
  section > div[style*="padding:84px"],
  section > div[style*="padding:90px"],
  section > div[style*="padding:80px"],
  section > div[style*="padding:72px"],
  section > div[style*="padding:64px"],
  section > div[style*="padding:56px"],
  section > div[style*="padding:48px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Cards / panels with heavy fixed padding */
  .vwa-authcard { padding: 26px !important; }
  .vwa-card--pad-lg { padding: 24px !important; }

  /* Hero decorative floating badges get in the way on narrow screens */
  .hero-float { display: none !important; }
  .hero-media { height: 260px !important; }

  /* Collapsed header nav → dropdown */
  .vwa-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); background: var(--paper-0); color: var(--vwa-navy);
  }
  .vwa-nav {
    display: none !important; position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column !important; align-items: stretch !important;
    background: var(--paper-0); border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md); padding: 14px 24px !important; gap: 6px !important; z-index: 60;
  }
  .vwa-nav.nav-open { display: flex !important; }
  .vwa-nav a, .vwa-nav form { padding: 8px 0 !important; }

  /* Top info bar: wrap tidily */
  .vwa-topbar { flex-wrap: wrap !important; gap: 6px 16px !important; }

  /* Wide tables scroll instead of breaking the layout */
  .vwa-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 860px) {
  /* Gallery shows 2-up on tablet (overrides the generic 1-col collapse above) */
  .page-gallery { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 520px) {
  .vwa-container { padding-left: 14px !important; padding-right: 14px !important; }
  .stats-strip { flex-wrap: wrap !important; gap: 18px 24px !important; }
  .page-gallery { grid-template-columns: 1fr !important; }
}