/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   Based on newtheme patterns with Persian/RTL support
   ======================================== */

/* Base Mobile Styles (320px+) */
@media (min-width: 320px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .header-component .nav-container {
    padding: 0 1rem;
  }
  
  .mobile-menu {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  
  .search-overlay .search-container {
    margin: 1rem;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .video-card {
    margin-bottom: 1rem;
  }
  
  .video-card .video-thumbnail {
    aspect-ratio: 16/9;
    width: 100%;
  }
  
  .video-card .video-info {
    padding: 0.75rem;
  }
  
  .video-card .video-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .video-card .video-meta {
    font-size: 0.75rem;
    opacity: 0.7;
  }
  
  .footer-container {
    padding: 1.5rem 1rem;
  }
  
  .footer-container .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Small Mobile (375px+) */
@media (min-width: 375px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  .video-card .video-title {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }
  
  .header-component .nav-actions {
    gap: 0.5rem;
  }
  
  .search-overlay .search-input {
    font-size: 1rem;
    padding: 0.875rem 1rem;
  }
}

/* Large Mobile (425px+) */
@media (min-width: 425px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .video-card .video-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .header-component .logo img {
    height: 2.25rem;
  }
  
  .mobile-menu .mobile-nav-link {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
}

/* Tablet Portrait (768px+) */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .header-component .mobile-menu-toggle {
    display: none;
  }
  
  .header-component .desktop-nav {
    display: flex;
  }
  
  .mobile-menu {
    display: none !important;
  }
  
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .video-card .video-title {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }
  
  .footer-container .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  
  .search-overlay .search-container {
    max-width: 32rem;
    margin: 2rem auto;
  }
  
  .header-component .nav-actions {
    gap: 0.75rem;
  }
  
  .header-component .action-btn {
    padding: 0.625rem;
  }
}

/* Tablet Landscape (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  
  .video-card .video-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  .header-component .nav-container {
    padding: 0 2.5rem;
  }
  
  .header-component .desktop-nav .nav-link {
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
  }
  
  .footer-container {
    padding: 3rem 2.5rem;
  }
  
  .footer-container .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  .search-overlay .search-container {
    max-width: 36rem;
  }
}

/* Desktop (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
  
  .video-card .video-title {
    font-size: 1.0625rem;
    line-height: 1.625rem;
  }
  
  .header-component .nav-container {
    padding: 0 3rem;
  }
  
  .header-component .desktop-nav .nav-link {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
  
  .footer-container {
    padding: 4rem 3rem;
  }
  
  .search-overlay .search-container {
    max-width: 42rem;
  }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
  
  .video-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
  }
  
  .header-component .nav-container {
    max-width: 1440px;
    margin: 0 auto;
  }
  
  .footer-container .footer-grid {
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* Extra Large Desktop (1920px+) */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
  
  .video-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2.5rem;
  }
  
  .header-component .nav-container {
    max-width: 1600px;
  }
  
  .footer-container .footer-grid {
    max-width: 1600px;
  }
}

/* RTL Specific Responsive Adjustments */
[dir="rtl"] .header-component .nav-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .mobile-menu .mobile-nav-link {
  text-align: right;
}

[dir="rtl"] .search-overlay .search-input {
  text-align: right;
}

[dir="rtl"] .video-card .video-info {
  text-align: right;
}

[dir="rtl"] .footer-container .footer-links {
  text-align: right;
}

/* Dark Mode Responsive Adjustments */
@media (prefers-color-scheme: dark) {
  .video-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }
  
  .header-component {
    background-color: var(--color-background);
    border-color: var(--color-border);
  }
  
  .footer-container {
    background-color: var(--color-background);
    border-color: var(--color-border);
  }
}

/* Print Styles */
@media print {
  .header-component,
  .footer-container,
  .mobile-menu,
  .search-overlay {
    display: none !important;
  }
  
  .container {
    max-width: none !important;
    padding: 0 !important;
  }
  
  .video-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header-component .logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  .video-card .video-thumbnail img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .header-component {
    border-width: 2px;
  }
  
  .video-card {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
}

/* Focus Visible Support */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover,
  .action-btn:hover,
  .video-card:hover {
    transform: translateY(-2px);
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .action-btn,
  .video-card {
    min-height: 44px;
    min-width: 44px;
  }
  
  .header-component .action-btn {
    padding: 0.75rem;
  }
  
  .mobile-menu .mobile-nav-link {
    padding: 1rem;
    min-height: 48px;
  }
}