/* ==========================================================================
   Kishoreganj University — Single-profile photo header  (<x-person-hero>)

   The short counterpart to the departmental hero in dept-home.css. Same
   visual language, roughly two thirds the height: a profile's substance is
   the card and tabs underneath, so the banner introduces the person and gets
   out of the way.

   Self-contained on purpose — it declares its own tokens rather than
   inheriting them from a page root, because it is used from three different
   pages whose roots are .kiu-profile-page and .kiu-admin-page. Scoping the
   tokens to any one of those is exactly the bug that left the departmental
   Academics heroes unstyled.

   main.css sets `html { font-size: 10px }`, so every size here is px.
   ========================================================================== */

.kiu-person-hero {
    --kiu-hero-navy: var(--kiu-navy-darker);
    --kiu-hero-accent: var(--kiu-accent-soft);

    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    overflow: hidden;
    background: var(--kiu-hero-navy);

    /* #kiu-navbar is `position: fixed` and out of flow, so the page starts
       underneath it. The hero carries the clearance for the bar and for the
       hanging badge logo itself, so an adopting page needs no padding of its
       own. Same clearance as .kiu-page-hero: 168px left under 20px below
       the badge, which read as cramped; 190px leaves ~40px. */
    padding-top: 190px;
    padding-bottom: 40px;
}

.kiu-person-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}

/* Two stops rather than a flat wash: the photograph stays legible at the top
   while the text band at the bottom gets enough density for white type to
   hold contrast over any frame. */
.kiu-person-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(13, 31, 60, .58) 0%,
            rgba(13, 31, 60, .72) 55%,
            rgba(13, 31, 60, .92) 100%
        );
}

.kiu-person-hero .container {
    position: relative;
    z-index: 1;
}

.kiu-person-hero__content {
    max-width: 900px;
}

/* Breadcrumbs ------------------------------------------------------------ */

.kiu-person-hero__crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.kiu-person-hero__crumbs li {
    display: flex;
    align-items: center;
}

.kiu-person-hero__crumbs li:not(:last-child)::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 1.5px solid rgba(255, 255, 255, .45);
    border-right: 1.5px solid rgba(255, 255, 255, .45);
    transform: rotate(45deg);
}

.kiu-person-hero__crumbs a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-person-hero__crumbs a:hover,
.kiu-person-hero__crumbs a:focus-visible {
    color: var(--kiu-hero-accent);
}

.kiu-person-hero__crumbs [aria-current="page"] {
    color: var(--kiu-white);
    font-weight: 600;
}

/* Title block ------------------------------------------------------------ */

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

.kiu-person-hero__kicker {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.kiu-person-hero__title {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;

    /* Set as a token as well as a colour: several host pages carry rules like
       `.kiu-home h1` at (0,1,1), which outrank this single-class selector and
       would otherwise repaint the title in dark ink. */
    --kiu-heading: var(--kiu-white);
    color: var(--kiu-white);
}

/* 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-person-hero__title-bn {
    margin: 8px 0 0;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 600;
    line-height: 1.7;
    color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   Narrow screens. Below 701px the navbar's topbar is display:none and the
   hanging badge collapses to a bare crest with no overhang, so the clearance
   drops with it — same thresholds as .kiu-dept-hero.
   -------------------------------------------------------------------------- */

@media (max-width: 1340px) {
    .kiu-person-hero {
        padding-top: 178px;
    }
}

@media (max-width: 1140px) {
    .kiu-person-hero {
        padding-top: 172px;
    }
}

@media (max-width: 991px) {
    .kiu-person-hero {
        min-height: 260px;
    }
}

@media (max-width: 700px) {
    .kiu-person-hero {
        min-height: 220px;
        padding-top: 116px;
        padding-bottom: 30px;
    }

    .kiu-person-hero__crumbs ol {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .kiu-person-hero__eyebrow {
        font-size: 11px;
        letter-spacing: .1em;
    }
}