/* ARE-266: the two sections now stack instead of sitting side by side. */
.team-members {
    row-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    display: grid;
}

.team__fields {
    float: left;
    width: 300px;
    margin-left: 10px;
}

.bio__intro {
    padding: 0 !important;
}

.bio__member__img {
    width: 100px;
}

/* ARE-266: cards, three across. 3 x 241px + 2 x 16px = 754px = #content-r. */
.bio-list {
    display: grid;
    grid-template-columns: repeat(3, 241px);
    column-gap: 16px;
    grid-column-gap: 16px;
    row-gap: 2rem;
    grid-row-gap: 2rem;
    align-items: start;
}

/* ARE-266: collapse the layout table into a vertical card -- photo, name, title. */
.bio__profile,
.bio__profile tbody,
.bio__profile tr,
.bio__profile td {
    display: block;
    width: auto;
}

.bio__profile {
    width: 241px;
}

.bio__img {
    display: block;
    width: 100%;
    height: auto;
}

.bio__profile tr td:first-child {
    padding: 0;
    vertical-align: top;
}

.bio-list ul {
    margin: 0 !important;
    padding: 0 !important;
}

.bio {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 0 0 10px 0;
    list-style: none;
    list-style-type: none;
    border: 0;
    margin: 0;
}

/* ARE-266: the accordion arrows are gone. Hovering a card previews the modal's
   header band -- both use the same #F3FBFF. */
.bio .bio__intro {
    background: transparent;
    cursor: pointer;
}

/* The blue fill is hover-only. Closing the modal restores focus to the card that
   opened it (keyboard users need that), so styling :focus with the same fill
   left the card looking permanently hovered after every dismiss -- Esc, close
   button, or scrim alike. */
.bio .bio__intro:hover {
    background: #F3FBFF;
}

/* Keyboard focus is shown as a ring instead, so it never reads as "hovered"
   yet a keyboard user can still see where focus landed after dismissing.
   :focus-visible keeps the ring off the card for pointer users. */
.bio .bio__intro:focus-visible {
    outline: 2px solid #0070c0;
    outline-offset: -2px;
}

.bio__title {
    vertical-align: baseline;
    font-size: 0.813rem;
    line-height: 1.4;
    width: auto;
    padding: 12px 6px 12px 15px;
}

.bio__title span {
    cursor: pointer;
}

.bio__title span:hover {
    color: #0070c0;
}


/* ===================================================================
   ARE-266 -- bio modal
   Opened from a card by js/pages/meet-our-team/meet-our-team.js.
   =================================================================== */

.bio-modal[hidden] {
    display: none;
}

.bio-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    /* --bio-scrollbar-width is set by meet-our-team.js while the modal is open.
       The page behind is padded by the same amount to stop it shifting when the
       scrollbar is hidden; matching it here keeps the panel centred over the
       page rather than over the now-wider viewport. Falls back to 0. */
    padding-right: calc(20px + var(--bio-scrollbar-width, 0px));
    box-sizing: border-box;
    overflow-y: auto;
}

.bio-modal__scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

/* Column layout so the header stays put and only .bio-modal__body scrolls.
   The panel itself must NOT scroll -- .bio-modal__close is positioned against
   it, and an absolutely positioned child still scrolls with a scrolling
   ancestor. max-height matches the 40px top/bottom padding on .bio-modal so
   the panel always fits the viewport and never produces a second scrollbar. */
.bio-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 780px;
    max-width: 100%;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    box-sizing: border-box;
    background: #FFF;
    padding: 34px 40px 40px;
    text-align: left;
}

.bio-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

.bio-modal__close img {
    display: block;
    width: 24px;
    height: 24px;
}

/* flex: 0 0 auto -- the photo and name block keep their height and never
   compress as the bio grows. */
.bio-modal__header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
}

/* The pale band sits behind the photo, which overlaps and hangs below it. */
.bio-modal__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 145px;
    background: #F3FBFF;
}

.bio-modal__photo {
    position: relative;
    display: block;
    flex: 0 0 241px;
    width: 241px;
    height: auto;
    margin: 22px 26px 0 40px;
}

.bio-modal__id {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 6px;
}

.bio-modal__name {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: bold;
    color: #333;
}

.bio-modal__title {
    margin: 2px 0 0 0;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: normal;
    color: #333;
}

/* The only scrolling region. min-height: 0 is required -- a flex item defaults
   to min-height: auto and would otherwise refuse to shrink below its content,
   pushing the panel taller instead of scrolling. */
.bio-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 10px;
}

.bio-modal__body p {
    margin: 0 0 1.1em 0;
}

.bio-modal__body ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}


/* -------------------------------------------------------------------
   Phones only (max-width: 767px -- a tablet's 768px portrait viewport
   does not match, so tablet/laptop/desktop rendering is untouched).

   This page is a fixed 1182px desktop layout, so a phone reports a
   393px layout viewport and zooms out to ~0.33 to fit. Two consequences:

   1. vh units track the 852px LAYOUT viewport, while the fixed overlay
      fills the much taller zoomed-out visual viewport (~2563px). A
      100vh-based cap therefore pins the panel to the top third of the
      screen. Sizing against the overlay (%) instead keeps it in
      proportion, as it is on desktop.
   2. Auto margins centre the panel vertically. Used in preference to
      align-items: center because auto margins stay reachable if the
      panel ever overflows its scroll container.

   The panel keeps its desktop 780px width, so the modal reads exactly
   as it does on desktop -- pinch-to-zoom, like the rest of the page.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    .bio-modal__panel {
        max-height: calc(100% - 80px);
        margin: auto 0;
    }
}