/* Responsive utilities */

/* Images and media */
img, video { max-width: 100%; height: auto; }

/* Sections - Individual sections handle their own padding via Tailwind classes */

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }


/* ==========================================================================
   === GLOBAL RESPONSIVE FIXES ===
   Applied to ALL pages — prevents overflow, ensures auto-layout
   ========================================================================== */

/* Prevent horizontal scroll on ALL containers */
.container-responsive,
.lg\:max-w-\[80\%\],
.max-w-\[80\%\] {
    overflow-x: hidden;
}

/* Content at 75% width, centered on desktop (>=1024px), full-width on mobile */
@media (min-width: 1024px) {
    .lg\:max-w-\[80\%\],
    .max-w-\[80\%\] {
        max-width: 75% !important;
    }
}

@media (max-width: 1023px) {
    .lg\:max-w-\[80\%\],
    .max-w-\[80\%\] {
        max-width: 100% !important;
    }
}

.container-responsive {
    max-width: 100% !important;
}

/* Carousel containers - prevent overflow clipping */
.upcoming-carousel,
.upcomming-card-slider,
.blog-carousel-wrapper,
.blog-carousel-track,
.testimonials-wrapper {
    max-width: 100%;
}

/* Ensure carousel cards don't overflow */
.upcoming-carousel-card,
.blog-card,
.single-upconing-card {
    max-width: 100%;
}

/* ==========================================================================
   === CONSISTENT SECTION SPACING ===
   Applies uniform vertical padding across all sections
   ========================================================================== */

/* Desktop default: 5rem (80px) vertical padding */
.py-16 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-24 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* Consistent inner content centering - full width with padding */
.lg\:max-w-\[80\%\],
.max-w-\[80\%\] {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix section padding consistency */
@media (max-width: 640px) {
    /* Universal mobile section padding */
    section .lg\:max-w-\[80\%\] > .px-4,
    section .lg\:max-w-\[80\%\] > .px-6,
    section .lg\:max-w-\[80\%\] > .px-8,
    .container-responsive > div > .px-4,
    .container-responsive > div > .px-6,
    .container-responsive > div > .px-8 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Mobile-specific font sizing for all pages */
    h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.25rem !important; }
    p  { font-size: 0.875rem !important; }
    
    /* Buttons fill width on mobile */
    .btn, button, a[class*="rounded-full"] {
        white-space: normal !important;
        word-break: break-word;
    }
    
    /* Reduced padding on all sections - mobile */
    .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    
    /* Fix hero content padding on mobile */
    #home .relative.z-10 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Blog section mobile layout */
    .blog-section .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
    
    .blog-section .md\:w-3\/10 {
        width: 100% !important;
    }
    
    .blog-section .md\:w-7\/10 {
        width: 100% !important;
    }
    
    /* Blog carousel cards on mobile */
    .blog-card {
        flex: 0 0 calc(80% - 0.5rem) !important;
        min-width: 200px !important;
    }
    
    /* Footer grid to single column */
    footer .grid-cols-1\.5\:grid-cols-2,
    footer .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* CTA section already covered by .py-20 override above */
}

/* Tablet-specific fixes */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet font sizing */
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 1.75rem !important; }
    
    /* Blog section tablet layout */
    .blog-section .flex.flex-col.md\:flex-row {
        flex-direction: row !important;
    }
    
    .blog-section .md\:w-3\/10 {
        width: 35% !important;
    }
    
    .blog-section .md\:w-7\/10 {
        width: 65% !important;
    }
    
    /* Blog carousel cards on tablet */
    .blog-card {
        flex: 0 0 calc(50% - 0.75rem) !important;
        min-width: 200px !important;
    }
    
    /* Footer grid to 2 columns */
    footer .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Extra small screens (<=375px) */
@media (max-width: 375px) {
    .blog-card {
        flex: 0 0 calc(90% - 0.5rem) !important;
        min-width: 160px !important;
    }
    
    .upcoming-carousel-card {
        flex: 0 0 calc(80% - 0.5rem) !important;
        min-width: 150px !important;
    }
    
    #home .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    
    .hero-mask {
        height: 80px !important;
    }
}

/* Large desktop (1280px+) - remove the 1400px constraint, use full width */

/* Images already covered by img, video rule at top of this file */

/* Fix overflow on all table-like elements on mobile */
@media (max-width: 640px) {
    table, .table-responsive {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix blog carousel arrows */
@media (max-width: 640px) {
    .blog-carousel-arrow {
        display: none !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .blog-carousel-arrow.blog-prev {
        left: 2px !important;
    }
    .blog-carousel-arrow.blog-next {
        right: 2px !important;
    }
}

@media (min-width: 1025px) {
    .blog-carousel-arrow.blog-prev {
        left: 4px !important;
    }
    .blog-carousel-arrow.blog-next {
        right: 4px !important;
    }
}