/*
  Team (teamBlock, MB-9; contract umbraco/blocks/teamBlock.md; from Boyd teamGrid). Mobile first.
  Grid: 2 columns under 640 px, 3 from 640, 4 from 1200 (3 for 3, 6 or 9 people); last row left-aligned.
  Slider: MB-3 carousel (css/motion.css) with 1 / 2 / 4 cards in view at the same widths.
  Card: photo (5 : 7, cropped on the server around the focal point), then a name panel that is a band
  (css/shared/themes.css), so its text colours follow its own colour. Site hooks: --team-gap, --team-panel-pad,
  --team-radius, --team-name-fs, --team-role-fs; MB-126: --team-contact-gap, --team-icon-gap, --team-icon-colour.
*/
.team { padding: var(--section-space) var(--page-gutter); }
.team__inner { max-width: var(--container-max); margin: 0 auto; }

.team__eyebrow { margin: 0; }
.team__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.team__eyebrow + .team__heading { margin-top: var(--space-5); }
.team__intro { max-width: 46rem; }
.team__intro p { margin: var(--space-3) 0 0; line-height: var(--lh-body); }

.team__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.team--grid .team__list {
  display: grid;
  gap: var(--team-gap, var(--space-3));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* MB-126 Cards on phones "One per row": one card per row below 640 px (from 640 px the 3 columns above win). */
.team--grid .team__list--phones-one { grid-template-columns: minmax(0, 1fr); }
.carousel.team__carousel { --carousel-gap: var(--team-gap, var(--space-3)); margin: var(--space-5) 0 0; }
.team__carousel .team__list { margin-top: 0; list-style: none; padding: 0; }

.team__person {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--team-radius, var(--radius-card));
  overflow: hidden;
}
/* FC-MFIX6: --team-photo-ratio is set on the section only when the site sets a photo shape (TeamPhotoShape). */
.team__photo { aspect-ratio: var(--team-photo-ratio, 5 / 7); background: var(--color-hairline); overflow: hidden; }
.team__photo picture { display: block; width: 100%; height: 100%; }
.team__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team__initials { display: grid; place-items: center; height: 100%; font-size: var(--fs-h2); font-weight: 600; color: var(--starter-text); }

.team__panel {
  flex: 1 1 auto;
  padding: var(--team-panel-pad, var(--space-5));
  overflow-wrap: anywhere;
}
.team__panel--edge { box-shadow: inset 0 0 0 var(--border-width) var(--color-hairline); }
.team__name { margin: 0; font-size: var(--team-name-fs, var(--fs-h4)); line-height: var(--lh-heading); }
.team__role { margin: var(--space-2) 0 0; font-size: var(--team-role-fs, var(--fs-body-sm)); line-height: var(--lh-body); }
.team__bio { margin: var(--space-2) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); overflow-wrap: break-word; } /* MB-25: Short bio */

@media (min-width: 640px) {
  .team--grid .team__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carousel.team__carousel { --carousel-per-view: 2; }
}
/* MB-107 Cards in view "One card on small tablets": 1 card until 768 px wide (then 2, and 4 from 1200 px). */
@media (min-width: 640px) and (max-width: 767.98px) {
  .carousel.team__carousel--one-to-768 { --carousel-per-view: 1; }
}
@media (min-width: 1200px) {
  .team--grid .team__list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carousel.team__carousel { --carousel-per-view: 4; }
}

/* MB-23 Show phone and email: a direct line and an email link under the role (each on its own line, wraps on phones). */
.team__contact { margin: var(--space-2) 0 0; display: grid; gap: var(--space-1); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.team__contact-link { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 0.15em; min-height: 24px; }
.team__contact-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.team__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* MB-106 Team cards link to person pages: the name is the link, in the panel's link colour (its band's tokens, so the
   contrast follows the colour), underlined on hover and focus. */
.team__name-link { text-decoration: none; }
.team__name-link:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.team__name-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; text-decoration: underline; }
/* MB-106 round 2 (UX U5 b): the name's link covers the whole card, so a tap on the photo opens the page too; still one
   link per card, named by the person. Phone and email links stay on top. Cards without a link are unchanged. */
.team__person:has(.team__name-link) { position: relative; }
.team__name-link::after { content: ""; position: absolute; inset: 0; }
.team__person:has(.team__name-link) .team__contact-link { position: relative; z-index: 1; }

/* MB-126 Contact lines "With icons" (FuelChief People details): a 20 px icon before each line. Gaps are the nearest
   tokens; site hooks --team-contact-gap and --team-icon-gap (FuelChief's original: 10 px and 5 px). The icon takes the
   link's colour unless a site sets --team-icon-colour (or swaps the icons through .team__contact-link--phone / --mobile /
   --email / --linkedin). */
.team__contact--icons { gap: var(--team-contact-gap, var(--space-2)); }
.team__contact--icons .team__contact-link { display: flex; align-items: center; gap: var(--team-icon-gap, var(--space-1)); }
.team__icon { flex: none; width: 20px; height: 20px; color: var(--team-icon-colour, currentColor); }

/* MB-126 View all button: under the intro; from 1200 px beside the heading block, on the right, level with the intro's
   last line (as the FuelChief original's "View the team"). */
.team__all { margin: var(--space-5) 0 0; }
@media (min-width: 1200px) {
  .team__head--with-all { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); }
  .team__head--with-all > :not(.team__all) { grid-column: 1; }
  .team__head--with-all .team__all { grid-column: 2; grid-row: 1 / span 9; align-self: end; margin: 0; }
}
/* MB-126: the hidden "Call … on" / "(opens in a new tab)" words are placed against their own lines, so in a slider the
   cards out of view can't widen the page with them (the carousel's clip doesn't hold absolutely placed text otherwise). */
.team__contact { position: relative; }

/* MB-140 Hide the heading (screen readers only): the h2 is .team__sr. With nothing else in the heading block
   (.team__head--sr) the cards start at the top of the section, as the original People grid. */
.team__head--sr + .team__list,
.team__head--sr + .team__carousel { margin-top: 0; }