/* ── Responsive Breakpoints ── */

/* Tablet (< 1024px) */
@media (max-width: 1024px) {
  .room-sidebar {
    width: 280px;
  }

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

/* Mobile (< 768px) */
@media (max-width: 768px) {
  /* Landing page */
  .hero-title {
    font-size: var(--fs-2xl);
  }

  .hero-subtitle {
    font-size: var(--fs-base);
  }

  .action-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .action-card {
    padding: var(--space-6);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .landing-nav {
    padding: var(--space-4);
  }

  /* Room page — stack vertically */
  .room-main {
    flex-direction: column;
  }

  .video-area {
    flex: none;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 200px;
    max-height: 50vh;
  }

  .room-sidebar {
    width: 100%;
    flex: 1;
    border-left: none;
    border-top: 1px solid var(--glass-border);
  }

  .room-header-center {
    display: none;
  }

  .room-code-label {
    display: none;
  }

  /* Larger touch targets */
  .btn {
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
  }

  .reaction-btn {
    font-size: 1.75rem;
    padding: var(--space-2);
    min-width: 44px;
    min-height: 44px;
  }

  .reaction-bar {
    bottom: var(--space-12);
  }

  .participant-actions {
    opacity: 1;
  }

  /* Admin panel adjustments */
  .admin-video-input {
    flex-direction: column;
  }

  .admin-video-input .btn {
    width: 100%;
  }
}

/* Small mobile (< 400px) */
@media (max-width: 400px) {
  .hero-title {
    font-size: 1.75rem;
  }

  .action-card {
    padding: var(--space-5);
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .room-header {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .room-logo-text {
    display: none;
  }

  .sidebar-section {
    padding: var(--space-4);
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .room-main {
    flex-direction: row;
  }

  .video-area {
    flex: 1;
    height: auto;
    max-height: none;
  }

  .room-sidebar {
    width: 260px;
    border-top: none;
    border-left: 1px solid var(--glass-border);
  }

  .room-header {
    padding: var(--space-2) var(--space-4);
  }

  .reaction-bar {
    bottom: var(--space-8);
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
  }

  .reaction-btn {
    font-size: 1.25rem;
  }
}