/**
 * Responsive Breakpoints
 * =======================
 */

/* Tablet - 1100px and below */
@media (max-width: 1100px) {
    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar .logo-text,
    .sidebar .nav-item span,
    .sidebar .nav-section-title,
    .sidebar .theme-text,
    .sidebar .user-info {
        display: none;
    }

    .sidebar-nav {
        padding: var(--space-2);
    }

    .nav-item {
        justify-content: center;
        padding: var(--space-3);
    }

    .nav-item.active::before {
        display: none;
    }

    .sidebar-footer {
        padding: var(--space-2);
    }

    .theme-toggle {
        justify-content: center;
        padding: var(--space-3);
    }

    .user-profile {
        justify-content: center;
        padding: var(--space-3);
    }

    .hero-content {
        padding: var(--space-8);
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .content-rows {
        padding: var(--space-6) var(--space-4);
    }

    .video-carousel {
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }

    .video-card {
        width: 260px;
    }

    .card-featured {
        width: 320px;
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        z-index: var(--z-modal);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar .logo-text,
    .sidebar .nav-item span,
    .sidebar .nav-section-title,
    .sidebar .theme-text,
    .sidebar .user-info {
        display: block;
    }

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

    .nav-item {
        justify-content: flex-start;
        padding: var(--space-3);
    }

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

    .theme-toggle,
    .user-profile {
        justify-content: flex-start;
    }

    .main-content {
        margin-left: 0;
        padding-bottom: var(--bottom-nav-height);
    }

    .bottom-nav {
        display: block;
    }

    .bottom-nav-inner {
        display: flex;
    }

    .hero-banner {
        min-height: 400px;
    }

    .hero-content {
        padding: var(--space-6);
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle {
        font-size: var(--text-xl);
    }

    .hero-description {
        font-size: var(--text-sm);
    }

    .hero-meta {
        flex-direction: column;
        gap: var(--space-2);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .content-rows {
        gap: var(--space-7);
        padding: var(--space-5) var(--space-4);
    }

    .row-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .row-title-group {
        flex-direction: column;
        gap: var(--space-1);
    }

    .row-title {
        font-size: var(--text-lg);
    }

    .video-carousel {
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }

    .carousel-btn {
        display: none;
    }

    .carousel-dots {
        display: flex;
    }

    .video-card {
        width: 240px;
    }

    .card-featured {
        width: 280px;
    }

    .card-compact {
        width: 160px;
    }

    .card-content {
        padding: var(--space-3);
    }

    .card-title {
        font-size: var(--text-sm);
    }

    .card-subtitle-arabic {
        font-size: var(--text-sm);
    }

    .card-actions {
        display: none;
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    .hero-banner {
        min-height: 350px;
    }

    .hero-content {
        padding: var(--space-5);
    }

    .hero-badge {
        font-size: 9px;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
    }

    .content-rows {
        gap: var(--space-6);
        padding: var(--space-4) var(--space-3);
    }

    .video-carousel {
        margin: 0 calc(var(--space-3) * -1);
        padding: 0 var(--space-3);
    }

    .carousel-track {
        gap: var(--space-3);
    }

    .video-card {
        width: 200px;
    }

    .card-featured {
        width: 240px;
    }

    .card-compact {
        width: 140px;
    }

    .card-thumbnail {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }
}

/* Large Desktop - 1400px and above */
@media (min-width: 1400px) {
    .video-card {
        width: 300px;
    }

    .card-featured {
        width: 400px;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-title {
        font-size: var(--text-6xl);
    }
}

/* Ultra Wide - 1800px and above */
@media (min-width: 1800px) {
    .video-card {
        width: 320px;
    }

    .carousel-track {
        gap: var(--space-5);
    }

    .content-rows {
        gap: var(--space-10);
        padding: var(--space-10) var(--space-8);
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-banner {
        min-height: 300px;
    }

    .hero-content {
        padding: var(--space-4);
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-description {
        display: none;
    }

    .hero-meta {
        margin-bottom: var(--space-3);
    }
}

/* Retina Display Adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card-thumbnail img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Touch Device Hover States */
@media (hover: none) {
    .video-card:hover {
        transform: none;
        box-shadow: var(--shadow-card);
    }

    .video-card:active {
        transform: scale(0.98);
    }

    .carousel-btn {
        display: none;
    }

    .card-play {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .bottom-nav,
    .hero-actions,
    .carousel-btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .video-card {
        break-inside: avoid;
    }
}