/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* --- SM: 640px+ --- */
@media (min-width: 640px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }

    /* Projects Showcase - Tablet: Balanced stacked layout */
    .project-showcase-item {
        gap: 3rem;
    }
    .project-showcase-content {
        padding: 2rem;
    }
    .project-showcase-meta {
        flex-direction: row;
        gap: 2rem;
    }

    /* Projects slider - 2 cards on tablet */
    #projectsSliderTrack .slide-item {
        flex: 0 0 50%;
    }
    .why-cards { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid-home { grid-template-columns: repeat(2, 1fr); }
    .gallery-page-grid { grid-template-columns: repeat(2, 1fr); }
    .slide-item { flex: 0 0 50%; }
    .team-page-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid-home { grid-template-columns: repeat(2, 1fr); }
    .blog-page-grid { grid-template-columns: repeat(2, 1fr); }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .mvv-grid { grid-template-columns: repeat(3, 1fr); }
    #testiSliderTrack .slide-item { flex: 0 0 50%; }

    /* Quote page: 2-column form rows */
    .quote-form .form-row-2 { grid-template-columns: 1fr 1fr; }
}

/* --- MD: 768px+ --- */
@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .hero-content { padding-bottom: clamp(4rem, 8vh, 8rem); }
    .scroll-indicator { display: flex; }

    /* Quote page: side-by-side form + info card */
    .quote-layout { grid-template-columns: 3fr 2fr; }

    .about-home { padding: 8rem 0; }
    .services-section { padding: 8rem 0; }
    .projects-section { padding: 8rem 0; }
    .why-section { padding: 8rem 0; }
    .process-section { padding: 8rem 0; }
    .team-home { padding: 8rem 0; }
    .testimonials-section { padding: 8rem 0; }
    .gallery-home { padding: 8rem 0; }
    .blog-home { padding: 8rem 0; }

    .about-image-badge { display: block; }
    .page-hero { padding-top: 12rem; padding-bottom: 6rem; }

    .section-heading h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); }

    .cta-inner { padding: 4rem; }
    .cta-content { grid-template-columns: 1fr 1fr; }
    .cta-buttons { justify-content: flex-end; }

    .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }

    .process-grid { grid-template-columns: repeat(5, 1fr); gap: 0; }
    .process-line { display: block; }

    .timeline-line { left: 50%; }
    .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
    .timeline-item:nth-child(odd) .timeline-content { padding-left: 0; padding-right: 3rem; text-align: right; }
    .timeline-dot { left: 50%; }
    .timeline-content { width: 50%; }

    .job-card { flex-direction: row; align-items: center; justify-content: space-between; }

    .contact-page-grid { grid-template-columns: 1fr 1fr; }

    .contact-info-block {
        position: sticky;
        top: 7rem;
    }

    .cursor-dot, .cursor-ring { display: block; }
}

/* --- Max 1023px (Tablet/Mobile) --- */
@media (max-width: 1023px) {
    .mv-vision-block .mv-img-wrap { order: -1; }
    .hero {
        height: auto;
        min-height: 0;
    }
    .hero-content {
        min-height: 0;
        padding-top: 8.5rem;
        padding-bottom: 4rem;
    }
    .hero-flex-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
    }
    .hero-form-side {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        flex-basis: auto;
    }
    .hero-text-side {
        max-width: 760px;
    }
    .work-process-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .work-process-tab {
        border-bottom: 1px solid var(--border);
    }
    .work-process-panel,
    .work-process-panel.active {
        grid-template-columns: 1fr;
    }
    .work-process-media {
        min-height: 20rem;
        aspect-ratio: 16 / 9;
    }
    .career-apply-grid {
        grid-template-columns: 1fr;
    }
}

/* --- LG: 1024px+ --- */
@media (min-width: 1024px) {
    .nav-desktop { display: flex; }
    .header-actions { display: flex; }
    .mobile-toggle { display: none; }

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

    /* Hero Quote Form - Two column layout on desktop */
    .hero-content-wrapper {
        grid-template-columns: 1fr 400px;
        gap: 3rem;
    }
    .hero-content-right {
        display: block;
    }

    /* Projects Showcase - Desktop: Horizontal showcase layout with alternating positions */
    .project-showcase-item {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        min-height: 500px;
    }
    .project-showcase-item.layout-left {
        grid-template-columns: 1fr 1fr;
    }
    .project-showcase-item.layout-right {
        grid-template-columns: 1fr 1fr;
    }
    .project-showcase-item.layout-right {
        direction: rtl;
    }
    .project-showcase-item.layout-right .project-showcase-content {
        direction: ltr;
    }
    .project-showcase-content {
        padding: 3rem;
        justify-content: center;
    }
    .project-showcase-description {
        max-width: 500px;
    }

    /* Projects slider - 3 cards on desktop */
    #projectsSliderTrack .slide-item {
        flex: 0 0 33.333%;
    }
    .about-home-grid { grid-template-columns: 1fr 1fr; }
    .about-story-grid { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .slide-item { flex: 0 0 25%; }
    .team-page-grid { grid-template-columns: repeat(4, 1fr); }
    .blog-grid-home { grid-template-columns: repeat(3, 1fr); }
    .blog-page-grid { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid-home { grid-template-columns: repeat(3, 1fr); }
    .gallery-page-grid { grid-template-columns: repeat(3, 1fr); }
    .cert-grid { grid-template-columns: repeat(4, 1fr); }
    #testiSliderTrack .slide-item { flex: 0 0 33.3333%; }
    
    /* Mission & Vision Redesign */
    .mv-block { grid-template-columns: 1fr 1fr; }

    .footer-grid {
        grid-template-columns: 4fr 2fr 2fr 4fr;
    }

    .services-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .projects-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }

    .project-detail-grid { grid-template-columns: 2fr 1fr; }

    /* Featured project card spans 2 cols and 2 rows */
    .project-card.featured {
        grid-column: span 2;
        grid-row: span 2;
    }
    .project-card.featured .project-img {
        aspect-ratio: 16/12;
    }
    .project-card:not(.featured) .project-img {
        aspect-ratio: 4/5;
    }
}

/* --- Mobile: below 768px --- */
@media (max-width: 767px) {
    .form-row { flex-direction: column; }
    .hero-content {
        padding-top: 7.5rem;
        padding-bottom: 3rem;
    }
    .hero-flex-layout {
        gap: 2rem;
    }
    .quote-field-row,
    .quote-radio-group {
        grid-template-columns: 1fr;
    }
    .quote-reference-card {
        padding: 1.25rem;
        border-radius: 6px;
    }
    .quote-field {
        gap: 0.7rem;
    }
    .quote-radio-group {
        gap: 0.75rem;
    }
    .quote-reference-form {
        gap: 1rem;
    }
    .quote-reference-card .quote-reference-header {
        margin-bottom: 1.25rem;
    }
    .quote-reference-card .quote-reference-header h3 {
        font-size: clamp(1.8rem, 11vw, 2.4rem);
    }
    .quote-radio-group label {
        min-height: 2rem;
    }
    .hero-title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
    .cursor-dot, .cursor-ring { display: none !important; }
    .project-card .project-img { aspect-ratio: 4/3; }
    .scroll-indicator { display: none; }
    .flip-card { min-height: 360px; }
    .flip-card-front, .flip-card-back { padding: 2rem; }
    .service-card h3 { font-size: 1.375rem; }
    .service-card p { font-size: 0.875rem; }
    .flip-card-back h3 { font-size: 1.375rem; }
    .flip-card-back p { font-size: 0.875rem; }

    /* Service row mobile stacking */
    .service-row { min-height: auto; }
    .service-row .flip-card { min-height: 360px; }
    .service-image-wrap { min-height: 280px; }

    .work-process-section {
        padding: 4rem 0;
    }
    .work-process-shell {
        margin-top: 2rem;
    }
    .work-process-tabs {
        grid-template-columns: 1fr;
    }
    .work-process-tab {
        min-height: 4.5rem;
        grid-template-columns: auto 1fr;
        justify-items: start;
        text-align: left;
        border-right: 0;
        padding: 0.85rem 1rem;
    }
    .work-process-media {
        min-height: 15rem;
    }
    .work-process-content {
        padding: 1.5rem;
    }
    .work-process-count {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .work-process-content h3 {
        font-size: 1.65rem;
    }
    .career-form-row {
        grid-template-columns: 1fr;
    }
    .career-accordion,
    .career-form,
    .career-panel-heading {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Projects slider - 1 card on mobile */
    #projectsSliderTrack .slide-item {
        flex: 0 0 100%;
    }

    /* Projects header - stack on mobile */
    .projects-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Projects Showcase - Mobile: Image on top, content below */
    .project-showcase-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .project-showcase-item.layout-left,
    .project-showcase-item.layout-right {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .project-showcase-item.layout-right .project-showcase-content {
        direction: ltr;
    }
    .project-showcase-image {
        aspect-ratio: 16/9;
    }
    .project-showcase-content {
        padding: 1rem;
    }
    .project-showcase-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    .project-showcase-description {
        max-width: 100%;
    }

    /* Adjust button positions for mobile */
    .whatsapp-fab {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 52px;
        height: 52px;
    }
    .whatsapp-fab svg {
        width: 24px;
        height: 24px;
    }
    .scroll-top-btn {
        bottom: 6.5rem;
        right: 1.5rem;
    }
}

/* --- Very small: below 480px --- */
@media (max-width: 480px) {
    .hero-content {
        padding-top: 7rem;
    }
    .quote-reference-card {
        padding: 1rem;
    }
    .quote-field span,
    .quote-radio-group legend {
        font-size: 0.875rem;
    }
    .quote-field input {
        min-height: 2.2rem;
    }
    .quote-phone-field small {
        bottom: 0.62rem;
    }
    .filter-buttons { gap: 0.375rem; }
    .filter-btn { padding: 0.375rem 0.75rem; font-size: 0.625rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .about-image-badge { display: none; }
    .flip-card { min-height: 380px; }

    /* Adjust button positions for very small screens */
    .whatsapp-fab {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 52px;
        height: 52px;
    }
    .whatsapp-fab svg {
        width: 24px;
        height: 24px;
    }
    .scroll-top-btn {
        bottom: 6.5rem;
        right: 1.5rem;
    }
}