/* ==========================================================================
   G.R. Medical College - Universal Cross-Device & Ultra-Wide Compatibility
   Responsive Design System for Mobile, Tablet, Laptop, Desktop & 4K Displays
   ========================================================================== */

/* 1. Global Box Sizing & Overflow Protection */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Unified Container Max-Widths (Aligns all sections on 1440px, 1600px, 1920px, 2K/4K) */
@media (min-width: 1400px) {
    .gr-footer-wrapper .container,
    .gr-about-container,
    .gr-departments-container,
    .gr-services-container,
    .gr-admissions-container,
    .gr-news-container,
    .gr-careers-gallery-container,
    .gr-footer-container,
    .gr-breadcrumb-container,
    .gr-facility-container,
    .gr-dept-container,
    .gr-gallery-page-container,
    .gr-opd-page-container,
    .gr-activities-container,
    .gr-announcements-page-container,
    .gr-cbme-container,
    .gr-contact-container {
        max-width: 1540px !important;
        padding-left: 31px !important;
        padding-right: 31px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gr-header-container,
    .gr-hero-banner-section {
        max-width: 1540px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gr-about-card {
        max-width: 100% !important;
    }
}

/* 3. Ultra-Wide Displays (1920px Full HD, 2K, 4K Screens) */
@media (min-width: 1920px) {
    .gr-header {
        display: flex;
        justify-content: center;
    }
    
    .gr-hero-banner-section {
        margin: 0 auto;
    }
    
    .gr-about-section {
        max-width: 1540px;
        margin: 40px auto 0 auto;
    }

    .gr-departments-section {
        width: 100%;
    }

    .gr-footer-wrapper {
        width: 100%;
    }
}

/* 4. Desktop & Laptop Balance (1025px - 1399px) */
@media (min-width: 1025px) and (max-width: 1399px) {
    .gr-about-headline {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }

    .gr-departments-title {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }

    .gr-about-card {
        padding: 48px 36px !important;
    }

    .gr-about-right-mosaic {
        width: 320px !important;
        height: 320px !important;
    }

    .gr-about-img-microscope,
    .gr-about-img-ward {
        width: 160px !important;
        height: 160px !important;
    }

    .gr-about-img-ward {
        top: 160px !important;
        left: 160px !important;
    }
}

/* 5. Tablet Screen Adaptations (769px - 1024px) */
@media (max-width: 1024px) {
    .gr-about-headline {
        text-align: left;
        font-size: 32px !important;
    }

    .gr-about-card {
        padding: 40px 24px !important;
    }

    .gr-departments-section {
        margin-top: -180px !important;
        padding-top: 240px !important;
        padding-bottom: 70px !important;
    }

    .gr-departments-header-top {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }

    .gr-departments-left-content {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .gr-careers-blue-card {
        padding: 24px !important;min-height: auto;
    }
    .gr-news-section{padding: 70px 0 20px 0;}
    .gr-inspire-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        width: 100%;
    }
    .gr-about-overview-right{justify-content: center !important;}
    .gr-commitment-illustration{justify-content: center !important; max-width: 100% !important;}
}

/* 6. Mobile Screen Adaptations (up to 768px) */
@media (max-width: 768px) {
    .container,
    .gr-about-section,
    .gr-departments-container,
    .gr-services-container,
    .gr-admissions-container,
    .gr-news-container,
    .gr-careers-gallery-container,
    .gr-footer-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .gr-about-section {
        margin-top: 20px !important;
        padding: 0 12px !important;
    }

    .gr-about-card {
        padding: 28px 16px !important;
    }

    .gr-about-headline {
        font-size: 26px !important;
        line-height: 1.2 !important;
        text-align: left;
        margin-bottom: 24px !important;
    }

    .gr-about-bottom-left-row {
        gap: 16px !important;
    }

    .gr-about-img-ot {
        width: 100% !important;
        height: 200px !important;
    }

    .gr-about-right-mosaic {
        width: 260px !important;
        height: 260px !important;
        margin: 24px auto 0 auto !important;
    }

    .gr-about-img-microscope,
    .gr-about-img-ward {
        width: 130px !important;
        height: 130px !important;
    }

    .gr-about-img-ward {
        top: 130px !important;
        left: 130px !important;
    }

    .gr-about-actions {
        flex-direction: column;
        width: 100%;
    }

    .gr-about-btn-primary,
    .gr-about-btn-outline {
        width: 100% !important;
        text-align: center;
    }

    .gr-departments-section {
        margin-top: -120px !important;
        padding-top: 160px !important;
        padding-bottom: 50px !important;
    }

    .gr-departments-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .gr-admissions-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .gr-admissions-right {
        margin-top: 30px;
    }

    .gr-careers-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .gr-inspire-title {
        text-align: center;
    }

    .gr-inspire-subtitle {
        text-align: center;
    }

    .gr-inspire-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        width: 100%;
        flex-direction: column;
    }

    .gr-mission-vision-section {
        padding: 0 0 30px 0;
    }

    .gr-page-banner-overlay {
        padding: 24px;
        justify-content: center;
    }

    .gr-chairman-text-col {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        text-align: center;
    }

    .gr-careers-avatars-row {
        justify-content: center;
    }
    .gr-dept-intro-row{padding-left: 0 !important; padding-right: 0 !important;}
    .gr-footer-wrapper .container,.gr-footer-container{padding-left: 0 !important; padding-right: 0 !important;}
}