/* ==========================================================================
   MOBILE.CSS — Complete Responsive Audit
   HVPM CoET Website
   Breakpoints:
     xs   : < 480px
     sm   : 480px – 575px
     sm+  : 576px – 767px
     md   : 768px – 991px
     lg   : 992px – 1023px
     xl   : 1024px+  (desktop — no overrides needed)
   ========================================================================== */

/* ── Global: prevent horizontal scroll on every device ──────────────────── */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

* {
    box-sizing: border-box;
}

/* ── Global: images always responsive ───────────────────────────────────── */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* === Fix: keep hero/full-bleed background images contained within their section === */
/* The global "img { height: auto !important }" rule above forces hero background    */
/* images to their intrinsic height, making them overflow below the hero section.    */
/* These selectors restore height:100% for absolutely-positioned background images.  */
.absolute.inset-0 > img,
.inset-0 > img.h-full,
section.bg-burgundy .absolute > img,
.relative > .absolute.inset-0 > img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}


/* ── Global: iframes always responsive ──────────────────────────────────── */
iframe {
    max-width: 100% !important;
}

/* ── Global: tables scroll horizontally instead of overflowing ──────────── */
table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

/* ==========================================================================
   ① MOBILE DRAWER — Apply Now button fix (Issue #1: black text)
   The <a> in the drawer has `text-ivory` which relies on a CSS variable.
   Browser link colour inheritance can override it. Force white explicitly.
   ========================================================================== */

/* Apply Now button inside mobile drawer — force white text, proper styling */
#mobileDrawer .mt-auto a {
    color: #ffffff !important;
    background-color: var(--burgundy, #6d1f2e) !important;
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(109, 31, 46, 0.35) !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    letter-spacing: 0.02em !important;
}

#mobileDrawer .mt-auto a:hover,
#mobileDrawer .mt-auto a:focus,
#mobileDrawer .mt-auto a:active {
    background-color: var(--maroon, #4a1220) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Mobile drawer nav links — touch-friendly tap targets */
#mobileDrawer nav a {
    padding: 0.6rem 0.25rem !important;
    display: block !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border, #e8e0d5) !important;
    font-size: 1rem !important;
}

#mobileDrawer nav a:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   ② ALL SCREENS — General layout improvements (992px and below)
   ========================================================================== */
@media (max-width: 991px) {

    /* ── Container safe padding ───────────────────────────────────────────── */
    .container-edu {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── Section padding reduction ────────────────────────────────────────── */
    .py-24 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Headings — tablet-safe sizes ─────────────────────────────────────── */
    h1.font-serif {
        font-size: 2.4rem !important;
        line-height: 1.25 !important;
    }

    h2.font-serif,
    h2.text-4xl {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    h3.font-serif {
        font-size: 1.5rem !important;
    }

    /* ── Departments: remove alternating row-reverse on tablet ────────────── */
    .row.align-items-center.flex-row-reverse {
        flex-direction: row !important;
    }

    /* ── Departments: action buttons stack neatly ─────────────────────────── */
    .mt-6.flex.gap-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .mt-6.flex.gap-3 a {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── Research section stats — grid tighter ────────────────────────────── */
    .col-sm-6 .font-serif.text-5xl {
        font-size: 2.5rem !important;
    }
}

/* ==========================================================================
   ③ TABLET (768px – 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {

    /* ── Bootstrap column overrides ───────────────────────────────────────── */
    .col-lg-3,
    .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Hero subcolumns keep full width */
    section.relative.isolate .col-lg-5,
    section.relative.isolate .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── Footer columns at tablet ─────────────────────────────────────────── */
    footer .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
    }

    footer .col-lg-2,
    footer .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    /* ── Top utility bar on tablet ────────────────────────────────────────── */
    .bg-burgundy.text-ivory\/80 .container-edu {
        flex-direction: row !important;
    }
}

/* ==========================================================================
   ④ MOBILE (max-width: 767px) — Core mobile audit
   ========================================================================== */
@media (max-width: 767px) {

    /* ── Top Utility Bar ──────────────────────────────────────────────────── */
    .bg-burgundy.text-ivory\/80 .container-edu {
        flex-direction: column !important;
        gap: 0.25rem !important;
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        text-align: center !important;
    }

    /* Hide right-side quick links on mobile to save space */
    .bg-burgundy.text-ivory\/80 .container-edu > div:last-child {
        display: none !important;
    }

    .bg-burgundy.text-ivory\/80 .container-edu > div:first-child {
        font-size: 11px !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* ── Header ───────────────────────────────────────────────────────────── */
    header.sticky .container-edu,
    header .container-edu {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    header .flex.items-center.gap-2 {
        gap: 0.375rem !important;
    }

    /* ── Section Padding ──────────────────────────────────────────────────── */
    .py-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-10 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .py-6 {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }

    /* ── Section heading spacing ──────────────────────────────────────────── */
    .text-center.mb-16 {
        margin-bottom: 2rem !important;
    }

    .text-center.mb-12 {
        margin-bottom: 1.5rem !important;
    }

    .text-center.mb-10 {
        margin-bottom: 1.25rem !important;
    }

    /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */

    /* Inner page banner headings */
    h1.font-serif {
        font-size: 1.875rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
    }

    /* Homepage hero h1 */
    h1.font-serif.text-4xl,
    h1.font-serif.text-5xl {
        font-size: 1.875rem !important;
        line-height: 1.25 !important;
    }

    /* Section titles */
    h2.font-serif,
    h2.text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h2.text-3xl {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }

    h3.font-serif,
    h3.text-2xl,
    h3.text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    h3.text-xl {
        font-size: 1.125rem !important;
    }

    h4.font-serif {
        font-size: 1rem !important;
    }

    /* Body text */
    p.text-lg,
    p.text-xl {
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
    }

    p.text-base {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
    }

    /* ── HERO SECTION ─────────────────────────────────────────────────────── */
    section.relative.isolate.min-h-\[85vh\] {
        min-height: 85vh !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Hero content column */
    section.relative.isolate .container-edu.py-24 {
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
    }

    /* Hero badge pill */
    section.relative.isolate span.inline-flex.rounded-full {
        font-size: 9px !important;
        padding: 0.25rem 0.75rem !important;
        letter-spacing: 0.15em !important;
    }

    /* Hero CTA buttons — stack vertically */
    section.relative.isolate .flex.flex-wrap.gap-4,
    .flex.flex-wrap.gap-4.justify-center {
        flex-direction: column !important;
        gap: 0.625rem !important;
    }

    section.relative.isolate .flex.flex-wrap.gap-4 a,
    .flex.flex-wrap.gap-4.justify-center a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* Hero accreditation bar is hidden on mobile (already hidden md:block) */

    /* ── ABOUT SECTION (index.php) ────────────────────────────────────────── */

    /* The floating "SINCE 1983" overlay card overflows on small screens */
    .absolute.-bottom-6.-right-6,
    [class*="-bottom-6"][class*="-right-6"] {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 0.75rem !important;
        max-width: 100% !important;
        width: fit-content !important;
        border-radius: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Stats numbers on home about section */
    .font-serif.text-4xl[data-count] {
        font-size: 2rem !important;
    }

    /* Quick stats row spacing */
    .row.text-center.mt-16 {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }

    /* Vision/Mission two-col cards on mobile */
    .row.g-4.mt-2.align-items-stretch .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── BOOTSTRAP COLUMN STACKING ────────────────────────────────────────── */

    /* All lg-only columns → full width */
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* md-only columns → full width (unless sm class is also present) */
    .col-md-4:not([class*="col-sm"]),
    .col-md-5:not([class*="col-sm"]),
    .col-md-3:not([class*="col-sm"]),
    .col-md-6:not([class*="col-sm"]),
    .col-md-7:not([class*="col-sm"]),
    .col-md-8:not([class*="col-sm"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Testimonials: col-md-4 → full width on mobile */
    .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Notices sidebar col-md-4 */
    .col-md-4.col-lg-4,
    .col-md-8.col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* col-sm-6 → 2 per row (keep grid intact) */
    /* Already handled by Bootstrap's sm breakpoint */

    /* Exception: stat number cards keep 2-per-row */
    .col-md-3.col-6,
    .col-sm-3.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Exception: placement stat cards keep 2-per-row */
    .col-sm-3.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* ── ROW GAPS AND SPACING ─────────────────────────────────────────────── */
    .row.align-items-center > [class*="col-"]:not(:last-child) {
        margin-bottom: 1.25rem !important;
    }

    /* ── CARDS ────────────────────────────────────────────────────────────── */
    .rounded-2xl {
        border-radius: 0.75rem !important;
    }

    .rounded-3xl {
        border-radius: 1rem !important;
    }

    /* Card padding reduction */
    .p-8 {
        padding: 1.25rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    .p-5 {
        padding: 1rem !important;
    }

    /* Quick access cards — 2 per row on small mobile */
    .col-lg-3.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Governing body / accreditation cards — 2 per row */
    .col-lg-3.col-sm-6 .p-4.rounded-2xl {
        padding: 0.875rem !important;
    }

    /* Faculty cards */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Faculty card text sizing */
    .col-lg-3.col-md-4.col-sm-6 .p-4.text-center {
        padding: 0.625rem !important;
    }

    /* ── DEPARTMENTS PAGE ─────────────────────────────────────────────────── */

    /* Remove alternating flex-row-reverse on mobile */
    .row.align-items-center.flex-row-reverse {
        flex-direction: column !important;
    }

    /* Department spacing between items */
    .space-y-16 > * + * {
        margin-top: 2.5rem !important;
    }

    .space-y-12 > * + * {
        margin-top: 2rem !important;
    }

    /* Department image aspect ratio */
    .relative.rounded-3xl.aspect-\[4\/3\] {
        aspect-ratio: 4 / 3 !important;
    }

    /* Department detail stats — 2-col mini grid */
    .row.g-4.border-t .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Department action buttons — stack */
    .mt-6.flex.gap-3 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .mt-6.flex.gap-3 a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* Department separator lines */
    .h-px.bg-border.my-16 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    /* ── RESEARCH STATS SECTION ───────────────────────────────────────────── */
    .font-serif.text-gold.text-5xl {
        font-size: 2rem !important;
    }

    /* Research col-sm-6 keep 2-per-row but reduce padding */
    .col-sm-6 .p-5.rounded-2xl {
        padding: 0.875rem !important;
    }

    /* Research section CTA button — full width */
    #research .inline-flex,
    #research a.inline-flex {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── PLACEMENTS SECTION ───────────────────────────────────────────────── */

    /* Placement stat numbers */
    .font-serif.text-burgundy.text-3xl[data-count] {
        font-size: 1.5rem !important;
    }

    /* Marquee ticker — overflow safe */
    .mt-16.border-t.border-b {
        overflow: hidden !important;
    }

    /* ── NEWS & NOTICES SECTION (homepage) ───────────────────────────────── */

    /* Notice card date column — keep min-width */
    .p-4.rounded-xl.bg-cream .text-center.shrink-0 {
        min-width: 48px !important;
    }

    /* Notice header flex wrap */
    .d-flex.justify-between.items-center.mb-6 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* ── TESTIMONIALS ─────────────────────────────────────────────────────── */
    .col-md-4 .p-5.rounded-2xl {
        padding: 1rem !important;
    }

    /* ── ADMISSIONS CTA SECTION ───────────────────────────────────────────── */

    /* CTA card padding */
    .p-5.rounded-3xl .relative.z-10.max-w-2xl {
        padding: 0.5rem 0 !important;
    }

    /* CTA three-button group — stack on mobile */
    .p-5.rounded-3xl .flex.flex-wrap.gap-4 {
        flex-direction: column !important;
        gap: 0.625rem !important;
    }

    .p-5.rounded-3xl .flex.flex-wrap.gap-4 a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* CTA headings */
    .p-5.rounded-3xl h2.font-serif {
        font-size: 1.375rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* ── COMPLIANCE / GOVERNANCE SECTION ─────────────────────────────────── */

    /* Pipe-separated links — stack on mobile instead of overflow */
    #compliance .flex.flex-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.375rem !important;
    }

    /* Hide pipe separators on mobile */
    #compliance .text-border {
        display: none !important;
    }

    /* ── GALLERY PAGE ─────────────────────────────────────────────────────── */

    /* Filter pills — wrap, don't overflow */
    .flex.flex-wrap.gap-2.justify-center {
        gap: 0.375rem !important;
        justify-content: center !important;
    }

    .flex.flex-wrap.gap-2.justify-center a {
        font-size: 11px !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
    }

    /* Gallery grid — 2-up on mobile */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Gallery card caption */
    .rounded-2xl .p-3.text-center p {
        font-size: 11px !important;
    }

    /* ── FACULTY PAGE ─────────────────────────────────────────────────────── */

    /* Faculty search/filter row — full width stacking */
    .col-md-5:not([class*="col-sm"]):not([class*="col-lg"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0.625rem !important;
    }

    .col-md-4:not([class*="col-sm"]):not([class*="col-lg"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0.625rem !important;
    }

    .col-md-3.d-flex.gap-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Faculty filter buttons full width */
    .col-md-3.d-flex.gap-2 button,
    .col-md-3.d-flex.gap-2 a {
        flex: 1 1 auto !important;
    }

    /* Faculty cards — 2 per row on phone */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Faculty pagination */
    .d-flex.justify-between.items-center.flex-wrap {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }

    /* ── NOTICE PAGE ──────────────────────────────────────────────────────── */

    /* Notice detail view — col-lg-8 and col-lg-4 (sidebar) both go full */
    .col-lg-8,
    .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Notice list item — flex-wrap the date+badge row */
    .d-flex.justify-between.items-start.flex-wrap {
        gap: 0.375rem !important;
    }

    /* PDF download row in notice detail — stack on mobile */
    .mt-8 .p-4.rounded-xl .d-flex.justify-between {
        flex-direction: column !important;
        gap: 0.875rem !important;
        align-items: flex-start !important;
    }

    .mt-8 .p-4.rounded-xl .d-flex.justify-between a {
        align-self: stretch !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Notice action links — wrap */
    .d-flex.gap-3.text-xs.font-semibold {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* ── CONTACT PAGE ─────────────────────────────────────────────────────── */

    /* Contact form container */
    .col-12.col-lg-7 .p-5.rounded-2xl,
    .col-12.col-lg-5 .p-5.rounded-2xl {
        padding: 1rem !important;
    }

    /* Contact form: name+email row → stack */
    .row.g-3 .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* All form inputs — full width, mobile-friendly tap targets */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Contact form submit button */
    button[type="submit"].w-100 {
        min-height: 48px !important;
        font-size: 0.9375rem !important;
    }

    /* Google Maps embed — shorter on mobile */
    .mt-8.rounded-2xl.overflow-hidden.shadow-sm.h-64 {
        height: 200px !important;
    }

    .rounded-2xl iframe,
    .rounded-xl iframe {
        width: 100% !important;
        height: 200px !important;
    }

    /* Contact info items — reduce gap */
    .d-flex.gap-4 {
        gap: 0.75rem !important;
    }

    /* Contact icon containers */
    .size-12.rounded-xl.bg-cream {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        flex-shrink: 0 !important;
    }

    /* ── ABOUT PAGE ───────────────────────────────────────────────────────── */

    /* Governing body: 2-per-row on mobile */
    .col-lg-3.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Avatar initials circles */
    .size-16.rounded-full {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1rem !important;
    }

    /* Vision & Mission box padding */
    .p-5.rounded-2xl.bg-cream {
        padding: 1rem !important;
    }

    /* ── SEARCH OVERLAY ───────────────────────────────────────────────────── */
    #searchOverlay .bg-ivory {
        margin: 0.75rem !important;
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    #searchOverlay input {
        font-size: 16px !important; /* prevent iOS zoom */
    }

    /* ── MOBILE DRAWER ────────────────────────────────────────────────────── */
    #mobileDrawer {
        width: 100vw !important;
        height: 100vh !important;
    }

    #mobileDrawer > div:first-child {
        /* The sliding panel */
        max-width: min(320px, 85vw) !important;
        padding: 1.25rem !important;
    }

    /* ── FOOTER ───────────────────────────────────────────────────────────── */
    footer .col-lg-4,
    footer .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1.75rem !important;
    }

    footer .col-lg-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 1.25rem !important;
    }

    footer .col-lg-4.col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    footer .col-md-3,
    footer .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 1rem !important;
    }

    /* Footer brand section */
    footer .flex.items-center.gap-3 {
        margin-bottom: 0.75rem !important;
    }

    /* Footer bottom bar */
    footer .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    footer .flex.items-center.gap-5 {
        justify-content: center !important;
    }

    /* ── SPACING UTILITIES ────────────────────────────────────────────────── */
    .mt-16 { margin-top: 2rem !important; }
    .mb-16 { margin-bottom: 2rem !important; }
    .mt-12 { margin-top: 1.5rem !important; }
    .mb-12 { margin-bottom: 1.5rem !important; }
    .mt-10 { margin-top: 1.25rem !important; }

    /* ── BUTTONS — general touch-safe sizing ─────────────────────────────── */
    .rounded-full.px-6.py-3,
    .rounded-full.px-5.py-2\.5,
    .rounded-full.bg-burgundy {
        min-height: 44px !important;
    }

    /* Prevent long button text overflow */
    a.rounded-full,
    button.rounded-full {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ── ARTICLE/BLOG PAGE ────────────────────────────────────────────────── */
    .col-lg-8.col-md-8,
    .col-lg-4.col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Featured article image in homepage news section */
    .rounded-xl.bg-cream.overflow-hidden img[style*="height:220px"] {
        height: 180px !important;
        object-fit: cover !important;
    }

    /* ── PDFS PAGE ────────────────────────────────────────────────────────── */
    .col-md-8.col-lg-9,
    .col-md-4.col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Download row item — stack the button */
    .p-4.rounded-xl.border.border-border.d-flex.justify-between {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }

    .p-4.rounded-xl.border.border-border.d-flex.justify-between a {
        align-self: stretch !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* ── MISC ─────────────────────────────────────────────────────────────── */

    /* Ensure all flex containers wrap when needed */
    .d-flex {
        flex-wrap: wrap !important;
    }

    /* Unless it's a row-type that must stay horizontal */
    .d-flex.align-items-center.gap-2,
    .d-flex.align-items-center.gap-1 {
        flex-wrap: nowrap !important;
    }

    /* h-px separator lines */
    .h-px.bg-border {
        display: block !important;
        width: 100% !important;
    }

    /* Aspect ratio images */
    .aspect-\[4\/3\] {
        aspect-ratio: 4 / 3 !important;
    }

    .aspect-square {
        aspect-ratio: 1 / 1 !important;
    }

    /* Row images in about section */
    .row.align-items-center > [class*="col-lg"]:not(:last-child) {
        margin-bottom: 1rem !important;
    }
}

/* ==========================================================================
   ⑤ SMALL MOBILE (max-width: 575px)
   ========================================================================== */
@media (max-width: 575px) {

    /* ── Quick access cards: still 2 per row, reduce padding ─────────────── */
    .col-lg-3.col-sm-6 .p-5 {
        padding: 0.875rem !important;
    }

    .col-lg-3.col-sm-6 h4.font-serif {
        font-size: 0.9rem !important;
    }

    .col-lg-3.col-sm-6 p.text-sm {
        font-size: 0.75rem !important;
    }

    /* ── Faculty cards: 2 per row but tighter ─────────────────────────────── */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* ── Gallery: 2 per row ───────────────────────────────────────────────── */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* ── Footer cols: at 575 keep 2-col for link sections ────────────────── */
    footer .col-lg-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* ── Research stats: 2-per-row ────────────────────────────────────────── */
    .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* ==========================================================================
   ⑥ EXTRA SMALL MOBILE (max-width: 430px) — phones 320–430px
   ========================================================================== */
@media (max-width: 430px) {

    /* ── Typography scale down one more notch ─────────────────────────────── */
    h1.font-serif {
        font-size: 1.625rem !important;
    }

    h2.font-serif,
    h2.text-4xl {
        font-size: 1.375rem !important;
    }

    h3.font-serif {
        font-size: 1.125rem !important;
    }

    /* ── Hero section ─────────────────────────────────────────────────────── */
    section.relative.isolate .container-edu.py-24 {
        padding-top: 4.5rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Inner page banners ───────────────────────────────────────────────── */
    section.py-20.bg-burgundy {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    /* ── Cards: reduce further ────────────────────────────────────────────── */
    .p-5 { padding: 0.875rem !important; }
    .p-4 { padding: 0.75rem !important; }

    /* ── Research stats ───────────────────────────────────────────────────── */
    .font-serif.text-gold.text-5xl {
        font-size: 1.75rem !important;
    }

    .font-serif.text-burgundy.text-4xl {
        font-size: 1.75rem !important;
    }

    .font-serif.text-burgundy.text-3xl[data-count] {
        font-size: 1.375rem !important;
    }

    /* ── Contact page ─────────────────────────────────────────────────────── */
    .mt-8.rounded-2xl.overflow-hidden.h-64 {
        height: 170px !important;
    }

    /* ── Footer: all link sections stack to full width ────────────────────── */
    footer .col-lg-2,
    footer .col-md-3,
    footer .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1.25rem !important;
    }

    /* ── Mobile drawer panel ──────────────────────────────────────────────── */
    #mobileDrawer > div:first-child {
        max-width: 85vw !important;
        padding: 1rem !important;
    }

    /* ── Gallery: 1-per-row on very small screens ─────────────────────────── */
    /* Optional: uncomment if 320px screens need single column
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    */

    /* ── Govering body cards: 1-per-row on tiny screens ──────────────────── */
    .col-lg-3.col-sm-6:not(.col-md-4) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   ⑦ TINY SCREENS (max-width: 360px) — 320px–360px
   ========================================================================== */
@media (max-width: 360px) {

    h1.font-serif {
        font-size: 1.5rem !important;
    }

    h2.font-serif,
    h2.text-4xl {
        font-size: 1.25rem !important;
    }

    /* Container inner padding */
    .container-edu {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Row gutters */
    .row.g-4 { --bs-gutter-x: 0.75rem !important; --bs-gutter-y: 0.75rem !important; }
    .row.g-3 { --bs-gutter-x: 0.5rem !important; --bs-gutter-y: 0.5rem !important; }

    /* Hero badge pill */
    section.relative.isolate span.inline-flex.rounded-full {
        display: none !important; /* too cramped at 320px */
    }

    /* Placement/stat numbers */
    .font-serif.text-burgundy.text-3xl[data-count] {
        font-size: 1.25rem !important;
    }

    /* Apply Now in drawer */
    #mobileDrawer .mt-auto a {
        font-size: 0.8125rem !important;
        padding: 0.625rem 1rem !important;
    }
}

/* ==========================================================================
   ⑧ MEDIUM-SMALL (480px – 575px)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 575px) {

    h1.font-serif {
        font-size: 1.75rem !important;
    }

    h2.font-serif,
    h2.text-4xl {
        font-size: 1.5rem !important;
    }

    section.py-20.bg-burgundy {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ==========================================================================
   ⑨ SMALL TABLET (576px – 767px)
   ========================================================================== */
@media (min-width: 576px) and (max-width: 767px) {

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

    h2.font-serif,
    h2.text-4xl {
        font-size: 1.75rem !important;
    }

    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section.py-20.bg-burgundy {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Faculty cards: 2-per-row */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Gallery: 2-per-row */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Department buttons: row, not column */
    .mt-6.flex.gap-3 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   ⑩ TABLET (768px – 1023px) — avoid touching lg desktop layout
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    h1.font-serif.text-4xl,
    h1.font-serif.text-5xl {
        font-size: 2.5rem !important;
    }

    h2.font-serif,
    h2.text-4xl {
        font-size: 2rem !important;
    }

    section.py-20.bg-burgundy {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Nav utility bar stays row at tablet */
    .bg-burgundy.text-ivory\/80 .container-edu {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* Remove alternating row-reverse at tablet too */
    .row.align-items-center.flex-row-reverse {
        flex-direction: row !important;
    }

    /* Faculty 3-per-row on tablet */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }

    /* Gallery 3-per-row on tablet */
    .col-lg-3.col-md-4.col-sm-6 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }

    /* Accreditation cards 2-per-row on tablet */
    .col-lg-4.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}


/* === Fix: dark shadow on hero gold/eyebrow label for readability over bright images === */
/* Targets the small uppercase gold "line" (e.g. ESTD. 1983, ACADEMIC DISCIPLINES, etc.) */
/* and also the hero heading + subtitle so all hero text stays legible on any background. */
section.bg-burgundy .text-gold,
section.bg-burgundy .container-edu > span {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8) !important;
}
section.bg-burgundy .container-edu h1,
section.bg-burgundy .container-edu p {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}