/* ==========================================================================
   JDBIMS – Mobile responsiveness layer
   Loaded AFTER style.css / responsive.css so it wins where needed.
   Everything here targets phones/tablets via media queries, so the desktop
   layout stays exactly as-is.
   Breakpoints tuned for: 320 / 375 / 390 / 414 (phones) and 768 (tablet).
   ========================================================================== */

/* ---- 1. Kill horizontal scroll everywhere (safe on desktop too) ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* Fluid media – never let an image/iframe/video push the page wider */
img, svg, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* ============================ TABLET (<= 991px) =========================== */
@media (max-width: 991px) {
    .container { padding-left: 18px; padding-right: 18px; }

    /* Long, fixed-width content should scroll inside itself, not the page */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Big vertical paddings compressed a touch */
    .ptb-100 { padding-top: 60px; padding-bottom: 60px; }
    .pt-100  { padding-top: 60px; }
    .pb-100  { padding-bottom: 60px; }
    .pb-70   { padding-bottom: 40px; }

    /* Stacked columns get breathing room so cards never overlap */
    [class*="col-"] { margin-bottom: 0; }
    .cnt-block.equal-hight { margin-bottom: 26px; }
}

/* ============================ PHONES (<= 767px) ========================== */
@media (max-width: 767px) {
    .container { padding-left: 15px; padding-right: 15px; }

    /* Headings / text scale down for readability */
    h1 { font-size: 26px !important; line-height: 1.25; }
    h2 { font-size: 22px !important; line-height: 1.3; }
    h3 { font-size: 18px !important; }
    .section-title h2 { font-size: 22px !important; }
    p, li, a, .list ul li a { font-size: 15px; }

    /* Page banner: no fixed height / overlap of title over image */
    .page-banner-area { height: auto; }
    .page-banner-area img { width: 100%; height: auto; }
    .page-banner-content { position: static; transform: none; padding: 22px 0; }
    .page-banner-content h1 { font-size: 24px !important; }

    /* Buttons: full-ish width, comfortable tap size, no crowding */
    .default-btn, .read-more-btn, .btn {
        display: inline-block;
        padding: 11px 20px;
        font-size: 15px;
        white-space: normal;
    }

    /* Forms: inputs and selects go full width, never overflow */
    .form-group { width: 100%; }
    input.form-control, select.form-control, textarea.form-control, .form-control {
        width: 100% !important;
        max-width: 100%;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }
    .form-inline { display: block; }
    .form-inline .form-group { display: block; margin-bottom: 12px; }

    /* Counters / stats stack cleanly */
    .counter .col-4 { margin-bottom: 18px; }

    /* Cards: full width, centered, even spacing */
    .single-campus-card, .single-news-card, .cnt-block { margin-bottom: 22px; }

    /* Tables/marquee already fluid; keep marquee text sensible */
    .adm-marquee a { font-size: 13px; }
}

/* ---- Custom JDBIMS components (all pages) ---- */
@media (max-width: 767px) {
    /* WHAT'S BUZZING box */
    .wb-box { margin-top: 24px; padding: 18px 18px 20px; }
    .wb-heading { font-size: 19px; }
    .wb-viewport { height: 200px; }
    .wb-track li a { font-size: 14px; }

    /* Academic Calendar slide box */
    .jd-acal-body { min-height: auto; }
    .jd-acal-month { font-size: 18px; }
    .jd-acal-events li { font-size: 14px; }
    .jd-acal-note { margin-top: 24px; }

    /* Birthday widget already responsive; ensure it never overflows */
    .jd-bday-widget { margin: 8px 0 30px; }

    /* GO TO ALUMNI circular button – keep centered, not floating over text */
    .jd-go-alumni, .jd-go-alumni-btn {
        position: static !important;
        margin: 0 auto 22px !important;
        display: flex;
    }

    /* Placements table lists wrap nicely */
    .mobiled { padding-left: 18px; }
    .mobiled li { font-size: 14px; }
}

/* ---- Floating widgets: keep them clear of each other on small screens ---- */
@media (max-width: 767px) {
    .jd-help-widget { left: 12px; bottom: 12px; z-index: 99999; }
    .jd-help-widget .jd-help-icon { width: 50px; height: 50px; font-size: 24px; }
    .jd-help-widget .jd-help-bubble { font-size: 12px; padding: 6px 11px; }

    .jd-notices-fab { right: 12px; bottom: 74px; }
    .jd-notices-fab .jd-notices-fab-icon { width: 50px; height: 50px; font-size: 24px; }
    .jd-notices-fab .jd-notices-fab-bubble { font-size: 12px; padding: 6px 11px; }

    /* Slide-in notices panel full-ish width */
    .jd-notices-panel { width: 300px; max-width: 88%; }

    /* Scroll-to-top a bit smaller so it doesn't crowd the corner */
    .go-top { width: 42px; height: 42px; line-height: 42px; }
}

/* ---- Brochure modal / book: fit small screens, no clipping ---- */
@media (max-width: 767px) {
    .modal-dialog { margin: 12px; }
    .jd-brochure-stage, .jd-book { max-width: 100% !important; }
    .jd-book, .jd-page, .jd-cover { max-width: 100%; height: auto; }
    .jd-page img, .jd-cover img { width: 100%; height: auto; object-fit: contain; }
}

/* ---- Footer: clean single-flow stack, centered, no overlap ---- */
@media (max-width: 767px) {
    .footer-area { padding-top: 55px; padding-bottom: 30px; }
    .footer-logo-area { text-align: center; margin-bottom: 26px; }
    .footer-logo-area .contact-list ul li a { justify-content: center; }
    .footer-menus { justify-content: flex-start !important; }
    .footer-menus > [class*="col-"] { padding-left: 12px; padding-right: 12px; margin-bottom: 22px; }
    .footer-widjet { text-align: left; }
    .footer-widjet h3 { margin-bottom: 16px; }
    .copyright .row > div { text-align: center !important; margin-bottom: 8px; }
    .social-content ul { justify-content: center; }
}

/* ---- Recruiter logo slider: sensible size on phones ---- */
@media (max-width: 767px) {
    .client-area .slider { height: 110px !important; }
    .client-area .slide { height: 110px !important; padding: 0 14px; }
    .client-area .slide img { max-height: 64px !important; max-width: 150px !important; }
}

/* ============================ SMALL PHONES (<= 400px) ==================== */
@media (max-width: 400px) {
    h1 { font-size: 22px !important; }
    .page-banner-content h1 { font-size: 21px !important; }
    .section-title h2 { font-size: 20px !important; }
    .container { padding-left: 12px; padding-right: 12px; }

    .jd-bday-msg h3 { font-size: 18px !important; }
    .wb-heading { font-size: 17px; }
    .jd-acal-nav { width: 32px; height: 32px; font-size: 20px; }

    .jd-help-widget .jd-help-bubble,
    .jd-notices-fab .jd-notices-fab-bubble { display: none; } /* keep only the icons on very small screens */
}

/* ================================================================
   v2 – stronger anti-overlap pass (header top bar, nav, grids)
   ================================================================ */

/* Nothing may exceed the viewport width */
@media (max-width: 991px) {
    body, .container, .container-fluid, .row, section, header, footer,
    .navbar-area, .top-header-area, [class*="-area"] { max-width: 100%; }
    .row { margin-left: 0; margin-right: 0; }
    .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Top red bar: "Get the latest updates" + search/brochure/nav links */
@media (max-width: 991px) {
    .top-header-area { text-align: center; padding: 6px 0; }
    .top-header-area .col-lg-4,
    .top-header-area .col-lg-8 { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .header-left-content { text-align: center; margin-bottom: 6px; }
    .header-left-content p { margin: 0; }
    .header-right-content .list ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
        padding: 0;
        margin: 0;
    }
    .header-right-content .list ul li { margin: 0 !important; float: none !important; }
    /* search dropdown panel must not run off-screen */
    #siteSearchPanel { right: auto !important; left: 50% !important; transform: translateX(-50%); width: 88vw !important; }
}
@media (max-width: 575px) {
    .top-header-area .header-right-content .list ul li a { font-size: 12px; }
    .header-left-content p { font-size: 12px; }
    /* keep the essential action buttons, drop the secondary text links to save space
       (Announcements/Placements/etc. are still in the main menu below) */
    .top-header-area .header-right-content .list ul li:nth-child(n+3) { display: none; }
}

/* Main navbar / logo area – prevent logo + brand text overlap */
@media (max-width: 991px) {
    .navbar-area .logo img, .navbar-brand img { max-width: 100%; height: auto; }
    .navbar-area .container, .navbar-area .container-fluid { flex-wrap: wrap; }
    .mobile-responsive-nav .logo { max-width: 78%; }
}

/* Any two-column "details + sidebar" layout: stack with spacing */
@media (max-width: 991px) {
    .academics-details-area .col-lg-8,
    .academics-details-area .col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .detgails-right-content, .academics-details { margin-bottom: 26px; }
}

/* Cards / grids that commonly overlap – force clean stacking */
@media (max-width: 767px) {
    .our-webcoderskull ul.row > li,
    .staff ul.row > li { width: 100%; max-width: 100%; margin-bottom: 24px; }
    .phd-card { flex-direction: column; align-items: center; text-align: center; }
    .single-events-card, .single-news-card, .single-campus-card { margin-bottom: 22px; }
    /* Faculty & alumni photos keep aspect, never overflow their card */
    .cnt-block figure img { width: 100%; height: auto; object-fit: cover; }
}

/* Modals (brochure, registration) fit the screen */
@media (max-width: 767px) {
    .modal-dialog { margin: 10px auto; max-width: calc(100% - 20px); }
    .modal-content { width: 100%; }
}

/* Marquee / ticker never forces horizontal scroll */
@media (max-width: 767px) {
    .adm-marquee, .marquee_ticker { overflow: hidden; }
}

/* ================================================================
   v3 – mobile header/nav hardening + long-text safety
   ================================================================ */
@media (max-width: 991px) {
    /* Mobile logo bar: two logos + stacked title must not collide */
    .mobile-responsive-nav .mobile-responsive-menu { display: block; }
    .mobile-responsive-nav .logo {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 10px;
        max-width: calc(100% - 60px); /* leave room for the hamburger */
    }
    .mobile-responsive-nav .logo .main-logo { max-height: 44px; width: auto; }
    .mobile-responsive-nav .logo h6 { font-size: 9px; line-height: 1.1; margin: 0; }
    .mobile-responsive-nav .logo h6 br { display: none; }
    .mobile-responsive-nav .navbar-brand { margin: 0; }

    /* meanmenu slide panel stays within screen */
    .mean-container .mean-nav { width: 100%; }
    .mean-container .mean-bar { min-height: 42px; }

    /* Long words / URLs / titles never push the page wider */
    h1, h2, h3, h4, h5, h6, p, li, a, span, td, .phd-card__title, .news-content h5 {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Belt-and-suspenders: absolutely nothing scrolls sideways */
@media (max-width: 991px) {
    html, body { overflow-x: hidden !important; }
    #gallery { padding-left: 8px; padding-right: 8px; }
    #gallery img { max-width: 100%; height: auto; }
    /* Dignitaries / card grids */
    .main .container .card { width: 100% !important; max-width: 100%; margin: 0 0 16px; }
    .main .container .card img { width: 100%; height: auto; }
}

/* ================================================================
   v4 – small-screen polish (verified via device emulation)
   ================================================================ */
/* About > JDBIMS: Vision/Mission list must fit tiny screens (320px) */
@media (max-width: 480px) {
    .h-welcome-list ul { padding-left: 0; margin-left: 0; list-style: none; }
    .h-welcome-list ul li { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .h-welcome-list .h-w-left { flex: 0 0 auto; }
    .h-welcome-list .h-w-right { flex: 1 1 auto; min-width: 0; max-width: 100%; }
    .h-welcome-list .h-w-right h2,
    .h-welcome-list .h-w-right p { overflow-wrap: break-word; word-wrap: break-word; }
}
/* Keep the scroll-to-top button fully inside the viewport on phones */
@media (max-width: 767px) {
    .go-top { right: 15px !important; }
    .go-top.active, .go-top.top-btn-active { right: 15px !important; }
}

/* ================================================================
   v5 – Event/Seminar cards: date badge was overlapping the title
   ================================================================ */
@media (max-width: 767px) {
    .single-events-card .events-image .date {
        bottom: -20px;
        left: 15px;
        padding: 9px 15px;
    }
    .single-events-card .events-image .date span { font-size: 15px !important; margin-bottom: 2px !important; }
    .single-events-card .events-image .date p { font-size: 12px !important; margin-bottom: 0 !important; }
    /* Give the title clear space below the overhanging date badge */
    .single-events-card .events-content { padding: 40px 16px 22px !important; padding-top: 42px !important; }
    .single-events-card .events-content h3 { font-size: 17px !important; line-height: 1.35; margin-top: 6px; }
}