/*
 * Shared responsive safeguards
 * Loaded by includes/header.php so every public page receives the same
 * navigation and small-screen behaviour.  This file intentionally contains
 * presentation rules only: it does not change routes, forms, or PHP logic.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; }

.mobile-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.mobile-toggle:focus-visible,
.main-nav a:focus-visible,
.mega-tab:focus-visible {
    outline: 3px solid rgba(6, 182, 212, .75);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .main-header { height: 64px; }
    .header-container { width: min(100% - 24px, 1280px); gap: 10px; position: relative; }
    .site-logo { max-height: 46px; width: auto; }
    .mobile-actions { margin-left: auto; gap: 6px; }
    .mobile-toggle { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

    .main-nav {
        box-sizing: border-box;
        max-height: calc(100dvh - 76px);
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav > a,
    .main-nav > li > a { min-height: 44px; display: flex; align-items: center; }

    .mega-parent > .mega-menu,
    .simple-dropdown > .dropdown-menu {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mega-content-grid { grid-template-columns: 1fr; }
    .mega-left { max-height: 42dvh; overflow: auto; }
}

@media (max-width: 480px) {
    .header-container { width: min(100% - 16px, 1280px); }
    .site-logo { max-width: 138px; }
    .mega-menu { border-radius: 12px; }
    .mega-right { padding: 12px; }
    .program-card { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ========================================================================
   PHOENIX — PROJECT-WIDE FLUID RESPONSIVE LAYOUT
   Single shared responsive layer for all public PHP pages.
   This section changes sizing/wrapping only; it does not alter routes,
   navigation content, forms, colors, data, or page-specific functionality.
   ======================================================================== */

html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* Prevent long labels, cards and tables from forcing the viewport wider. */
main, section, article, header, footer, nav, .container,
.hero-in, .hero-c, .hero-visual,
.ab-hero, .ab-hero-in, .ai-hero, .ai-wrap,
.careers-hero, .exp-hero, .cx-hero, .cmp-hero, .ep-hero,
.pp-hero, .article-wrap, .article-related-grid,
.ef-row, .ef-two-col, .fee-wrap, .fee-table-wrap,
.mega-menu, .mega-right, .mega-content-grid {
    min-width: 0;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p, a, span, label, td, th, li {
    overflow-wrap: anywhere;
}

input, select, textarea, button { max-width: 100%; }

/* Fluid media. */

/* Keep common content containers fluid at every intermediate browser width. */
.container { width: min(1200px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }

/* ============================= DESKTOP ================================ */
@media (min-width: 1200px) {
    .hero-in { width: min(1380px, calc(100% - 48px)); margin-inline: auto; }
    .hero { min-height: calc(100dvh - 74px); }
    .hero-c, .hero-visual { min-width: 0; }

    .pp-hero, .cx-hero { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
    .article-wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
}

/* ========================== LAPTOP / SMALL DESKTOP ==================== */
@media (max-width: 1199px) and (min-width: 992px) {
    .header-container { width: min(calc(100% - 28px), 1160px); }

    .main-nav > a, .main-nav > li > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 13px;
    }

    .hero-in {
        width: min(1120px, calc(100% - 36px));
        gap: 20px;
    }

    .hero-c { max-width: 54%; }
    .hero-visual { max-width: 48%; min-width: 0; }
    .hero-c h1 { font-size: clamp(38px, 4.1vw, 52px); }

    .pp-hero, .cx-hero, .ab-hero-in, .ep-hero-in, .ai-wrap,
    .careers-hero, .exp-hero, .cmp-hero {
        max-width: calc(100% - 36px);
        margin-inline: auto;
    }

    .article-wrap { max-width: calc(100% - 36px); margin-inline: auto; }

    .article-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ================================ TABLET ============================== */
@media (max-width: 991px) {
    .container { width: min(calc(100% - 28px), 760px); }

    .hero {
        min-height: auto !important;
        height: auto !important;
    }

    .hero-in {
        width: min(calc(100% - 28px), 760px) !important;
        margin-inline: auto;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 28px !important;
    }

    .hero-c { width: 100%; max-width: 720px; margin-inline: auto; }
    .hero-visual { width: 100%; max-width: 760px; margin-inline: auto; min-width: 0; }

    .hero-photo-img { width: min(100%, 460px); margin-inline: auto; }
    .hero-side-stats { min-width: 0; max-width: 230px; }

    /* Program/detail heroes: collapse before cards become cramped. */
    .pp-hero, .cx-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(calc(100% - 28px), 760px) !important;
        margin-inline: auto;
    }

    .pp-hero > *, .cx-hero > *, .ab-hero-in > *, .ep-hero-in > *,
    .ai-wrap > *, .careers-hero > *, .exp-hero > *, .cmp-hero > * {
        min-width: 0;
        max-width: 100%;
    }

    .pp-hero-img-wrap, .pp-hero-img-wrap img { max-width: 100%; }

    /* Common two/three-column content grids. */
    .article-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mega-content-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .mega-left { max-height: 42dvh; overflow: auto; }

    .ef-two-col { grid-template-columns: minmax(0, 1fr) !important; }
    .ef-row { grid-template-columns: minmax(0, 1fr) !important; }

    .fee-table-wrap, .fee-wrap { overflow-x: auto; max-width: 100%; }
    .fee-table { min-width: 640px; }

    .counsellor-card-stack, .counsellor-card,
    .benefit-card, .who-card, .val-card, .connect-card,
    .tc, .trending-card, .wcard { min-width: 0; max-width: 100%; }

    .ai-box, .ai-section-wrap { width: min(calc(100% - 28px), 760px); margin-inline: auto; }
}

/* ========================== LARGE PHONE / SMALL TABLET =============== */
@media (max-width: 767px) {
    .container { width: calc(100% - 24px); }

    .main-header { height: 64px; }
    .header-container { width: calc(100% - 20px); }
    .site-logo { max-width: min(165px, 45vw); height: auto; }

    .hero-in { width: calc(100% - 24px) !important; gap: 22px !important; }
    .hero-c { text-align: center; }
    .hero-c h1 { font-size: clamp(31px, 7.5vw, 42px) !important; line-height: 1.12 !important; }
    .hero-c > p { font-size: 15px !important; line-height: 1.55; margin-inline: auto; }

    .hero-visual { flex-direction: column !important; align-items: center !important; gap: 18px !important; }
    .hero-photo-wrap { width: 100%; justify-content: center; }
    .hero-photo-img { max-width: min(410px, 92vw); }

    .hero-side-stats {
        width: 100%;
        max-width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hbts { width: 100%; flex-direction: column !important; }
    .hbts > * { width: 100% !important; max-width: 100%; }

    .hero-inline-search, .hero-inline-search-inner { width: 100% !important; max-width: 100% !important; }

    .pp-hero, .cx-hero, .ab-hero, .ai-hero, .careers-hero, .exp-hero, .cmp-hero, .ep-hero {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto;
    }

    .pp-hero h1, .ab-hero h1, .ai-hero h1, .careers-hero h1,
    .exp-hero h1, .cx-hero h1, .cmp-hero h1, .ep-hero h1 {
        font-size: clamp(28px, 8.5vw, 38px) !important;
        line-height: 1.12 !important;
    }

    .article-wrap { width: calc(100% - 24px); }
    .article-related-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .article-body { font-size: 15px; }
    .article-body img { display: block; width: 100%; height: auto; }

    .ef-row, .ef-two-col { grid-template-columns: minmax(0, 1fr) !important; }
    .ef-row > *, .ef-two-col > * { width: 100%; min-width: 0; }

    .fee-table { min-width: 620px; }
    .fee-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .snav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .snav::-webkit-scrollbar { display: none; }
    .snav-tab { flex: 0 0 auto; }

    .category-tabs, .bh-tabs { overflow-x: auto; flex-wrap: nowrap !important; white-space: nowrap; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar, .bh-tabs::-webkit-scrollbar { display: none; }
    .cat-btn, .bh-tab { flex: 0 0 auto; }

    .b24-overlay { padding: 12px !important; }
    .b24-overlay > div { width: min(100%, 680px) !important; max-height: 92dvh; overflow: auto; }

    .modal, .search-modal, .gate-overlay, .brochure-overlay { padding: 12px; }
    .modal > *, .search-modal > *, .gate-overlay > *, .brochure-modal { max-width: 100%; }

    .footer-grid, .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ================================= PHONE ============================== */
@media (max-width: 575px) {
    .container { width: calc(100% - 20px); }
    .header-container { width: calc(100% - 16px); }
    .site-logo { max-width: min(150px, 44vw); }

    .hero-in { width: calc(100% - 20px) !important; }
    .hero-c h1 { font-size: clamp(28px, 9vw, 36px) !important; }
    .hero-c .hero-pill, .hero-c .htag { max-width: 100%; white-space: normal; }

    .hero-side-stats { grid-template-columns: minmax(0, 1fr) !important; }

    .pp-hero, .cx-hero, .ab-hero, .ai-hero, .careers-hero, .exp-hero, .cmp-hero, .ep-hero,
    .article-wrap { width: calc(100% - 20px) !important; }

    .pp-hero, .cx-hero { padding-left: 0 !important; padding-right: 0 !important; }
    .pp-hero h1, .ab-hero h1, .ai-hero h1, .careers-hero h1,
    .exp-hero h1, .cx-hero h1, .cmp-hero h1, .ep-hero h1 { font-size: clamp(26px, 9vw, 34px) !important; }

    .pp-hero-img-wrap img { max-height: 320px !important; object-fit: contain; }

    .footer-grid, .footer-cols { grid-template-columns: minmax(0, 1fr) !important; }

    .counsellor-row-stack { grid-template-columns: 48px minmax(0, 1fr) !important; gap: 10px !important; }
    .btn-talk-stack { grid-column: 1 / -1 !important; width: 100% !important; }

    .article-related-card { min-width: 0; }
    .article-title { font-size: clamp(28px, 8.5vw, 36px) !important; }

    .search-modal input, .gsm-input, .header-search-input { min-width: 0 !important; width: 100% !important; }
}

/* ============================= SMALL PHONE =========================== */
@media (max-width: 380px) {
    .site-logo { max-width: 136px; }
    .hero-c h1 { font-size: 28px !important; }
    .hero-c > p { font-size: 14px !important; }
    .hero-side-stats { gap: 8px; }
    .hsc2-num { font-size: 21px !important; }
    .hsc2-label { font-size: 11px !important; }
}

/* ====================== SHORT LAPTOP / HEIGHT ========================= */
@media (min-width: 992px) and (max-height: 820px) {
    .hero { min-height: auto !important; }
    .hero-in { padding-top: 18px !important; padding-bottom: 18px !important; }
}

/* ======================= ACCESSIBILITY / MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}