/**
 * Team section (section-s005, "portrait-group") — redesigned per request:
 * full-bleed portrait, rounded corners, name overlaid at the bottom with a
 * gradient scrim, 4-per-row grid instead of the old ~3-per-row flex layout.
 * Location badge kept as a small corner icon.
 *
 * Hover was originally the stellae "Momentum Based Hover" (Inertia) resource
 * — dropped per request as too much for this section; .team-card__wrap:hover
 * below is a plain CSS lift + slow image zoom instead.
 *
 * REQUESTED CHANGE: the whole card is now the link (was a separate
 * btn-bubble-arrow button below the card) — .team-card can render as either
 * an <a> or a plain <div> (see section-s005.php), and a text CTA sits inside
 * the card, hidden until hover, using the stellae "Underline Link Animation"
 * resource's alt variant for the reveal sweep. Fade/slide-in on hover
 * (.team-card__cta rules below data-underline-link) isn't part of that
 * resource — it only handles the underline itself, assuming the link text is
 * already visible; added here since ours starts hidden.
 */
.team-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}

.team-card__wrap {
  width: 100%;
  position: relative;
}

.team-card {
  color: #fff;
  text-decoration: none;
  border-radius: 1.25em;
  aspect-ratio: 3 / 4;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #1c1e26;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .1, .25, 1), box-shadow .4s ease;
}

.team-card__wrap:hover .team-card {
  transform: translateY(-0.5em);
  box-shadow: 0 1.5em 2.5em rgba(0, 0, 0, 0.35);
}

.team-card__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.25, .1, .25, 1);
}

.team-card__wrap:hover .team-card__image {
  transform: scale(1.06);
}

.team-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 13, 23, 0.85) 100%);
  pointer-events: none;
}

.team-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25em;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.team-card__name {
  margin: 0;
  font-family: Spectral, serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.1;
}

.team-card__location-icon {
  position: absolute;
  bottom: 0.75em;
  right: 0.75em;
  width: 2.25em;
  height: auto;
  opacity: .9;
}

/* In-card CTA text — hidden until the card is hovered. Not part of the
   Underline Link Animation resource (see file header note). */
.team-card__cta {
  width: max-content;
  color: inherit;
  font-family: Karla, sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.25;
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .35s ease, transform .35s ease;
}

.team-card__wrap:hover .team-card__cta {
  opacity: 1;
  transform: translateY(0);
}

/* Underline Link Animation (stellae resource), alt variant — ported as-is.
   Only adaptation: the hover trigger is [data-hover] (the whole card, set
   in section-s005.php) rather than the underline element's own :hover,
   since ours starts hidden and only becomes hoverable once already
   revealed by the card hover above. */
[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: left;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::after {
  transform-origin: left;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link="alt"]::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    /* transition-delay: 0.3s; */
  }
}

@media screen and (max-width: 1024px) {
  .team-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media screen and (max-width: 640px) {
  .team-section {
    grid-template-columns: 1fr;
  }
}

[data-color-mode="light"] .team-card {
  background-color: #f2f2f2;
}

/* Light mode: the page background/heading already flip via the sitewide
   light-mode.css toggle, and the card itself (photo + dark scrim + white
   overlay text) is a self-contained treatment that reads fine either way —
   same reasoning as the Contact Globe panel and Directional List badge.
   Only the hover shadow needed tuning: rgba(0,0,0,.35) tuned for this
   site's dark navy baseline reads as a harsh smudge on a white page — same
   fix already applied to s001's image frames. */
[data-color-mode="light"] .team-card__wrap:hover .team-card {
  box-shadow: 0 1.5em 2.5em rgba(0, 0, 0, 0.12);
}