/* ============================================================
   AUTHOR DIRECTORY PAGE
   Namespace : author-directory-
   Tokens    : Global CSS variables (color, typography, spacing)
   Mobile-first — base rules target mobile, enhanced at breakpoints below.
   ============================================================ */

.author-directory {
    font-family: var(--font-sans);
    background: var(--page-bg);
    color: var(--text-dark);
}

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────────── */
.author-directory-breadcrumb {
    background: var(--white);
    border-bottom: 1px solid var(--card-border);
    padding: 0.75rem 1.25rem;
}
.author-directory-breadcrumb-inner {
    max-width: 80rem;
    margin: 0 auto;
}
.author-directory-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.author-directory-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.author-directory-breadcrumb-link {
    font-size: var(--text-xs);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    text-decoration: none;
    line-height: var(--lh-normal);
}
.author-directory-breadcrumb-link:hover {
    color: var(--navy);
    text-decoration: underline;
}
.author-directory-breadcrumb-separator {
    display: flex;
    color: var(--text-muted);
}
.author-directory-breadcrumb-separator svg {
    width: 0.875rem;
    height: 0.875rem;
}
.author-directory-breadcrumb-current {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-dark);
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT — sidebar (desktop) + mobile dropdown nav + content
───────────────────────────────────────────────────────────── */
.author-directory-layout {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
}
.author-directory-content {
    min-width: 0;
}

/* Desktop sidebar — hidden on mobile/tablet */
.author-directory-sidebar {
    display: none;
}

/* Mobile/tablet fixed dropdown nav — hidden on desktop */
.author-directory-mobile-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    background: linear-gradient(135deg, var(--navy-gradient-1) 0%, var(--navy) 100%);
    margin: 0 -1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 20px rgba(13,36,98,0.22), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.author-directory-mobile-nav-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: none;
    border: none;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--fw-extrabold);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    transition: color 0.15s ease;
}
.author-directory-mobile-nav-trigger:hover {
    color: var(--white);
}
.author-directory-mobile-nav-trigger-label {
    flex: 1;
    text-align: left;
}
.author-directory-mobile-nav-trigger svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.7);
    transition: transform 0.25s ease, stroke 0.15s ease;
}
.author-directory-mobile-nav-trigger:hover svg {
    stroke: var(--white);
}
.author-directory-mobile-nav-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.author-directory-mobile-nav-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0.375rem 0.75rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.08);
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.author-directory-mobile-nav-menu::-webkit-scrollbar { width: 3px; }
.author-directory-mobile-nav-menu::-webkit-scrollbar-track { background: transparent; }
.author-directory-mobile-nav-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }
.author-directory-mobile-nav-menu.is-open {
    display: block;
}
.author-directory-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin: 0.125rem 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    border-radius: 0.375rem;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.author-directory-mobile-nav-link::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.author-directory-mobile-nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    border-left-color: rgba(255,255,255,0.3);
}
.author-directory-mobile-nav-link:hover::before {
    background: rgba(255,255,255,0.7);
}
.author-directory-mobile-nav-link.active {
    background: rgba(255,255,255,0.12);
    color: var(--white);
    font-weight: var(--fw-semibold);
    border-left-color: var(--av-teal, #00BCD4);
}
.author-directory-mobile-nav-link.active::before {
    background: var(--av-teal, #00BCD4);
}

/* ─────────────────────────────────────────────────────────────
   HERO — clean, minimal, no gradient
───────────────────────────────────────────────────────────── */
.author-directory-hero {
    text-align: center;
    padding: 1.75rem 0 2rem;
    margin: 0 auto;
}
.author-directory-title {
    font-size: clamp(1.125rem, 5vw, var(--text-3xl));
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    color: var(--navy);
    text-transform: uppercase;
    white-space: normal;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   SECTIONS + GRID
───────────────────────────────────────────────────────────── */
.author-directory-section {
    padding: 0 0 3rem;
    scroll-margin-top: 4.5rem;
}
.author-directory-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 0 1.75rem;
}
.author-directory-section-heading::before,
.author-directory-section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--blue);
}
.author-directory-section-title {
    font-size: var(--text-base);
    font-weight: var(--fw-extrabold);
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.author-directory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────
   AUTHOR CARD — modern vertical profile card
───────────────────────────────────────────────────────────── */
.author-directory-card {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-left: 3px solid transparent;
    border-radius: 1rem;
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    font-family: var(--font-sans);
    box-shadow: 0 1px 2px rgba(26,26,48,0.04), 0 1px 6px rgba(26,26,48,0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.author-directory-card:hover:not(:disabled),
.author-directory-card:focus-visible:not(:disabled) {
    border-color: var(--card-border);
    border-left-color: var(--av-teal);
    box-shadow: 0 4px 10px rgba(26,26,48,0.06), 0 12px 24px rgba(26,26,48,0.09);
    transform: translateY(-2px);
}
.author-directory-card:focus-visible {
    outline: 2px solid var(--av-teal);
    outline-offset: 2px;
}
.author-directory-card--disabled {
    cursor: default;
    opacity: 0.6;
}
.author-directory-card-avatar {
    position: relative;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tint-teal);
    box-shadow: 0 0 0 1px var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease;
}
.author-directory-card:hover:not(:disabled) .author-directory-card-avatar {
    box-shadow: 0 0 0 1px var(--av-teal);
}
.author-directory-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-directory-card-initials {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--text-teal-dark);
}
.author-directory-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}
.author-directory-card-name {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--text-dark);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.author-directory-card-desig {
    font-size: var(--text-sm);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.author-directory-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--av-teal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: gap 0.2s ease;
}
.author-directory-card-more::after {
    content: '\2192';
}
.author-directory-card:hover:not(:disabled) .author-directory-card-more {
    gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   BIO MODAL — reuses the shared .modal-overlay/.modal/.modal-header/
   .modal-body classes from assets/css/components.css.
───────────────────────────────────────────────────────────── */
.author-directory-modal {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - var(--header-height) - 1.5rem);
    /* Unlike the shared .modal (which scrolls as one box), this modal only
       scrolls its .modal-body — the header stays fixed and is allowed to
       overflow (overflow: visible) so the floating avatar can overlap its
       top edge without being clipped or breaking scroll. */
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.author-directory-modal .modal-header {
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    background: var(--blue);
    border-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    padding: 1rem 2.75rem 1rem 6rem;
    min-height: 5.25rem;
}
.author-directory-modal .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* The outer modal uses overflow: visible (so the floating avatar can
       poke out), which means it never clips its children to its own
       rounded corners — round the body's bottom corners explicitly so
       they don't render as sharp squares. */
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    scrollbar-width: thin;
    scrollbar-color: var(--blue-light) transparent;
}
.author-directory-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}
.author-directory-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.author-directory-modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--blue-light);
    border-radius: 1rem;
}
.author-directory-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
}
.author-directory-modal-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}
.author-directory-modal-avatar {
    position: absolute;
    top: -0.25rem;
    left: -0.75rem;
    flex-shrink: 0;
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--white);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--blue), 0 6px 16px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.author-directory-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-directory-modal-initials {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--text-teal-dark);
}
.author-directory-modal-headtext {
    min-width: 0;
}
.author-directory-modal .modal-title {
    font-size: var(--text-lg);
    color: var(--white);
}
.author-directory-modal-desig {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: rgba(255,255,255,0.85);
    margin: 0.25rem 0 0;
}
.author-directory-modal .modal-close {
    color: var(--white);
}
.author-directory-modal .modal-close:hover {
    background: rgba(255,255,255,0.16);
}
.author-directory-modal .modal-body {
    margin-left: 0;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    border-left: none;
}
.author-directory-modal-bio p {
    font-size: var(--text-sm);
    font-weight: var(--fw-normal);
    line-height: var(--lh-loose);
    color: var(--text-mid);
    text-align: justify;
    margin: 0 0 1.125rem;
}
.author-directory-modal-bio p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — mobile-first enhancements
───────────────────────────────────────────────────────────── */

/* ── Mobile only (< 640px) ─────────────────────────────────── */
@media (max-width: 639px) {
    /* Push modal overlay below fixed site header so header never covers modal */
    .author-directory-modal-overlay {
        padding-top: calc(var(--header-height) + 0.5rem);
        align-items: flex-start;
    }

    /* Section scroll offset: header (64px) + mobile sticky nav (~50px) */
    .author-directory-section {
        scroll-margin-top: calc(var(--header-height) + 3.25rem);
    }
}

@media (min-width: 640px) {
    .author-directory-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Restore centered overlay alignment on tablet+ */
    .author-directory-modal-overlay {
        padding-top: var(--sp-4, 1rem);
        align-items: center;
    }

    /* Tablet modal — 80vw, full avatar, full header padding */
    .author-directory-modal {
        max-width: 80vw;
        max-height: 90vh;
    }

    /* Tablet section scroll offset: header (64px) + mobile nav (~50px) */
    .author-directory-section {
        scroll-margin-top: calc(var(--header-height) + 3.25rem);
    }
    .author-directory-modal .modal-header {
        padding: 1.5rem 1.75rem 1.5rem 8.5rem;
        min-height: 7.5rem;
    }
    .author-directory-modal-avatar {
        left: -1.25rem;
        width: 8rem;
        height: 8rem;
        border: 4px solid var(--white);
        box-shadow: 0 0 0 4px var(--blue), 0 6px 16px rgba(0,0,0,0.25);
    }
    .author-directory-modal .modal-title {
        font-size: var(--text-xl);
    }
    .author-directory-modal .modal-body {
        margin-left: 1.5rem;
        padding: 1.75rem 2rem 1.75rem 3rem;
        border-left: 2.5rem solid var(--blue-light);
    }
}

@media (min-width: 1024px) {
    /* Desktop modal — restore original narrower width */
    .author-directory-modal {
        max-width: 65vw;
    }

    .author-directory-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
        padding: 1.75rem 1.25rem 3rem;
    }

    .author-directory-hero {
        padding: 0 0 2.25rem;
    }

    /* Desktop section scroll offset: header only */
    .author-directory-section {
        scroll-margin-top: calc(var(--header-height) + 1rem);
    }

    /* Sidebar takes over from the mobile dropdown nav */
    .author-directory-mobile-nav {
        display: none;
    }
    .author-directory-sidebar {
        display: block;
        flex: 0 0 18rem;
        position: sticky;
        top: var(--header-height);
        align-self: flex-start;
        height: calc(100vh - var(--header-height));
    }
    .author-directory-sidebar-inner {
        background: var(--sidebar-dark);
        border-radius: 1rem 0 1rem 0;
        padding: 1.5rem 1.25rem;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
    }
    .author-directory-sidebar-inner::-webkit-scrollbar {
        display: none;
    }
    .author-directory-sidebar-title {
        font-size: var(--text-sm);
        font-weight: var(--fw-bold);
        color: var(--white);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin: 0 -1.25rem 1rem;
        padding: 0 1.25rem 0.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .author-directory-sidebar-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .author-directory-sidebar-link {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--fw-medium);
        color: rgba(255,255,255,0.72);
        text-decoration: none;
        padding: 0.5rem 0.625rem;
        border-radius: 0.5rem;
        border-left: 2px solid transparent;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .author-directory-sidebar-link:hover {
        color: var(--white);
        background: rgba(255,255,255,0.06);
    }
    .author-directory-sidebar-link.active {
        color: var(--white);
        background: rgba(255,255,255,0.10);
        border-left-color: var(--av-teal);
        font-weight: var(--fw-semibold);
    }

    .author-directory-content {
        flex: 1;
        min-width: 0;
    }
    .author-directory-hero {
        text-align: center;
        margin: 0 auto;
        padding: 0 0 2.25rem;
    }
    .author-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}