/* ========================================
   Responsive Styles for Mobile & Tablet
   ======================================== */

/* --- Tablet & Small Desktop (max-width: 1100px) --- */
@media (max-width: 1100px) {
    .tour-detail-layout { grid-template-columns: 1fr; }
    .tour-quick-info { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .tours-layout { grid-template-columns: 1fr; }
    .tours-sidebar { display: none; }
    .booking-layout { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { display: none; }
    .header-inner { padding: 0 15px; }

    .section-row { grid-template-columns: 1fr; }
    
    /* Off-Canvas Menu */
    .header-nav {
        position: fixed; top: 0; right: -300px; width: 300px; height: 100vh;
        background: #fff; z-index: 1100; display: flex; flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: -5px 0 25px rgba(0,0,0,0.15);
        visibility: hidden;
    }
    .header-nav.is-open { transform: translateX(-300px); visibility: visible; }
    
    .mobile-menu-header {
        padding: 20px; display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid var(--clr-border);
    }
    .mobile-logo img { height: 36px; }
    .menu-close-btn {
        background: none; border: none; font-size: 1.4rem; color: var(--clr-text-light); cursor: pointer;
    }

    .nav-menu { flex-direction: column; padding: 20px 0; gap: 0 !important; flex: 1; overflow-y: auto; }
    .nav-item { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.03); }
    .nav-item > a { 
        padding: 15px 25px; border-radius: 0; font-size: 1rem; color: var(--clr-secondary);
        display: flex; justify-content: space-between;
    }
    .nav-item.active > a { background: rgba(var(--clr-primary-rgb), 0.05); color: var(--clr-primary); font-weight: 700; }
    
    .header-nav.is-open .dropdown-menu { 
        position: static; display: block; box-shadow: none; padding: 0 0 10px 40px; 
        background: #fbfbfb; border-radius: 0; min-width: auto;
    }
    .dropdown-menu li a { padding: 10px 15px; font-size: 0.95rem; }

    .mobile-menu-footer {
        padding: 25px; background: #f8f9fa; border-top: 1px solid var(--clr-border);
        display: block;
    }
    .mobile-contact p { font-size: 0.8rem; color: var(--clr-text-light); margin-bottom: 5px; }
    .mobile-contact .phone-link { color: var(--clr-primary); font-weight: 800; font-size: 1.1rem; }
    .mobile-socials { display: flex; gap: 15px; margin-top: 15px; }
    .mobile-socials a { 
        width: 36px; height: 36px; background: #fff; border: 1px solid var(--clr-border);
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: var(--clr-secondary); font-size: 0.9rem;
    }

    .mobile-menu-toggle { display: flex; z-index: 1001; }
    .mobile-menu-toggle span { width: 22px; margin-bottom: 4px; }
    .mobile-menu-toggle span:last-child { margin-bottom: 0; }
    .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .header-actions { gap: 8px; }
    .btn-contact { padding: 9px 12px; }
    .btn-contact span { display: none; }
    .user-name-short { display: none; }
    .header-logo img { height: 38px; }

    .hero-slide { min-height: 70vh; }
    .hero-actions { flex-direction: column; align-items: center; }
    .footer-grid { grid-template-columns: 1fr; }
    .tours-grid, .tours-grid-3, .tours-grid-4 { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .section-header { flex-direction: column; align-items: flex-start; }
}

/* --- Tablets (768px - 1024px) --- */
@media (max-width: 1024px) {
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .section-title { font-size: 1.8rem; }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 0 15px; }
    
    .section-title { font-size: 1.5rem; margin-bottom: 1.25rem; }
    
    /* Hero */
    .hero-slide { min-height: 60vh; }
    .hero-title { font-size: 2.2rem; margin-bottom: 0.75rem; }
    .hero-desc { font-size: 0.95rem; }
    
    /* Tours Grid - 2 per row */
    .tours-grid, .tours-grid-3, .tours-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .tour-card-body { padding: 12px; }
    .tour-title { font-size: 0.95rem; height: 2.6em; overflow: hidden; line-height: 1.3; }
    .tour-meta, .tour-info { font-size: 0.8rem; margin-bottom: 6px; }
    .price-value { font-size: 1rem; }
    .tour-footer .btn-sm { padding: 6px 10px; font-size: 0.8rem; }
    
    .tour-footer .btn-primary {display: none;}
    /* Sections spacing */
    section { padding: 45px 0 !important; }
    .pt-0 { padding-top: 0 !important; }

    /* Testimonials */
    .testimonials-grid { grid-template-columns: 1fr; }
    .section-testimonials { padding: 60px 0; }
    
    /* Search Modal */
    .search-modal-overlay { padding-top: 0; align-items: flex-end; }
    .search-modal { border-radius: 20px 20px 0 0; max-height: 90vh; padding: 28px 20px; }
    .search-filters { grid-template-columns: 1fr; gap: 12px; }
    .search-modal-actions { flex-direction: column; }
    .search-modal-actions .btn { flex: none; width: 100%; }
    .btn-contact span { display: none; }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    .tours-grid, .tours-grid-3, .tours-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .blogs-grid, .blogs-grid-3 { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .services-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .page-hero-title { font-size: 1.5rem; }
    .hero-title { font-size: 1.8rem; }
    
    .tour-title { font-size: 0.85rem; }
    .price-value { font-size: 0.9rem; }
    
    .btn-lg { padding: 12px 20px; font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .btn-contact { padding: 9px 12px; }
}

/* --- Booking Page Specific Mobile Optimization --- */
@media (max-width: 768px) {
    .section-booking {
        padding: 30px 0 !important;
    }
    .booking-form-wrap h2 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    .form-group label {
        font-size: 0.9rem;
    }
    .form-control {
        height: 48px; /* Standard touch target height */
        font-size: 0.95rem;
    }
    .booking-summary {
        margin-bottom: 30px;
    }
    .summary-body h3 {
        font-size: 1.1rem;
    }
    .calc-row {
        font-size: 0.9rem;
    }
    .calc-row.grand-total {
        font-size: 1.15rem;
    }
    .btn-lg {
        height: 52px;
        font-size: 1.05rem;
    }
    .modal-content {
        max-height: 90vh;
    }
}