/* ==========================================================================
   MAXIMO INDIA RESPONSIVE LAYOUT DEFINITIONS
   Handles viewport scaling from mobile displays (320px) to ultra-wide 4K screens.
   ========================================================================== */

/* --- 4K / Ultra-wide Screens (min-width: 1920px) --- */
@media (min-width: 1920px) {
    html {
        font-size: 18px; /* Globally scale base typography */
    }
    .container {
        max-width: 1600px;
    }
}

/* --- Large Desktop / Laptop (max-width: 1200px) --- */
@media (max-width: 1200px) {
    :root {
        --container-padding: 5%;
        --section-padding-y: 6.5rem;
    }
    
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .horizontal-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* --- Tablets & Landscape Mobile (max-width: 992px) --- */
@media (max-width: 992px) {
    :root {
        --section-padding-y: 5.5rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }

    .hero-content {
        grid-column: span 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-image {
        grid-column: span 1;
        order: -1; /* Place image on top on mobile/tablets */
    }

    .hero-image img {
        max-width: 70%;
    }

    .hero-actions {
        justify-content: center;
    }

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

    .details-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .details-gallery, .details-info {
        grid-column: span 1;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }


    .apply-box {
        grid-column: span 12;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
    
    .footer-brand {
        grid-column: span 2;
    }
    
    .footer-address-col {
        grid-column: span 2;
    }
}

/* --- Portrait Tablets & Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    .header .container {
        padding: 0 20px !important;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hero {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
    }
    .hero-grid {
        display: flex !important;
        flex-direction: column !important; /* Forces text to come first, image second */
        gap: 30px !important;
    }
    .hero-content {
        text-align: center !important;
        order: 1 !important; /* Establishes text layout first */
    }
    .hero-image {
        order: 2 !important; /* Places image asset below copy */
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    /* Navigation Toggles */
    .nav {
        display: none; /* Hide standard nav list */
    }

    .burger {
        display: block; /* Show menu trigger button */
    }

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

    .showroom-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .search-box-container {
        width: 100%;
    }

    .timeline {
        padding-left: 2rem;
    }

    .timeline-dot {
        left: calc(-2rem - 4.5px);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .apply-box {
        padding: 2.5rem 1.5rem;
    }

    .warranty-check-box {
        padding: 2rem;
    }

    .warranty-check-form {
        flex-direction: column;
    }

    .warranty-check-form button {
        width: 100%;
    }

    /* Explicitly break forced height rules for cards when stacked vertically */
    .m-card, 
    .leader-card, 
    .p-card,
    .interactive-grid > div,
    .catalog-grid > div {
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch !important; /* Overrides forced row height equalization */
    }
    
    /* Fix the internal body of cards so they don't force artificial flex margins */
    .m-card-body,
    .p-card-details {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 20px !important; /* Add a clean, uniform padding gap directly below the last text paragraph */
    }
}

/* --- Micro viewports / Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    :root {
        --section-padding-y: 4.5rem;
    }

    .hero-image img {
        max-width: 85%;
    }

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

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        padding: 3rem 0;
    }


    .faq-trigger {
        padding: 1.25rem 1.5rem;
        font-size: 1.05rem;
    }

    .faq-panel {
        padding: 0 1.5rem;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand, .footer-links-col, .footer-address-col {
        grid-column: span 1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-legal {
        flex-direction: column;
        gap: 0.75rem;
    }
}