/* ============================================
   Responsive Styles
   ============================================ */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .video-card {
    width: 350px;
  }
  
  .billboard-info {
    max-width: 700px;
  }
}

/* Desktop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .video-card {
    width: 280px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header {
    padding: var(--spacing-sm) 0;
  }
  
  .site-logo {
    font-size: var(--font-size-xl);
  }
  
  .main-navigation ul {
    gap: var(--spacing-md);
  }
  
  .billboard-container {
    height: 60vh;
    min-height: 500px;
  }
  
  .video-card {
    width: 220px;
  }
  
  .video-row-slider {
    gap: var(--spacing-xs);
  }
}

/* Mobile Landscape (568px - 767px) */
@media (min-width: 568px) and (max-width: 767px) {
  .billboard-container {
    height: 50vh;
    min-height: 350px;
  }
  
  .video-card {
    width: 180px;
  }
}

/* Mobile Portrait (320px - 567px) */
@media (max-width: 567px) {
  .site-header {
    padding: var(--spacing-xs) 0;
  }
  
  .site-logo {
    font-size: var(--font-size-lg);
  }
  
  .main-navigation ul {
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  .billboard-container {
    height: 50vh;
    min-height: 300px;
    margin-bottom: var(--spacing-xl);
  }
  
  .billboard-info {
    padding: var(--spacing-lg) 0;
  }
  
  .billboard-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
  }
  
  .billboard-meta,
  .billboard-genres {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-sm);
  }
  
  .billboard-description {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-md);
  }
  
  .billboard-actions {
    gap: var(--spacing-sm);
  }
  
  .billboard-actions .btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  .billboard-actions .btn svg {
    width: 16px;
    height: 16px;
  }
  
  .video-card {
    width: 150px;
  }
  
  .video-card-title {
    font-size: var(--font-size-sm);
  }
  
  .video-card-info {
    padding: var(--spacing-sm) var(--spacing-xs);
  }
  
  .video-row-section {
    margin-bottom: var(--spacing-lg);
  }
  
  .single-video-page {
    padding-top: 60px;
  }
  
  .single-video-content {
    padding: var(--spacing-lg) 0;
  }
  
  .single-video-title {
    font-size: var(--font-size-lg);
  }
  
  .single-video-meta {
    font-size: var(--font-size-xs);
    gap: var(--spacing-sm);
  }
  
  .related-videos-grid {
    grid-template-columns: repeat(1, 1fr);
	  padding:20px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .video-card:hover .video-card-hover-content {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.8) !important;
  }
  
  .video-card:hover {
    transform: none !important;
  }
  
  .video-row-nav {
    display: none !important;
  }
  
  /* Enable smooth scrolling */
  .video-row-content {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Hide scrollbar */
  .video-row-content::-webkit-scrollbar {
    display: none;
  }
  
  .video-row-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  /* Increase tap target sizes */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .billboard-indicator {
    width: 16px;
    height: 16px;
  }
  
  .billboard-indicator.active {
    width: 32px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize images for retina displays */
  .video-card-thumbnail img,
  .billboard-background img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .billboard-indicators,
  .video-row-nav,
  .billboard-actions,
  .video-card-hover-content {
    display: none !important;
  }
  
  body {
    background-color: white;
    color: black;
  }
  
  .video-card,
  .billboard-slide {
    page-break-inside: avoid;
  }
}

/* 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 (if system preference) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default, but can add overrides if needed */
}

/* Light Mode (optional, if you want to support it) */
@media (prefers-color-scheme: light) {
  /* Keep dark theme regardless of system preference */
  /* Netflix is always dark */
}