/* =====================================================================
   MOBILE-FRIENDLY OVERRIDES
   Loaded after style.css / responsive.css on every page.
   Every rule sits inside a max-width media query, so the desktop
   layout (992px and up) is untouched. No content is changed.
   ===================================================================== */

/* ---------- Tablet & below (<= 991px) ---------- */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; }
    img { max-width: 100%; }

    /* iOS / Android do not support fixed backgrounds well */
    .welcome-area, .breadcrumb-area, .blog .breadcrumb-area, .cta-area {
        background-attachment: scroll !important;
    }

    /* Hero: let it grow with its content instead of a fixed 700px box,
       and leave room for the logo / header bar */
    .welcome-area {
        height: auto !important;
        min-height: 0 !important;
        padding: 150px 0 130px;
    }

    /* Inner page banners (uMBA / igMBA / gMBA / FAQ / Terms) */
    .breadcrumb-area {
        height: auto !important;
        min-height: 0 !important;
        padding: 130px 0 60px;
    }
    .breadcrumb-content > h2 { font-size: 38px; line-height: 1.2; }

    /* Fixed-height heading rows that overlap the next block once text wraps */
    .row[style*="height: 200px"],
    .container > .row[style*="height"] {
        height: auto !important;
        margin-bottom: 30px !important;
        padding-bottom: 0 !important;
    }

    /* Program pages: side tab menu + content -> stacked */
    section.program > div[style*="display: flex"],
    section.program > div[style*="display:flex"] {
        flex-direction: column;
        margin: 30px auto !important;
        padding: 0 16px;
    }
    section.program > div > div[style*="width: 250px"],
    section.program > div > div[style*="width:250px"] {
        width: 100% !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 28px;
    }
    section.program > div > div[style*="width: 250px"] > button,
    section.program > div > div[style*="width:250px"] > button {
        font-size: 16px !important;
        padding: 10px 12px !important;
        line-height: 1.3;
        min-height: 48px;
    }
    section.program > div > div[style*="flex: 1"],
    section.program > div > div[style*="flex:1"] {
        padding-left: 0 !important;
        min-width: 0;
    }

    /* Tables inside tab content: fit the screen, scroll if wider */
    .tab-content table {
        width: 100% !important;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab-content img { height: auto; }

    /* Inline-styled footer used on inner pages */
    footer[style] > div[style*="display:flex"] {
        padding: 0 20px;
    }
    footer[style] > div > div[style*="padding-left: 100px"] {
        padding-left: 0 !important;
    }
}

/* ---------- Phones (<= 767px) ---------- */
@media (max-width: 767px) {

    /* Header: keep the "Contact Us" label readable (theme hid it with font-size:0) */
    header .navbar-expand .navbar-nav.action .btn {
        font-size: 13px;
        padding: 6px 14px;
        line-height: 1.6;
    }
    header .navbar-expand .navbar-nav.action .nav-item { margin-left: 8px !important; }
    header .navbar-brand img { width: 80px !important; }

    /* Hero text & buttons */
    .welcome-area { padding: 130px 0 110px; }
    .welcome-intro { text-align: center !important; }
    .welcome-intro h1 { font-size: 30px; line-height: 1.25; }
    .welcome-intro .btn { margin: 6px 4px 0 !important; }
    .welcome-thumb-wrapper img { max-width: 80%; margin: 0 auto; }

    /* Section intro text that the theme hid on phones — show it like desktop */
    .section-heading p.d-none.d-sm-block { display: block !important; }

    .section-heading { margin-bottom: 35px; }
    .section-heading > h2 { font-size: 30px; line-height: 1.25; }
    .ptb_150 { padding: 60px 0; }

    /* Long mentor-name pill button wraps instead of overflowing */
    .content-inner .btn,
    .btn.btn-bordered { white-space: normal; height: auto; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; }

    /* Price / pathway cards breathing room */
    .single-price-plan.p-5 { padding: 2rem 1.5rem !important; }
    .single-review.p-5 { padding: 2rem 1.5rem !important; }

    /* DCP "How it works" cards */
    body .dcp-section { padding: 50px 16px; }
    body .dcp-grid { grid-template-columns: 1fr; gap: 18px; }
    body .dcp-header { margin-bottom: 35px; }
    body .dcp-header h2 { font-size: 26px; }

    /* Inner page banners */
    .breadcrumb-area { padding: 115px 0 50px; }
    .breadcrumb-content > h2 { font-size: 28px; padding-top: 10px !important; }
    .breadcrumb-content h4 { font-size: 16px; line-height: 1.4; }
    .breadcrumb-content p, .breadcrumb-content span { font-size: 15px !important; }
    .breadcrumb-content .flex { display: block; }
    .breadcrumb-content .btn { margin-top: 10px; }

    /* Program pages: two-column tab grid on phones */
    section.program > div > div[style*="width: 250px"],
    section.program > div > div[style*="width:250px"] {
        grid-template-columns: 1fr 1fr;
    }
    section.program > div > div[style*="width: 250px"] > button,
    section.program > div > div[style*="width:250px"] > button {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Program tab content: readable size instead of fixed 20px */
    .tab-content p,
    .tab-content ul,
    .tab-content li,
    .tab-content td,
    .tab-content th,
    .tab-content table,
    .tab-content h3 { font-size: 16px !important; line-height: 1.6; }
    .tab-content h2 { font-size: 20px !important; line-height: 1.35; margin-top: 20px; }
    .tab-content ul { padding-left: 0; }

    /* Old "steps" blocks (image + text side by side) */
    .step-box { flex-direction: column; text-align: center; }

    /* Contact pop-up on program pages */
    .popup-box {
        margin: 80px 16px !important;
        padding: 24px 18px !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* Inline-styled footer on inner pages: stack and centre */
    footer[style] > div[style*="display:flex"] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 26px !important;
    }
    footer[style] > div[style*="display:flex"] > div {
        flex: none !important;
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    footer[style] img { padding-left: 0 !important; margin: 0 auto; }
    footer[style] .social-icons { padding-left: 0; }

    /* Theme footer (home page) */
    .footer-area .footer-items { text-align: center; }
    .footer-area .social-icons { justify-content: center; }

    /* Contact modal on the home page */
    #tg-modal .tg-panel { width: 100% !important; }
}

/* ---------- Small phones (<= 400px) ---------- */
@media (max-width: 400px) {
    .welcome-intro h1 { font-size: 26px; }
    .section-heading > h2 { font-size: 26px; }
    .breadcrumb-content > h2 { font-size: 24px; }
    header .navbar-brand img { width: 70px !important; }
    header .navbar-expand .navbar-nav.action .btn { font-size: 12px; padding: 5px 10px; }
}