/* Chromebook-optimized breakpoints */

/* Small Chromebook (1366x768) */
@media (max-width: 1400px) {
  :root {
    --sidebar-width: 220px;
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
  }

  .video-card-info {
    padding: 8px 10px;
  }
}

/* Narrow or tablet-like */
@media (max-width: 900px) {
  .sidebar {
    position: absolute;
    height: 100%;
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.collapsed {
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .comparison-videos.grid-2 {
    grid-template-columns: 1fr;
  }

  .comparison-videos.grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-videos.grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-videos.grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-videos.grid-5 > .comparison-panel:nth-child(1),
  .comparison-videos.grid-5 > .comparison-panel:nth-child(2),
  .comparison-videos.grid-5 > .comparison-panel:nth-child(3),
  .comparison-videos.grid-5 > .comparison-panel:nth-child(4),
  .comparison-videos.grid-5 > .comparison-panel:nth-child(5) {
    grid-column: auto;
  }

  .comparison-videos.grid-6 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .ctrl-btn {
    width: 44px;
    height: 44px;
  }

  .playlist-item {
    padding: 10px 8px;
  }

  .nav-item {
    padding: 12px;
  }
}