/* ==========================================================================
   Trustee Directory
   --------------------------------------------------------------------------
   The site's Basepage supplies the banner, container, buttons and typography
   (Bootstrap). This file only styles what the site doesn't have: the card
   grid, the empty states and the detail layout. The tokens below are the
   only colour decisions — point them at the brand values if they need tuning.
   ========================================================================== */

.td-section,
.td-detail,
.td-contactprompt {
    --td-ink-soft: #55535f;
    --td-brand: #2f2a6b;
    --td-line: #e2e0e8;
    --td-surface: #f6f5f9;
    --td-radius: 6px;
}

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

/* ---------- listing sections ---------- */

.td-section { padding: 0 0 4rem; }

.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.td-empty {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--td-line);
    border-radius: var(--td-radius);
    color: var(--td-ink-soft);
    text-align: center;
}

/* ---------- cards ---------- */

.td-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius);
    background: #fff;
}

.td-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    margin-bottom: 1rem;
    border-radius: var(--td-radius);
    background: var(--td-surface);
    overflow: hidden;
}

.td-card--person .td-card__image { border-radius: 50%; }
.td-card__image img { max-width: 100%; height: auto; object-fit: cover; }
.td-card__initials { font-weight: 700; color: var(--td-brand); letter-spacing: 0.05em; }

.td-card__body { flex: 1 1 auto; }
.td-card__title { margin: 0 0 0.5rem; font-size: 1.15rem; line-height: 1.3; }
.td-card__title a { text-decoration: none; }
.td-card__title a:hover, .td-card__title a:focus { text-decoration: underline; }
.td-card__summary { margin: 0; color: var(--td-ink-soft); }

.td-card__cta { margin: 1rem 0 0; font-weight: 600; }

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

.td-breadcrumb { margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--td-ink-soft); }
.td-breadcrumb span { margin: 0 0.4rem; }

.td-detail { padding-bottom: 3rem; }
.td-detail__head { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.td-detail__image { flex: 0 0 auto; border-radius: var(--td-radius); }
.td-detail--person .td-detail__image { border-radius: 50%; object-fit: cover; }
.td-detail__title { margin: 0 0 0.5rem; }
.td-detail__lede { margin: 0; font-size: 1.1rem; color: var(--td-ink-soft); max-width: 55ch; }

.td-prose { max-width: 65ch; margin-bottom: 2rem; }

.td-detail__contact { margin: 2rem 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.td-detail__back { margin-top: 2rem; }

/* ---------- contact prompt ---------- */

.td-contactprompt { max-width: 50rem; margin: 0 auto; padding-bottom: 3rem; }

/* ---------- responsive ---------- */

@media (max-width: 560px) {
    .td-detail__head { flex-direction: column; gap: 1rem; }
}