/* ========================================
   Vietnam Airlines Clone - Responsive Styles
   ======================================== */

/* Desktop Large (1920px+) */
@media (min-width: 1920px) {
    :root {
        --font-size-base: 1.0625rem;
    }

    .hero-section {
        min-height: 700px;
    }
}

/* Desktop (1440px - 1919px) */
@media (max-width: 1919px) and (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Desktop Small (1280px - 1439px) */
@media (max-width: 1439px) and (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }

    .hero-content h1 {
        font-size: var(--font-size-4xl);
    }
}

/* Laptop (1024px - 1279px) */
@media (max-width: 1279px) and (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .hero-section {
        min-height: 500px;
    }

    .hero-content h1 {
        font-size: var(--font-size-3xl);
    }

    .promo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

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

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        width: var(--sidebar-width-expanded);
    }

    .hero-section {
        min-height: 450px;
    }

    .hero-content {
        padding: var(--spacing-xl);
    }

    .hero-content h1 {
        font-size: var(--font-size-2xl);
    }

    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flight-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    :root {
        --sidebar-width: 0px;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }

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

    .sidebar {
        transform: translateX(-100%);
    }

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

    .hero-content {
        text-align: center;
        padding: var(--spacing-lg);
    }

    .hero-content h1 {
        font-size: var(--font-size-xl);
    }

    .promo-grid {
        grid-template-columns: 1fr;
    }

    .flight-cards {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ticker-wrapper {
        font-size: var(--font-size-sm);
    }
}

/* Mobile (max-width: 575px) */
@media (max-width: 575px) {
    :root {
        --sidebar-width: 0px;
        --spacing-lg: 1rem;
        --spacing-xl: 1.25rem;
        --spacing-2xl: 1.5rem;
    }

    body {
        font-size: var(--font-size-sm);
    }

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

    .container {
        padding: 0 var(--spacing-md);
    }

    /* Header Mobile */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        background: var(--color-primary);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-header .logo {
        height: 32px;
    }

    .mobile-header .menu-btn {
        width: 40px;
        height: 40px;
        color: var(--color-white);
    }

    /* Hero Mobile */
    .hero-section {
        min-height: 350px;
    }

    .hero-content {
        padding: var(--spacing-md);
        text-align: center;
    }

    .hero-content h1 {
        font-size: var(--font-size-lg);
    }

    .hero-content p {
        font-size: var(--font-size-sm);
    }

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

    /* Search Widget Mobile */
    .search-section {
        margin-top: -30px;
    }

    .search-widget {
        border-radius: var(--border-radius-lg);
    }

    .search-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        padding: var(--spacing-xs);
        -webkit-overflow-scrolling: touch;
    }

    .search-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .trip-type-toggle {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .date-picker-wrapper {
        flex-direction: column;
    }

    .btn-search {
        width: 100%;
    }

    /* Promo Section Mobile */
    .section-title {
        font-size: var(--font-size-xl);
    }

    .promo-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .flight-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .flight-card {
        flex-direction: row;
    }

    .flight-card-image {
        width: 120px;
        height: 100%;
    }

    /* Quick Links Mobile */
    .quick-links {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .quick-link-item {
        flex: 0 0 calc(50% - 8px);
        padding: var(--spacing-md);
    }

    .quick-link-item .quick-link-icon {
        width: 32px;
        height: 32px;
    }

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

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-xl);
    }

    .footer-col h4 {
        margin-bottom: var(--spacing-md);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-logos {
        justify-content: center;
    }

    /* Modal Mobile */
    .airport-modal {
        padding: 0;
        align-items: flex-end;
    }

    .airport-modal-content {
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        max-height: 90vh;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .sidebar:hover {
        width: var(--sidebar-width);
    }

    .sidebar.open {
        width: var(--sidebar-width-expanded);
    }

    .btn:hover {
        transform: none;
    }

    .card:hover {
        transform: none;
    }

    .nav-link:hover {
        background: transparent;
    }

    .nav-link:active {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Print Styles */
@media print {

    .sidebar,
    .mobile-menu-toggle,
    .mobile-header,
    .search-section {
        display: none !important;
    }

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

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #003545;
        --color-accent: #996633;
    }

    .btn {
        border: 2px solid currentColor;
    }
}