/* =====================================================================
   responsive.css - breakpoint behaviour
     mobile   < 576px
     tablet   576px - 991px
     desktop  >= 992px
   Desktop is NOT a stretched mobile layout: the drawer becomes a fixed
   sidebar, the bottom nav disappears and content gains a real grid.
   ===================================================================== */

/* ============================================ small phones (< 576px) */
@media (max-width: 575.98px) {
  :root {
    --sp-5: 16px;
    --sp-6: 20px;
    --header-h: 58px;
  }

  .app-main { padding: var(--sp-4) var(--sp-4); padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-6)); }

  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-head h1 { font-size: var(--fs-lg); }
  .page-actions .btn { flex: 1; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .stat-card { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
  .stat-value { font-size: var(--fs-xl); }

  .modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: auto; max-height: 92dvh; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-backdrop.is-open .modal { transform: translateY(0); }
  .modal-footer { padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
  .modal-footer .btn { flex: 1; }

  .toast-stack { left: var(--sp-3); right: var(--sp-3); width: auto; bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 12px); }

  .continue-card .cc-thumb { width: 104px; }
  .video-row .video-thumb { width: 118px; }

  .profile-stats { gap: var(--sp-2); }
  .profile-stat { padding: var(--sp-3); }
  .profile-stat .ps-value { font-size: var(--fs-lg); }

  .table th, .table td { padding: 10px; }
  .toolbar { padding: var(--sp-3); }
  .toolbar .search-field { min-width: 100%; }
  .toolbar .filter-field { flex: 1; min-width: 130px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
  .form-actions .btn { width: 100%; }

  .dropzone { min-height: 180px; padding: var(--sp-6) var(--sp-4); }

  .auth-panel { padding-inline: var(--sp-4); }
}

/* ================================================= tablets (576-991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .rail { grid-auto-columns: 44%; }
  .rail-sm { grid-auto-columns: 32%; }
  .rail-xs { grid-auto-columns: 24%; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
}

/* =================================== everything below desktop (< 992px) */
@media (max-width: 991.98px) {
  /* the sidebar is an off-canvas drawer */
  .app-sidebar { width: min(300px, 84vw); }
  .desktop-only { display: none !important; }

  /* keep the video from being hidden behind the bottom nav */
  .watch-layout { gap: var(--sp-4); }
  .watch-side .card { border-radius: var(--radius); }

  body.has-bottom-nav { padding-bottom: 0; }
}

/* ============================================= desktop (>= 992px) */
@media (min-width: 992px) {
  .app-sidebar {
    transform: none;
    box-shadow: none;
  }
  .app-body { margin-left: var(--sidebar-w); }

  .sidebar-scrim { display: none; }
  .bottom-nav { display: none; }
  .mobile-only { display: none !important; }

  .app-main {
    padding: var(--sp-6) var(--sp-6);
    padding-bottom: var(--sp-10);
  }

  .app-header { padding-inline: var(--sp-6); }

  /* collapsed rail mode */
  .app.is-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
  .app.is-collapsed .app-body { margin-left: var(--sidebar-w-collapsed); }
  .app.is-collapsed .sidebar-brand { justify-content: center; padding-inline: 0; }
  .app.is-collapsed .sidebar-brand .brand-name,
  .app.is-collapsed .nav-group-label,
  .app.is-collapsed .nav-item span,
  .app.is-collapsed .nav-item .nav-count,
  .app.is-collapsed .sidebar-user .u-info { display: none; }
  .app.is-collapsed .nav-item { justify-content: center; padding-inline: 0; }
  .app.is-collapsed .nav-item::before { left: -8px; }
  .app.is-collapsed .sidebar-user { justify-content: center; }

  /* the rails become real grids */
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }
  .rail.keep-scroll {
    grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
  }
  .rail-sm { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .rail-xs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* watch page: player left, playlist right */
  .watch-layout {
    grid-template-columns: minmax(0, 1fr) 372px;
    align-items: start;
  }
  .watch-side {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    max-height: calc(100dvh - var(--header-h) - var(--sp-8));
    overflow-y: auto;
  }
  .watch-title { font-size: var(--fs-2xl); }

  .settings-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .settings-nav { flex-direction: column; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

  .profile-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================== wide desktop (>= 1400px) */
@media (min-width: 1400px) {
  .app-main { padding-inline: var(--sp-8); }
  .rail { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
  .watch-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ============================================ auth split at >= 992px */
@media (min-width: 992px) {
  .auth-page { grid-template-columns: 1.05fr 1fr; }
  .auth-visual { display: block; }
}

/* ===================================== landscape phone (short viewport) */
@media (max-height: 480px) and (orientation: landscape) {
  .app-header { position: relative; }
  .bottom-nav { position: relative; }
  .auth-panel { padding-block: var(--sp-5); }
  .auth-logo { margin-bottom: var(--sp-4); }
}

/* ============================== hover-capable pointers only (no phones) */
@media (hover: none) {
  .card-hover:hover, .video-card:hover, .course-card:hover, .continue-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .video-card:hover .video-thumb img { transform: none; }
  .thumb-play { display: none; }
  /* bigger touch targets */
  .row-btn { width: 38px; height: 38px; }
  .btn-sm { min-height: 38px; }
}

/* ================================================= standalone PWA tweaks */
@media (display-mode: standalone) {
  .app-header { padding-top: max(var(--safe-top), 8px); }
  .pwa-hide { display: none !important; }
}