/* ==========================================================================
   Responsive layer — intentional layouts per breakpoint (not just shrinking)
   Targets verified: 1440 · 1280 · 1024 · 768 · 430 · 390 · 375
   ========================================================================== */

/* ---------- ≤ 1280px (laptop) ---------- */
@media (max-width: 1280px) {
  .nav-links a { padding: .5rem .65rem; }
  .dash-content { padding: var(--sp-5); }
}

/* ---------- ≤ 1240px: navigation collapses to the menu button ---------- */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions { margin-left: auto; }
}

/* ---------- ≤ 1100px (small laptop / landscape tablet) ---------- */
@media (max-width: 1100px) {
  :root { --sidebar-w: 232px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8 { grid-column: span 12; }
  .dash-grid .col-6 { grid-column: span 12; }
  .dash-preview .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ≤ 1024px (tablet) ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .lead { margin-inline: auto; }
  .hero-ctas, .hero-points { justify-content: center; }
  .hero-search { margin-inline: auto; }
  .scene { max-width: 560px; margin-inline: auto; width: 100%; }
  .feature-layout { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process::before { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: 1fr; text-align: center; }
  .cta-band .hero-ctas { justify-content: center; }
  .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); }

  /* Dashboard: sidebar becomes an off-canvas drawer */
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-sidebar {
    position: fixed;
    left: 0; top: var(--demo-bar-h); bottom: 0;
    width: min(290px, 86vw);
    height: auto;
    background: var(--surface-strong);
    transform: translateX(-105%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-3);
  }
  .dash.sidebar-open .dash-sidebar { transform: none; }
  .dash-menu-btn { display: inline-flex; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .settings-nav button { flex: none; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ---------- ≤ 768px (portrait tablet / large phone) ---------- */
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-preview .dp-body { grid-template-columns: 1fr; }
  .dash-preview .dp-side { display: none; }
  .dash-topbar { padding: 0 var(--sp-4); }
  .dash-topbar .dash-search { display: none; }
  .dash-content { padding: var(--sp-4); gap: var(--sp-4); }
  .col-4, .col-5, .col-6 { grid-column: span 12; }
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hero-search .btn { grid-column: 1 / -1; }
  .profile-btn > span:not(.avatar) { display: none; }
  .demo-bar .demo-note { display: none; }

  /* Tables → stacked cards so they remain usable on phones */
  .data-table.responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.responsive, .data-table.responsive tbody, .data-table.responsive tr, .data-table.responsive td { display: block; width: 100%; }
  .data-table.responsive tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .data-table.responsive td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: .35rem 0; border: 0; text-align: right; }
  .data-table.responsive td::before { content: attr(data-label); font-size: .72rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); text-align: left; }
  .data-table.responsive td.cell-primary { justify-content: flex-start; text-align: left; padding-bottom: .5rem; }
  .data-table.responsive td.cell-primary::before { display: none; }
  .data-table.responsive td.cell-actions-td { justify-content: flex-end; }
  .data-table.responsive td.cell-actions-td::before { display: none; }
  .data-table.responsive td.cell-check { display: none; }
  .toolbar .input-group { max-width: none; min-width: 100%; }
  .toolbar .select { flex: 1 1 calc(50% - var(--sp-3)); min-width: 0; }
  .toolbar .tabs { width: 100%; }
}

/* ---------- ≤ 560px (phones: 430 / 390 / 375) ---------- */
@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .grid-4, .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .switcher-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-search { grid-template-columns: 1fr; }
  .scene { height: 320px; transform: scale(.82); transform-origin: top center; margin-bottom: -50px; }
  .float-card { padding: .55rem .75rem; }
  .float-card.pos-4, .float-card.pos-2 { display: none; }
  .brand .brand-text small { display: none; }
  .brand img { height: 32px; }
  .stat-card .stat-value { font-size: 1.45rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-body { padding: var(--sp-5); }
  .pipe-row { grid-template-columns: 90px 1fr auto; }
  .kv { grid-template-columns: 1fr; gap: .1rem; }
  .kv dd { margin-bottom: .5rem; }
  .page-head h1 { font-size: 1.35rem; }
  .kanban { grid-auto-columns: 84%; padding: var(--sp-4); }
  .toast-region { left: var(--sp-4); right: var(--sp-4); width: auto; }
  .stats-band { padding: var(--sp-6) var(--sp-4); }
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .demo-bar .container { gap: var(--sp-2); }
}

/* Touch devices: no hover-tilt jitter */
@media (hover: none) {
  .card-3d:hover { transform: none; }
}

@media print {
  .demo-bar, .site-header, .site-footer, .dash-sidebar, .dash-topbar, .aurora, .toast-region { display: none !important; }
  .dash { display: block; }
  body { background: #fff; }
}

/* ---------- Helpers used by page layouts ---------- */
svg.inline { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 900px) {
  [data-cart-layout] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
  .hide-mobile { display: none !important; }
  .nav-actions .btn-sm span { display: none; }
}

/* Demo bar on phones: icon-only buttons (labels stay available to screen readers) */
@media (max-width: 640px) {
  .demo-bar button span, .demo-bar a span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .demo-bar button, .demo-bar a { padding: .35rem .5rem; }
}