/* ============================================================
   40-about-team — arch-frame team cards, duotone→color hover.
   bone-2 band. Scoped under .sec-40-about-team
   ============================================================ */

.sec-40-about-team {
  background: var(--bone-2);
}

.sec-40-about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-gap);
}

@media (max-width: 980px) {
  .sec-40-about-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sec-40-about-team__grid { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
}

.sec-40-about-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.3rem 1.3rem 0;
  transition: box-shadow 400ms var(--ease-out);
}

.sec-40-about-team__card:hover,
.sec-40-about-team__card:focus-within {
  box-shadow: var(--shadow-lift);
}

.sec-40-about-team__media {
  position: relative;
  overflow: visible;
}

.sec-40-about-team__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  opacity: 0.25;
  transform: translate(8px, 8px) scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.sec-40-about-team__card:hover .sec-40-about-team__ring,
.sec-40-about-team__card:focus-within .sec-40-about-team__ring {
  opacity: 1;
  transform: translate(8px, 8px) scale(1.02);
}

.sec-40-about-team__photo-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: var(--bone-2);
}

.sec-40-about-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-40-about-team__card:hover .sec-40-about-team__photo,
.sec-40-about-team__card:focus-within .sec-40-about-team__photo {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-40-about-team__body {
  padding: 1.2rem 0 1.6rem;
}

.sec-40-about-team__name {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.sec-40-about-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.sec-40-about-team__chip {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-40-about-team__bio {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-on-bone-dim);
  border-top: 1px solid var(--line-bone);
  padding-top: 0.85rem;
}

.sec-40-about-team__book {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-40-about-team__book:hover,
.sec-40-about-team__book:focus-visible {
  gap: 0.65rem;
  color: var(--accent);
}

.sec-40-about-team__book span {
  transition: transform 300ms var(--ease-spring);
}
.sec-40-about-team__book:hover span,
.sec-40-about-team__book:focus-visible span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .sec-40-about-team__card,
  .sec-40-about-team__photo,
  .sec-40-about-team__ring {
    transition: none;
  }
}

html.reduced-motion .sec-40-about-team__ring {
  opacity: 0.5;
  transform: translate(8px, 8px) scale(1);
}

/* --- Solo-provider layout ---
   A single card in a 4-column grid needs more than centering: it needs its
   own composition, wider and weightier than the multi-card grid cell it
   would otherwise sit in. Forces one column at every width (the base grid
   only drops to 1fr under 560px), then on wider screens turns the card
   itself into a photo-left/bio-right row instead of the stacked portrait
   card, with the bio's own content centered rather than left-hung. */
.sec-40-about-team__grid--solo {
  grid-template-columns: 1fr;
  max-width: 30rem;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .sec-40-about-team__grid--solo {
    max-width: 56rem;
  }
  .sec-40-about-team__grid--solo .sec-40-about-team__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 2.25rem 2.5rem 2.25rem 2.25rem;
  }
  .sec-40-about-team__grid--solo .sec-40-about-team__media {
    flex: 0 0 15rem;
    width: 15rem;
  }
  .sec-40-about-team__grid--solo .sec-40-about-team__photo-wrap {
    aspect-ratio: 4 / 5;
  }
  .sec-40-about-team__grid--solo .sec-40-about-team__body {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sec-40-about-team__grid--solo .sec-40-about-team__chips {
    justify-content: center;
  }
}