/* Team Members module
   No font-family anywhere on purpose: the block inherits the theme's
   typography, so it matches the rest of the page automatically and keeps
   matching if the theme font is ever changed.
   Colours are brand, the same ones the City Reviews module uses:
   Deep Dive #223A59 for headings and names, #414042 for body text,
   #00A4DF for hover and focus. */

.team { padding: 2rem 0; }

.team__preheader,
.team__heading {
  color: #223A59;
  text-align: center;
}

.team__heading { margin-bottom: var(--team-heading-space); }

/* Card size. This caps how wide a column is allowed to get, rather than letting
   three cards stretch to fill whatever container they land in - which is what made
   the photos larger than the old section's. The grid is centred, so a smaller size
   shrinks the cards instead of leaving a gap down one side.
   The old People Listing section, measured on the live page at a 1440px screen,
   was a 449px card holding a 399x299 photo. "Large" is deliberately close to that. */
.team       { --team-card-max: 280px; }   /* fallback if no size is chosen */
.team--s    { --team-card-max: 220px; }
.team--m    { --team-card-max: 280px; }
.team--l    { --team-card-max: 360px; }
.team--full { --team-card-max: 1fr; }

/* Space below the heading, before the first row of cards. Separate from the gap
   between cards so the two can be tuned independently - a roomy grid does not
   necessarily want a roomy heading. */
.team         { --team-heading-space: 3rem; }
.team--hs-s   { --team-heading-space: 2rem; }
.team--hs-m   { --team-heading-space: 3rem; }
.team--hs-l   { --team-heading-space: 4rem; }
.team--hs-xl  { --team-heading-space: 5rem; }

/* Space between cards. One value drives both the column and the row gap, so a
   two-row layout never ends up tighter down than across. The fallback on .team
   means a placement saved before this setting existed still gets the roomy gap
   rather than dropping to zero. */
.team            { --team-gap: 3rem; }
.team--gap-tight  { --team-gap: 1.5rem; }
.team--gap-normal { --team-gap: 2rem; }
.team--gap-roomy  { --team-gap: 3rem; }
.team--gap-wide   { --team-gap: 4rem; }

/* Mobile first: one card per row, two from tablet, and only above 900px does
   the "cards per row" setting take effect. Four across on a phone would make
   every face a thumbnail. */
.team__grid {
  display: grid;
  gap: var(--team-gap);
  justify-content: center;
  grid-template-columns: minmax(0, var(--team-card-max));
}

@media (min-width: 600px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, var(--team-card-max))); }
}

@media (min-width: 900px) {
  .team__grid--2 { grid-template-columns: repeat(2, minmax(0, var(--team-card-max))); }
  .team__grid--3 { grid-template-columns: repeat(3, minmax(0, var(--team-card-max))); }
  .team__grid--4 { grid-template-columns: repeat(4, minmax(0, var(--team-card-max))); }
}

.team__card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* The photo box. Both the professional photo and the optional fun one sit in the
   same grid cell, stacked on top of each other, so the swap cannot shift the layout
   by a pixel. The shape and the rounding live here rather than on the images, which
   means one rule crops both. */
.team__photo-wrap {
  display: grid;
  width: 100%;
  margin: 0 0 1rem 0;
  overflow: hidden;
  background: #EDEFF2;
}

.team__photo-wrap > * { grid-area: 1 / 1; }

.team__photo-wrap--landscape { aspect-ratio: 4 / 3; border-radius: 20px; }
.team__photo-wrap--square    { aspect-ratio: 1 / 1; border-radius: 20px; }
.team__photo-wrap--circle    { aspect-ratio: 1 / 1; border-radius: 50%; }
.team__photo-wrap--portrait  { aspect-ratio: 3 / 4; border-radius: 20px; }
.team__photo-wrap--natural   { border-radius: 20px; }

/* object-fit: cover crops a photo to the shape rather than squashing it, so
   head shots that were uploaded at different sizes still line up in a row.
   This is the fix for the usual team-page problem where one person's photo
   is taller than everyone else's. */
.team__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Leave the photo as it is" gives the box no aspect ratio, so the first photo
   has to set the height itself. */
.team__photo-wrap--natural .team__photo { height: auto; }

/* Placeholder when someone has no photo yet. Needs its own aspect ratio or
   the "leave the photo as it is" setting would give it no height at all. */
.team__photo--empty { aspect-ratio: 1 / 1; }

/* ---- The fun photo ----
   Hidden underneath until the mouse is over the card. Gated behind hover: hover
   so a touch screen, where "hover" fires on first tap and then sticks, never
   swaps at all - on a phone everyone keeps their professional photo. */
.team__photo--hover {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .team__card:hover .team__photo--hover { opacity: 1; }
}

/* Keyboard users get it too, on the cards that can take focus. */
.team__card:focus-within .team__photo--hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .team__photo--hover { transition: none; }
}

/* The theme's h3 computes to 40px on this site, which was sized for a full-width
   heading and overflows a small card. These two rules are the only place the module
   overrides theme typography - delete them to go back to the theme's own sizes. */
.team__name {
  margin: 0 0 0.25rem 0;
  color: #223A59;
  font-size: 1.25rem;
  line-height: 1.3;
}

.team__title {
  margin: 0;
  color: #414042;
  font-size: 0.95rem;
}

/* The trigger inherits everything, so a clickable card and a plain one look
   identical until you hover. A <button> that has been stripped of its button
   styling is still a real button to a keyboard and a screen reader. */
.team__trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  text-decoration: none;
}

/* Stretching the trigger invisibly over the whole card makes the entire card
   clickable while keeping exactly one thing in the keyboard tab order. */
.team__card--clickable .team__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
}

.team__more {
  margin-top: 0.5rem;
  font-weight: 700;
  color: #223A59;
  text-decoration: underline;
}

.team__card--clickable:hover .team__name,
.team__card--clickable:hover .team__more {
  color: #00A4DF;
}

/* Keyboard focus. The ring goes round the whole card where the browser
   supports :has(), and round the name where it does not, so a keyboard user
   can always see where they are. */
.team__trigger:focus-visible {
  outline: 3px solid #00A4DF;
  outline-offset: 2px;
}

@supports selector(:has(*)) {
  .team__trigger:focus-visible { outline: none; }
  .team__card:has(.team__trigger:focus-visible) {
    outline: 3px solid #00A4DF;
    outline-offset: 4px;
  }
}

/* ---- The bio pop-up ---- */

.team__dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow: auto;
  border: 0;
  border-radius: 20px;
  color: #414042;
  /* No padding here on purpose. All the visible content sits in the inner
     div, which is what lets the script treat a click on the dialog itself as
     a click on the dark backdrop. */
  padding: 0;
}

.team__dialog::backdrop { background: rgba(34, 58, 89, 0.6); }

/* A browser too old to understand <dialog> would otherwise print every bio
   into the page. This keeps them closed. */
.team__dialog:not([open]) { display: none; }

.team__dialog-inner {
  position: relative;
  padding: 2rem;
  text-align: left;
}

.team__dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: none;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: #223A59;
  cursor: pointer;
}

.team__dialog-name  { margin: 0 0 0.25rem 0; color: #223A59; }
.team__dialog-title { margin: 0 0 1rem 0; color: #414042; }
.team__dialog-bio p:last-child { margin-bottom: 0; }