/*
 * Academy faculty directory (/academy/faculty-directory/) — archive of the CPT "faculty-member"
 * Same grid as the rest of the site: 5 columns inside the container, 16px gap, c = (100% - 64px) / 5.
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.fd-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.fd-title { margin: 0; font-size: clamp(72px, 7.222vw, 104px); }
.fd-title--md { font-size: clamp(56px, 6.111vw, 88px); }
.fd-fig { margin: 0; overflow: hidden; }
.fd-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fd-hero { padding: 48px 0 0; }

/* ── Search, sort, filters, results ─────────────────────────────────────── */
.fd-directory { padding: 32px 0 220px; }
.fd-directory.fd-directory--last { padding-bottom: 300px; } /* programmes directory: nothing after the results but the footer */ /* results → "About our faculties": 220px in the design */

.fd-bar {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           end;
}
.fd-search {
    grid-column:   1 / 5;
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       14px 8px;
    color:         var(--color-muted);
    background:    var(--color-light); /* white as in the design: the column guides do not run through the field */
    border-bottom: 1px solid rgba(14, 14, 16, .06);
    cursor:        text;
}
.fd-search:focus-within { border-bottom-color: var(--color-muted); }
.fd-search__icon { flex: 0 0 20px; }
.fd-search__input,
.fd-group__search input {
    flex:           1;
    min-width:      0;
    padding:        0;
    font:           inherit;
    line-height:    var(--line-height);
    letter-spacing: inherit; /* inputs do not inherit it: the design has -2% on the placeholder and the typed text */
    color:          var(--color-text);
    background: none;
    border:     0;
    outline:    0;
    appearance: none;
}
.fd-search__input::placeholder,
.fd-group__search input::placeholder { color: var(--color-muted); opacity: 1; }
.fd-search__input::-webkit-search-cancel-button,
.fd-group__search input::-webkit-search-cancel-button { display: none; }

.fd-filter-toggle { display: none; }
.fd-filter-toggle__label { white-space: nowrap; }

.fd-sort { grid-column: 5; display: block; background: var(--color-light); border-bottom: 1px solid rgba(14, 14, 16, .06); }
.fd-sort__select {
    display:            block;
    width:              100%;
    height:             48px;
    padding:            0 40px 0 8px;
    font:               inherit;
    color:              var(--color-text);
    background:         url("../../img/arrow-down.svg") right 8px center / 24px 24px no-repeat;
    border:             0;
    border-radius:      0;
    outline:            0;
    appearance:         none;
    -webkit-appearance: none;
    cursor:             pointer;
}

.fd-body {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           start;
    margin-top:            48px;
}

/* While the results are being loaded */
.fd-results { transition: opacity .2s ease; }
.fd-body.is-loading .fd-results { opacity: .5; pointer-events: none; }

/* Filters */
.fd-filters {
    grid-column:    1;
    display:        flex;
    flex-direction: column;
    gap:            24px;
    padding-right:  24px;
}
.fd-filters__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid rgba(14, 14, 16, .08); }
.fd-filters__title { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: var(--line-height); letter-spacing: var(--ls-tight); }
.fd-filters__reset { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.fd-filters__reset.is-active { color: var(--color-text); text-decoration: underline; }
.fd-filters__reset:hover { color: var(--color-text); }

.fd-group {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    min-width:      0;
    margin:         0;
    padding:        0 0 24px;
    border:         0;
    border-bottom:  1px solid rgba(14, 14, 16, .08);
}
.fd-group:last-of-type { padding-bottom: 0; border-bottom: 0; }
.fd-group__title { padding: 0; font-weight: var(--fw-medium); line-height: var(--line-height); letter-spacing: var(--ls-tight); float: left; width: 100%; }
.fd-group__title + * { clear: both; }
.fd-group__search {
    display:       flex;
    align-items:   center;
    gap:           8px;
    height:        32px;
    padding:       0 8px;
    color:         var(--color-muted);
    background:    var(--color-light);
    border-bottom: 1px solid rgba(14, 14, 16, .06);
}
.fd-group__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fd-group__list li[hidden] { display: none; }

.fd-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fd-check input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; pointer-events: none; }
.fd-check__box {
    flex:       0 0 16px;
    width:      16px;
    height:     16px;
    background: var(--color-light) center / 10px 10px no-repeat;
    border:     1px solid rgba(14, 14, 16, .2);
    transition: background-color var(--transition), border-color var(--transition);
}
.fd-check:hover .fd-check__box { border-color: var(--color-dark); }
.fd-check input:checked + .fd-check__box {
    background-color: var(--color-dark);
    border-color:     var(--color-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
}
.fd-check input:focus-visible + .fd-check__box { outline: 1px solid var(--color-dark); outline-offset: 2px; }
.fd-check__label { flex: 1; min-width: 0; }

/* Pop-up controls exist for the mobile sheet only */
.fd-filters__close,
.fd-filters__footer { display: none; }

/* Results */
.fd-results { grid-column: 2 / 6; min-width: 0; }
.fd-grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap:            16px;
    row-gap:               56px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.fd-card { min-width: 0; }
.fd-card__link {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    height:         420px;
    color:          inherit;
    text-decoration: none;
}
.fd-card__figure { flex: 1; min-height: 0; margin: 0; overflow: hidden; background: rgba(14, 14, 16, .04); }
.fd-card__figure .fd-img { transition: transform .6s ease; }
.fd-card__link:hover .fd-img { transform: scale(1.03); }
.fd-card__info { display: flex; flex-direction: column; gap: 24px; }
.fd-card__head { display: flex; flex-direction: column; gap: 8px; }
.fd-card__role { margin: 0; font-family: var(--font-mono); color: var(--color-muted); }
.fd-card__name { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: var(--line-height); letter-spacing: var(--ls-tight); }
.fd-card__facts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fd-card__facts li { display: flex; gap: 8px; align-items: center; }
.fd-card__facts svg { flex: 0 0 20px; }

.fd-empty { margin: 0; color: var(--color-muted); }

/* Pagination */
.fd-pagination { margin-top: 48px; }
.fd-pagination ul { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.fd-pagination__page,
.fd-pagination__arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    color:           var(--color-muted);
    text-decoration: none;
}
.fd-pagination__page.is-current { color: var(--color-text); }
.fd-pagination a:hover { color: var(--color-text); }
.fd-pagination__arrow--prev svg { rotate: 180deg; }
.fd-pagination ul > li:first-child .fd-pagination__arrow--prev { margin-right: 8px; }

/* ── About our faculties ────────────────────────────────────────────────── */
.fd-about { padding: 0 0 300px; } /* → the dark footer */
.fd-about__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    row-gap:               72px;
    align-items:           start;
}
.fd-about__head { grid-column: 1 / 6; grid-row: 1; }
.fd-about__info {
    grid-column:     1;
    grid-row:        2;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             24px;
    height:          300px;
}
.fd-about__lead { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: var(--line-height); letter-spacing: var(--ls-tight); }
.fd-about__info .btn { width: 100%; }
.fd-about__figure { grid-row: 2; height: 300px; }
.fd-about__figure--1 { grid-column: 4; }
.fd-about__figure--2 { grid-column: 5; }

/* ── Tablet / mobile ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .fd-title,
    .fd-title--md { font-size: 64px; }
    .fd-title--md { font-size: 48px; }

    .fd-hero { padding-top: 40px; }
    .fd-directory { padding: 24px 0 104px; }
    .fd-directory.fd-directory--last { padding-bottom: 140px; }

    .fd-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; } /* Filter by | Sort: 50% / 50% */
    .fd-search { grid-column: 1 / 3; grid-row: 1; padding: 14px 8px; }
    .fd-filter-toggle {
        grid-column:     1;
        grid-row:        2;
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
        height:          48px;
        width:           100%;
        padding:         0 8px;
        font:            inherit;
        letter-spacing:  inherit;
        color:           var(--color-text);
        background:      var(--color-light);
        border:          0;
        border-bottom:   1px solid rgba(14, 14, 16, .06);
        cursor:          pointer;
    }
    .fd-filter-toggle[aria-expanded="true"] { color: var(--color-light); background: var(--color-dark); border-bottom-color: var(--color-dark); }
    .fd-sort { grid-column: 2; grid-row: 2; }

    .fd-body { display: flex; flex-direction: column; align-items: stretch; gap: 32px; margin-top: 24px; }

    /* Filters = pop-up: a full-screen sheet that slides in from the left edge */
    html.is-fd-popup { overflow: hidden; }
    .fd-filters {
        position:       fixed;
        inset:          0 0 auto 0;
        height:         100vh;
        height:         100dvh; /* the visible height on phones: the bottom buttons must not hide behind the browser toolbar */
        z-index:        calc(var(--z-modal) + 2); /* above the header */
        padding:        0 24px;
        overflow-y:     auto;
        overscroll-behavior: contain;
        background:     var(--color-light);
        visibility:     hidden;
        transform:      translateX(-100%); /* opens left → right, closes right → left */
        transition:     transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
    }
    .fd-directory.is-filters-open .fd-filters { visibility: visible; transform: none; transition-delay: 0s; }
    .admin-bar .fd-filters { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); } /* the WordPress admin bar stays visible for logged-in users */
    /* The section is its own stacking context (z-index 1): lift it above the header while the pop-up is open */
    .fd-directory.is-filters-open { z-index: calc(var(--z-modal) + 2); }
    .fd-filters__bar { position: sticky; top: 0; z-index: 1; padding: 24px 0 16px; margin: 0; background: var(--color-light); }
    .fd-filters__title { margin-right: auto; }
    .fd-filters__bar .fd-filters__reset { display: none; }
    .fd-filters__close { display: flex; padding: 0; color: var(--color-text); background: none; border: 0; cursor: pointer; }
    .fd-filters__footer { display: flex; gap: 8px; position: sticky; bottom: 0; z-index: 2; margin: auto -24px 0; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--color-light); border-top: 1px solid rgba(14, 14, 16, .08); }
    .fd-filters__footer .btn { flex: 1; justify-content: center; text-align: center; cursor: pointer; }
    .fd-filters__reset--footer,
    .fd-filters__reset--footer.is-active { color: var(--color-text); text-decoration: none; background: var(--color-light); box-shadow: inset 0 0 0 1px var(--color-dark); }
    .fd-filters__reset--footer:hover { color: var(--color-text); opacity: .7; }
    .fd-results { grid-column: auto; }
    .fd-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .fd-card__link { height: 512px; }
    .fd-pagination ul { justify-content: center; }

    .fd-about { padding: 0 0 140px; }
    .fd-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 24px; }
    .fd-about__head { grid-column: 1 / 3; }
    .fd-about__info { grid-column: 1 / 3; grid-row: 2; height: auto; }
    .fd-about__figure { grid-row: 3; }
    .fd-about__figure--1 { grid-column: 1; }
    .fd-about__figure--2 { grid-column: 2; }
}

@media (max-width: 600px) {
    .admin-bar .fd-filters { top: 0; height: 100vh; height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-filters { transition: none; }
    .fd-card__figure .fd-img { transition: none; }
    .fd-card__link:hover .fd-img { transform: none; }
}