/* ==========================================================================
   Kishoreganj University — shared page header  (<x-page-hero>)

   Lifted from .kiu-about-hero in pages/about.css so every page that adopts it
   matches /about exactly. Self-contained: it declares its own tokens rather
   than relying on the page stylesheet loaded beside it, because these heroes
   sit on pages with several different palettes.

   main.css sets `html { font-size: 10px }`, so 1rem = 10px sitewide — every
   size here is explicit px. Do not reintroduce rem.
   ========================================================================== */

.kiu-page-hero {
    /* home.css and about.css colour their headings from this token so dark
       sections can flip them without a specificity fight — their rule is
       `.kiu-<page> h1 { color: var(--kiu-heading, var(--kiu-ink)) }`. Setting
       the token here is what makes the hero title white on a page whose
       palette stylesheet loads after this one. */
    --kiu-heading: var(--kiu-white);

    --kiu-hero-navy-darker: var(--kiu-navy-darker);
    --kiu-hero-navy-deep: var(--kiu-navy-deep);
    --kiu-hero-navy: var(--kiu-navy);
    --kiu-hero-accent: var(--kiu-accent);
    --kiu-hero-accent-soft: var(--kiu-accent-soft);

    /* Top clearance for the fixed navbar.

       #kiu-navbar is `position: fixed`, so it is out of flow and the <header>
       wrapping it has zero height — page content starts at y=0, underneath it.
       The badge logo hangs below the mainbar, so clearing the bar alone is not
       enough. The badge ends ~149px down on wide screens; 190px leaves ~40px
       between it and the breadcrumb (168px left under 20px, which read as
       cramped). The narrower steps below track the badge's smaller sizes.
       Below 700px the topbar is display:none and the badge collapses to a bare
       crest, so the requirement drops to the 76px mainbar plus breathing room. */
    --kiu-hero-clear: 190px;

    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
    padding-block: var(--kiu-hero-clear) 84px;
    overflow: hidden;

    /* New stacking context, so the z-index:-1/-2 layers below stay behind the
       content but never fall behind the page background itself. */
    isolation: isolate;

    font-family: var(--rs-ff-body, "Inter", sans-serif);
    background: var(--kiu-hero-navy-darker);
}

.kiu-page-hero *,
.kiu-page-hero *::before,
.kiu-page-hero *::after {
    box-sizing: border-box;
}

.kiu-page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* Slight overscale so the edges of the photograph never show through when
       a browser rounds the scrim's dimensions. */
    transform: scale(var(--kiu-scale-hover));
}

/* Angled rather than flat: densest behind the text on the left, clearing
   toward the right so the photograph still reads as a photograph. */
.kiu-page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(13, 31, 60, .93) 0%,
        rgba(18, 41, 77, .84) 48%,
        rgba(27, 58, 107, .62) 100%
    );
}

.kiu-page-hero__content {
    max-width: 720px;
}

/* main.css sets `p { margin-bottom: 30px; line-height: 28px }` and colours
   headings from its own selectors; both are neutralised here so the hero's
   own type scale holds. */
.kiu-page-hero p {
    margin: 0;
}

/* Two selectors, both needed. `.kiu-page-hero h1` is (0,1,1) — exactly the
   same weight as `.kiu-home h1` / `.kiu-about h1` — so on a page that loads
   its palette stylesheet after this file, source order decides and the title
   came out navy on navy. The second selector is (0,2,0) and settles it for
   any page stylesheet, including ones that hardcode a colour rather than
   using the --kiu-heading token above. */
.kiu-page-hero h1,
.kiu-page-hero .kiu-page-hero__title {
    margin: 0;
    color: var(--kiu-white);
    font-family: var(--rs-ff-body, "Inter", sans-serif);
    letter-spacing: -.02em;
}

.kiu-page-hero a {
    text-decoration: none;
}

/* Zero-specificity so it resets Bootstrap's link colour without outranking
   the crumb rules below. */
:where(.kiu-page-hero a) {
    color: inherit;
}

/* ---------- breadcrumb ---------- */

.kiu-page-hero__crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 0 20px;
    padding: 0;

    /* A bare <ol> numbers itself — "1. Home 2. Departments" — and no reset for
       it exists anywhere in this codebase. Same artefact as the stray
       "3. Registrar Office" on the office pages. */
    list-style: none;

    /* One line at every width: a long trail scrolls sideways rather than
       wrapping into a ragged second row. */
    overflow-x: auto;
    scrollbar-width: none;
}

.kiu-page-hero__crumbs ol::-webkit-scrollbar {
    display: none;
}

.kiu-page-hero__crumbs li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: rgba(255, 255, 255, .72);
}

/* Chevron from two borders rather than a "/" glyph: a slash sits on the text
   baseline and reads heavy, this sits on the optical centre. */
.kiu-page-hero__crumbs li + li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0 12px;
    border-top: 1.5px solid rgba(255, 255, 255, .38);
    border-right: 1.5px solid rgba(255, 255, 255, .38);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.kiu-page-hero__crumbs a {
    color: rgba(255, 255, 255, .72);
    transition: color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-page-hero__crumbs a:hover {
    color: var(--kiu-hero-accent-soft);
}

.kiu-page-hero__crumbs [aria-current="page"] {
    color: var(--kiu-hero-accent);
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- type ---------- */

.kiu-page-hero .kiu-page-hero__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kiu-hero-accent);
}

.kiu-page-hero__title {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1.1;
}

/* Bengali glyphs carry marks above Latin cap height and clip in a tight line
   box, so this needs more leading than the Latin title. */
.kiu-page-hero .kiu-page-hero__title-bn {
    margin-top: 10px;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.kiu-page-hero .kiu-page-hero__lead {
    max-width: 60ch;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}

/* ---------- responsive ---------- */

@media (max-width: 1340px) {
    .kiu-page-hero {
        --kiu-hero-clear: 178px;
    }
}

@media (max-width: 1140px) {
    .kiu-page-hero {
        --kiu-hero-clear: 172px;
        min-height: 380px;
    }
}

@media (max-width: 700px) {
    .kiu-page-hero {
        /* Topbar is display:none here and the badge collapses to a bare crest,
           so only the 76px mainbar has to be cleared. */
        --kiu-hero-clear: 116px;
        min-height: 300px;
        padding-bottom: 52px;
    }

    /* Must match the base rule's (0,2,0) or it would lose to it and the
       mobile size would never apply. */
    .kiu-page-hero .kiu-page-hero__lead {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .kiu-page-hero__crumbs li + li::before {
        margin: 0 9px;
    }

    .kiu-page-hero__crumbs [aria-current="page"] {
        max-width: 22ch;
    }
}