/* Framed portraits above the biography cards, with a faint neutral brand mark. */
.team {
  --team-card-background: var(--paper);
  --team-watermark-opacity: 0.1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .team {
    --team-card-background: #232932;
    --team-watermark-opacity: 0.13;
  }
}

:root[data-theme="dark"] .team {
  --team-card-background: #232932;
  --team-watermark-opacity: 0.13;
}

.team .team-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.team .team-photo {
  position: relative;
  isolation: isolate;
  flex: none;
  height: 340px;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.team .team-photo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../assets/osteon-logo-mark.svg") center / contain no-repeat;
  filter: grayscale(1) brightness(1.5);
  opacity: var(--team-watermark-opacity);
  pointer-events: none;
}

@media (min-width: 761px) {
  .team .team-photo::before {
    max-width: 360px;
  }
}

@media (max-width: 540px) {
  .team .team-grid {
    /* Reserve 24px of clearance plus the logo's overhang above the portrait. */
    row-gap: clamp(24px, calc((100vw - var(--gutter) * 2 - 340px) / 2 + 24px), 74px);
  }
}

.team .team-photo picture {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Match the head scale and hairline, independent of the card width. */
.team .team-photo img {
  position: absolute;
  left: calc(50% - 210px);
  width: 420px;
  max-width: none;
  height: auto;
  margin: 0;
}

.team .team-photo-rughinis img {
  top: -58px;
}

.team .team-photo-calin img {
  top: -19px;
}

.team .team-card-body {
  position: relative;
  z-index: 1;
  flex: 1;
  background: var(--team-card-background);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

.team .team-card:hover,
.team .team-card:hover .team-photo img {
  transform: none;
  box-shadow: none;
}