/**
 * TravelPro Theme - Responsive Styles
 * Clean, mobile-first responsive overrides.
 * 
 * Breakpoints:
 *   1200px — Large desktop
 *    992px — Tablet landscape
 *    768px — Tablet portrait
 *    576px — Mobile
 * 
 * @package TravelPro
 */

/* ==========================================================================
   Large Desktop (≤ 1200px)
   ========================================================================== */

@media (max-width: 1200px) {
    :root {
        --container-width: 100%;
        --font-size-h1: 36px;
        --font-size-h2: 28px;
    }

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

    .tours-grid,
    .blog-grid,
    .posts-grid.layout-grid,
    .related-tours-grid,
    .related-posts-grid,
    .tour-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Tablet Landscape (≤ 992px)
   ========================================================================== */

@media (max-width: 992px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 26px;
        --font-size-h3: 22px;
        --spacing-xl: 0px;
        --spacing-xxl: 80px;
    }

    /* --- Mobile Navigation --- */
    .menu-toggle { display: block; }

    .main-navigation {
        position: fixed;
        top: 0; left: -100%;
        width: 300px; height: 100vh;
        background: var(--color-white);
        z-index: 1000;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--spacing-xl) var(--spacing-lg);
        transition: left var(--transition-normal);
        box-shadow: var(--shadow-lg);
    }
    .main-navigation.active { left: 0; }
    .main-navigation ul { flex-direction: column; width: 100%; }
    .main-navigation a {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-light);
    }
    .main-navigation .sub-menu {
        position: static; opacity: 1; visibility: visible;
        transform: none; box-shadow: none;
        padding-left: var(--spacing-md); display: none;
    }
    .main-navigation .sub-menu.active { display: block; }

    /* --- Layout Stacking --- */
    .tour-content-wrapper,
    .has-sidebar {
        flex-direction: column;
    }
    .tour-sidebar,
    .has-sidebar .sidebar { width: 100%; }
    .has-sidebar .main-content {
        max-width: 100%; margin-right: 0;
        margin-bottom: var(--spacing-xl);
    }
    .tour-booking-card { position: static; }

    /* --- Footer --- */
    .footer-4col .footer-widget,
    .footer-3col .footer-widget {
        flex: 0 0 calc(50% - var(--spacing-lg));
    }

    /* --- Tour Page --- */
    .tour-hero-title { font-size: 32px; }
    .tour-gallery { grid-template-columns: repeat(2, 1fr); }
    .tour-inclusions { grid-template-columns: 1fr; }
    .blog-masonry { column-count: 2; }

    .header-style-3 .header-actions {
        position: static; transform: none;
        margin-top: var(--spacing-md);
    }
}

/* ==========================================================================
   Tablet Portrait (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --spacing-xl: 40px;
        --spacing-xxl: 60px;
    }

    /* --- Hero --- */
    .hero { min-height: 450px; }
    .hero-title { font-size: 36px; }
    .hero-subtitle { font-size: 16px; }

    /* --- Grids → Single Column --- */
    .tours-grid,
    .blog-grid,
    .posts-grid.layout-grid,
    .related-tours-grid,
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    .tour-overview-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- Columns → Full Width --- */
    .col-6, .col-4, .col-3, .col-8 {
        flex: 0 0 100%; max-width: 100%;
    }

    /* --- Tour Filters --- */
    .tour-filters-form { flex-direction: column; }
    .tour-filters .filter-group { width: 100%; }

    /* --- Blog --- */
    .blog-list .post-card,
    .posts-grid.layout-list .post-card { flex-direction: column; }
    .blog-list .post-card-image,
    .posts-grid.layout-list .post-card-image { width: 100%; }
    .blog-masonry,
    .posts-grid.layout-masonry { column-count: 1; }
    .single-post-title { font-size: 28px; }
    .post-content p { font-size: 16px; }

    /* --- Author & Post Nav --- */
    .author-box { flex-direction: column; text-align: center; }
    .author-social { justify-content: center; }
    .post-navigation { flex-direction: column; }
    .post-nav-item { max-width: 100%; text-align: left !important; }

    /* --- Comments --- */
    .comment-form-author,
    .comment-form-email,
    .comment-form-url { grid-template-columns: 1fr; }
    .comment-form-comment,
    .comment-form .form-submit { grid-column: span 1; }

    /* --- Footer --- */
    .footer-4col .footer-widget,
    .footer-3col .footer-widget,
    .footer-2col .footer-widget { flex: 0 0 100%; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .footer-menu ul { justify-content: center; }

    /* --- Header Top Bar --- */
    .header-top-bar .container { flex-direction: column; gap: var(--spacing-sm); }
    .top-bar-contact { flex-wrap: wrap; justify-content: center; }

    /* --- Tour Hero Meta --- */
    .tour-hero-meta { flex-direction: column; gap: var(--spacing-sm); }

    /* --- WhatsApp Float --- */
    .whatsapp-float { left: var(--spacing-md); bottom: var(--spacing-md); }
    .whatsapp-btn span { display: none; }
    .whatsapp-btn {
        width: 56px; height: 56px; padding: 0;
        border-radius: 50%; justify-content: center;
    }
}

/* ==========================================================================
   Mobile (≤ 576px)
   ========================================================================== */

@media (max-width: 576px) {
    :root {
        --font-size-base: 15px;
        --font-size-h1: 24px;
        --font-size-h2: 22px;
        --font-size-h3: 18px;
        --font-size-h4: 16px;
        --spacing-lg: 30px;
        --spacing-xl: 0px;
        --spacing-xxl: 50px;
    }

    .container { padding: 15px; }

    /* --- Buttons --- */
    .btn { padding: 10px 20px; font-size: var(--font-size-small); }
    .btn-lg { padding: 12px 24px; font-size: 16px; }

    /* --- Hero --- */
    .hero { min-height: 400px; }
    .hero-title { font-size: 28px; }
    .hero-content { padding: var(--spacing-md); }

    /* --- Tour Card --- */
    .tour-card-image { height: 200px; }
    .tour-card-meta { gap: var(--spacing-sm); }

    /* --- Tour Page --- */
    .tour-overview-grid { grid-template-columns: 1fr; }
    .tour-gallery { grid-template-columns: 1fr; }
    .tour-gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
    .itinerary-day { padding-left: var(--spacing-lg); }

    /* --- Blog / Posts --- */
    .post-card-image img { height: 180px; }
    .single-post-meta { flex-direction: column; gap: var(--spacing-sm); }
    .post-content blockquote { font-size: 16px; padding-left: var(--spacing-md); }

    /* --- Comments --- */
    .comment-body { flex-direction: column; }
    .children { padding-left: var(--spacing-md); }

    /* --- Search --- */
    .search-overlay input,
    .search-overlay button { font-size: 20px; }

    /* --- Booking --- */
    .booking-price .amount { font-size: 28px; }

    /* --- Section Headers --- */
    .section-header { margin-bottom: var(--spacing-lg); }
    .section-subtitle { font-size: 15px; }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .site-header, .site-footer, .whatsapp-float, .back-to-top,
    .tour-sidebar, .sidebar, .comments-section, .related-tours,
    .related-posts, .post-navigation, .tour-sticky-bar { display: none !important; }

    body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
    .container { max-width: 100%; padding: 0; }
    a { text-decoration: underline; color: #000; }
    .tour-main-content, .post-content { max-width: 100%; }
    h1, h2, h3 { page-break-after: avoid; }
    img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ==========================================================================
   High DPI / Retina
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card, .widget, .tour-booking-card {
        border: 0.5px solid rgba(0,0,0,0.05);
    }
}

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