/**
 * 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;
    }

    /* ---- Mobile Hero: card layout ---- */
    .hero-banner {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-background {
        position: relative;
        height: 260px;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        overflow: hidden;
    }

    .hero-background-image {
        transform: scale(1);
    }

    .hero-banner:hover .hero-background-image {
        transform: scale(1);
    }

    .hero-gradient {
        background: linear-gradient(
            180deg,
            transparent 30%,
            rgba(13, 11, 9, 0.5) 70%,
            var(--bg-primary) 100%
        );
    }

    .hero-gradient::before {
        background: none;
    }

    [data-theme="light"] .hero-gradient {
        background: linear-gradient(
            180deg,
            transparent 30%,
            rgba(250, 246, 240, 0.5) 70%,
            var(--bg-primary) 100%
        );
    }

    [data-theme="light"] .hero-gradient::before {
        background: none;
    }

    .hero-content {
        padding: var(--space-5) var(--space-5) var(--space-6);
        max-width: 100%;
        margin-top: -40px;
    }

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

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

    .hero-subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-3);
    }

    .hero-description {
        font-size: var(--text-sm);
        margin-bottom: var(--space-4);
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }

    .meta-item {
        font-size: var(--text-xs);
    }

    .hero-actions {
        flex-direction: row;
        gap: var(--space-3);
    }

    .hero-actions .btn {
        flex: 1;
        justify-content: center;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }

    .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-background {
        height: 200px;
    }

    .hero-content {
        padding: var(--space-4) var(--space-4) var(--space-5);
        margin-top: -32px;
    }

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

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

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

    .hero-description {
        -webkit-line-clamp: 2;
    }

    .hero-actions .btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .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 {
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .video-card:hover {
        transform: none;
        box-shadow: none;
    }

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

    .carousel-btn {
        display: none;
    }

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

    /* Alléger les effets lourds pendant le scroll */
    .card-thumbnail::after {
        display: none;
    }

    .card-thumbnail img {
        transition: none;
    }

    .card-duration,
    .card-badge {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.8);
    }

    .carousel-track > * {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

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

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

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