/* ============================================================
   NESYLAB — Responsive layer (load AFTER base.css)
   Mobile-first overrides. Targets shared chrome + known
   class-based layouts so the whole system reflows on phones.
   Breakpoints: 1024 (lap), 768 (tablet), 560 (phone), 400 (xs)
   ============================================================ */

/* ---- Global safety ---- */
img, svg, video, canvas { max-width: 100%; }
* { min-width: 0; }
html { -webkit-text-size-adjust: 100%; }

/* ---- Touch targets on coarse pointers ---- */
@media (pointer: coarse) {
  .btn, button, .chip, .tab, .pill,
  .input, .select, select, input[type="text"],
  input[type="email"], input[type="password"] { min-height: 44px; }
  .btn.sm, .btn--sm { min-height: 40px; }
  .btn.xs, .btn--xs { min-height: 36px; }
}

/* ============================================================
   TOPBAR — collapses to brand + scrollable nav on small
   ============================================================ */
@media (max-width: 900px) {
  .ds-topbar { flex-wrap: wrap; gap: 10px 12px; padding: 12px 18px; }
  .ds-topbar nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .ds-topbar nav::-webkit-scrollbar { display: none; }
  .ds-topbar nav a { white-space: nowrap; flex: none; }
  .ds-topbar .meta { display: none; }
}
@media (max-width: 480px) {
  .ds-topbar { padding: 10px 14px; }
  .ds-topbar .brand span:not(.brand-mark) { font-size: 14px; }
}

/* ============================================================
   PAGE HEADERS / SECTIONS — tighter padding, fluid type
   ============================================================ */
@media (max-width: 768px) {
  .page-head { padding: 56px 22px 32px; }
  .section { padding: 36px 22px; }
  .section-head { flex-direction: column; gap: 8px; }
  .section-head .kicker { order: -1; }
}
@media (max-width: 480px) {
  .page-head { padding: 44px 16px 26px; }
  .section { padding: 28px 16px; }
  .page-head h1 { font-size: clamp(30px, 9vw, 40px); }
  .page-head .lede { font-size: 16px; }
}

/* ============================================================
   HERO (index) — already clamps; tighten meta-row on phone
   ============================================================ */
@media (max-width: 768px) {
  .hero { padding: 60px 22px 40px; }
  .hero .meta-row { gap: 22px 28px; }
}
@media (max-width: 480px) {
  .hero { padding: 44px 16px 30px; }
  .hero::before, .hero::after { display: none; }
}

/* ============================================================
   GENERIC GRID COLLAPSE — known class-based galleries
   ============================================================ */
@media (max-width: 900px) {
  .grid-sections { grid-template-columns: 1fr !important; }
  .fonts-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .canvas.grid-2, .canvas.grid-3 { grid-template-columns: 1fr !important; }
  .radii-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .shadows-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .icon-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .logo-grid, .variants, .dont-grid { grid-template-columns: 1fr 1fr !important; }
  .construction { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .radii-grid, .icon-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .logo-grid, .variants, .dont-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   TABLES — horizontal scroll wrapper so they never overflow
   ============================================================ */
@media (max-width: 768px) {
  .table-wrap, .tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dstable, .table, .wd-table { min-width: 560px; }
}

/* ============================================================
   DEVICE / MOCKUP FRAMES — scroll instead of overflow on phone
   ============================================================ */
@media (max-width: 1040px) {
  .mock-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .web-dash, .macos, .landing { min-width: 920px; }
}
@media (max-width: 768px) {
  .mock-stage { padding: 22px 16px; }
}

/* ============================================================
   FOOTERS
   ============================================================ */
@media (max-width: 560px) {
  .ds-foot { flex-direction: column; gap: 8px; text-align: center; padding: 20px 16px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}