/* One page-title banner for every inner page on phones (≤ 768px), in the style of exams.sknau.ac.in:
   compact, left-aligned, solid white title that scales with the screen, short accent line, soft glow.
   Scoped to html.title-v2 (set in header.php). Desktop and tablet keep their existing banners. */
@media (max-width: 768px) {
    /* bring the banner up under the site header */
    .title-v2 .page-container { padding-top: 1rem; }
    .title-v2 .page-content { padding-top: 1rem; }

    /* the banner: .page-title (most pages), .page-header-box (downloads, gallery, vc…), .chart-header (org structure),
       the bare <h1> that opens admissions / courses / about, h1.page-title inside a .page-header row
       (news, circulars, tenders, events…), and the h2 that opens MoU / RTI */
    .title-v2 :is(.page-title, .page-header-box, .chart-header),
    .title-v2 :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        position: relative; overflow: hidden; text-align: left !important;
        margin: 0 0 1.25rem !important; padding: 26px 18px 18px !important; border-radius: 14px !important;
        background: radial-gradient(420px 180px at 100% 0, rgba(230, 126, 34, .30), transparent 62%),
                    linear-gradient(135deg, var(--primary-color, #003366), #004a99) !important;
        box-shadow: 0 1px 2px rgba(0, 30, 60, .06), 0 8px 22px rgba(0, 51, 102, .14) !important;
        color: #fff;
    }
    /* short gold accent line above the title */
    .title-v2 :is(.page-title, .page-header-box, .chart-header)::before,
    .title-v2 :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child)::before {
        content: ""; position: absolute; left: 18px; top: 14px; width: 34px; height: 3px; border-radius: 3px;
        background: linear-gradient(90deg, var(--secondary-color, #E67E22), #ffd966);
    }
    .title-v2 :is(.page-title, .page-header-box, .chart-header) h1,
    .title-v2 :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        font-family: 'Roboto', sans-serif !important; font-weight: 700; letter-spacing: -0.01em;
        font-size: clamp(1.3rem, 5.6vw, 1.65rem) !important; line-height: 1.25 !important; margin: 0 !important;
        color: #fff !important; -webkit-text-fill-color: #fff; background: none; text-shadow: none !important;
        text-align: left !important; text-wrap: balance;
    }
    .title-v2 :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        margin: 1rem 0 1.25rem !important; align-self: stretch; width: 100%; box-sizing: border-box; display: block;
        background: radial-gradient(420px 180px at 100% 0, rgba(230, 126, 34, .30), transparent 62%),
                    linear-gradient(135deg, var(--primary-color, #003366), #004a99) !important;
    }
    /* the "bare" titles above: drop their old underline decorations */
    .title-v2 :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child)::after { display: none !important; }
    .title-v2 .page-header:has(> h1.page-title) { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.25rem; }
    .title-v2 .page-header > h1.page-title:not(#_) { margin: 0 !important; }   /* :not(#_) outranks the id-weighted group above */
    .title-v2 :is(.page-title, .page-header-box, .chart-header) h1 i { font-size: .85em; margin-right: 6px; opacity: .9; }
    .title-v2 :is(.page-title, .page-header-box, .chart-header) p {
        margin: 6px 0 0 !important; max-width: none; text-align: left !important;
        font-size: .9rem !important; line-height: 1.45; color: #d5e1f0 !important;
    }

    /* titles that sit inside their own content cards: keep the card, just size the heading to the screen */
    .title-v2 :is(.dynamic-header, .docs-header, .officer-header-card) h1,
    .title-v2 :is(.dir-title, .detail-title, .faculty-name, .form-card > .section-title) {
        font-size: clamp(1.3rem, 5.6vw, 1.65rem) !important; line-height: 1.25 !important; text-wrap: balance;
    }
}

/* ── Desktop/tablet version of the same banner (≥ 769px, no emblem) — live since 2026-10-12: html.title-desk set in header.php ── */
@media (min-width: 769px) {
    .title-desk :is(.page-title, .page-header-box, .chart-header),
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        position: relative; overflow: hidden; isolation: isolate; text-align: left !important;
        margin: 0 0 2rem !important; padding: 40px 44px 34px !important; border-radius: 16px !important;
        background: radial-gradient(700px 260px at 100% 0, rgba(230, 126, 34, .28), transparent 60%),
                    linear-gradient(135deg, var(--primary-color, #003366), #004a99) !important;
        box-shadow: 0 1px 2px rgba(0, 30, 60, .06), 0 14px 36px rgba(0, 51, 102, .16) !important;
        color: #fff;
    }
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        margin-top: 1.5rem !important; width: 100%; box-sizing: border-box; display: block;
    }
    .title-desk .page-header > h1.page-title:not(#_) { margin: 0 !important; }
    .title-desk .page-header:has(> h1.page-title) { border-bottom: 0; padding-bottom: 0; }
    /* gold accent line */
    .title-desk :is(.page-title, .page-header-box, .chart-header)::before,
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child)::before {
        content: ""; position: absolute; left: 44px; top: 24px; width: 46px; height: 4px; border-radius: 4px;
        background: linear-gradient(90deg, var(--secondary-color, #E67E22), #ffd966);
    }
    /* old underline decorations on the bare titles (MoU) stay hidden inside the banner */
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child)::after { display: none !important; }
    .title-desk :is(.page-title, .page-header-box, .chart-header) h1,
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        font-family: 'Roboto', sans-serif !important; font-weight: 700; letter-spacing: -0.015em;
        font-size: clamp(1.9rem, 2.5vw, 2.4rem) !important; line-height: 1.2 !important; margin: 0 !important;
        color: #fff !important; -webkit-text-fill-color: #fff; background: none;
        text-shadow: none !important; text-align: left !important; text-wrap: balance;
    }
    .title-desk :is(:is(#admissions-page, #courses, #about-us) > h1:first-child, h1.page-title, main > .container > h2:is(.section-title-custom, .section-title):first-child) {
        margin: 1.5rem 0 2rem !important;
        background: radial-gradient(700px 260px at 100% 0, rgba(230, 126, 34, .28), transparent 60%),
                    linear-gradient(135deg, var(--primary-color, #003366), #004a99) !important;
    }
    .title-desk :is(.page-title, .page-header-box, .chart-header) h1 i { font-size: .8em; margin-right: 10px; opacity: .9; }
    .title-desk :is(.page-title, .page-header-box, .chart-header) p {
        margin: 10px 0 0 !important; max-width: 760px; text-align: left !important;
        font-size: 1.05rem !important; line-height: 1.5; color: #d5e1f0 !important;
    }
}

/* ── Directory pages (Telephone Directory, Faculty Profiles): the whole .dir-header (title + search + buttons)
      becomes the banner, on phones and desktop (2026-10-12) ── */
.title-v2 .dir-header {
    position: relative; overflow: hidden; text-align: left;
    margin: 0 0 2rem; padding: 40px 44px 30px; border-radius: 16px;
    background: radial-gradient(700px 260px at 100% 0, rgba(230, 126, 34, .28), transparent 60%),
                linear-gradient(135deg, var(--primary-color, #003366), #004a99);
    box-shadow: 0 1px 2px rgba(0, 30, 60, .06), 0 14px 36px rgba(0, 51, 102, .16);
}
.title-v2 .dir-header::before {
    content: ""; position: absolute; left: 44px; top: 24px; width: 46px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--secondary-color, #E67E22), #ffd966);
}
.title-v2 .dir-header .dir-title {
    font-family: 'Roboto', sans-serif !important; font-weight: 700; letter-spacing: -0.015em;
    font-size: clamp(1.9rem, 2.5vw, 2.4rem) !important; line-height: 1.2 !important;
    color: #fff !important; margin: 0 0 18px; text-align: left;
}
.title-v2 .dir-header .search-container { max-width: 640px; margin: 0; }
.title-v2 .dir-header .search-input { border-color: transparent; box-shadow: 0 6px 18px rgba(0, 20, 50, .25); }
.title-v2 .dir-header .search-input:focus { border-color: #ffd966; box-shadow: 0 0 0 3px rgba(255, 217, 102, .35); }
.title-v2 .dir-header .toggle-controls { margin-top: 16px; justify-content: flex-start; flex-wrap: wrap; }
.title-v2 .dir-header .btn-toggle:not([href]) {
    background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .55) !important; color: #fff !important;
}
.title-v2 .dir-header .btn-toggle:not([href]):hover { background: rgba(255, 255, 255, .22) !important; }

@media (min-width: 769px) {
    /* title and search side by side would crowd; keep stacked but let the buttons sit to the right of the search */
    .title-v2 .dir-header { display: grid; grid-template-columns: minmax(0, 640px) auto; column-gap: 20px; align-items: center; }
    .title-v2 .dir-header .dir-title { grid-column: 1 / -1; }
    .title-v2 .dir-header .toggle-controls { margin-top: 0; justify-content: flex-end; }
}
@media (max-width: 768px) {
    .title-v2 .dir-header { margin: 0 0 1.25rem; padding: 26px 18px 18px; border-radius: 14px; }
    .title-v2 .dir-header::before { left: 18px; top: 14px; width: 34px; height: 3px; }
    .title-v2 .dir-header .dir-title { font-size: clamp(1.3rem, 5.6vw, 1.65rem) !important; line-height: 1.25 !important; margin-bottom: 12px; }
    .title-v2 .dir-header .search-input { padding-top: 12px; padding-bottom: 12px; }
    .title-v2 .dir-header .toggle-controls { margin-top: 12px; }
}

/* banners laid out as flex rows (Press Release puts a login button beside the title): keep the title on the left */
.title-v2 :is(.page-title, .page-header-box, .chart-header) { justify-content: flex-start !important; }
@media (max-width: 768px) {
    .title-v2 :is(.page-title, .page-header-box, .chart-header) { align-items: flex-start !important; }
}

/* ── Heading entrance (assets/motion/heading-motion.js). header.php adds .hm-hold to the banner as soon as it is parsed
      (removed after 1.2 s at the latest) until Motion takes over; .hm-banner lets Motion draw the gold line via --hm-line ── */
.hm-hold { opacity: 0 !important; }
.hm-banner::before { transform: scaleX(var(--hm-line, 1)); transform-origin: left center; }
.hm-word { display: inline-block; }