/* ============================================================
   MOBILE.CSS — Only applies on screens 768px and below
   Desktop styles in style.css are completely untouched
   ============================================================ */

@media (max-width: 768px) {

    /* ── HIDE DESKTOP NAV, SHOW MOBILE NAV ── */
    .nav-links        { display: none !important; }
    .mob-hamburger    { display: flex; }
    .mob-nav-drawer   { display: flex; }

    /* ── NAV BAR ── */
    .nav-inner {
        height: 64px;
        padding: 0 1.25rem;
    }

    .nav-brand img {
        height: 40px !important;
        width: 40px !important;
    }

    .nav-brand .brand-text strong { font-size: .78rem; }
    .nav-brand .brand-text span   { font-size: .65rem; }

    /* ── HAMBURGER BUTTON ── */
    .mob-hamburger {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        transition: background .2s;
        flex-shrink: 0;
    }

    .mob-hamburger:hover { background: var(--light); }

    .mob-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--primary);
        border-radius: 2px;
        transition: transform .3s, opacity .3s, width .3s;
        transform-origin: center;
    }

    /* Animate to X when open */
    body.mob-open .mob-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.mob-open .mob-hamburger span:nth-child(2) { opacity: 0; width: 0; }
    body.mob-open .mob-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── DRAWER OVERLAY ── */
    .mob-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 998;
        backdrop-filter: blur(2px);
    }

    body.mob-open .mob-overlay { display: block; }

    /* ── SLIDE-IN DRAWER ── */
    .mob-nav-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 82vw;
        max-width: 320px;
        height: 100dvh;
        background: white;
        z-index: 999;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        box-shadow: -8px 0 40px rgba(0,0,0,.15);
    }

    body.mob-open .mob-nav-drawer { transform: translateX(0); }

    /* Drawer header */
    .mob-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.25rem 1rem;
        border-bottom: 1px solid var(--border);
        background: var(--light);
    }

    .mob-drawer-head .brand { display: flex; align-items: center; gap: .6rem; }
    .mob-drawer-head img { height: 36px; width: 36px; border-radius: 8px; object-fit: cover; }
    .mob-drawer-head strong { font-size: .8rem; color: var(--primary); font-weight: 700; display: block; line-height: 1.3; }
    .mob-drawer-head span { font-size: .65rem; color: var(--muted); }

    .mob-close {
        width: 32px;
        height: 32px;
        border: none;
        background: white;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: var(--muted);
        border: 1px solid var(--border);
    }

    /* Drawer nav links */
    .mob-nav-links {
        list-style: none;
        padding: .75rem 0;
        flex: 1;
    }

    .mob-nav-links > li > a,
    .mob-nav-links > li > button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: .85rem 1.25rem;
        font-size: .92rem;
        font-weight: 500;
        color: var(--text);
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: background .15s, color .15s;
        border-radius: 0;
        text-decoration: none;
    }

    .mob-nav-links > li > a:hover,
    .mob-nav-links > li > button:hover { background: var(--light); color: var(--primary); }

    .mob-nav-links > li > a.active { color: var(--primary); font-weight: 700; background: rgba(26,60,110,.05); }

    .mob-nav-links .mob-arrow {
        width: 14px;
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .25s;
        flex-shrink: 0;
    }

    .mob-nav-links .mob-arrow::after {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        margin-top: -3px;
    }

    .mob-nav-links li.mob-sub-open > button .mob-arrow { transform: rotate(180deg); }

    /* Programs sub-menu inside drawer */
    .mob-submenu {
        display: none;
        background: var(--light);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .mob-nav-links li.mob-sub-open .mob-submenu { display: block; }

    .mob-submenu a {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem 1.5rem;
        font-size: .85rem;
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px solid var(--border);
        transition: background .15s;
    }

    .mob-submenu a:last-child { border-bottom: none; }
    .mob-submenu a:hover { background: white; color: var(--primary); }

    .mob-submenu .sub-num {
        font-size: .75rem;
        font-weight: 800;
        color: var(--primary);
        opacity: .4;
        min-width: 20px;
    }

    .mob-submenu .sub-info strong { display: block; font-size: .83rem; font-weight: 600; color: var(--primary); }
    .mob-submenu .sub-info span   { font-size: .72rem; color: var(--muted); }

    /* Drawer CTA */
    .mob-drawer-cta {
        padding: 1rem 1.25rem 1.5rem;
        border-top: 1px solid var(--border);
    }

    .mob-drawer-cta a {
        display: block;
        background: var(--gradient);
        color: white;
        text-align: center;
        padding: .85rem;
        border-radius: 10px;
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
    }

    .mob-drawer-cta .mob-contact-row {
        display: flex;
        gap: .75rem;
        margin-top: .75rem;
    }

    .mob-drawer-cta .mob-contact-row a {
        flex: 1;
        background: var(--light);
        color: var(--primary);
        font-size: .8rem;
        padding: .65rem;
        border-radius: 8px;
        border: 1px solid var(--border);
    }

    /* ── BOTTOM NAV BAR (mobile only) ── */
    .mob-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 20px rgba(0,0,0,.08);
        z-index: 997;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mob-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .6rem .25rem;
        font-size: .6rem;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
        gap: .25rem;
        transition: color .2s;
    }

    .mob-bottom-nav a.active { color: var(--primary); }
    .mob-bottom-nav a:hover  { color: var(--primary); }

    .mob-bottom-nav .mob-icon {
        font-size: 1.2rem;
        line-height: 1;
    }

    .mob-bottom-nav .mob-apply {
        background: var(--gradient);
        color: white !important;
        border-radius: 12px;
        margin: .35rem .2rem;
        padding: .4rem .5rem !important;
    }

    /* Add padding so content doesn't hide behind bottom nav */
    body { padding-bottom: 64px; }

    /* ── HERO ── */
    .hero {
        padding: 3.5rem 1.25rem 3rem;
        background-attachment: scroll !important;
    }

    .hero h1 { font-size: 1.9rem; }
    .hero p  { font-size: .95rem; }

    .hero-badge { font-size: .72rem; margin-bottom: 1rem; }

    .btn-group { flex-direction: column; align-items: center; gap: .75rem; }
    .btn { width: 100%; max-width: 280px; text-align: center; padding: .85rem 1.5rem; }

    /* ── STATS BAR ── */
    .stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
        padding: 0 .5rem;
    }

    .stat-item .num { font-size: 1.4rem; }
    .stat-item .lbl { font-size: .7rem; }

    /* ── SECTIONS ── */
    .section { padding: 3rem 1.25rem; }
    .section-header { margin-bottom: 2rem; }
    .section-header h2 { font-size: 1.5rem; }

    /* ── GRIDS → SINGLE COLUMN ── */
    .grid-3 { grid-template-columns: 1fr; gap: 1rem; }
    .grid-2 { grid-template-columns: 1fr; gap: 1rem; }

    /* ── CARDS ── */
    .card { padding: 1.25rem; }
    .card:hover { transform: none; }

    /* ── PAGE HERO ── */
    .page-hero { padding: 2.5rem 1.25rem; }
    .page-hero h1 { font-size: 1.6rem; }

    /* ── PROGRAMS LISTING ── */
    .program-row {
        flex-direction: column;
        padding: 1.25rem;
        gap: .75rem;
    }

    .program-row-left { min-width: unset; gap: .75rem; }
    .program-num { font-size: 1.4rem; }

    /* ── INDIVIDUAL PROGRAM ── */
    .info-strip {
        flex-wrap: wrap;
    }

    .info-strip-item {
        min-width: 50%;
        border-bottom: 1px solid var(--border);
        padding: .85rem 1rem;
    }

    .info-strip-item:nth-child(odd)  { border-right: 1px solid var(--border); }
    .info-strip-item:nth-child(even) { border-right: none; }

    .prog-layout { grid-template-columns: 1fr; gap: 2rem; }

    .semester-item { flex-direction: column; gap: .5rem; }
    .sem-label { min-width: unset; }

    .curriculum-table { grid-template-columns: 1fr; }

    /* ── DEAN SECTION ── */
    .dean-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .dean-photo-wrap { width: 220px; }
    .dean-title { font-size: 1.6rem; }
    .dean-quote { font-size: .95rem; }

    .dean-credentials {
        flex-direction: column;
    }

    .dean-cred-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.1);
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dean-cred-item:last-child { border-bottom: none; }

    /* ── PLACEMENT TABLE ── */
    .placement-table thead { display: none; }

    .placement-table tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: .75rem;
        padding: .75rem 1rem;
    }

    .placement-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
        padding: .5rem 0;
        font-size: .83rem;
    }

    .placement-table td:last-child { border-bottom: none; }

    .placement-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .3px;
        flex-shrink: 0;
        margin-right: .75rem;
    }

    /* ── CONTACT ── */
    .contact-grid {
        grid-template-columns: 1fr !important;
        margin-bottom: 2rem !important;
    }

    .contact-info-card {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .contact-info-card h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .contact-detail {
        margin-bottom: 1rem;
    }

    .contact-detail .icon {
        width: 36px;
        height: 36px;
        font-size: .95rem;
        flex-shrink: 0;
    }

    .contact-detail .info span {
        font-size: .85rem;
        word-break: break-word;
    }

    .map-card {
        border-radius: 16px;
    }

    .map-card iframe {
        height: 260px;
    }

    .map-note {
        font-size: .78rem;
        padding: .75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        border-radius: 0 0 16px 16px;
    }

    /* ── FAQ ── */
    .faq-q { font-size: .85rem; padding: 1rem 1.25rem; }
    .faq-a  { font-size: .83rem; }

    /* ── FOOTER ── */
    footer { padding: 2rem 1.25rem 1rem; padding-bottom: calc(1rem + 64px); }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: .35rem;
    }

    /* ── RECRUITER GRID ── */
    .recruiter-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .recruiter-item { font-size: .8rem; padding: .75rem 1rem; }

    /* ── HIGHLIGHT CARDS ── */
    .highlight-card { padding: 1.5rem; }
    .highlight-card .big-num { font-size: 2.2rem; }

    /* ── ADMISSION STRIP ── */
    .admission-strip {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .admission-strip .btn { width: 100%; }

    /* ── PROGRAMS IMAGE BANNER ── */
    .prog-img-banner {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
        margin-bottom: 2rem !important;
    }

    .prog-img-banner img {
        border-radius: 12px !important;
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .mob-hamburger    { display: none !important; }
    .mob-nav-drawer   { display: none !important; }
    .mob-overlay      { display: none !important; }
    .mob-bottom-nav   { display: none !important; }
}