/* 
    TechDwar Solutions - Mobile-First Responsive CSS
    Base = Mobile. Media queries scale UP.
*/

/* ===================== MOBILE BASE (< 768px) ===================== */

/* Global: prevent horizontal overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Images: never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Typography - Mobile sizes */
h1 { font-size: 2.25rem !important; line-height: 1.1 !important; }
h2 { font-size: 1.75rem !important; line-height: 1.15 !important; }
h3 { font-size: 1.25rem !important; }

.section-title {
    font-size: 1.75rem !important;
}

/* Container: tighter padding on mobile */
.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* All grids: single column on mobile */
.grid,
.grid-2-col,
.grid-3-col,
.grid-4-col {
    grid-template-columns: 1fr !important;
}

/* Force inline grids to single column */
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns: repeat(2"],
[style*="grid-template-columns: 2fr 1fr 1fr 1.5fr"],
[style*="grid-template-columns: repeat(auto-fit"],
[style*="grid-template-columns: repeat(4"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns: 1fr 1.5fr"],
[style*="grid-template-columns: 1.5fr 1fr"],
[style*="grid-template-columns: 5fr 7fr"],
[style*="grid-template-columns: 7fr 5fr"],
[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
}

/* Portfolio cards: remove min-width causing scroll */
[style*="minmax(350px"],
[style*="minmax(400px"],
[style*="minmax(280px"],
[style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
}

/* Stack flex containers on mobile */
.flex-stack-mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

/* Thumb-friendly buttons on mobile */
.btn {
    width: 100%;
    min-height: 48px;
    padding: 0.9rem 1.5rem;
    text-align: center;
    justify-content: center;
    font-size: 0.95rem;
}

/* Hero CTA group: stack buttons vertically on mobile */
.hero-cta-group {
    flex-direction: column !important;
    width: 100%;
}

.hero-cta-group .btn {
    width: 100% !important;
    max-width: 100% !important;
}

/* About snippet: stack vertically, remove gap */
#about .container[style*="grid-template-columns"] {
    gap: 2.5rem !important;
}

/* Why Choose Us: stack vertically */
#why-us .container[style*="grid-template-columns"] {
    gap: 3rem !important;
}

/* Page hero adjustments */
.page-hero {
    min-height: 45vh !important;
    padding-top: calc(var(--nav-height) + 20px) !important;
}

.page-hero h1 {
    font-size: 2rem !important;
}

/* Hide trusted-by strip on mobile */
.trusted-strip {
    display: none !important;
}

/* Trusted-by section: hide on mobile */
#hero + section {
    display: none !important;
}

/* Section spacing - mobile */
.section-padding {
    padding: 50px 0 !important;
}

/* Contact form grid */
#contact-form .grid {
    grid-template-columns: 1fr !important;
}

/* Stats: 2-col on mobile */
.stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Footer */
#main-footer {
    padding: 50px 0 !important;
}

#main-footer .container.grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
}

/* Process steps: vertical on mobile */
.process-step {
    flex-direction: column;
    text-align: center;
}

/* Team grid: single column */
.team-grid {
    grid-template-columns: 1fr !important;
}

/* ABA container: stack on mobile */
.aba-container {
    grid-template-columns: 1fr !important;
}

/* LPT dashboard: full width, no overflow */
.lpt-dashboard {
    overflow-x: hidden !important;
    border-radius: var(--radius-lg) !important;
}

.lpt-dash-body {
    padding: 1.25rem !important;
}

/* About section: reduce padding, stack */
.about-grid,
.about-visual {
    width: 100% !important;
}

/* India Coverage: full width on mobile */
.icw--fullwidth {
    border-radius: var(--radius-lg) !important;
}

.icw-body--large {
    height: 280px !important;
}

/* CTA glass card: reduce padding */
.cta-glass-card__inner {
    padding: 2rem 1.25rem !important;
}

/* Leadership grid: single column */
.leadership-grid {
    grid-template-columns: 1fr !important;
}


/* ===================== TABLET (≥ 768px) ===================== */
@media screen and (min-width: 768px) {
    :root {
        --nav-height: 80px;
    }

    h1 { font-size: 3rem !important; }
    h2 { font-size: 2.5rem !important; }
    h3 { font-size: 1.5rem !important; }

    .section-title {
        font-size: 2.5rem !important;
    }

    .section-padding {
        padding: 80px 0 !important;
    }

    .container {
        padding: 0 1.5rem;
    }

    /* 2-col on tablet */
    .grid-2-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3-col { grid-template-columns: repeat(2, 1fr); }
    .grid-4-col { grid-template-columns: repeat(2, 1fr); }

    /* Inline grids: 2 columns */
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    [style*="minmax(350px"],
    [style*="minmax(400px"],
    [style*="minmax(280px"],
    [style*="minmax(300px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Buttons: auto width on tablet */
    .btn {
        width: auto;
    }

    /* Trusted strip visible */
    .trusted-strip {
        display: flex !important;
    }

    /* Footer: 2-col */
    #main-footer .container.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem !important;
    }

    #main-footer {
        padding: 80px 0 !important;
    }

    /* Page hero */
    .page-hero {
        min-height: 50vh !important;
    }

    .page-hero h1 {
        font-size: 3rem !important;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* About snippet: 2-col on tablet */
    #about .container[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
    }

    /* Why Choose Us: 2-col on tablet */
    #why-us .container[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    /* ABA container: side by side on tablet */
    .aba-container {
        grid-template-columns: 1fr 1fr !important;
    }

    /* CTA buttons: side by side on tablet */
    .cta-buttons {
        flex-direction: row !important;
        width: auto !important;
    }

    .cta-btn {
        width: auto !important;
    }

    /* Hero CTA group: row on tablet */
    .hero-cta-group {
        flex-direction: row !important;
        width: auto !important;
    }

    .hero-cta-group .btn {
        width: auto !important;
    }

    /* India Coverage: taller map on tablet */
    .icw-body--large {
        height: 400px !important;
    }

    /* Leadership: 2-col on tablet */
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Nav CTA visible on tablet */
    .nav-cta-btn {
        display: inline-flex !important;
    }
}


/* ===================== DESKTOP (≥ 1024px) ===================== */
@media screen and (min-width: 1024px) {
    :root {
        --nav-height: 85px;
    }

    h1 { font-size: clamp(3rem, 5vw, 4.5rem) !important; }
    h2 { font-size: clamp(2.5rem, 4vw, 3.5rem) !important; }
    h3 { font-size: 1.5rem !important; }

    .section-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    }

    .section-padding {
        padding: 100px 0 !important;
    }

    .container {
        padding: 0 2rem;
    }

    /* Full grids */
    .grid-2-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3-col { grid-template-columns: repeat(3, 1fr); }
    .grid-4-col { grid-template-columns: repeat(4, 1fr); }

    /* Auto-fit grids */
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    /* Footer: 4-col */
    #main-footer .container.grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
        gap: 2.5rem !important;
    }

    #main-footer {
        padding: 100px 0 !important;
    }

    /* Show/hide */
    .desktop-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }

    /* Page hero */
    .page-hero h1 {
        font-size: clamp(3rem, 5vw, 4rem) !important;
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Process */
    .process-step {
        flex-direction: row;
        text-align: left;
    }

    /* About snippet: original 2-col layout on desktop */
    #about .container[style*="grid-template-columns"] {
        grid-template-columns: 5fr 7fr !important;
        gap: 6rem !important;
    }

    /* Why Choose Us: original 2-col layout on desktop */
    #why-us .container[style*="grid-template-columns"] {
        grid-template-columns: 7fr 5fr !important;
        gap: 6rem !important;
    }

    /* Leadership: 3-col on desktop */
    .leadership-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ABA container: original layout */
    .aba-container {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ===================== LARGE DESKTOP (≥ 1280px) ===================== */
@media screen and (min-width: 1280px) {
    .container {
        padding: 0 2.5rem;
    }
}

/* ===================== HERO NEXT-GEN RESPONSIVE ===================== */

/* Mobile base: single column, hide dashboard, center text */
.hero-nextgen .hero-grid {
    grid-template-columns: 1fr !important;
}

.hero-nextgen .hero-content {
    text-align: center;
    max-width: 100%;
}

.hero-nextgen .hero-cta-group {
    justify-content: center;
}

.hero-nextgen .hero-stats {
    justify-content: center;
    gap: 2rem;
    display: none;
}

.hero-nextgen .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.hero-nextgen .hero-badge {
    font-size: 0.65rem;
}

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .hero-nextgen .hero-stats {
        display: flex;
    }

    .hero-nextgen .hero-badge {
        font-size: 0.75rem;
    }

    .hero-nextgen .hero-cta-group .btn {
        width: auto;
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .hero-nextgen .hero-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-nextgen .hero-content {
        text-align: left;
        max-width: 640px;
    }

    .hero-nextgen .hero-cta-group {
        justify-content: flex-start;
    }

    .hero-nextgen .hero-stats {
        justify-content: flex-start;
        gap: 3rem;
    }

    .hero-nextgen .hero-subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-nextgen .hero-mouse-glow {
        display: block;
    }

    .hero-nextgen .hero-badge {
        font-size: 0.8rem;
    }
}

/* ===================== SERVICES NEXT-GEN RESPONSIVE ===================== */

/* Mobile base */
.svc-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.svc-filters::-webkit-scrollbar { display: none; }

.svc-modal {
    padding: 2rem 1.5rem;
}

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-filters {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }

    .svc-modal {
        padding: 3rem;
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .svc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================== AI BUSINESS ANALYZER RESPONSIVE ===================== */

/* Mobile base */
.aba-options {
    grid-template-columns: 1fr;
}

.aba-stats-row {
    grid-template-columns: 1fr;
}

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .aba-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .aba-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .aba-container {
        grid-template-columns: 1fr 1fr;
    }

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

/* ===================== LIVE PROJECT TRACKER RESPONSIVE ===================== */

/* Mobile base: pipeline stacks vertically */
.lpt-pipeline {
    flex-direction: column;
}

.lpt-phase-connector {
    width: 100%;
    height: 20px;
}

.lpt-phase-connector::after {
    width: 2px;
    height: 16px;
}

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .lpt-pipeline {
        flex-direction: row;
    }

    .lpt-phase-connector {
        width: 28px;
        height: auto;
    }

    .lpt-phase-connector::after {
        width: 28px;
        height: 2px;
    }

    .lpt-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lpt-metrics-row {
        grid-template-columns: auto 1fr;
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .lpt-dash-body {
        padding: 2rem 2.5rem;
    }
}

/* ===================== EMBEDDED INDIA MAP — FULL WIDTH ===================== */

/* Mobile base: full width, shorter height */
.icw--fullwidth {
    width: 100%;
    max-width: 100%;
}

.icw-body--large {
    height: 350px;
}

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .icw-body--large {
        height: 450px;
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .icw--fullwidth {
        max-width: 900px;
    }

    .icw-body--large {
        height: 550px;
    }
}


/* Large Desktop (≥ 1280px) */
@media screen and (min-width: 1280px) {
    .testimonials-map-grid {
        grid-template-columns: 1fr auto !important;
    }
    
    .testimonials-map-wrapper {
        justify-content: flex-end;
    }
}

/* ===================== TRUST & PROOF RESPONSIVE ===================== */

/* Mobile base: handled in style.css (single column) */

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .tp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .tp-results-row {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 0;
        align-items: center;
    }

    .tp-result-divider {
        width: 1px;
        height: 48px;
        background: rgba(255,255,255,0.06);
    }

    .tp-slide {
        padding: 3.5rem 4rem;
    }
}

/* Desktop (≥ 1024px) */
@media screen and (min-width: 1024px) {
    .tp-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .tp-slide {
        padding: 4rem 5rem;
    }
}

/* ===================== NEXT-LEVEL CTA RESPONSIVE ===================== */

/* Mobile base: stack buttons, reduce padding */
.cta-glass-card__inner {
    padding: 2.5rem 1.5rem;
}

.cta-buttons {
    flex-direction: column;
    width: 100%;
}

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

/* Tablet (≥ 768px) */
@media screen and (min-width: 768px) {
    .cta-glass-card__inner {
        padding: 3.5rem 3rem;
    }

    .cta-buttons {
        flex-direction: row;
        width: auto;
    }

    .cta-btn {
        width: auto;
    }
}