/* =========================================================================
   RESPONSIVE — breakpoints from 320px to ultra-wide
   ========================================================================= */

/* Ultra-wide: cap content width so lines don't stretch forever */
@media (min-width: 1800px) {
  .app-main { grid-template-columns: 1fr minmax(420px, 520px); }
  .workspace { max-width: 1200px; margin: 0 auto; width: 100%; }
}

/* Large desktop */
@media (max-width: 1400px) {
  :root { --preview-w: 380px; }
}

/* Laptop / small desktop */
@media (max-width: 1200px) {
  :root { --sidebar-w: 240px; --preview-w: 340px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet landscape */
@media (max-width: 992px) {
  .preview-rail { display: none; }
  .app-main { grid-template-columns: 1fr; }
  .preview-rail.open { display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 100; background: var(--color-bg); }
  .mobile-preview-toggle { display: inline-flex; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait */
@media (max-width: 768px) {
  :root { --sidebar-w: 220px; }
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
  .app-sidebar {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w);
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
    z-index: 90; box-shadow: var(--shadow-lg);
  }
  .app-sidebar.open { transform: translateX(0); }
  .mobile-nav-toggle { display: inline-flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .layout-kanban .checklist { grid-template-columns: 1fr; }
  .layout-magazine .workspace { column-count: 1; }
}

/* Large mobile (576px) */
@media (max-width: 576px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .view-tabs { display: none; }
  .header-actions .btn span.btn-label { display: none; }
  h1 { font-size: var(--fs-xl); }
}

/* Mobile (425px) */
@media (max-width: 425px) {
  .workspace { padding: var(--space-3); }
  .app-header { padding: 0 var(--space-3); }
  .form-row { grid-template-columns: 1fr; }
}

/* Small mobile (375px) */
@media (max-width: 375px) {
  .card-stat { font-size: var(--fs-xl); }
  .fab { right: var(--space-4); bottom: var(--space-4); width: 50px; height: 50px; }
}

/* Very small mobile (320px) */
@media (max-width: 320px) {
  :root { --space-5: 16px; --space-6: 22px; }
  .checklist-item { flex-direction: column; }
}

/* Orientation-specific tweaks */
@media (orientation: landscape) and (max-height: 480px) {
  .app-header { position: static; }
}

/* Touch device affordances: bigger tap targets */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-item, .category-item { min-height: 40px; }
  .checklist-item { padding: var(--space-4); }
}