/* ========================================
   COMPLETE MOBILE RESPONSIVENESS
   Comprehensive mobile fixes for all pages
   ======================================== */

/* Base Mobile Styles (768px and below) */
@media (max-width: 768px) {
    
    /* ===== REMOVE ALL WHITE SPACE ===== */
    * {
        margin-top: 0 !important;
    }
    
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ===== LAYOUT ===== */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* ===== NAVIGATION ===== */
    .nav-items-left,
    .nav-items-right {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Make logo clickable and visible */
    .logo {
        display: block;
        z-index: 1000;
    }
    
    .logo-img {
        max-height: 50px;
        cursor: pointer;
    }
    
    /* Remove white space between header and hero */
    .topbar {
        margin: 0 !important;
    }
    
    .header {
        margin: 0 !important;
        padding-bottom: 0 !important;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ===== HOMEPAGE HERO - DIFFERENT ===== */
    .hero-section {
        min-height: 100vh;
        height: 100vh;
        padding-top: 120px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
    
    /* ===== OTHER PAGES HERO - CONSISTENT HEIGHT & CENTERED ===== */
    .blog-hero,
    .contact-hero,
    .retreats-hero,
    .chapters-hero,
    .circles-hero,
    .markets-hero,
    .resources-hero,
    .podcast-hero {
        min-height: 50vh;
        height: 50vh;
        padding-top: 120px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
    
    /* Center all hero content */
    .hero-content,
    .blog-hero-content,
    .contact-hero-content,
    .retreats-hero-content,
    .chapters-hero-content,
    .circles-hero-content,
    .markets-hero-content,
    .resources-hero-content,
    .podcast-hero-content {
        text-align: center !important;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    /* Fix hero content overlap */
    .hero-section + section,
    .blog-hero + section,
    .contact-hero + section,
    .retreats-hero + section,
    .chapters-hero + section,
    .circles-hero + section,
    .markets-hero + section,
    .resources-hero + section,
    .podcast-hero + section {
        margin: 0 !important;
        padding-top: 60px !important;
        position: relative;
        z-index: 10;
        background: white;
        clear: both;
    }
    
    /* Hero titles responsive */
    .hero-title,
    .blog-hero-title,
    .contact-hero-title,
    .retreats-hero-title,
    .chapters-hero-title,
    .circles-hero-title,
    .markets-hero-title,
    .resources-hero-title,
    .podcast-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    /* Hero pretitle/subtitle responsive */
    .retreats-hero-pretitle,
    .hero-pretitle,
    .section-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    /* Hero description responsive */
    .retreats-hero-description,
    .hero-description,
    .chapters-hero-description {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    /* Breadcrumb responsive */
    .blog-breadcrumb,
    .contact-breadcrumb,
    .retreats-breadcrumb,
    .chapters-breadcrumb,
    .circles-breadcrumb,
    .markets-breadcrumb {
        font-size: 0.85rem;
        text-align: center !important;
    }
    
    /* ===== GRIDS ===== */
    .tours-grid,
    .blog-grid,
    .destinations-grid,
    .contact-main-grid,
    .chapters-grid,
    .circles-grid,
    .markets-grid,
    .resources-grid,
    .support-newsletter-grid,
    .category-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* ===== CARDS ===== */
    .tour-card,
    .blog-card,
    .destination-card,
    .chapter-card,
    .circle-card,
    .market-card,
    .resource-card {
        margin-bottom: 20px;
    }
    
    /* ===== FORMS ===== */
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .newsletter-input {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* ===== BUTTONS ===== */
    .btn,
    .btn-send-message,
    .btn-explore,
    .btn-discover,
    .btn-chat {
        width: 100%;
        padding: 15px;
        font-size: 16px;
    }
    
    /* ===== FOOTER ===== */
    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Left align footer content on mobile */
    .footer-brand,
    .nav-column {
        text-align: left;
    }
    
    .footer-logo img {
        max-width: 150px;
        height: auto;
    }
    
    /* Make partner logos bigger and visible */
    .partners-section {
        padding: 30px 0;
        overflow: hidden;
    }
    
    .partners-slider-wrapper {
        overflow: hidden;
        padding: 20px 0;
    }
    
    .partners-slider {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 10px;
    }
    
    .partner-logo {
        padding: 20px;
        background: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .partner-logo img {
        max-width: 100%;
        max-height: 70px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    .social-links {
        justify-content: flex-start;
    }
    
    /* ===== BLOG SPECIFIC ===== */
    .blog-card-large,
    .blog-card-small {
        width: 100%;
    }
    
    .blog-detail-container {
        grid-template-columns: 1fr;
    }
    
    .blog-detail-sidebar {
        margin-top: 40px;
    }
    
    /* ===== RETREAT SPECIFIC ===== */
    .programs-swiper .swiper-slide {
        width: 90%;
    }
    
    .detail-container {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar {
        margin-top: 30px;
    }
    
    /* ===== CONTACT SPECIFIC ===== */
    .contact-info-section,
    .contact-form-section {
        padding: 20px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-content-section {
        padding-top: 40px;
    }
    
    /* ===== ABOUT SPECIFIC ===== */
    .about-content-grid,
    .team-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    /* Make about images responsive */
    .about-image,
    .about-image img,
    .company-image,
    .company-image img,
    .mission-image,
    .mission-image img,
    .about-hero + section img,
    .about-content img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        min-width: 100% !important;
        object-fit: cover;
        display: block !important;
    }
    
    .about-section img,
    .company-section img,
    .mission-section img,
    .about-grid img,
    .about-content-section img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: block !important;
    }
    
    /* About page specific */
    .about-content-section {
        padding-top: 60px;
        overflow: hidden;
    }
    
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-text,
    .about-image-wrapper {
        width: 100%;
    }
    
    .about-image-wrapper,
    .about-image-wrapper img,
    .about-content-section .blog-image,
    .about-content-section .blog-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        display: block !important;
    }
    
    /* ===== COUNTER SECTION ===== */
    .counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* ===== ACTIVITIES & DEALS ===== */
    .activities-deals-grid {
        grid-template-columns: 1fr;
    }
    
    /* ===== BELIEFS SECTION ===== */
    .beliefs-container {
        flex-direction: column;
    }
    
    .beliefs-content,
    .beliefs-image {
        width: 100%;
    }
    
    /* ===== SUPPORT & NEWSLETTER ===== */
    .support-newsletter-grid {
        grid-template-columns: 1fr;
    }
    
    .support-illustration {
        order: -1;
        margin-bottom: 20px;
    }
    
    /* ===== IMAGES ===== */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* ===== TYPOGRAPHY ===== */
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .section-description {
        font-size: 0.95rem;
    }
    
    /* ===== SPACING ===== */
    section {
        padding: 40px 20px;
    }
    
    /* ===== TABLES ===== */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===== CHAPTERS PAGE FIXES ===== */
    .chapters-grid-section {
        padding-top: 50px !important;
        margin-top: 0 !important;
    }
    
    .chapters-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px;
    }
    
    .chapter-card {
        margin-bottom: 30px;
    }
    
    .chapter-card-image {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    
    .chapter-card-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    
    .chapter-card-content {
        padding: 20px 0;
    }
    
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }
    
    .chapters-contact-section {
        padding-top: 50px;
        margin-top: 40px;
    }
    
    /* ===== CIRCLES PAGE FIXES ===== */
    .circles-hero-content {
        text-align: center;
    }
    
    .circles-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .circle-card-image img {
        width: 100%;
        height: auto;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .counter-grid {
        grid-template-columns: 1fr;
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .partners-slider {
        grid-template-columns: 1fr;
    }
    
    .btn {
        padding: 12px;
        font-size: 14px;
    }
}

/* Tablet (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .tours-grid,
    .blog-grid,
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
    }
    
    .topbar {
        display: none;
    }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}