/* ==========================================================================
   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 */
}