/* LifeBook | responsive.css | 2025-08-27
   Mobile-first. Enhance layout progressively at wider viewports.
   Update: 2025-09-01 (additive desktop polish; no PHP changes required)
*/

/* ≥480px (large phones) */
@media (min-width: 480px) {
  .auth-wrapper { margin: var(--space-6) auto; }
  .login-form { margin: var(--space-6) auto; }
}

/* ≥640px (small tablets) */
@media (min-width: 640px) {
  .container { padding: 0 28px; }

  .feed-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Utility grids (opt-in classes from style.css) */
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ≥768px (tablets) */
@media (min-width: 768px) {
  .header-inner { height: 72px; }
  .hero .logo { height: 48px; }
  .hero { padding: 72px 0 56px; }

  .container { max-width: 1140px; }
  .content { padding: 40px 0; }

  .login-form { padding: 28px; }
  .features-preview { padding: 28px; }

  .feed-header { grid-template-columns: 1fr; }
  .feed-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

  /* Dashboard cards (opt-in helpers) */
  .cards.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* Utility grids */
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ≥992px (laptops) */
@media (min-width: 992px) {
  /* Subtle elevation and spacing on auth cards without markup changes */
  .login-form, .signup-form, .auth-panel { box-shadow: var(--shadow-2); }
  .auth-wrapper { max-width: 520px; }

  /* Denser dashboards while keeping readability */
  .dashboard-header { padding: 24px 0; }
  .grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Segment controls and nav breathe a bit more */
  .nav-list { gap: 14px; }
}

/* ≥1024px (desktops) */
@media (min-width: 1024px) {
  .grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feed-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-header { padding: 24px 0; }
}

/* ≥1200px (large desktops) */
@media (min-width: 1200px) {
  /* Promote feed to a comfortable 3-column grid */
  .feed-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Feature preview breathes more on large screens */
  .features-preview { max-width: 900px; }
}

/* ≥1440px (XL desktops / wide monitors) */
@media (min-width: 1440px) {
  /* Optional: widen main container a touch for expansive displays */
  .container { max-width: 1280px; }

  /* Allow card-heavy pages to scale gracefully */
  .grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}