/* ==========================================================================
   Kishoreganj University — Departments / Offices / Institutes  (/explore/*)

   Scoped under .kiu-explore (listing) and .kiu-explore-single (detail page).
   main.css sets `html { font-size: 10px }`, so 1rem = 10px — sizes below are
   px on purpose.
   ========================================================================== */

.kiu-explore,
.kiu-explore-single {

    color: var(--kiu-body);
}

.kiu-explore .kiu-section,
.kiu-explore-single .kiu-section {
    padding: 48px 0 72px;
}

.kiu-empty {
    padding: 40px 0;
    color: var(--kiu-muted);
    font-size: 14px;
}

/* ---------- type tabs (listing) ---------- */

/* The listing page's top clearance and page header both come from
   <x-page-hero> (components/page-hero.css) now, so nothing is needed here.
   The hero's own padding-top covers the fixed navbar and its hanging badge. */

.kiu-explore-tabs {
    border-bottom: 1px solid var(--kiu-border);
    background: var(--kiu-white);

    /* A static element is painted below positioned content in the same
       stacking context whatever its margin, so clearing the badge
       geometrically is not enough on its own — this has to be a positioned
       element too. Same fix as .kiu-dept-nav in dept-nav.css. */
    position: relative;
    z-index: 10;
}

.kiu-explore-tabs__list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kiu-explore-tabs__link {
    display: inline-block;
    padding: 16px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kiu-muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color var(--kiu-dur-fast) var(--kiu-ease-out), border-color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-explore-tabs__link:hover {
    color: var(--kiu-navy);
}

.kiu-explore-tabs__link.is-active {
    color: var(--kiu-navy);
    border-bottom-color: var(--kiu-accent);
}

/* ---------- listing grid ---------- */

.kiu-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.kiu-explore-card {
    display: block;
    padding: 24px;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    box-shadow: var(--kiu-shadow);
    text-decoration: none;
    transition: box-shadow var(--kiu-dur) var(--kiu-ease-out), transform var(--kiu-dur) var(--kiu-ease-out), border-color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-explore-card:hover {
    box-shadow: var(--kiu-shadow-hover);
    border-color: rgba(0, 163, 147, .5);
    transform: translateY(var(--kiu-lift));
}

.kiu-explore-card__name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--kiu-ink);
    margin-bottom: 2px;
}

.kiu-explore-card__name-bn {
    font-size: 14px;
    line-height: 1.8;
    color: var(--kiu-muted);
    margin-bottom: 8px;
}

.kiu-explore-card__meta {
    font-size: 13px;
    line-height: 1.7;
    color: var(--kiu-body);
    margin-bottom: 2px;
}

.kiu-explore-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kiu-navy);
}

.kiu-explore-card:hover .kiu-explore-card__link i {
    transform: translateX(3px);
}

.kiu-explore-card__link i {
    transition: transform var(--kiu-dur) var(--kiu-ease-out);
}

/* ---------- detail page ---------- */

/* The shared <x-breadcrumb> component renders its trail as a plain <ol> with
   no list-style reset anywhere in the codebase, so it silently numbers itself
   ("1. Home 2. Offices 3. Registrar Office") — invisible on other pages only
   because the fixed navbar happens to hide the whole breadcrumb there. Scoped
   here (not fixed globally) because that is out of scope for this page set. */
.kiu-explore-single .rs-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--kiu-muted);
}

.kiu-explore-single .rs-breadcrumb-list li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--kiu-border);
}

.kiu-explore-single .rs-breadcrumb-list a {
    color: var(--kiu-navy);
    text-decoration: none;
}

.kiu-explore-single .rs-breadcrumb-list a:hover {
    text-decoration: underline;
}

.kiu-explore-single__header {
    margin-bottom: 32px;
}

.kiu-explore-single__title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--kiu-ink);
}

.kiu-explore-single__title-bn {
    font-size: 18px;
    line-height: 1.8;
    color: var(--kiu-muted);
    margin-top: 4px;
}

.kiu-explore-single__meta {
    font-size: 13.5px;
    color: var(--kiu-body);
    margin-top: 8px;
}

.kiu-explore-block {
    padding: 28px 0;
    border-top: 1px solid var(--kiu-border);
}

.kiu-explore-block--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.kiu-explore-block__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.7;
    color: var(--kiu-ink);
    margin-bottom: 14px;
}

.kiu-explore-block__body {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--kiu-body);
}

.kiu-explore-block__body p {
    margin-bottom: 10px;
}

.kiu-explore-block__signee {
    font-size: 14px;
    font-weight: 700;
    color: var(--kiu-navy);
    margin-bottom: 10px;
}

/* ---------- contact cards (detail page) ---------- */
/* Modelled on the main /contact page so the two read as one site. The old
   treatment was two 14px lines of body copy, which is smaller than the
   surrounding prose it needed to stand out from — the number and the email
   are the whole point of the block, so they are set as the largest type on
   it and made tappable. */

/* Two explicit columns, not `repeat(auto-fit, minmax(280px, 1fr))`.
   auto-fit packs in as many 280px tracks as will fit, which at desktop width
   is three — so Phone and Email filled the first two and the third was left
   empty, leaving a gap down the right that the full-width address card below
   did not share. There are only ever two cards on that row, so the track count
   should say two rather than be derived from how many happen to fit. */
.kiu-explore-single .kiu-contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* The address runs several lines longer than a phone number, so it takes the
   full row rather than stretching the grid's other cards to match it. */
.kiu-explore-single .kiu-contact-card--wide {
    grid-column: 1 / -1;
}

.kiu-explore-single .kiu-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    background: var(--kiu-white);
    box-shadow: var(--kiu-shadow);
    transition: border-color var(--kiu-dur-fast) var(--kiu-ease-in-out), box-shadow var(--kiu-dur-fast) var(--kiu-ease-in-out);
}

.kiu-explore-single .kiu-contact-card:hover {
    border-color: var(--kiu-accent);
    box-shadow: var(--kiu-shadow-hover);
}

.kiu-explore-single .kiu-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--kiu-radius);
    background: var(--kiu-surface);
    color: var(--kiu-navy);
    font-size: 22px;
    line-height: 1;
    /* No hover state: the icon keeps its tint whatever the pointer is doing.
       The card still responds on hover through its own border and shadow, and
       the phone/email values still highlight — those are the parts that are
       actually actionable. The icon is a label, so recolouring it suggested a
       target that was never clickable. Its transition went with the swap; it
       had nothing left to animate. */
}

.kiu-explore-single .kiu-contact-card__body {
    min-width: 0;
}

.kiu-explore-single .kiu-contact-card__label {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kiu-muted);
    line-height: 1;
}

/* main.css sets `p { margin-bottom: 30px }` globally; every value in this card
   is spaced by the card's own padding instead. */
.kiu-explore-single .kiu-contact-card__body p {
    margin: 0;
}

.kiu-explore-single .kiu-contact-card__value {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kiu-ink);
    text-decoration: none;
    /* overflow-wrap, not the deprecated `word-break: break-word`: both break
       only when a value genuinely cannot fit, but this is the standard
       property. A long address like english@bsmru.ac.bd fits on one line now
       that each card is half the row instead of a third of it. */
    overflow-wrap: break-word;
    border-bottom: 2px solid transparent;
    transition: color var(--kiu-dur-fast) var(--kiu-ease-in-out), border-color var(--kiu-dur-fast) var(--kiu-ease-in-out);
}

/* Addresses are long and read as a sentence, so they stay at body size — it is
   the number and the email that have to be findable at a glance. */
.kiu-explore-single .kiu-contact-card__address {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--kiu-body);
}

/* Email addresses run much longer than phone numbers and would otherwise be
   the one thing on the page forcing a horizontal scroll. */
.kiu-explore-single .kiu-contact-card__value--email {
    font-size: 19px;
}

.kiu-explore-single .kiu-contact-card__value:hover,
.kiu-explore-single .kiu-contact-card__value:focus-visible {
    color: var(--kiu-accent);
    border-bottom-color: currentColor;
}

@media (max-width: 767px) {
    .kiu-explore-block--split {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* One card per row below 768px: the two columns set above would otherwise
       squeeze the 22px value onto three lines on a phone. */
    .kiu-explore-single .kiu-contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .kiu-explore-single .kiu-contact-card {
        gap: 14px;
        padding: 18px 18px;
    }

    .kiu-explore-single .kiu-contact-card__icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .kiu-explore-single .kiu-contact-card__value {
        font-size: 20px;
    }

    .kiu-explore-single .kiu-contact-card__value--email {
        font-size: 16.5px;
    }

    .kiu-explore-single .kiu-contact-card__address {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiu-explore-single .kiu-contact-card,
    .kiu-explore-single .kiu-contact-card__icon,
    .kiu-explore-single .kiu-contact-card__value {
        transition: none;
    }
}

/* The departmental hero moved to public/css/pages/dept-home.css.
   It used to live here as a Swiper carousel that only departments WITH
   `carousels` rows ever saw — the ones without fell back to <x-page-hero>, so
   the same template served two structurally different page headers. The
   replacement renders one shape for every department and cross-fades its own
   background frames, so none of the Swiper geometry, pagination or
   navbar-clearance margins below are needed any more. */

/* Block heading with a trailing "view all" link --------------------------- */

.kiu-explore-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kiu-explore-block__head .kiu-explore-block__title {
    margin-bottom: 0;
}

.kiu-explore-block__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--kiu-navy);
    text-decoration: none;
}

.kiu-explore-block__link:hover {
    color: var(--kiu-navy-deep);
}

.kiu-explore-block__link i {
    transition: transform var(--kiu-dur) var(--kiu-ease-out);
}

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

/* Members: Teachers / Officers & Staff toggle ----------------------------- */

.kiu-filters--members {
    margin-bottom: 24px;
}

.kiu-filters--members .kiu-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}

.kiu-filters--members .kiu-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--kiu-radius-pill);
    background: var(--kiu-surface);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--kiu-muted);
}

.kiu-filters--members .kiu-filter.is-active span {
    background: rgba(255, 255, 255, .22);
    color: var(--kiu-white);
}

/* Notice table ------------------------------------------------------------ */
/* A real table, not the .kiu-notice-list markup used on /all-notice/*: those
   styles are scoped under .kiu-listing in listing.css and do not reach inside
   .kiu-explore-single, so reusing them rendered an unstyled list (D-S20). */

.kiu-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scroll lives on the wrapper so a long title never makes the whole page
   scroll sideways on a narrow screen. */
.kiu-notice-table__wrap {
    overflow-x: auto;
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    background: var(--kiu-white);
}

.kiu-notice-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.kiu-notice-table thead th {
    padding: 13px 18px;
    background: var(--kiu-surface);
    border-bottom: 1px solid var(--kiu-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kiu-muted);
    text-align: left;
    white-space: nowrap;
}

.kiu-notice-table tbody tr {
    border-bottom: 1px solid var(--kiu-border);
    transition: background-color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-notice-table tbody tr:last-child {
    border-bottom: 0;
}

.kiu-notice-table tbody tr:hover {
    background: var(--kiu-surface);
}

.kiu-notice-table td {
    padding: 14px 18px;
    vertical-align: middle;
    line-height: 1.6;
}

.kiu-notice-table__date-col { width: 130px; }
.kiu-notice-table__type-col { width: 165px; }
.kiu-notice-table__file-col { width: 130px; }

.kiu-notice-table__date {
    color: var(--kiu-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

.kiu-notice-table__tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--kiu-radius-pill);
    background: var(--kiu-surface-alt, #EDF1F8);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--kiu-navy);
    white-space: nowrap;
}

.kiu-notice-table__tag--none {
    background: var(--kiu-surface);
    color: var(--kiu-muted);
}

.kiu-notice-table__title a {
    color: var(--kiu-ink);
    font-weight: 600;
    text-decoration: none;
}

.kiu-notice-table__title a:hover {
    color: var(--kiu-navy);
    text-decoration: underline;
}

.kiu-notice-table__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.kiu-notice-table .kiu-notice-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--kiu-radius-xs);
    font-size: 15px;
    background: var(--kiu-surface, #F5F7FB);
    color: var(--kiu-navy, #1B3A6B);
    border: 1px solid var(--kiu-border, #E1E7F0);
    text-decoration: none;
    transition: background var(--kiu-dur-fast) var(--kiu-ease-out), color var(--kiu-dur-fast) var(--kiu-ease-out), border-color var(--kiu-dur-fast) var(--kiu-ease-out), transform var(--kiu-dur-press) var(--kiu-ease-out);
}

.kiu-notice-table .kiu-notice-row__action:hover {
    background: var(--kiu-navy, #1B3A6B);
    border-color: var(--kiu-navy, #1B3A6B);
    color: var(--kiu-white, #FFFFFF);
    transform: translateY(var(--kiu-lift));
}

@media (max-width: 767px) {
    .kiu-notice-table {
        min-width: 0;
        width: 100%;
    }

    .kiu-notice-table thead th.kiu-notice-table__type-col,
    .kiu-notice-table tbody td.kiu-notice-table__type {
        display: none;
    }

    .kiu-notice-table thead th {
        padding: 10px 8px;
        font-size: 11px;
    }

    .kiu-notice-table td {
        padding: 11px 8px;
    }

    .kiu-notice-table__date-col {
        width: 82px;
    }

    .kiu-notice-table__file-col {
        width: 76px;
    }

    .kiu-notice-table__date {
        font-size: 11.5px;
        line-height: 1.35;
        white-space: normal;
    }

    .kiu-notice-table__title {
        font-size: 12.5px;
        line-height: 1.4;
        word-break: break-word;
    }

    .kiu-notice-table__actions {
        gap: 4px;
    }

    .kiu-notice-table .kiu-notice-row__action {
        width: 30px;
        height: 30px;
        font-size: 13.5px;
        border-radius: var(--kiu-radius-xs);
    }
}

/* Departmental events ----------------------------------------------------- */

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

@media (max-width: 767px) {
    .kiu-explore-events {
        grid-template-columns: 1fr;
    }
}

.kiu-explore-event {
    display: block;
    background: var(--kiu-white);
    border: 1px solid var(--kiu-border);
    border-radius: var(--kiu-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--kiu-shadow);
    transition: box-shadow var(--kiu-dur) var(--kiu-ease-out), transform var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-explore-event:hover {
    box-shadow: var(--kiu-shadow-hover);
    transform: translateY(var(--kiu-lift));
}

.kiu-explore-event__image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--kiu-surface);
    display: block;
}

.kiu-explore-event__body {
    padding: 14px 16px 18px;
}

.kiu-explore-event__date {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kiu-accent);
}

.kiu-explore-event__title {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--kiu-ink);
}

/* Department People page (/explore/department/{slug}/people) and an
   office's head block. The titles carry .kiu-dept-home in the selector
   because dept-home.css loads after this file and resets
   `.kiu-dept-home .kiu-dept-section__title { margin: 0 }` — at equal
   specificity that won, leaving the photo flush against the heading. */
.kiu-dept-people-head {
    margin-bottom: 64px;
}

.kiu-dept-home .kiu-dept-people-head .kiu-dept-section__title {
    text-align: center;
    margin-bottom: 28px;
}

.kiu-dept-people-group {
    margin-top: 56px;
}

.kiu-dept-home .kiu-dept-people-group .kiu-dept-section__title {
    text-align: center;
    margin-bottom: 28px;
}

/* An office's Officers / Staff cards following its duty groups (the Proctor
   Office home page): the cards carry no top margin of their own. */
.kiu-dept-people-group + .kiu-employee-cards {
    margin-top: 56px;
}

@media (max-width: 767px) {
    .kiu-dept-people-head {
        margin-bottom: 44px;
    }

    .kiu-dept-home .kiu-dept-people-head .kiu-dept-section__title {
        margin-bottom: 20px;
    }

    .kiu-dept-people-group {
        margin-top: 40px;
    }

    .kiu-dept-home .kiu-dept-people-group .kiu-dept-section__title {
        margin-bottom: 20px;
    }

    .kiu-dept-people-group + .kiu-employee-cards {
        margin-top: 40px;
    }
}