/* ============================================================
   Responsive Design System — Mobile, Tablet & Desktop
   Breakpoints: 360px (mobile) → 600px → 768px → 992px → 1200px
   ============================================================ */

/* Large Desktop / Max Width Consistency */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Medium Desktop & Tablet Landscape (993px - 1200px) */
@media (max-width: 1200px) {
    .hero-section {
        background-size: cover;
    }
    .testimonials-layout-row {
        grid-template-columns: 1fr 1fr;
    }
    .testimonials-cta-col {
        grid-column: 1 / -1;
        margin-top: 20px;
    }
    .services-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .programs-cards-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile & Tablet Portrait (<= 1024px) */
@media (max-width: 1024px) {
    :root {
        --header-height: 80px;
    }

    .navbar {
        height: 80px;
    }

    .navbar.scrolled {
        height: 80px;
    }

    .navbar-inner {
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .navbar-logo img {
        height: 52px !important;
        max-width: 190px !important;
    }

    .navbar.scrolled .navbar-logo img {
        height: 52px !important;
    }

    /* Hide desktop CTA in header row on mobile/tablet */
    .nav-cta {
        display: none !important;
    }

    /* Show hamburger */
    .hamburger {
        display: flex !important;
    }

    /* Mobile Drawer */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 310px;
        max-width: 85vw;
        height: 100vh;
        background: #FFFFFF;
        box-shadow: -8px 0 30px rgba(10, 42, 94, 0.15);
        flex-direction: column;
        align-items: stretch;
        padding: 80px 20px 30px 20px;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: var(--z-overlay);
        gap: 6px;
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 15px;
        font-weight: 700;
        padding: 12px 16px;
        border-radius: 10px;
        color: #0A2A5E;
        display: block;
        width: 100%;
    }

    .nav-link:hover,
    .nav-link.active {
        background: #F0F6FF;
        color: #0066FF;
    }

    .nav-mobile-actions {
        display: flex !important;
    }

    .nav-overlay {
        display: block;
    }

    /* Sections Container Padding */
    .container,
    .section-programs .container,
    #services .container,
    #process .container,
    #why-choose .container,
    #testimonials .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* 1. Hero Section Mobile */
    .hero-section {
        padding-top: 76px;
        background-image: none !important;
        min-height: auto;
        margin-bottom: 20px;
    }

    .hero-container {
        padding: 16px 16px 24px 16px;
        min-height: auto;
    }

    .hero-content-left {
        max-width: 100%;
    }

    .hero-kicker {
        font-size: 11px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .hero-title-sans {
        font-size: clamp(2.1rem, 7.5vw, 3rem);
        letter-spacing: -0.5px;
        margin-bottom: 12px;
        line-height: 1.15;
    }

    .hero-bold-lead {
        font-size: 15px;
        max-width: 100%;
        margin-bottom: 8px;
    }

    .hero-subtext {
        font-size: 13.5px;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .hero-btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-btn-group .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* 2. Feature Bar Mobile */
    .feature-bar-container {
        position: static;
        bottom: auto;
        padding: 0 16px;
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .feature-bar {
        background: linear-gradient(145deg, #F0F6FF 0%, #E6F0FA 100%);
        padding: 14px 12px;
        border-radius: 18px;
        border: 1px solid #D6E4F5;
        box-shadow: 0 8px 24px rgba(10, 42, 94, 0.06);
    }

    .feature-bar-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .feature-bar-item {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 12px 10px;
        display: flex;
        align-items: center;
        text-align: left;
        gap: 10px;
        border: 1px solid rgba(10, 42, 94, 0.05);
        box-shadow: 0 2px 8px rgba(10, 42, 94, 0.04);
    }

    .feature-bar-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #F0F6FF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .feature-bar-icon-box svg {
        width: 22px;
        height: 22px;
    }

    .feature-bar-icon-box svg[fill],
    .feature-bar-icon-box svg circle[fill],
    .feature-bar-icon-box svg path[fill] {
        fill: #0A2A5E !important;
    }

    .feature-bar-icon-box svg[stroke],
    .feature-bar-icon-box svg circle[stroke],
    .feature-bar-icon-box svg path[stroke] {
        stroke: #0A2A5E !important;
    }

    .feature-bar-text {
        font-family: 'Poppins', 'Inter', sans-serif;
        font-size: 11.5px;
        line-height: 1.25;
        color: #475569;
        font-weight: 500;
    }

    .feature-bar-text strong {
        font-size: 12px;
        font-weight: 800;
        color: #0A2A5E;
        display: block;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    /* 3. Services Section ("What We Help You With" - Screenshot 2 Fix) */
    .services-section-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .services-heading-serif {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* 4. Programs Section */
    .section-programs {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .programs-layout-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .programs-heading-serif {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .programs-cards-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .program-mockup-card {
        padding: 18px 10px;
        min-height: 125px;
    }

    /* 5. Process Section (Screenshots 3 & 4 Fix) */
    #process {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .process-mockup-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .process-image-wrapper {
        min-height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        width: 100%;
    }

    .process-heading-serif {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
        word-break: break-word;
    }

    .process-steps-timeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .process-step-arrow {
        display: none !important;
    }

    .process-timeline-step {
        background: #F4F8FC;
        border-radius: 14px;
        padding: 16px 12px;
        border: 1px solid rgba(10, 42, 94, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 6. Why Choose VEHA */
    .section-why-choose {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .why-choose-layout-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .why-choose-heading-serif {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .metrics-horizontal-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .metric-item {
        background: #FFFFFF;
        padding: 20px 14px;
        border-radius: 16px;
        border: 1px solid rgba(10, 42, 94, 0.06);
        box-shadow: 0 4px 16px rgba(10, 42, 94, 0.04);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .metric-icon-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #F0F6FF;
        border: 1.5px solid #DBEAFE;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .metric-icon-circle svg {
        width: 22px;
        height: 22px;
        stroke: #0066FF;
    }

    .metric-label {
        font-size: 12px;
        color: #64748B;
        font-weight: 600;
        margin-bottom: 2px;
        white-space: normal;
    }

    .metric-number {
        font-size: 26px;
        font-weight: 800;
        color: #0A2A5E;
        line-height: 1;
        letter-spacing: -0.5px;
    }

    .metric-lead-text {
        font-size: 15px;
        font-weight: 800;
        color: #0A2A5E;
    }

    /* 7. Testimonials */
    .section-deep-blue {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .testimonials-layout-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .testimonials-heading {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .testimonials-carousel-viewport {
        border-radius: 14px;
    }

    .testimonial-slide-item {
        flex: 0 0 100%;
    }

    .testimonial-card-inner {
        padding: 18px 14px;
    }

    /* 8. Inner Pages Mobile */
    .about-intro-grid,
    .about-stats-grid,
    .contact-main-grid,
    .services-page-grid,
    .courses-page-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    /* 9. Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-script-col {
        display: none !important;
    }

    .footer-mockup {
        padding-top: 48px;
        padding-bottom: 30px;
    }
}

/* Small Smartphone & Tablet Viewports (<= 768px) */
@media (max-width: 768px) {
    .feature-bar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Single Column Full Width Service Cards on Small Screens */
    .services-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .service-mockup-card {
        padding: 16px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        text-align: left;
    }

    .service-icon-box {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .service-icon-box svg {
        width: 36px;
        height: 36px;
    }

    .service-mockup-card h4 {
        font-size: 14.5px;
        margin-bottom: 3px;
    }

    .service-mockup-card p {
        font-size: 12.5px;
    }

    .programs-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Full Width Process Timeline Cards */
    .process-steps-timeline {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .process-timeline-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 14px 16px;
    }

    .process-step-icon-wrap {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .process-timeline-step h5 {
        font-size: 14px;
    }

    .metrics-horizontal-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Extra Small (<= 380px) */
@media (max-width: 380px) {
    .feature-bar-grid {
        grid-template-columns: 1fr;
    }

    .programs-cards-row {
        grid-template-columns: 1fr;
    }

    .gt-card-actions {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .metrics-horizontal-row {
        grid-template-columns: 1fr;
    }

    .navbar-logo img {
        height: 32px !important;
        max-width: 130px;
    }
}