/* ==========================================================================
   Kishoreganj University — home page
   Navy + accent institutional palette, generous whitespace, quiet motion.
   ========================================================================== */

.kiu-home {

    /* Rhythm */
    --kiu-section-y: 104px;

    font-family: var(--rs-ff-body, "Inter", sans-serif);
    color: var(--kiu-body);
    background: var(--kiu-white);
}

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

/* Headings read their colour from a token so that dark sections can flip them
   to white by redefining --kiu-heading, rather than fighting this selector's
   specificity from a single-class rule. */
.kiu-home h1,
.kiu-home h2,
.kiu-home h3 {
    font-family: var(--rs-ff-body, "Inter", sans-serif);
    color: var(--kiu-heading, var(--kiu-ink));
    margin: 0;
    letter-spacing: -.02em;
}

.kiu-hero,
.kiu-vc,
.kiu-cta-band,
.kiu-notice-feature {
    --kiu-heading: var(--kiu-white);
}

.kiu-home p {
    margin: 0;
}

.kiu-home a {
    text-decoration: none;
}

/* Only here to cancel Bootstrap's blue link colour. Wrapped in :where() so it
   carries zero specificity — as a plain `.kiu-home a` rule (0,1,1) it outranked
   every single-class button rule (0,1,0) and dragged white button labels back
   to the grey body colour. */
:where(.kiu-home a) {
    color: inherit;
}

.kiu-section {
    padding-block: var(--kiu-section-y);
}

/* Removed from the page visually, kept in the accessibility tree. clip-path
   rather than display:none or visibility:hidden, both of which take the
   element out of that tree as well and would defeat the point. */
.kiu-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Shared elements
   -------------------------------------------------------------------------- */

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

.kiu-eyebrow--accent {
    color: var(--kiu-accent);
}

.kiu-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.kiu-section__title {
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
}

.kiu-section__lead {
    max-width: 56ch;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--kiu-body);
}

/* Buttons ---------------------------------------------------------------- */

.kiu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: var(--kiu-radius-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--kiu-dur) var(--kiu-ease-out), background-color var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out), box-shadow var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-btn i {
    font-size: 17px;
    transition: transform var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-btn:hover {
    transform: translateY(var(--kiu-lift));
}

.kiu-btn:hover i {
    transform: translateX(3px);
}

.kiu-btn--accent {
    background: var(--kiu-accent);
    color: #23201A;
    box-shadow: 0 10px 24px rgba(0, 163, 147, .32);
}

.kiu-btn--accent:hover {
    background: #D8B85C;
    color: #23201A;
}

.kiu-btn--ghost {
    background: rgba(10, 24, 48, .42);
    border-color: rgba(255, 255, 255, .65);
    color: var(--kiu-white);
    backdrop-filter: blur(6px);
}

.kiu-btn--ghost:hover {
    background: var(--kiu-white);
    color: var(--kiu-navy);
    border-color: var(--kiu-white);
}

.kiu-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: var(--kiu-white);
}

.kiu-btn--outline-light:hover {
    background: var(--kiu-white);
    border-color: var(--kiu-white);
    color: var(--kiu-navy);
}

/* Pill link -------------------------------------------------------------- */

.kiu-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    /* line-height: 1 so the label's box hugs its glyphs. Inherited from
       body it was 1.5, and the extra half-leading sits unevenly around the
       text, which made the label look high inside the pill even though the
       flex box was centred. */
    line-height: 1;
    padding: 13px 24px 12px;
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--kiu-navy);
    background: var(--kiu-white);
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-pill i {
    line-height: 1;
    transition: transform var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-pill:hover {
    background: var(--kiu-navy);
    border-color: var(--kiu-navy);
    color: var(--kiu-white);
}

.kiu-pill:hover i {
    transform: translateX(3px);
}

.kiu-tag {
    display: inline-block;
    vertical-align: top;
    padding: 6px 14px;
    border-radius: var(--kiu-radius-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kiu-white);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Fixed navbar height: mainbar is 76px at all widths, topbar adds 34–38px. */
.kiu-home {
    --kiu-navbar-height: 110px;
}

@media (min-width: 1141px) {
    .kiu-home {
        --kiu-navbar-height: 114px;
    }
}

@media (max-width: 700px) {
    .kiu-home {
        --kiu-navbar-height: 76px;
    }
}

/* The carousel starts at y=0 and runs up *behind* the fixed navbar; the
   clearance is spent as padding on the caption wrapper below, not as margin
   here.

   It used to be `margin-top: var(--kiu-navbar-height)` — a strip of bare page
   reserving the expanded navbar's height. Margins are transparent, so as soon
   as the navbar collapsed and the two bars translated up by the topbar's
   34-38px, the bottom of that strip was left uncovered and showed as a white
   band above the carousel. No threshold tuning in navbar.js could fix that;
   it is geometry. With the photograph filling the space instead, the band has
   nothing to appear in and the navbar can collapse and expand at any height. */
.kiu-hero.rs-banner-area {
    margin-top: 0;
    position: relative;
}

/* The navbar clearance that used to be padding on .rs-banner-wrapper went with
   the caption — with nothing overlaid there is nothing left to keep clear of
   the fixed header, and the photograph is meant to run behind it. The white
   band this section once showed is still prevented by `margin-top: 0` above
   plus the heights below: the slide starts at y=0 and covers the strip the
   navbar occupies in both its expanded and collapsed states.

   Never 100vh: the hero is a percentage of the screen *including* the navbar
   that sits over it, so the section below is visible on load instead of the
   photograph filling the whole first screen.

   The height is a token, not a literal, so the six selectors below stay one
   list instead of being restated at every breakpoint:

     >= 1300px   85%
     800-1299px  70%
     <  800px    50%

   The cap scales with the percentage. At 70vh/720px it only bit on viewports
   taller than ~1029px; holding that same crossover at 85% means 875px.
   Leaving it at 720px would clamp a 1440x900 screen straight back to 720px
   and the 85% would never be visible at all. */

.kiu-hero {
    --kiu-hero-h: 70vh;
    --kiu-hero-max: 720px;
}

@media (min-width: 1300px) {
    .kiu-hero {
        --kiu-hero-h: 85vh;
        --kiu-hero-max: 875px;
    }
}

@media (max-width: 799px) {
    .kiu-hero {
        /* svh, so the browser chrome collapsing on scroll cannot resize the
           hero mid-swipe. */
        --kiu-hero-h: 50svh;
        --kiu-hero-max: none;
    }
}

.kiu-hero.rs-banner-area,
.kiu-hero .rs-banner-slider-wrapper,
.kiu-hero .swiper,
.kiu-hero .swiper-wrapper,
.kiu-hero .swiper-slide,
.kiu-hero .rs-banner-item-wrapper {
    height: var(--kiu-hero-h);
    min-height: var(--kiu-hero-h);
    max-height: var(--kiu-hero-max);
}

.kiu-hero .rs-banner-item-wrapper {
    position: relative;
    overflow: hidden;
}

/* The navbar clearance the hero no longer takes as margin. Everything else
   about the caption is unchanged — it still centres in whatever space is
   left, so the wording sits where it always did. box-sizing is border-box
   sitewide (main.css), so this eats into the 100% height rather than adding
   to it. */
.kiu-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Slow drift keeps the stills from feeling static. */
    animation: kiu-hero-drift 18s ease-out forwards;
}

/* Literal values on purpose. These are the two ends of an 18s drift, not a
   hover state — they must differ from each other, so they cannot both read
   from the shared hover-scale token. The 1.13 that would be far too much for
   a hover is right here, spread over eighteen seconds. */
@keyframes kiu-hero-drift {
    from { transform: scale(1.04); }
    to   { transform: scale(1.13); }
}

/* A slide with per-device crops is served as a <picture> rather than a
   background: only <source media> can hand a phone the phone-shaped file, and
   a background-image would have to ship every size to everyone. The element
   still fills the frame the same way — `cover` on the <img> replaces
   `background-size: cover` — so nothing else about the hero changes.

   See App\Support\HeroDevices and the admin crop editor. Slides without crops
   keep the background version above, which is why both live here. */
.kiu-hero__media--cropped {
    display: block;
    background: none;
    animation: none;
}

.kiu-hero__media--cropped img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* Its own drift, starting at 1 rather than 1.04. The admin chose that
       rectangle in the crop editor and the first thing on screen should be
       exactly it — starting mid-zoom would quietly trim 4% off every edge of
       a frame someone had just finished composing. The travel is shorter for
       the same reason: 1.13 would eat an eighth of the crop. */
    animation: kiu-hero-drift-cropped 18s ease-out forwards;
}

@keyframes kiu-hero-drift-cropped {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Arrows — the research strip's circular buttons, sized up and pulled to the
   edges of the photograph. `.swiper-button-prev/next` are the classes the
   theme's slider script looks for inside `.rs-swiper`; swiper.min.css gives
   them a font-icon glyph through ::after, which the inline SVG replaces. */
.kiu-hero__nav.swiper-button-prev,
.kiu-hero__nav.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;

    width: 52px;
    height: 52px;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(9, 32, 58, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--kiu-white);
    cursor: pointer;

    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out), opacity var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-hero__nav.swiper-button-prev::after,
.kiu-hero__nav.swiper-button-next::after {
    content: none;
}

.kiu-hero__nav.swiper-button-prev { left: 26px; }
.kiu-hero__nav.swiper-button-next { right: 26px; }

.kiu-hero__nav:hover {
    background: var(--kiu-white);
    border-color: var(--kiu-white);
    color: var(--kiu-navy);
}

.kiu-hero__nav:focus-visible {
    outline: 3px solid var(--kiu-white);
    outline-offset: 3px;
}

/* Swiper adds this when a non-looping slider runs out of slides. */
.kiu-hero__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.kiu-hero__pagination.swiper-pagination {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.kiu-hero__pagination .swiper-pagination-bullet {
    width: 28px;
    height: 3px;
    margin: 0 !important;
    border-radius: 2px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    transition: background-color var(--kiu-dur-slow) var(--kiu-ease-out), width var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-hero__pagination .swiper-pagination-bullet-active {
    width: 52px;
    background: var(--kiu-accent);
}

/* --------------------------------------------------------------------------
   Notice ticker
   -------------------------------------------------------------------------- */

.kiu-ticker {
    background: var(--kiu-navy-deep);
    color: var(--kiu-white);
}

.kiu-ticker__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 62px;
}

.kiu-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kiu-accent);
}

.kiu-ticker__label i {
    font-size: 17px;
}

.kiu-ticker__viewport {
    flex: 1;
    overflow: hidden;
    /* Fade the text out at both ends of the strip. */
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.kiu-ticker__track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: kiu-ticker-scroll 46s linear infinite;
}

.kiu-ticker__inner:hover .kiu-ticker__track {
    animation-play-state: paused;
}

@keyframes kiu-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.kiu-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .88);
    transition: color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-ticker__item:hover {
    color: var(--kiu-white);
}

.kiu-ticker__date {
    font-size: 12px;
    font-weight: 600;
    color: var(--kiu-accent-soft);
}

.kiu-ticker__all {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--kiu-white);
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 2px;
    transition: border-color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-ticker__all:hover {
    border-color: var(--kiu-accent);
}

/* --------------------------------------------------------------------------
   Quick links
   -------------------------------------------------------------------------- */

.kiu-quicklinks {
    background: var(--kiu-surface);
}

.kiu-quicklinks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.kiu-quicklink {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    box-shadow: 0 1px 2px rgba(20, 33, 61, .03);
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out), border-color var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-quicklink:hover {
    transform: translateY(var(--kiu-lift-lg));
    box-shadow: var(--kiu-shadow-hover);
    border-color: transparent;
}

.kiu-quicklink__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: var(--kiu-radius);
    background: var(--kiu-surface-alt);
    color: var(--kiu-navy);
    font-size: 25px;
    transition: background-color var(--kiu-dur-slow) var(--kiu-ease-out), color var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-quicklink:hover .kiu-quicklink__icon {
    background: var(--kiu-navy);
    color: var(--kiu-accent);
}

.kiu-quicklink__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kiu-quicklink__label {
    font-size: 17px;
    font-weight: 600;
    color: var(--kiu-ink);
}

.kiu-quicklink__desc {
    font-size: 13.5px;
    color: var(--kiu-muted);
}

.kiu-quicklink__arrow {
    margin-left: auto;
    font-size: 19px;
    color: var(--kiu-border);
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), color var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-quicklink:hover .kiu-quicklink__arrow {
    color: var(--kiu-navy);
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.kiu-stats {
    padding-block: 72px;
    background: var(--kiu-white);
    border-bottom: 1px solid var(--kiu-border);
}

.kiu-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.kiu-stat {
    text-align: center;
    padding-inline: 16px;
    border-right: 1px solid var(--kiu-border);
}

.kiu-stat:last-child {
    border-right: 0;
}

.kiu-stat__value {
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--kiu-navy);
    font-variant-numeric: tabular-nums;
}

.kiu-stat__label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--kiu-muted);
}

/* --------------------------------------------------------------------------
   Academics
   -------------------------------------------------------------------------- */

.kiu-academics__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.kiu-faculty-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius-lg);
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out), border-color var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-faculty-card:hover {
    transform: translateY(var(--kiu-lift-lg));
    box-shadow: var(--kiu-shadow-hover);
    border-color: transparent;
}

/* Grows to absorb the uneven title heights so the department lists below
   line up across all four cards. */
.kiu-faculty-card__top {
    flex: 1;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--kiu-border);
}

.kiu-faculty-card__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    border-radius: var(--kiu-radius);
    background: var(--kiu-navy);
    color: var(--kiu-accent);
    font-size: 24px;
}

.kiu-faculty-card__title {
    font-size: 19px;
    font-weight: 650;
    line-height: 1.3;
}

.kiu-faculty-card__subtitle {
    margin-top: 6px;
    font-size: 16px;
    color: var(--kiu-muted);
}

.kiu-faculty-card__depts {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiu-faculty-card__depts a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--kiu-radius-sm);
    background: var(--kiu-surface);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--kiu-ink);
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-faculty-card__depts a i {
    font-size: 15px;
    color: var(--kiu-muted);
    transition: transform var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-faculty-card__depts a:hover {
    background: var(--kiu-navy);
    color: var(--kiu-white);
}

.kiu-faculty-card__depts a:hover i {
    color: var(--kiu-accent);
    transform: translateX(3px);
}

.kiu-faculty-card__empty {
    margin-top: 18px;
    font-size: 14px;
    color: var(--kiu-muted);
}

/* --------------------------------------------------------------------------
   Vice Chancellor
   -------------------------------------------------------------------------- */

.kiu-vc {
    padding-block: var(--kiu-section-y);
    background:
        radial-gradient(1100px 480px at 12% 0%, rgba(0, 163, 147, .16), transparent 62%),
        linear-gradient(135deg, var(--kiu-navy-darker) 0%, var(--kiu-navy) 58%, var(--kiu-navy-deep) 100%);
}

.kiu-vc__inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
    align-items: center;
}

.kiu-vc__portrait {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, .14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.kiu-vc__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The crest stands in when no portrait is available. */
.kiu-vc__portrait.is-crest {
    background: var(--kiu-white);
}

.kiu-vc__portrait.is-crest img {
    object-fit: contain;
    padding: 52px;
}

.kiu-vc__name {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    color: var(--kiu-white);
}

.kiu-vc__role {
    margin-top: 8px;
    font-size: 15px;
    color: var(--kiu-accent-soft);
}

.kiu-vc__quote {
    position: relative;
    margin: 28px 0 34px;
    padding-left: 26px;
    border-left: 2px solid rgba(0, 163, 147, .6);
    font-size: 16.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.kiu-notices {
    background: var(--kiu-surface);
}

.kiu-notices__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 28px;
    /* `start` used to leave the three rows stacked at their natural height,
       ending well short of the feature card beside them and leaving the
       column visibly ragged. Stretching makes the grid row as tall as the
       feature card and lets the rows divide that height between them. */
    align-items: stretch;
}

.kiu-notice-feature {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    border-radius: var(--kiu-radius-lg);
    overflow: hidden;
    box-shadow: var(--kiu-shadow);
}

.kiu-notice-feature__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.kiu-notice-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 31, 60, .96) 4%, rgba(13, 31, 60, .72) 38%, rgba(13, 31, 60, .12) 100%);
}

.kiu-notice-feature:hover .kiu-notice-feature__media {
    transform: scale(var(--kiu-scale-hover));
}

.kiu-notice-feature__body {
    position: relative;
    z-index: 2;
    padding: 36px;
}

/* line-height 1.3 clipped Bengali titles into the tag above: Bengali
   glyphs carry marks well above the Latin cap height and overflowed the
   line box. 1.55 plus a larger gap clears them — same reasoning as
   docs/decisions_sazid.md D-S7. */
.kiu-notice-feature__title {
    margin-top: 20px;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 650;
    line-height: 1.55;
    color: var(--kiu-white);
}

.kiu-notice-feature__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--kiu-accent-soft);
}

.kiu-notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* The three rows share whatever height the feature card sets, so the two
   columns finish level. `flex: 1 1 0` rather than `flex: 1` so they divide
   the space equally instead of in proportion to their content — a two-line
   Bengali title must not make its row taller than the others.

   Scoped to the two-column layout: .kiu-notices__layout collapses to a single
   column at 1199px, and below that there is no feature card alongside to
   match, so the rows should just take their natural height. */
@media (min-width: 1200px) {
    .kiu-notice-list > li {
        display: flex;
        flex: 1 1 0;
    }

    .kiu-notice-list > li > .kiu-notice-row {
        flex: 1;
    }
}

.kiu-notice-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out);
}

/* Hover does one thing: lift the card. Nothing inside it changes colour —
   the date tile and the title stay exactly as they read at rest. */
.kiu-notice-row:hover {
    transform: scale(var(--kiu-scale-hover-sm));
    box-shadow: var(--kiu-shadow);
}

.kiu-datetile {
    display: grid;
    place-content: center;
    flex-shrink: 0;
    width: 74px;
    padding: 12px 6px;
    border-radius: var(--kiu-radius);
    background: var(--kiu-surface-alt);
    text-align: center;
    line-height: 1.1;
}

.kiu-datetile__day {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--kiu-navy);
    font-variant-numeric: tabular-nums;
}

.kiu-datetile__month {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kiu-navy);
}

.kiu-datetile__year {
    display: block;
    font-size: 11px;
    color: var(--kiu-muted);
}

.kiu-notice-row__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kiu-notice-row__type {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kiu-muted);
}

.kiu-notice-row__title {
    font-size: 15.5px;
    font-weight: 550;
    line-height: 1.5;
    color: var(--kiu-ink);
    /* Keep long Bangla and English titles to two lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kiu-notice-row__file {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 19px;
    color: var(--kiu-muted);
}

/* --------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */

.kiu-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.kiu-event-card {
    display: flex;
    flex-direction: column;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius-lg);
    overflow: hidden;
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out), border-color var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-event-card:hover {
    transform: translateY(var(--kiu-lift-lg));
    box-shadow: var(--kiu-shadow-hover);
    border-color: transparent;
}

.kiu-event-card__media {
    position: relative;
    height: 208px;
    background-size: cover;
    background-position: center;
}

.kiu-event-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 31, 60, .38), transparent 62%);
}

.kiu-event-card__date {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: grid;
    place-items: center;
    padding: 12px 16px;
    border-radius: var(--kiu-radius);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    line-height: 1.15;
}

.kiu-event-card__day {
    font-size: 22px;
    font-weight: 700;
    color: var(--kiu-navy);
    font-variant-numeric: tabular-nums;
}

.kiu-event-card__month {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kiu-muted);
}

.kiu-event-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 26px 30px;
}

.kiu-event-card__title {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kiu-event-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 13.5px;
    color: var(--kiu-muted);
}

.kiu-event-card__meta i {
    color: var(--kiu-navy);
}

/* --------------------------------------------------------------------------
   Downloads
   -------------------------------------------------------------------------- */

.kiu-downloads {
    background: var(--kiu-surface);
}

.kiu-downloads__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kiu-download {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-download > i:first-child {
    flex-shrink: 0;
    font-size: 26px;
    color: var(--kiu-navy);
}

.kiu-download__title {
    min-width: 0;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.5;
    color: var(--kiu-ink);
}

.kiu-download__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--kiu-muted);
}

.kiu-download__ext {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 9px;
    border-radius: var(--kiu-radius-xs);
    background: var(--kiu-surface-alt);
}

/* Same hover as the notice cards above: the card grows slightly and lifts on
   a shadow, and nothing inside it changes colour. */
.kiu-download:not(.is-unavailable):hover {
    transform: scale(var(--kiu-scale-hover-sm));
    box-shadow: var(--kiu-shadow);
}

.kiu-download.is-unavailable {
    opacity: .55;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.kiu-cta-band {
    padding-block: 88px;
    background:
        radial-gradient(900px 400px at 88% 10%, rgba(0, 163, 147, .18), transparent 60%),
        linear-gradient(120deg, var(--kiu-navy-deep) 0%, var(--kiu-navy) 100%);
}

.kiu-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.kiu-cta__title {
    font-size: clamp(27px, 3.2vw, 40px);
    font-weight: 700;
    color: var(--kiu-white);
}

.kiu-cta__text p {
    margin-top: 12px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .76);
}

.kiu-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.kiu-cta__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin-top: 52px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.kiu-cta__contact > * {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .78);
    transition: color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-cta__contact a:hover {
    color: var(--kiu-white);
}

.kiu-cta__contact i {
    color: var(--kiu-accent);
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .kiu-home {
        --kiu-section-y: 84px;
    }

    .kiu-academics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiu-vc__inner {
        grid-template-columns: 240px 1fr;
        gap: 44px;
    }
}

@media (max-width: 991px) {
    .kiu-quicklinks__grid,
    .kiu-events__grid,
    .kiu-downloads__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiu-notices__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .kiu-notice-feature {
        min-height: 340px;
    }

    .kiu-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .kiu-stat:nth-child(2) {
        border-right: 0;
    }

    .kiu-vc__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        text-align: center;
        justify-items: center;
    }

    .kiu-vc__portrait {
        width: 200px;
    }

    .kiu-vc__quote {
        padding-left: 0;
        padding-top: 20px;
        border-left: 0;
        border-top: 2px solid rgba(0, 163, 147, .6);
        text-align: left;
    }
}

@media (max-width: 767px) {
    .kiu-home {
        --kiu-section-y: 64px;
    }

    .kiu-hero__nav.swiper-button-prev,
    .kiu-hero__nav.swiper-button-next {
        width: 42px;
        height: 42px;
    }

    .kiu-hero__nav.swiper-button-prev { left: 12px; }
    .kiu-hero__nav.swiper-button-next { right: 12px; }

    .kiu-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-bottom: 34px;
    }

    .kiu-ticker__inner {
        height: auto;
        padding-block: 14px;
        gap: 16px;
    }

    .kiu-ticker__all {
        display: none;
    }

    .kiu-ticker__label {
        padding-right: 16px;
    }

    .kiu-quicklinks__grid,
    .kiu-academics__grid,
    .kiu-events__grid,
    .kiu-downloads__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kiu-notice-row {
        gap: 14px;
        padding: 16px 18px;
    }

    .kiu-datetile {
        width: 62px;
    }

    .kiu-notice-feature__body {
        padding: 26px 22px;
    }

    .kiu-cta__inner {
        gap: 28px;
    }
}

@media (max-width: 575px) {
    .kiu-stats__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .kiu-stat {
        border-right: 0;
    }

}

/* Respect a reduced-motion preference for the looping animations. */
@media (prefers-reduced-motion: reduce) {
    .kiu-home *,
    .kiu-home *::before,
    .kiu-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .kiu-ticker__track {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Recent research — a horizontally scrolling strip of publication cards.
   Built on CSS scroll-snap rather than a carousel library: the track is a
   plain overflow container, so it works before JS runs, keeps native touch
   momentum on phones, and stays keyboard-scrollable. The arrow buttons only
   nudge scrollLeft.
   -------------------------------------------------------------------------- */

/* Same navy band the "Get in touch" section used, so the page still closes on
   a dark block. Headings flip via --kiu-heading (see the token comment near
   the top of this file); the cards redefine it back to ink because they stay
   white on top of the navy. */
.kiu-research-strip {
    --kiu-heading: var(--kiu-white);

    /* Shorter than the other sections on purpose. This one is a single row of
       cards with no imagery, so the standard 104px band left it reading as a
       mostly-empty navy slab — the tallest thing on the page after the hero.
       The head margin and the arrow row below are trimmed to match, since the
       band's height is the sum of all three, not the padding alone. */
    --kiu-section-y: 64px;

    background: linear-gradient(135deg, var(--kiu-navy-darker) 0%, var(--kiu-navy) 100%);
}

.kiu-research-strip .kiu-section__head {
    margin-bottom: 30px;
}

.kiu-research-strip .kiu-eyebrow {
    color: var(--kiu-accent-soft);
}

/* Arrows sit under the track, centred, so the header carries only the
   heading and the link. */
.kiu-research-strip__nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
}

/* The white pill reads as a blank chip against the navy; outline it instead,
   inverting to solid white on hover. */
.kiu-research-strip .kiu-pill {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: var(--kiu-white);
}

.kiu-research-strip .kiu-pill:hover {
    background: var(--kiu-white);
    border-color: var(--kiu-white);
    color: var(--kiu-navy);
}

.kiu-research-strip__nav {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--kiu-white);
    cursor: pointer;
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out), opacity var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-research-strip__nav:hover {
    background: var(--kiu-white);
    border-color: var(--kiu-white);
    color: var(--kiu-navy);
}

/* Set by the script when the track is already at one end. */
.kiu-research-strip__nav[disabled] {
    opacity: .35;
    cursor: default;
}

.kiu-research-strip__nav[disabled]:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: var(--kiu-white);
}

/* Flex, not grid: `grid-auto-columns` with a percentage collapsed inside the
   scroll container and squeezed all eight cards into view at once. A flex
   basis resolves against the track's own width, so exactly three show. */
.kiu-research-strip__track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the cards' hover lift and shadow, which would otherwise be
       clipped by the scroll container. */
    padding: 6px 4px 18px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kiu-research-strip__track::-webkit-scrollbar {
    display: none;
}

.kiu-research-strip__track:focus-visible {
    outline: 2px solid var(--kiu-accent-soft);
    outline-offset: 4px;
    border-radius: var(--kiu-radius);
}

/* Two across at desktop, and horizontal rather than stacked: the cover sits
   on the left with the meta row, title and author stacked beside it. The card
   is a pale panel on the navy band, inset by its own padding so the cover
   reads as a photograph laid on the card rather than a bleed to the edge.
   flex-shrink stays 0 so the cards keep their width and the track scrolls
   instead of compressing them. */
.kiu-research-card {
    --kiu-heading: var(--kiu-ink);

    scroll-snap-align: start;
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: 0;

    display: flex;
    align-items: stretch;
    gap: 22px;

    padding: 16px;

    background: #f4f3f1;
    border-radius: var(--kiu-radius-lg);

    transition: transform var(--kiu-dur-slow) var(--kiu-ease-out), box-shadow var(--kiu-dur-slow) var(--kiu-ease-out);
}

.kiu-research-card:hover {
    transform: translateY(var(--kiu-lift-lg));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

/* A fixed share of the card's width rather than a fixed height, so the cover
   scales with the card as the flex-basis changes across breakpoints. */
.kiu-research-card__media {
    flex: 0 0 37%;
    align-self: stretch;
    min-height: 208px;

    display: block;
    overflow: hidden;

    border-radius: var(--kiu-radius-lg);
    background: var(--kiu-surface-alt, #EDF1F8);
}

.kiu-research-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.kiu-research-card:hover .kiu-research-card__media img {
    transform: scale(var(--kiu-scale-hover));
}

.kiu-research-card__body {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;

    padding: 10px 14px 10px 0;
}

.kiu-research-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;

    font-size: 13.5px;
    color: var(--kiu-muted);
}

.kiu-research-card__metaitem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.kiu-research-card__metaitem i {
    font-size: 15px;
    flex-shrink: 0;
}

/* The site's display serif, matching the section headings and the wordmark. */
.kiu-research-card__title {
    font-family: var(--rs-ff-title);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.34;
    color: var(--kiu-ink);

    /* Clamped so a long title cannot stretch one card past its neighbours —
       flex items stretch to the tallest in the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kiu-research-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* An initial, not a portrait: the research data carries no author photos, and
   a stock face would be a picture of somebody who did not write the paper. */
.kiu-research-card__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;

    display: grid;
    place-content: center;

    border-radius: 50%;
    background: var(--kiu-navy);
    color: var(--kiu-white);

    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.kiu-research-card__authorname {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--kiu-ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One card at a time from here down: two horizontal cards side by side leave
   the title barely wider than the cover. */
@media (max-width: 1199px) {
    .kiu-research-card {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    /* The base rule turns .kiu-section__head into a COLUMN at this width, so
       align-items here centres horizontally, not vertically — the whole
       header block is centred. text-align carries that down to the eyebrow,
       which is inside the inner <div> rather than a flex child of the head
       and so would otherwise stay left-aligned against a centred title. */
    .kiu-research-strip {
        /* Tighter again on a phone, where the section is one card tall and the
           standard 64px band is a large share of the screen. */
        --kiu-section-y: 44px;
    }

    .kiu-research-strip .kiu-section__head {
        align-items: center;
        text-align: center;
        gap: 14px;
        margin-bottom: 22px;
    }

    .kiu-research-strip .kiu-pill {
        padding: 10px 16px;
        font-size: 13px;
    }

    .kiu-research-strip__track {
        gap: 14px;
    }

    /* Stacked on a phone: side by side, the cover would leave the title a
       column too narrow to read. */
    .kiu-research-card {
        flex-direction: column;
        gap: 14px;
        padding: 12px;
    }

    .kiu-research-card__media {
        flex: 0 0 auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: var(--kiu-radius);
    }

    .kiu-research-card__body {
        padding: 0 6px 8px;
        gap: 12px;
    }

    .kiu-research-card__title {
        font-size: 19.5px;
        -webkit-line-clamp: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiu-research-strip__track {
        scroll-behavior: auto;
    }

    .kiu-research-card:hover {
        transform: none;
    }
}