/* CLE People listing + detail styling.
   Tokens: navy #003366, gold #CC9900. Font 'Muli' — the webfont the hkust base
   theme already self-hosts + loads site-wide (css/fonts/muli/css/muli.css). The
   post-2020 rename is "Mulish", which is NOT loaded here; using that name fell
   back to sans-serif. Match the base theme: 'Muli'. Self-contained otherwise. */

:root {
    --cle-people-navy: var(--cle-primary, #003366);
    --cle-people-gold: var(--cle-secondary-light, #cc9900);
    --cle-people-font: "Muli", "Microsoft JhengHei", sans-serif;
    /* Single control height shared by the search field and the category chips so
     they line up on one row regardless of their own padding/font metrics. */
    --cle-people-control-h: 46px;
}

/* The global theme (mtpcbuild color_scheme/blue.css) styles bare `button`
   selectors — background, padding, letter-spacing, and a `::after { content:
   " \2192" }` arrow. Those leak into the directory's tabs and category chips,
   which never declare `content`, so each one rendered a stray "→". Reset the
   pseudo-element once here; per-control styling follows below. */
.cle-people-directory__tab::after,
.cle-people-directory [role="tablist"] button::after,
.cle-people-filter__chip::after {
    content: none !important;
    display: none !important;
}

/* Same origin, hover half: `button:hover { background-color: var(--cle-secondary);
   transform: translateY(-2px) }` painted a solid gold slab behind every tab and
   unselected chip and lifted it 2px; hover color was also forced to white, which
   made unselected chips unreadable on a light wash. Neutralize those here; each
   control defines its own hover feedback further down. */
.cle-people-directory__tab:hover,
.cle-people-directory__tab:focus,
.cle-people-filter__chip:hover,
.cle-people-filter__chip:focus,
.layout-content .cle-people-filter__chip:hover,
.layout-content .cle-people-filter__chip:focus {
    background-color: transparent;
    transform: none;
    color: var(--cle-people-navy);
}

/* Keep form labels/status available to assistive technology without adding
   another visual line to the compact directory controls. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Directory root + detail reading column follow the site's 1280px gutters.
   Filter / Faculty .view-content live inside the directory, so they stay 100%. */
.cle-people-directory,
.cle-people-detail__hero-inner,
.cle-people-detail__body {
    width: calc(100% - 80px);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
    .cle-people-directory,
    .cle-people-detail__hero-inner,
    .cle-people-detail__body {
        width: calc(100% - 60px);
    }
}

@media only screen and (max-width: 767px) {
    .cle-people-directory,
    .cle-people-detail__hero-inner,
    .cle-people-detail__body {
        width: calc(100% - 30px);
    }
}

/* ==========================================================================
   Progressive enhancement — root class is the only visible transition
   ========================================================================== */

/* Unenhanced: hide inert tab controls + shared filter; keep both datasets. */
.cle-people-directory--unenhanced [data-cle-people-tabs],
.cle-people-directory--unenhanced [data-cle-people-controls] {
    display: none !important;
}

.cle-people-directory--unenhanced [data-cle-people-fallback-heading],
.cle-people-directory--unenhanced [data-cle-people-panel] {
    display: block !important;
    visibility: visible !important;
}

.cle-people-directory--unenhanced [data-cle-people-panel][hidden],
.cle-people-directory--unenhanced [data-cle-people-fallback-heading][hidden] {
    display: block !important;
}

/* Enhanced: show controls; derive panel/chip/fallback visibility from state. */
.cle-people-directory--enhanced [data-cle-people-tabs],
.cle-people-directory--enhanced [data-cle-people-controls] {
    display: block;
}

.cle-people-directory--enhanced [data-cle-people-fallback-heading] {
    display: none !important;
}

.cle-people-directory--enhanced
    [data-cle-people-panel][data-cle-people-panel-active="false"] {
    display: none !important;
}

.cle-people-directory--enhanced
    [data-cle-people-panel][data-cle-people-panel-active="true"] {
    display: block;
}

.cle-people-directory--enhanced
    .cle-people-filter__chips[data-cle-people-chips-visible="false"],
.cle-people-directory--enhanced .cle-people-filter__chips[hidden] {
    display: none !important;
}

/* ==========================================================================
   Directory shell: tabs, search, chips
   ========================================================================== */

.cle-people-directory {
    font-family: var(--cle-people-font);
    color: var(--cle-people-navy);
}

.cle-people-directory__tablist,
.cle-people-directory [role="tablist"] {
    display: inline-flex;
    border-bottom: 2px solid #ccd5df;
    margin: 0 0 0.75rem;
}

/* `background`/`letter-spacing` reset the global bare-`button` rule; the tab is
   a text control, not a themed button. */
.cle-people-directory__tab {
    border: 0;
    border-bottom: 4px solid transparent;
    margin-bottom: -3px;
    padding: 14px 26px 12px;
    background: transparent;
    color: #35516c;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    border-radius: 0;
    cursor: pointer;
}

.cle-people-directory__tab[aria-selected="true"] {
    border-bottom-color: var(--cle-people-gold);
    color: var(--cle-people-navy);
}

/* Hover feedback for an inactive tab is a text-colour shift plus a muted rule,
   so the gold underline stays the unambiguous marker of the selected tab. */
.cle-people-directory__tab:hover {
    color: var(--cle-people-navy);
}

.cle-people-directory__tab[aria-selected="false"]:hover {
    border-bottom-color: #ccd5df;
}

.cle-people-directory__tab:focus-visible {
    outline: 2px solid var(--cle-people-gold);
    outline-offset: 2px;
}

/* Chips and search share one row: chips take the free space on the left, search
   keeps its intrinsic width on the right. The search input precedes the chip
   group in the DOM (label/input/chips reading order), so `order` puts it last
   visually; `nowrap` keeps the row intact while the chip group wraps internally
   when the categories overflow. */
.cle-people-filter {
    font-family: var(--cle-people-font);
    width: 100%;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.75rem 1.1rem;
    box-sizing: border-box;
}

/* Scoped under .layout-content to outrank the global form-element rules, which
   otherwise force content-box here and made the field 2px taller than the chips
   (46px height + 2 × 1px border). */
.layout-content .cle-people-filter__search,
.cle-people-filter__search {
    order: 2;
    flex: 0 1 300px;
    width: auto;
    max-width: 300px;
    min-width: 0;
    height: var(--cle-people-control-h);
    min-height: var(--cle-people-control-h);
    margin-left: 0;
    padding: 0 1rem;
    border: 1px solid #afbdca;
    border-radius: 999px;
    background: #fff;
    color: #68737d;
    font: inherit;
    font-size: 16px;
    line-height: normal;
    box-sizing: border-box;
}

.layout-content .cle-people-filter__language,
.cle-people-filter__language,
.layout-content .cle-people-filter__position,
.cle-people-filter__position {
    flex: 0 1 160px;
    width: auto;
    max-width: 160px;
    min-width: 0;
    height: var(--cle-people-control-h);
    min-height: var(--cle-people-control-h);
    margin: 0;
    /* Extra right padding + custom caret so the chevron sits inset from the pill edge. */
    padding: 0 2.1rem 0 0.85rem;
    border: 1px solid #afbdca;
    border-radius: 999px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%2368737d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px 8px;
    color: #68737d;
    font: inherit;
    font-size: 16px;
    line-height: normal;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.layout-content .cle-people-filter__language,
.cle-people-filter__language {
    order: 3;
}

.layout-content .cle-people-filter__position,
.cle-people-filter__position {
    order: 4;
}

.layout-content .cle-people-filter__language::-ms-expand,
.layout-content .cle-people-filter__position::-ms-expand {
    display: none;
}

.cle-people-filter__chips {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    order: 1;
}

/* Height is pinned to the shared control height so chips and the search field
   match; `letter-spacing`/`border-radius` also reset the global button rule. */
.cle-people-filter__chip {
    display: inline-flex;
    align-items: center;
    font: inherit;
    cursor: pointer;
    height: var(--cle-people-control-h);
    padding: 0 20px;
    border: 1px solid var(--cle-people-navy);
    border-radius: 999px;
    background: #fff;
    color: var(--cle-people-navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.cle-people-filter__chip-count {
    margin-left: 0.35rem;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* Unselected chip hover: light navy wash + keep navy text (global button:hover
   otherwise leaves white-on-white). Distinct from rest, still readable. */
.cle-people-filter__chip[aria-pressed="false"]:hover,
.cle-people-filter__chip[aria-pressed="false"]:focus,
.layout-content .cle-people-filter__chip[aria-pressed="false"]:hover,
.layout-content .cle-people-filter__chip[aria-pressed="false"]:focus {
    background-color: #e8eef5;
    color: var(--cle-people-navy);
    border-color: var(--cle-people-navy);
}

.cle-people-filter__chip[aria-pressed="true"] {
    background: var(--cle-people-navy);
    color: #fff;
}

/* Selected chip keeps its navy fill + white text on hover — the transparent
   reset above is scoped loosely enough to reach it, so restore both. */
.cle-people-filter__chip[aria-pressed="true"]:hover,
.cle-people-filter__chip[aria-pressed="true"]:focus,
.layout-content .cle-people-filter__chip[aria-pressed="true"]:hover,
.layout-content .cle-people-filter__chip[aria-pressed="true"]:focus {
    background-color: var(--cle-people-navy);
    color: #fff;
}

.cle-people-filter__chip:focus-visible {
    outline: 2px solid var(--cle-people-gold);
    outline-offset: 2px;
}

.cle-people-filter__empty {
    flex-basis: 100%;
    color: #4a5568;
    font-style: italic;
    margin: 0;
}

/* Below the tablet breakpoint the single row stops fitting: search is full
   width on the first row; Language and Position sit 50/50 on the second;
   chips wrap to the following row. Keep the `.layout-content` scope on the
   search so these overrides beat the desktop rule above. */
@media only screen and (max-width: 900px) {
    .cle-people-filter {
        flex-wrap: wrap;
    }

    .layout-content .cle-people-filter__search,
    .cle-people-filter__search {
        order: -3;
        flex: 1 1 100%;
        width: auto;
        max-width: none;
        margin-left: 0;
    }

    .layout-content .cle-people-filter__language,
    .cle-people-filter__language {
        order: -2;
        flex: 1 1 calc(50% - 0.5rem);
        max-width: none;
    }

    .layout-content .cle-people-filter__position,
    .cle-people-filter__position {
        order: -1;
        flex: 1 1 calc(50% - 0.5rem);
        max-width: none;
    }

    .cle-people-filter__chips {
        flex: 1 1 100%;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --cle-people-control-h: 42px;
    }

    .cle-people-directory__tab {
        padding: 12px 18px 10px;
        font-size: 17px;
    }

    .cle-people-filter__chip {
        padding: 0 16px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Shared people H2 scale (directory groups + profile sections)
   ========================================================================== */

.cle-people-group,
.cle-people-detail__heading,
.cle-people-directory [data-cle-people-fallback-heading] {
    font-family: var(--cle-people-font);
    margin: 1.75rem 0 1rem;
    padding-left: 16px;
    border-left: 5px solid var(--cle-people-gold);
    color: var(--cle-people-navy);
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Profile section H2s follow the site convention (gold left border) inherited
   from the shared rule above — the earlier grey bottom rule replaced it and
   made these headings the only H2s on the site without the gold bar. Only the
   top margin is reset, since the heading opens its section. */
.cle-people-detail__heading {
    margin-top: 0;
}

@media only screen and (max-width: 999px) {
    .cle-people-group,
    .cle-people-detail__heading,
    .cle-people-directory [data-cle-people-fallback-heading] {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .cle-people-group,
    .cle-people-detail__heading,
    .cle-people-directory [data-cle-people-fallback-heading] {
        font-size: 27px;
    }
}

/* ==========================================================================
   Faculty compact horizontal cards + fixed column grid
   ========================================================================== */

/* Faculty compact horizontal cards — exactly 3 / 2 / 1 equal columns.
   Group H2s span the full row. minmax(0,…) prevents min-content blowouts. */
.view-cle-people-roster .view-content,
.cle-people-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

@media only screen and (max-width: 999px) and (min-width: 768px) {
    .view-cle-people-roster .view-content,
    .cle-people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .view-cle-people-roster .view-content,
    .cle-people-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.view-cle-people-roster .view-content > .cle-people-group,
.view-cle-people-roster .view-content > [data-cle-people-group],
.view-cle-people-roster .view-content > h2 {
    grid-column: 1 / -1;
}

/* `display: flex` lets the single link child stretch to the card's min-height,
   so the hover bar sits on the card's real bottom edge with no dead strip. */
.cle-people-card {
    font-family: var(--cle-people-font);
    display: flex;
    min-height: 108px;
    min-width: 0;
    background-color: #ffffff;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(10, 39, 64, 0.11);
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.cle-people-card__link {
    flex: 1 1 auto;
}

.cle-people-card:not(.cle-people-card--static):hover,
.cle-people-card:not(.cle-people-card--static):focus-within {
    box-shadow: 0 8px 22px rgba(0, 51, 102, 0.16);
    transform: translateY(-1px);
}

/* Hover underline belongs to the CARD, not the link. The global theme's
   `.layout-content a` paints its gold gradient at the anchor's own background
   box, which ends under the photo — so the bar appeared mid-card. Draw it here
   instead, spanning the full card width at its bottom edge. Same growth
   convention the global theme uses for `.cle-courses-list .views-row`. */
.cle-people-card:not(.cle-people-card--static) {
    background-image: linear-gradient(
        var(--cle-people-gold),
        var(--cle-people-gold)
    );
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background-size 0.3s ease;
}

.cle-people-card:not(.cle-people-card--static):hover,
.cle-people-card:not(.cle-people-card--static):focus-within {
    background-size: 100% 2px;
}

/* `.layout-content a` (0,1,1) outranks a bare `.cle-people-card__link` (0,1,0),
   so its `padding-bottom: 2px` collapsed this element's 18px padding — the link
   measured 88px inside a 108px card. Scoping under `.layout-content` wins on
   specificity and restores the intended box; the gradient is suppressed here
   because the card draws it above. */
/* `height: auto`, not `100%`: a percentage height here resolves against the
   card's content-derived height, which cancels the flex stretch and left the
   link 4px short of the card. */
.layout-content .cle-people-card__link,
.cle-people-card__link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    height: auto;
    padding: 18px;
    color: var(--cle-people-navy);
    text-decoration: none;
    background-image: none;
    box-sizing: border-box;
}

.layout-content .cle-people-card__link:hover,
.layout-content .cle-people-card__link:focus {
    color: var(--cle-people-navy);
    background-image: none;
    background-size: auto;
}

.cle-people-card__photo {
    position: relative;
    flex: 0 0 68px;
    width: 68px;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(145deg, #45c8ee, #d7e9ef);
}

.cle-people-card__photo img,
.cle-people-card__silhouette {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    /* Fill the 3/4 frame; top-align so foreheads stay in view. */
    object-fit: cover;
    object-position: center top;
}

.cle-people-card__body {
    min-width: 0;
    padding: 3px 0 0;
}

.cle-people-card--text-only .cle-people-card__body {
    padding: 3px 0 0;
}

.cle-people-card__name {
    margin: 0 0 8px;
    padding-left: 9px;
    border-left: 4px solid var(--cle-people-gold);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #002f5d;
}

.cle-people-card__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #68737d;
}

.cle-people-card__languages {
    margin: 0.35rem 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #4a5568;
}

/* ==========================================================================
   Staff table
   ========================================================================== */

.cle-people-staff-attachment {
    font-family: var(--cle-people-font);
}

.cle-people-staff-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #fff;
}

/* `margin: 0` overrides the global `table { margin-bottom: 28px }`, which sat
   INSIDE this bordered wrapper and left a 28px empty strip under the last row —
   most obvious when a search narrows the table to a couple of rows.
   min-width tracks the 16px body font: the columns need ~840px before the
   wrapper's horizontal scroll is the better answer to a narrow viewport. */
.cle-people-staff-table {
    width: 100%;
    min-width: 840px;
    margin: 0;
    border-collapse: collapse;
    font-size: 16px;
}

.cle-people-staff-table th {
    padding: 13px 14px;
    background: var(--cle-people-navy);
    color: #fff;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}

/* Row separators are drawn as border-TOP, not border-bottom. Filtering hides
   arbitrary rows via the `hidden` attribute, and `tr:last-child` still matches
   the last row in the DOM — so when that row was hidden, the last VISIBLE row
   kept its bottom border and rendered a rule dangling under the table with
   nothing below it. Anchoring the border to the top edge means no row can ever
   leave a trailing line, whichever ones are hidden. */
.cle-people-staff-table td {
    padding: 13px 14px;
    border-top: 1px solid #e3e8ed;
    color: #354b60;
}

/* The first row needs no separator — the navy header already bounds it. */
.cle-people-staff-table tbody tr:first-child td {
    border-top: 0;
}

/* `inline-block` is what makes the gold hover bar visible at all. The name cell
   renders the field INSIDE the anchor, so a `display: inline` anchor wrapping a
   block `div.field__item` splits into three inline fragments — 0×0, the block,
   0×0 — and an inline box paints its background on its own fragments, never on
   the block child. The gradient animated into two zero-width fragments: correct
   `background-size`, nothing on screen. One inline-block box gives it somewhere
   to paint. Phone/Email put the div outside the anchor, so theirs already had a
   single clean inline box; `.cle-people-detail__contact-val > *` solves the same
   mismatch on the profile page. */
.cle-people-staff-table td:first-child a,
.cle-people-staff-row__name a {
    display: inline-block;
    color: #005ea8;
    font-weight: 700;
    text-decoration: none;
}

/* Collapse the wrapper so the bar tracks the text width, not the cell width. */
.cle-people-staff-row__name a > .field,
.cle-people-staff-row__name a > .field__item {
    display: inline;
}

/* Name hover matches Phone/Email: same gold text, same growing gold underline.
   It previously added `text-decoration: underline` on top of the theme's
   gradient bar (two underlines at once) and held its blue, because this
   selector's (0,2,2) base rule outranks the global `.layout-content a:hover`
   (0,2,1) that recolours every other link in the row. `--cle-secondary` — the
   global link-hover colour — not the brighter `--cle-people-gold`, so all three
   cells land on the same value. */
.cle-people-staff-table td:first-child a:hover,
.cle-people-staff-table td:first-child a:focus,
.cle-people-staff-row__name a:hover,
.cle-people-staff-row__name a:focus {
    color: var(--cle-secondary, #996600);
    text-decoration: none;
    background-size: 100% 2px;
}

/* ==========================================================================
   Detail page
   ========================================================================== */

.cle-people-detail {
    font-family: var(--cle-people-font);
    color: var(--cle-people-navy);
}

/* Full-bleed navy hero band; inner content capped to the reading column. */
.cle-people-detail__hero {
    background: var(--cle-people-navy);
    padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.cle-people-detail__hero-inner {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: flex-start;
}

.cle-people-detail__body {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.cle-people-detail__photo {
    position: relative;
    flex: 0 0 auto;
    width: clamp(150px, 26vw, 300px);
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, #45c8ee, #d7e9ef);
}

/* Photo via people_card_full (320×440 scale). CSS cover fills the stable 3/4
   frame with top alignment so shorter/wider sources no longer leave gutters
   or square bottom corners outside the rounded clip. */
.cle-people-detail__photo img,
.cle-people-detail__silhouette {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.cle-people-detail__identity {
    flex: 1 1 260px;
    min-width: 0;
}

.cle-people-detail__name {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #ffffff;
}

.cle-people-detail__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cle-people-gold);
    margin-bottom: 1rem;
}

.cle-people-detail__section {
    margin: 0 0 1.75rem;
}

/* Contact now sits on the navy hero: text + links white, icons inverted white. */
.cle-people-detail__contact-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
    line-height: 1.5;
    color: #ffffff;
}

.cle-people-detail__contact-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.cle-people-detail__contact-val {
    min-width: 0;
    word-break: break-word;
}

.cle-people-detail__contact-val > *,
.cle-people-detail__contact-val .field__item {
    display: inline;
    margin: 0;
}

/* Scoped under __hero to outrank the base theme's `.layout-content a`
   (navy, same 0,1,1 specificity) — otherwise the email link renders
   navy-on-navy and vanishes. Also neutralize its underline/background. */
.cle-people-detail__hero .cle-people-detail__contact-row a {
    color: #ffffff;
    text-decoration: none;
    background-image: none;
    padding-bottom: 0;
}
.cle-people-detail__hero .cle-people-detail__contact-row a:hover,
.cle-people-detail__hero .cle-people-detail__contact-row a:focus {
    color: var(--cle-people-gold);
    text-decoration: underline;
}

/* Teaching rows use the shared cle-course-row partial (cle-course-row.css). */

/* Detail hero stacks photo above name on narrow viewports. */
@media only screen and (max-width: 767px) {
    .cle-people-detail__hero-inner {
        flex-direction: column;
    }
    .cle-people-detail__photo {
        width: clamp(140px, 45vw, 220px);
    }
}