/* ==========================================================================
   JAITON TECHNOLOGIES — Responsive CSS
   ========================================================================== */

/* ---------- Max 1200px ---------- */
@media (max-width: 1200px) {
    .jt-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .jt-case-studies__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Max 991px ---------- */
@media (max-width: 991px) {
    .jt-hero__heading {
        font-size: 3rem;
    }
    
    .jt-services__grid {
        grid-template-columns: 1fr;
    }

    .jt-about .container > .row {
        flex-direction: column;
    }

    .jt-about__img-wrap {
        margin-bottom: 40px;
    }

    .jt-about__counters {
        grid-template-columns: repeat(2, 1fr);
    }

    .jt-portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jt-case-studies__grid {
        grid-template-columns: 1fr;
    }

    .jt-contact .container > .row {
        flex-direction: column;
    }

    .jt-contact__details {
        margin-bottom: 40px;
    }

    .jt-cta__banner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px;
    }

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

/* ---------- Max 768px ---------- */
@media (max-width: 768px) {
    .jt-hero__stats .container {
        flex-wrap: wrap;
    }

    .jt-hero__stat {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
    }

    .jt-portfolio__grid {
        grid-template-columns: 1fr;
    }

    .jt-industries__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-section .row > div {
        margin-bottom: 40px;
    }

    .jt-about__counters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Max 576px ---------- */
@media (max-width: 576px) {
    .jt-hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .jt-hero__buttons .jt-btn {
        width: 100%;
        justify-content: center;
    }

    .jt-hero__stat {
        flex: 1 1 100%;
    }

    .jt-industries__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jt-about__counters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Padding Reductions */
    .jt-services,
    .jt-about,
    .jt-industries,
    .jt-portfolio,
    .jt-case-studies,
    .jt-contact {
        padding: 60px 0;
    }

    .jt-cta {
        padding: 0 0 60px;
    }
    
    .jt-hero__content {
        padding: 120px 15px 50px;
    }
    
    .jt-hero__heading {
        font-size: 2.2rem;
    }
}





/* ---------- FIXED CARD GRID RESPONSIVE ---------- */
@media (max-width: 991px) {
    .jt-hover-cards-grid {
        flex-wrap: wrap;
    }
    .jt-fixed-card {
        flex: 1 1 calc(50% - 12px) !important;
        min-width: calc(50% - 12px);
    }
}
@media (max-width: 575px) {
    .jt-fixed-card {
        flex: 1 1 100% !important;
        min-width: 100%;
    }
    .jt-industries-hover-section {
        padding: 60px 0;
    }
}


/* ---------- REVIEWS RESPONSIVE ---------- */
@media (max-width: 991px) {
    .jt-reviews__grid {
        flex-wrap: wrap;
    }
    .jt-review-card {
        flex: 1 1 calc(50% - 15px);
        min-width: calc(50% - 15px);
    }
}

@media (max-width: 767px) { 
    /* Stack subscription form on mobile */
    form[style*="width: 420px"] {
        flex-direction: column !important;
    }
    form[style*="width: 420px"] button {
        width: 100% !important;
        padding: 15px !important;
        justify-content: center !important;
    }
    /* Mobile scroll snap carousel */
    .jt-reviews__grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 20px; /* Padding for the snapping */
        padding-bottom: 20px; /* Space for scrollbar */
        gap: 20px;
        -webkit-overflow-scrolling: touch;
        
        /* Hide scrollbar for a cleaner look */
        scrollbar-width: none; /* Firefox */
    }
    .jt-reviews__grid::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }
    
    .jt-review-card {
        flex: 0 0 85%; /* 85% width so next card peeks in */
        min-width: 85%;
        scroll-snap-align: center;
    }
    
    .jt-reviews {
        padding: 80px 0;
    }
}


/* ---------- FEATURED PORTFOLIO RESPONSIVE ---------- */
@media (max-width: 991px) {
    .jt-fp-showcase {
        padding: 40px 30px;
    }
    .jt-fp-content-col {
        order: 2; /* Put content below image on tablet */
    }
    .jt-fp-image-col {
        order: 1;
        margin-bottom: 40px;
    }
    .jt-fp-nav {
        justify-content: center;
    }
}

@media (max-width: 767px) { 
    /* Stack subscription form on mobile */
    form[style*="width: 420px"] {
        flex-direction: column !important;
    }
    form[style*="width: 420px"] button {
        width: 100% !important;
        padding: 15px !important;
        justify-content: center !important;
    }
    .jt-fp-showcase {
        padding: 30px 20px;
        border-radius: 20px;
    }
    .jt-fp-title {
        font-size: 2rem;
    }
    .jt-fp-buttons {
        display: flex;
        flex-direction: column;
    }
    .jt-btn--outline-gray {
        text-align: center;
    }
    .jt-btn--gradient-pill {
        text-align: center;
        margin-right: 0 !important;
    }
    .jt-fp-image-wrap {
        border-radius: 16px;
    }
}

/* ==========================================================================
   GLOBAL INLINE-STYLE OVERRIDES FOR MOBILE (MAX-WIDTH: 991px)
   ========================================================================== */
@media (max-width: 991px) {

    /* Pre-header mobile wrap */
    .pre-header-left {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center;
        gap: 8px !important;
    }
    .pre-header {
        height: auto !important;
        padding: 10px !important;
    }
    /* Navbar Mega Menu Overrides */
    .mega-menu > div {
        flex-direction: column !important;
        padding: 20px !important;
    }
    .mega-menu > div > div {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 20px !important;
        border: none !important;
    }
    
    /* Footer Overrides */
    footer .container > div[style*="flex-wrap"] {
        flex-direction: column !important;
        gap: 30px !important;
    }
    footer div[style*="border-right"] {
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding-right: 0 !important;
        padding-bottom: 30px !important;
        flex: auto !important;
    }
    footer div[style*="border-top"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }


    /* Catch-all for mega menu inner rows that don't wrap */
    .mega-menu div[style*="flex-wrap: nowrap"] {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        height: auto !important;
    }
    /* Generic Split Containers */
    div[style*="display: flex"][style*="gap: 40px"],
    div[style*="display: flex"][style*="gap: 50px"],
    div[style*="display: flex"][style*="gap: 60px"] {
        flex-direction: column !important;
        gap: 30px !important;
    }


    /* Global responsive images */
    img {
        max-width: 100% !important;
        height: auto;
    }
    /* Image widths in inline styles */
    img[style*="width: 50%"],
    img[style*="width: 40%"] {
        width: 100% !important;
    }

    /* Container overrides for Company page etc */
    div[style*="flex: 1"], div[style*="flex: 2"] {
        flex: none !important;
        width: 100% !important;
    }
    
    /* Company stats banner */
    .jt-about__counters {
        grid-template-columns: 1fr 1fr !important;
    }


    /* Inline Grid Overrides Tablet */
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Fix hardcoded widths */
    div[style*="width: 350px"], form[style*="width: 420px"], div[style*="width: 420px"], 
    div[style*="width: 320px"], 
    div[style*="width: 400px"],
    div[style*="width: 500px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) { 
    /* Stack subscription form on mobile */
    form[style*="width: 420px"] {
        flex-direction: column !important;
    }
    form[style*="width: 420px"] button {
        width: 100% !important;
        padding: 15px !important;
        justify-content: center !important;
    }
    /* Company stats banner mobile */
    .jt-about__counters {
        grid-template-columns: 1fr !important;
    }
    .jt-hero__heading {
        font-size: 2.2rem !important;
    }

    /* Inline Grid Overrides Mobile */
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* Any remaining big paddings */
    div[style*="padding: 60px"], div[style*="padding: 40px"], div[style*="padding: 50px"],
    div[style*="padding: 80px"] {
        padding: 30px 15px !important;
    }
}
/* ==========================================================================
   GLOBAL RESPONSIVENESS FIXES (BOOTSTRAP COMPATIBILITY)
   ========================================================================== */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

/* Ensure images never break containers */
img {
    max-width: 100% !important;
    height: auto;
}

/* Prevent flex containers from forcing horizontal scroll on mobile */
@media (max-width: 991px) {
    div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Convert fixed inline widths to responsive */
    div[style*="width: 1200px"], 
    div[style*="width: 1000px"],
    div[style*="width: 350px"],
    div[style*="width: 320px"],
    div[style*="width: 400px"],
    div[style*="width: 500px"],
    div[style*="width: 420px"],
    form[style*="width: 420px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Pre-header wrap */
    .pre-header-container, .pre-header-left, .pre-header-right {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center;
        gap: 8px !important;
    }
    .pre-header {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 10px !important;
    }
    
    /* Mega Menu Mobile Overrides */
    .solutions-menu .mega-menu,
    .mega-menu {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow-y: hidden !important;
        display: none !important; /* Hide until toggled */
    }
    .has-mega-menu.active .mega-menu {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* General Grid fixes */
    div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }
    
    [class*="grid"], .jt-ind-grid, .jt-port-grid, .jt-port2-grid, .jt-wwd-grid, .service-grid, .about-grid, .case-studies-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* All iframes (Maps) */
    iframe {
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Footer column fixes */
    #footer > div > div {
        flex-direction: column !important;
        gap: 20px !important;
    }
    #footer > div > div > div {
        width: 100% !important;
        flex: 1 1 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Ensure decorative blobs do not break viewport */
    [class*="blob"], [class*="float"], [class*="blur"], .why-float-1, .why-float-2, div[style*="left: -"], div[style*="right: -"] {
        display: none !important;
    }
    
    /* Forms */
    form, .form-container, .jt-contact-form {
        width: 100% !important;
        max-width: 100% !important;
    }
    input, textarea, select {
        width: 100% !important;
        max-width: 100% !important;
    }
    button[type="submit"] {
        width: 100% !important;
    }
    
    /* Hero specific responsive rules */
    .hero-v2 {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 20px;
    }
    .hero-content-wrap {
        height: auto !important;
        min-height: 100vh !important;
        padding: 40px 15px !important;
        justify-content: center !important;
    }
    .hero-video-bg {
        height: 100% !important;
        object-fit: cover !important;
    }
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
    }
    .hero-overlay {
        background: linear-gradient(rgba(5,10,30,0.7), rgba(5,10,30,0.7)) !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    [class*="grid"], .jt-ind-grid, .jt-port-grid, .jt-port2-grid, .jt-wwd-grid, .service-grid, .about-grid, .case-studies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}