/* ============================================================
   NATAS Board Manager – Frontend Styles
   ============================================================ */

.nbm-board {
    --nbm-accent:     #1a4a8a;
    --nbm-border:     #e2e8f0;
    --nbm-bg-header:  #f7f9fc;
    --nbm-text-muted: #666;
    --nbm-radius:     4px;
}

/* ----------------------------------------------------------
   Section wrapper
   ---------------------------------------------------------- */
.nbm-section {
    margin-bottom: 2.5rem;
}

.nbm-section-header {
    margin-bottom: 0.75rem;
}

.nbm-section-title {
    margin: 0 0 0.2rem;
    font-size: 1.4em;
    color: var(--nbm-accent);
    line-height: 1.3;
}

.nbm-as-of-date {
    margin: 0 0 0.25rem;
    font-size: 0.85em;
    color: var(--nbm-text-muted);
    font-style: italic;
}

.nbm-section-description {
    margin-bottom: 1rem;
    font-size: 0.92em;
    color: #555;
}
.nbm-section-description p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   Members table
   ---------------------------------------------------------- */
.nbm-members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

.nbm-members-table thead th {
    background: var(--nbm-bg-header);
    border-bottom: 2px solid var(--nbm-border);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nbm-text-muted);
    white-space: nowrap;
}

.nbm-members-table thead .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.nbm-members-table tbody tr {
    border-bottom: 1px solid var(--nbm-border);
}
.nbm-members-table tbody tr:last-child { border-bottom: none; }
.nbm-members-table tbody tr:hover      { background: #f7f9fc; }

.nbm-members-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

/* Photo */
.nbm-col-photo {
    width: 68px;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
.nbm-headshot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.nbm-no-photo {
    display: inline-block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e2e8f0;
    vertical-align: middle;
}

/* Name */
.nbm-col-name { font-weight: 500; }

.nbm-col-name a {
    color: inherit;
    text-decoration: none;
}
.nbm-col-name a:hover { text-decoration: underline; }

.nbm-subcommittee {
    display: block;
    font-size: 0.82em;
    color: var(--nbm-text-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* Role */
.nbm-col-role { font-weight: 600; }

/* Class */
.nbm-col-class {
    text-align: center;
    font-size: 0.88em;
    color: #555;
}

/* Voting status */
.nbm-col-voting {
    font-size: 0.82em;
    color: var(--nbm-text-muted);
}


/* Empty state */
.nbm-no-members,
.nbm-no-sections {
    color: var(--nbm-text-muted);
    font-style: italic;
}

/* ----------------------------------------------------------
   Headshot shape overrides (nbm-headshot-square)
   ---------------------------------------------------------- */
.nbm-headshot-square .nbm-headshot,
.nbm-headshot-square .nbm-no-photo {
    border-radius: 4px;
}
.nbm-headshot-square .nbm-grid-photo-link,
.nbm-headshot-square .nbm-grid-photo-link img,
.nbm-headshot-square .nbm-grid-no-photo,
.nbm-headshot-square .nbm-card-photo a,
.nbm-headshot-square .nbm-card-headshot {
    border-radius: 4px;
}

/* ----------------------------------------------------------
   Members grid (display_style="grid")
   ---------------------------------------------------------- */
.nbm-members-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
    gap: 1.5rem 1rem;
    margin-bottom: 1rem;
}

.nbm-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.nbm-grid-photo-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.6rem;
    line-height: 0;
}
.nbm-grid-photo-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    transition: opacity 0.2s;
}
.nbm-grid-photo-link:hover img { opacity: 0.85; }

.nbm-grid-no-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e2e8f0;
}

.nbm-grid-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
}

.nbm-grid-name {
    font-size: 0.82em;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}
.nbm-grid-name:hover { text-decoration: underline; }

.nbm-grid-role {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nbm-accent);
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.nbm-grid-class {
    font-size: 0.72em;
    color: var(--nbm-text-muted);
    background: var(--nbm-bg-header);
    padding: 0 4px;
    border-radius: 3px;
}

/* Non-voting badges in grid */
.nbm-grid-badge {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
}
.nbm-grid-badge-exofficio {
    background: #eef2ff;
    color: #3730a3;
}
.nbm-grid-badge-support {
    background: #f0fdf4;
    color: #166534;
}

/* ----------------------------------------------------------
   Member card (natas-bm/member block)
   ---------------------------------------------------------- */
.nbm-member-card {
    text-align: center;
    max-width: 260px;
    margin: 0 auto;
}

.nbm-card-photo {
    margin-bottom: 0.85rem;
}
.nbm-card-photo a {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}
.nbm-card-headshot {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.nbm-card-photo a:hover .nbm-card-headshot { opacity: 0.85; }

.nbm-card-name {
    margin: 0 0 0.35rem;
    font-size: 1.05em;
    line-height: 1.3;
}
.nbm-card-name a {
    color: inherit;
    text-decoration: none;
}
.nbm-card-name a:hover { text-decoration: underline; }

.nbm-card-roles {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.82em;
    color: var(--nbm-text-muted);
    line-height: 1.5;
}
.nbm-card-role-row + .nbm-card-role-row {
    margin-top: 0.2rem;
}
.nbm-card-role {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.03em;
    color: var(--nbm-accent);
}
.nbm-card-section {
    display: block;
}
.nbm-card-class {
    display: inline-block;
    font-size: 0.8em;
    background: var(--nbm-bg-header);
    padding: 0 5px;
    border-radius: 3px;
    margin-top: 1px;
}

.nbm-card-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    font-size: 0.8em;
}
.nbm-card-linkedin,
.nbm-card-email {
    color: var(--nbm-accent);
    text-decoration: none;
}
.nbm-card-linkedin:hover,
.nbm-card-email:hover { text-decoration: underline; }

.nbm-card-bio {
    font-size: 0.88em;
    color: #555;
    margin-top: 0.75rem;
    text-align: left;
    line-height: 1.6;
}
.nbm-card-bio p:last-child { margin-bottom: 0; }

/* Empty / error states */
.nbm-block-empty {
    color: var(--nbm-text-muted);
    font-style: italic;
    font-size: 0.9em;
}

/* ----------------------------------------------------------
   Single board_member page
   ---------------------------------------------------------- */
.nbm-single-member-page {
    padding: 2rem 1rem;
}
.nbm-single-inner {
    max-width: 680px;
    margin: 0 auto;
}

/* Header: name + divider + primary role */
.nbm-single-header {
    margin-bottom: 1.5rem;
}

.nbm-single-name {
    margin: 0 0 0.5rem;
    font-size: 2em;
    line-height: 1.2;
}

.nbm-single-divider {
    border: none;
    border-top: 2px solid var(--nbm-border);
    margin: 0.5rem 0;
}

.nbm-single-primary-role {
    margin: 0.4rem 0 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--nbm-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Photo block */
.nbm-single-photo {
    margin-bottom: 1.5rem;
}
.nbm-single-headshot {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.nbm-headshot-circle .nbm-single-headshot {
    border-radius: 50%;
}
.nbm-single-caption {
    margin: 0.5rem 0 0;
    font-size: 0.88em;
    color: var(--nbm-text-muted);
    font-style: italic;
    text-align: center;
}

/* Membership list */
.nbm-single-roles {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.nbm-single-role-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid var(--nbm-border);
    font-size: 0.92em;
}
.nbm-single-role-row:first-child { border-top: 1px solid var(--nbm-border); }

.nbm-single-section {
    font-weight: 600;
    color: var(--nbm-accent);
}
.nbm-single-role-label {
    font-style: italic;
    color: #555;
}
.nbm-single-class {
    font-size: 0.85em;
    color: var(--nbm-text-muted);
    background: var(--nbm-bg-header);
    padding: 1px 6px;
    border-radius: 3px;
}

/* Contact links */
.nbm-single-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9em;
}
.nbm-single-linkedin,
.nbm-single-email {
    color: var(--nbm-accent);
    text-decoration: none;
}
.nbm-single-linkedin::before { content: '↗ '; }
.nbm-single-email::before    { content: '✉ '; }
.nbm-single-linkedin:hover,
.nbm-single-email:hover { text-decoration: underline; }

/* Bio */
.nbm-single-bio {
    border-top: 2px solid var(--nbm-border);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.95em;
    line-height: 1.7;
}

/* Back link */
.nbm-single-back {
    margin-top: 2rem;
    font-size: 0.9em;
}
.nbm-single-back a {
    color: var(--nbm-text-muted);
    text-decoration: none;
}
.nbm-single-back a:hover { text-decoration: underline; }


/* ----------------------------------------------------------
   Responsive: grid columns cap on narrow screens
   ---------------------------------------------------------- */
@media ( max-width: 480px ) {
    .nbm-members-grid {
        grid-template-columns: repeat( 2, 1fr ) !important;
    }
}

/* ----------------------------------------------------------
   Responsive: hide less-critical columns on narrow screens
   ---------------------------------------------------------- */
@media ( max-width: 640px ) {
    .nbm-col-class,
    .nbm-col-voting {
        display: none;
    }
    .nbm-col-photo {
        width: 48px;
    }
    .nbm-headshot,
    .nbm-no-photo {
        width: 36px;
        height: 36px;
    }
}