/* ============================================
   Responsive Design
   WatchFlix - Mobile First Approach
============================================ */

/* Extra Small Devices (phones < 400px) */
@media (max-width: 399px) {
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-description {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
  }
  
  .hero-actions .btn-primary.btn-lg,
  .hero-actions .btn-outline.btn-lg {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
  }
  
  .movie-card {
    width: 140px;
  }
  
  .movie-card-title {
    font-size: 0.8125rem;
  }
}

/* Small Devices (phones 400px - 640px) */
@media (min-width: 400px) and (max-width: 639px) {
  .hero-title {
    font-size: 2.25rem;
  }
  
  .movie-card {
    width: 150px;
  }
}

/* Medium Devices (tablets 641px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .nav-container {
    height: 72px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-content {
    padding-bottom: 6rem;
  }
  
  .movie-card {
    width: 180px;
  }
  
  .movie-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }
  
  .page-header-content {
    padding: 3rem var(--spacing-lg);
  }
  
  .page-title {
    font-size: 2.25rem;
  }
}

/* Large Devices (laptops 1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .nav-container {
    height: 72px;
    padding: 0 var(--spacing-xl);
  }
  
  .hero-title {
    font-size: 4rem;
  }
  
  .hero-content {
    padding: 0 var(--spacing-xl) 6rem;
  }
  
  .content-container {
    padding: 0 var(--spacing-xl);
  }
  
  .movie-card {
    width: 190px;
  }
  
  .movie-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
  }
  
  .page-header-content {
    padding: 3.5rem var(--spacing-xl);
  }
}

/* Extra Large Devices (4K 1440px+) */
@media (min-width: 1440px) {
  .nav-container {
    height: 80px;
    padding: 0 var(--spacing-xl);
  }
  
  .hero-title {
    font-size: 4.5rem;
  }
  
  .hero-content {
    padding: 0 var(--spacing-xl) 7rem;
  }
  
  .content-container {
    padding: 0 var(--spacing-xl);
  }
  
  .movie-card {
    width: 210px;
  }
  
  .movie-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-xl);
  }
  
  .page-header-content {
    padding: 4rem var(--spacing-xl);
  }
  
  .page-title {
    font-size: 3rem;
  }
}

/* Landscape Phones */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-slider {
    height: 100vh;
    min-height: 400px;
  }
  
  .hero-content {
    padding-bottom: 3rem;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-description {
    -webkit-line-clamp: 2;
  }
  
  .hero-actions {
    gap: var(--spacing-sm);
  }
  
  .hero-actions .btn-primary.btn-lg,
  .hero-actions .btn-outline.btn-lg {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
  }
  
  .hero-indicators {
    bottom: 1rem;
  }
}

/* Print Styles */
@media print {
  .top-nav,
  .bottom-nav,
  .hero-indicators,
  .row-controls,
  .scroll-btn {
    display: none !important;
  }
  
  .hero-slider {
    height: auto;
    min-height: auto;
  }
  
  .hero-background img {
    opacity: 0.3;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .hero-title,
  .page-title {
    color: black;
    text-shadow: none;
  }
  
  .hero-description {
    color: #333;
  }
  
  .movie-card {
    break-inside: avoid;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark Mode Support (already dark, but handles light mode preferences) */
@media (prefers-color-scheme: light) {
  /* Override if user prefers light mode */
  /* Keep dark theme as per brand identity */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .glass,
  .glass-dark {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.8);
  }
  
  .hero-overlay {
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 100%);
  }
}