/* ==========================================================================
   Kishoreganj University — Syndicate Members  (/syndicate-members)

   Layered on top of about.css, which supplies the palette, the resets and the
   fixed-navbar clearance. Scoped under .kiu-syndicate so nothing leaks.
   main.css sets `html { font-size: 10px }`, so every size here is px.
   ========================================================================== */

.kiu-syndicate__head {
    max-width: 720px;
    margin-bottom: 42px;
}

.kiu-syndicate__head .kiu-section__title {
    margin-top: 10px;
}

/* auto-fit rather than a fixed column count: the roster grows and shrinks as
   seats are filled, and a trailing half-empty row reads as a mistake. */
.kiu-syndicate__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;

    /* It is an <ol> — the numbering is not part of the content here. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.kiu-syndicate-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;

    padding: 26px 26px 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);
}

.kiu-syndicate-card:hover {
    transform: scale(var(--kiu-scale-hover-sm));
    box-shadow: var(--kiu-shadow);
}

/* The chair reads first at a glance without being moved out of the roster's
   order, which is the order the university supplied. */
.kiu-syndicate-card.is-chair {
    background: linear-gradient(180deg, var(--kiu-surface) 0%, var(--kiu-white) 60%);
    border-color: rgba(0, 163, 147, .38);
}

.kiu-syndicate-card__role {
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 5px 12px;

    border-radius: var(--kiu-radius-pill);
    background: var(--kiu-surface-alt);
    color: var(--kiu-navy);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kiu-syndicate-card.is-chair .kiu-syndicate-card__role {
    background: var(--kiu-accent);
    color: var(--kiu-white);
}

.kiu-syndicate-card__name {
    font-family: var(--rs-ff-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kiu-ink);
}

.kiu-syndicate-card__designation {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--kiu-navy);
}

/* Several affiliations run to a full ministry address, so this wraps rather
   than clamps — truncating a seat's remit would misstate it. */
.kiu-syndicate-card__org {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--kiu-body);
}

.kiu-syndicate-card__email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;

    font-size: 13px;
    color: var(--kiu-muted);
    text-decoration: none;
    word-break: break-all;

    transition: color var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-syndicate-card__email:hover {
    color: var(--kiu-accent);
}

.kiu-syndicate-card__email i {
    flex-shrink: 0;
    font-size: 15px;
}

/* Seats without a named holder. Muted rather than hidden: the Syndicate's
   composition is fixed by the Act, so an unfilled seat is still part of it. */
.kiu-syndicate-card.is-pending {
    background: var(--kiu-surface);
    border-style: dashed;
}

.kiu-syndicate-card.is-pending .kiu-syndicate-card__name {
    color: var(--kiu-muted);
}

.kiu-syndicate-card__pending {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kiu-muted);
}

@media (max-width: 767px) {
    .kiu-syndicate__head {
        margin-bottom: 30px;
    }

    .kiu-syndicate__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .kiu-syndicate-card {
        padding: 22px 20px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiu-syndicate-card {
        transition: none;
    }

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