/**
 * Travel Aeon - Responsive Styles
 * Responsive breakpoints and mobile styles
 * Version: 1.0.0
 */

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
/* Base: mobile-first (320px+) */

/* === Tablet (768px) === */
@media (min-width: 480px) {
    .ta-text-5xl { font-size: 2.75rem; }
    .ta-text-6xl { font-size: clamp(3rem, 7vw, 4rem); }
}

@media (min-width: 768px) {
    /* Header */
    .ta-header-inner {
        padding: 0 var(--ta-space-8);
    }

    .ta-header-branding a {
        font-size: var(--ta-text-2xl);
    }

    .ta-nav-menu {
        gap: var(--ta-space-10);
    }

    .ta-nav-menu li {
        padding-top: var(--ta-space-2);
    }

    .ta-nav-menu .sub-menu {
        left: 0;
        top: 100%;
        min-width: 240px;
    }

    /* Hero */
    .ta-hero {
        min-height: 80vh;
        align-items: flex-start;
        padding-top: var(--ta-space-20);
    }

    .ta-hero-content {
        max-width: 680px;
        margin-top: 4rem;
    }

    /* Body */
    body {
        font-size: 16px;
    }

    /* Sections */
    .ta-section {
        padding: var(--ta-space-20) 0;
    }

    .ta-section-lg {
        padding: var(--ta-space-32) 0;
    }

    /* Buttons */
    .ta-hero-actions {
        justify-content: flex-start;
    }

    /* Grid */
    .ta-grid {
        gap: var(--ta-space-8);
    }

    .ta-destinations-section .ta-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .ta-blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ta-space-10);
    }

    /* Cards */
    .ta-card-image {
        aspect-ratio: 3 / 2;
    }

    .ta-card-body {
        padding: var(--ta-space-7);
    }

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

    .ta-card-title a {
        font-size: inherit;
    }

    .ta-card-footer {
        flex-wrap: wrap;
        gap: var(--ta-space-4);
    }

    /* Post */
    .ta-post-single {
        padding: var(--ta-space-20) 0;
    }
}

/* === Desktop (1024px) === */
@media (min-width: 1024px) {
    .ta-text-5xl { font-size: 3rem; }
    .ta-text-6xl { font-size: 3.5rem; }

    /* Grid */
    .ta-deals-grid {
        grid-template-columns: 3fr 1fr;
    }

    .ta-destinations-section .ta-grid-auto {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .ta-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ta-space-8);
    }

    .ta-card {
        transition: all var(--ta-transition);
    }

    .ta-card:hover {
        box-shadow: var(--ta-shadow-xl);
        transform: translateY(-4px);
    }

    /* Content */
    .ta-post-content h2 {
        font-size: 2.5rem;
        margin: 2rem 0 1.5rem;
    }

    .ta-post-content h3 {
        font-size: 1.75rem;
        margin: 1.5rem 0 1rem;
    }
}

/* === Large Desktop (1280px) === */
@media (min-width: 1280px) {
    .ta-section {
        padding: var(--ta-space-24) 0;
    }

    .ta-section-lg {
        padding: var(--ta-space-32) 0;
    }

    .ta-container {
        max-width: var(--ta-container);
    }

    .ta-container-sm {
        max-width: var(--ta-container-sm);
    }

    .ta-container-xs {
        max-width: var(--ta-container-xs);
    }

    /* Footer */
    .ta-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ta-space-10);
    }

    .ta-footer-bottom-inner {
        flex-wrap: nowrap;
    }

    /* Hero */
    .ta-hero {
        min-height: 85vh;
    }

    .ta-hero-content {
        margin-top: 6rem;
    }

    .ta-hero-actions {
        gap: var(--ta-space-6);
    }

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

/* === Extra Large Desktop (1440px) === */
@media (min-width: 1440px) {
    .ta-container {
        max-width: calc(var(--ta-container) + 24px);
        padding: 0 var(--ta-space-8);
    }

    .ta-section {
        padding: var(--ta-space-24) 0;
    }

    .ta-section-header h2 {
        font-size: var(--ta-text-5xl);
    }
}

/* ==========================================================================
   MOBILE SPECIFIC STYLES
   ========================================================================== */

@media (max-width: 767px) {
    /* Mobile header */
    .ta-main-navigation {
        display: none;
    }

    .ta-menu-toggle {
        display: block;
        z-index: var(--ta-z-overlay);
    }

    /* Mobile nav */
    .ta-mobile-nav {
        display: block;
    }

    .ta-mobile-nav-menu a {
        font-size: var(--ta-text-lg);
        padding: var(--ta-space-4) 0;
    }

    .ta-mobile-nav-menu .sub-menu {
        padding-left: var(--ta-space-6);
    }

    /* Hero */
    .ta-hero {
        min-height: 70vh;
        padding-top: var(--ta-space-16);
        padding-bottom: var(--ta-space-16);
    }

    .ta-hero-content {
        padding: 0 var(--ta-space-4);
        text-align: center;
        margin-top: 2rem;
    }

    .ta-hero h1 {
        font-size: clamp(2rem, 6vw, 2.75rem);
    }

    .ta-hero-actions {
        justify-content: center;
    }

    .ta-hero-search {
        max-width: 500px;
        margin: 2rem auto 0;
    }

    .ta-hero-search-form {
        flex-direction: column;
    }

    .ta-hero-search-input {
        min-width: unset;
        padding: var(--ta-space-4) var(--ta-space-5);
    }

    /* Cards grid */
    .ta-destinations-section .ta-grid-auto,
    .ta-gear-section .ta-grid-auto {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog grid */
    .ta-blog-grid {
        grid-template-columns: 1fr;
        gap: var(--ta-space-8);
    }

    /* Footer */
    .ta-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--ta-space-8);
    }

    .ta-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Buttons */
    .ta-button {
        width: 100%;
        justify-content: center;
    }

    .ta-hero-actions .ta-button {
        flex: 1;
        min-width: 180px;
    }

    /* 404 */
    .ta-404 .ta-404-content h1 {
        font-size: clamp(4rem, 30vw, 6rem);
    }

    .ta-404 .ta-404-content h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

/* === Small Mobile (320-479px) === */
@media (max-width: 479px) {
    .ta-section {
        padding: var(--ta-space-16) 0;
    }

    .ta-section-lg {
        padding: var(--ta-space-20) 0;
    }

    .ta-section-header h2 {
        font-size: 2rem;
    }

    .ta-section-header p {
        font-size: var(--ta-text-base);
    }

    .ta-text-4xl {
        font-size: 1.75rem;
    }

    .ta-text-5xl {
        font-size: 2rem;
    }

    .ta-text-6xl {
        font-size: 2.5rem;
    }

    .ta-container {
        padding: 0 var(--ta-space-4);
    }

    .ta-card-body {
        padding: var(--ta-space-5);
    }

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

    .ta-destinations-section .ta-grid-auto {
        grid-template-columns: 1fr;
    }

    .ta-deals-grid {
        grid-template-columns: 1fr;
    }

    .ta-blog-grid {
        grid-template-columns: 1fr;
    }

    .ta-post-single {
        padding: var(--ta-space-12) 0;
    }

    .ta-post-header h1 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   PORTRAIT ONLY (TABLET)
   ========================================================================== */
@media (max-width: 1024px) and (orientation: portrait) {
    .ta-destinations-section .ta-grid-auto {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .ta-mobile-nav {
        width: min(280px, 90vw);
    }
}

/* ==========================================================================
   DARK MODE (if needed)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --ta-text: #e5e7eb;
        --ta-muted: #9ca3af;
        --ta-off-white: #111827;
        --ta-light: #1f2937;
        --ta-white: #1f2937;
        --ta-border: #374151;
        --ta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --ta-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --ta-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
        --ta-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
        --ta-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    }

    .ta-footer {
        background: #111827;
    }
}