/* ==========================================================================
   Kishoreganj University — Single Administration / Chancellor page
   Loaded alongside administration.css, which sets the shared token palette.
   ========================================================================== */

/* .kiu-admin-head — the flat navy breadcrumb band — was removed along with
   its rules. Both single pages now open with <x-person-hero>, the same photo
   header the staff profiles use, which brings its own navbar clearance and
   its own breadcrumb styling. */

.kiu-admin-single {
    padding-block: 56px;
    background: var(--kiu-white);
}

.kiu-admin-single__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 44px;
    align-items: start;
}

@media (max-width: 900px) {
    .kiu-admin-single__grid {
        grid-template-columns: 1fr;
    }
}

.kiu-admin-single__card {
    background: var(--kiu-surface);
    border-radius: var(--kiu-radius-lg);
    padding: 26px;
    text-align: center;
}

.kiu-admin-single__card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--kiu-radius);
    margin-bottom: 18px;
}

/* main.css applies `p { margin-bottom: 30px; line-height: 28px }` to every
   paragraph on the site. The contact rows below are <p>, so each carried a
   full paragraph gap underneath it — 30px of it sat between the last contact
   line and the CV button, on top of the button's own margin. Reset once here
   so each element below only states its own margin-top. */
.kiu-admin-single__card p {
    margin-bottom: 0;
    line-height: 1.5;
}

.kiu-admin-single__meta {
    font-size: 13px;
    color: var(--kiu-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.kiu-admin-single__cv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;   /* the real gap now, no longer 18 + 30 */
    padding: 11px 20px;
    border: 1px solid var(--kiu-navy);
    border-radius: var(--kiu-radius-pill);
    background: var(--kiu-navy);
    color: var(--kiu-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out);
}

.kiu-admin-single__cv:hover {
    background: transparent;
    color: var(--kiu-navy);
}

.kiu-admin-single__cv i {
    font-size: 15px;
}

/* Scoped to the contact rows on purpose. As `.kiu-admin-single__card a` this
   also caught .kiu-admin-single__cv — higher specificity and later in the file
   than the button's own rule — repainting its white label navy on a navy pill,
   so the CV button rendered as an empty blob. */
.kiu-admin-single__meta a {
    color: var(--kiu-navy);
}

.kiu-admin-single__meta a:hover {
    text-decoration: underline;
}

/* Identity above the message, matching the live kiu.ac.bd layout. */
.kiu-admin-single__identity {
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--kiu-border);
}

/* Same reset as the card: main.css sets `p { margin-bottom: 30px }` globally,
   which would space these stacked identity lines a whole paragraph apart. Each
   line below states only its own margin-top. */
.kiu-admin-single__identity p {
    margin-bottom: 0;
}

/* A <p>, not the page heading. main.css sets `p { margin-bottom: 30px }`
   globally, so the margin has to be restated. */
.kiu-admin-single__name {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--kiu-navy);
}

/* Bengali needs a taller line box than Latin — its marks sit above cap height
   and clip in a tight one (docs/decisions_hridy.md D-7). The paragraph reset
   above already zeroes the global 30px bottom margin. */
.kiu-admin-single__name-bn {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--kiu-navy);
}

/* The post itself ("Chancellor"), above the office held ex officio. Accent is
   reserved for the designation line below, so this stays in body ink. */
.kiu-admin-single__post {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kiu-body);
}

.kiu-admin-single__designation {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kiu-accent);
}

.kiu-admin-single__designation-bn {
    margin-top: 2px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--kiu-accent);
}

/* Accent rule on the left, echoing the live site's section headings. */
.kiu-admin-single__heading {
    position: relative;
    padding-left: 14px;
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--kiu-ink);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.kiu-admin-single__heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 1px;
    background: var(--kiu-accent);
}

.kiu-admin-single__heading--bn {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--kiu-border);
    text-transform: none;
}

.kiu-admin-single__heading--bn::before {
    top: 36px;
}

.kiu-admin-single__text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--kiu-body);
}

.kiu-admin-single__text p {
    margin-bottom: 16px;
    text-align: justify;
}

.kiu-admin-single__text p:last-child {
    margin-bottom: 0;
}

/* Bengali sits taller than Latin at the same size — see D-S7/D-S26. */
.kiu-admin-single__text--bn {
    font-size: 15.5px;
    line-height: 2.05;
}

@media (max-width: 575px) {
    .kiu-admin-single__name {
        font-size: 21px;
    }

    .kiu-admin-single__text p {
        text-align: left;
    }
}

/* Rich text -----------------------------------------------------------------
   Styling for HTML authored in the `administration` table and passed through
   App\Support\Html (D-S29). The tag list here mirrors that class's whitelist:
   if a tag is allowed there, it needs a rule here, or it renders unstyled.
   -------------------------------------------------------------------------- */

.kiu-richtext > *:first-child {
    margin-top: 0;
}

.kiu-richtext > *:last-child {
    margin-bottom: 0;
}

.kiu-richtext strong,
.kiu-richtext b {
    font-weight: 700;
    color: var(--kiu-ink);
}

.kiu-richtext em,
.kiu-richtext i {
    font-style: italic;
}

.kiu-richtext u {
    text-decoration: underline;
}

.kiu-richtext s {
    text-decoration: line-through;
}

.kiu-richtext a {
    color: var(--kiu-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kiu-richtext a:hover {
    color: var(--kiu-accent);
}

.kiu-richtext h2,
.kiu-richtext h3,
.kiu-richtext h4,
.kiu-richtext h5 {
    margin: 30px 0 12px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--kiu-ink);
}

.kiu-richtext h2 { font-size: 20px; }
.kiu-richtext h3 { font-size: 17.5px; }
.kiu-richtext h4 { font-size: 16px; }
.kiu-richtext h5 { font-size: 15px; }

.kiu-richtext ul,
.kiu-richtext ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.kiu-richtext ul { list-style: disc; }
.kiu-richtext ol { list-style: decimal; }

.kiu-richtext li {
    margin-bottom: 8px;
    line-height: inherit;
    text-align: left;
}

.kiu-richtext li::marker {
    color: var(--kiu-accent);
}

.kiu-richtext blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--kiu-border);
    font-style: italic;
    color: var(--kiu-ink);
}

.kiu-richtext hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--kiu-border);
}

.kiu-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kiu-radius-sm);
    margin: 8px 0;
}

.kiu-richtext figure {
    margin: 22px 0;
}

.kiu-richtext figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--kiu-muted);
    text-align: center;
}

/* Tables scroll inside their own box rather than widening the page. */
.kiu-richtext table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.kiu-richtext th,
.kiu-richtext td {
    padding: 10px 14px;
    border: 1px solid var(--kiu-border);
    text-align: left;
    vertical-align: top;
}

.kiu-richtext th {
    background: var(--kiu-surface);
    font-weight: 700;
    color: var(--kiu-ink);
}

.kiu-richtext sub,
.kiu-richtext sup {
    font-size: 75%;
    line-height: 0;
}