/* ── board.css ── */

body {
    font-family: 'Poppins', sans-serif;
    background: var(--pg);
    margin: 0; padding-top: 0;
    color: var(--t1); font-size: 14px; line-height: 1.6;
}

/* header overrides */
/*.ireda-header { background: var(--white) !important; box-shadow: 0 2px 20px rgba(30,58,138,.08) !important; }
.header-bg-overlay { background: var(--white) !important; backdrop-filter: none !important; opacity: 1 !important; }
.ireda-header:not(.scrolled) .nav-link,
.ireda-header:not(.scrolled) .glass-btn { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ireda-header:not(.scrolled) .utility-link    { color: rgba(255,255,255,0.75) !important; }
.ireda-header:not(.scrolled) .utility-divider { color: rgba(255,255,255,0.35) !important; }
.ireda-header:not(.scrolled) .col-lg-2 img    { filter: none !important; opacity: 1 !important; }
.ireda-header.scrolled .nav-link,
.ireda-header.scrolled .glass-btn             { color: var(--t2) !important; text-shadow: none !important; }
.ireda-header.scrolled .utility-link          { color: var(--t3) !important; }
.ireda-header.scrolled .col-lg-2 img          { filter: none !important; opacity: .92 !important; }*/

/* header overrides — subpage: always solid white, always dark text */
.ireda-header { background: var(--white) !important; box-shadow: 0 2px 20px rgba(30,58,138,.08) !important; }
.header-bg-overlay { background: var(--white) !important; backdrop-filter: none !important; opacity: 1 !important; }
.ireda-header .nav-link,
.ireda-header .glass-btn { color: var(--blue) !important; text-shadow: none !important; }
.ireda-header .utility-link,
.ireda-header .utility-lang-btn,
.ireda-header .utility-font-btn { color: var(--t3) !important; }
.ireda-header .utility-divider { color: var(--border) !important; }
.ireda-header .col-lg-2 img { filter: none !important; opacity: 1 !important; }

/* ─────────────────────────────────────────
   SECTION
───────────────────────────────────────── */
.board-section { margin-bottom: 2.8rem; }
.board-section:last-child { margin-bottom: 0; }

.section-head {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1.4rem;
}
.section-head-bar {
    width: 4px; height: 22px;
    border-radius: 4px;
    background: var(--G);
    flex-shrink: 0;
}
.section-head-title {
    font-size: 1rem; font-weight: 800;
    color: var(--t1); margin: 0;
    letter-spacing: -.01em;
}

/* ─────────────────────────────────────────
   GRID
───────────────────────────────────────── */
.board-grid {
    display: grid;
    gap: 1.4rem;
}
.board-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ─────────────────────────────────────────
   DIRECTOR CARD
───────────────────────────────────────── */
.director-card {
    background: var(--white);
    border-radius: var(--r1);
    box-shadow: var(--s1);
    border: 1px solid rgba(37,99,235,.06);
    overflow: hidden;
    transition: var(--t);
    display: flex;
    flex-direction: column;
}
.director-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--s3);
}
.director-card--vacant {
    border: 1px dashed var(--border);
    box-shadow: none;
    background: var(--pg);
}
.director-card--vacant:hover {
    transform: none;
    box-shadow: none;
}

/* accent bar */
.card-accent-bar {
    height: 4px;
    background: var(--G);
}
.card-accent-bar--vacant {
    background: var(--border);
}
.card-accent-bar--cs {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}

/* photo area */
.card-photo-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
    background: linear-gradient(160deg, var(--xpale), var(--pale));
}
.card-photo {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}

/* fallback */
.card-photo-fallback {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .6rem;
    background: linear-gradient(160deg, var(--xpale), var(--pale));
}
.fallback-initials {
    font-size: 2.8rem; font-weight: 800;
    color: var(--mid); opacity: .25;
    line-height: 1; letter-spacing: -.05em;
}
.fallback-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(37,99,235,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--mid); opacity: .5;
}
.card-photo-fallback--cs {
    background: linear-gradient(160deg, #f5f3ff, #ede9fe);
}
.fallback-initials--cs { color: #7c3aed; }
.fallback-icon-wrap--cs { background: rgba(124,58,237,.1); color: #7c3aed; }

/* vacant photo area */
.card-photo-vacant {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .8rem;
    background: #f8fafc;
}
.vacant-icon-ring {
    width: 60px; height: 60px; border-radius: 50%;
    border: 2px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #cbd5e1;
}
.vacant-label {
    font-size: .68rem; font-weight: 600;
    color: #94a3b8; letter-spacing: .5px;
    text-transform: uppercase;
}

/* card info */
.card-info {
    padding: 1.2rem 1.25rem 1.4rem;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: .35rem; flex: 1;
}
.card-category-pill {
    display: inline-block;
    background: var(--xpale);
    color: var(--blue);
    border: 1px solid var(--pale);
    border-radius: 20px;
    font-size: .62rem; font-weight: 700;
    padding: .18rem .75rem;
    letter-spacing: .4px; text-transform: uppercase;
    margin-bottom: .1rem;
}
.card-category-pill--vacant {
    background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0;
}
.card-category-pill--cs {
    background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe;
}

.card-name {
    font-size: .94rem; font-weight: 800;
    color: var(--t1); margin: 0;
    line-height: 1.3; letter-spacing: -.01em;
}
.card-name--vacant { color: #94a3b8; }

.card-role {
    font-size: .76rem; font-weight: 500;
    color: var(--blue); margin: 0;
    line-height: 1.4;
}
.card-role--vacant { color: #94a3b8; }

/* view button */
.card-view-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--G); color: var(--white);
    border: none; border-radius: 20px;
    padding: .38rem 1.1rem;
    font-size: .74rem; font-weight: 600;
    cursor: pointer; transition: var(--t);
    font-family: 'Poppins', sans-serif;
    margin-top: .4rem;
    box-shadow: 0 3px 10px rgba(30,58,138,.2);
}
.card-view-btn:hover { opacity: .88; transform: translateY(-1px); }
.card-view-btn:focus-visible { outline: 3px solid var(--mid); outline-offset: 2px; }
.card-view-btn i { font-size: .76rem; }
.card-view-btn--cs {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    box-shadow: 0 3px 10px rgba(109,40,217,.2);
}

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(15,31,92,.48);
    backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
    padding: 1.5rem;
}
.modal-overlay.open {
    display: flex;
    animation: fadeIn .2s ease both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-box {
    background: var(--white);
    border-radius: var(--r1);
    box-shadow: 0 24px 64px rgba(15,31,92,.28);
    width: 100%; max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: slideUp .25s ease both;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    background: var(--G);
    flex-shrink: 0;
}
.modal-header-info {
    display: flex; align-items: center; gap: .9rem;
}
.modal-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem; font-weight: 800; color: var(--white);
    flex-shrink: 0;
}
.modal-avatar--govt {
    background: rgba(5,150,105,.3);
    border-color: rgba(110,231,183,.5);
}
.modal-avatar--cs {
    background: rgba(139,92,246,.3);
    border-color: rgba(196,181,253,.5);
}
.modal-name {
    font-size: 1rem; font-weight: 800;
    color: var(--white); margin: 0 0 .18rem;
    letter-spacing: -.01em;
}
.modal-role {
    font-size: .76rem; color: rgba(255,255,255,.72);
    margin: 0; font-weight: 500;
}
.modal-close-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: var(--white); font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
    flex-shrink: 0;
}
.modal-close-btn:hover { background: rgba(255,255,255,.28); }
.modal-close-btn:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }

.modal-body {
    padding: 1.8rem 1.8rem 2rem;
    overflow-y: auto;
    font-size: .9rem; color: var(--t2);
    line-height: 1.9;
    scrollbar-width: thin;
    scrollbar-color: var(--pale) transparent;
}
.modal-body p { margin: 0 0 1rem; }
.modal-body p:last-child { margin: 0; }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--pale); border-radius: 4px; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 992px) {
    .board-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .board-grid-3 { grid-template-columns: 1fr; }
    .modal-box { max-height: 90vh; }
    .modal-header { padding: 1.1rem 1.2rem; }
    .modal-body { padding: 1.4rem 1.2rem; }
}

@media print {
    .modal-overlay { display: none !important; }
    .director-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .card-view-btn { display: none; }
}