/**
 * Team section: statement + paired callout bubbles, and a horizontally
 * scrollable photo "shelf" — shared by the homepage and the About page
 * (template-parts/global/team-row.php).
 */

.team-statement-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.team-statement {
  max-width: 32rem;
  margin: 0;
}

/* Exactly two callouts (client-confirmed, never more), staggered
   diagonally — offset both horizontally and vertically, not stacked
   directly above one another. Fixed rem offsets rather than
   align-self flex-end/flex-start, so the stagger holds regardless of
   how wide the surrounding container happens to be. */
.team-callouts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* On mobile/tablet, where .team-statement-row has wrapped to a
   stacked layout, center the pair as a group instead of hugging the
   left edge — .team-callout--light's own margin-left below still
   offsets it from .team-callout--dark, so they stay staggered
   relative to each other, just as a centered unit rather than a
   left-aligned one. */
@media (max-width: 61.99rem) {
  .team-callouts {
    align-items: center;
  }
}

.team-callout {
  position: relative;
  max-width: 16rem;
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

/* --radius-lg (up from --radius-md) on the three normal corners —
   the 4px corner is left alone on purpose, it's what gives these
   their speech-bubble "tail" shape. */
.team-callout--light {
  margin-left: 3rem;
  background: var(--color-secondary);
  color: var(--color-ink);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  z-index: 1;
}

.team-callout--dark {
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-lg) 4px var(--radius-lg) var(--radius-lg);
  z-index: 2;
  max-width: 15rem;
  margin-top: -0.5rem;
}

@media (min-width: 62rem) {
  .team-callout--light {
    margin-left: 8rem;
  }

  /* 1.3 * 1.25 — a second bump on top of the first, which read as too
     subtle on its own. */
  .team-statement {
    font-size: calc(var(--fs-h3) * 1.625);
  }

  /* 1.2 * 1.5 — likewise, a second bump on top of the first. */
  .team-callout {
    font-size: calc(var(--fs-body) * 1.8);
  }
}

.team-row-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Tighter than the shared default above — brings the prev/next
   buttons in closer and gives .team-shelf a bit more width to work
   with. Scoped to the team member row specifically, like the other
   .team-row-wrap overrides below — .home-blog-faq__carousel also
   carries this class but wasn't part of what was asked for here. */
.team-row-wrap:not(.home-blog-faq__carousel) {
  gap: var(--space-xs);
}

.team-shelf {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-md);
  overflow: hidden;
  /* How far the portraits poke above this shelf's tinted background —
     shared by the background layer below, .team-row's padding, and
     .team-card's negative margin, so the three stay in lockstep. A
     fixed-ish (fluid via clamp, not tied to the actual rendered card
     height) approximation of "~15% of a portrait's height" — getting
     that number exactly right would mean duplicating .team-card's
     responsive width formula (including its separate 3-per-row
     desktop version) here too, for a purely decorative amount that
     doesn't need to be pixel-exact. */
  --team-shelf-overflow: clamp(1.75rem, 4vw, 2.75rem);
}

/* The tinted panel itself, as its own layer behind .team-row — inset
   from the top by --team-shelf-overflow so it starts partway down the
   portraits instead of behind their tops, which is the entire effect.
   Not just .team-shelf's own background: .team-row below needs
   overflow-x for horizontal scrolling, and per the CSS overflow spec,
   an element with one axis set to auto/scroll can never leave the
   other axis at visible — it's silently forced to auto too, clipping
   anything that tries to overflow it vertically. So the portraits
   can't actually escape .team-row's box; instead .team-row reserves
   the space for them (padding-top below) and this panel simply
   doesn't cover that reserved strip, which reads as the same "photo
   overflows the background" effect without anything really
   overflowing. */
.team-shelf::before {
  content: "";
  position: absolute;
  top: var(--team-shelf-overflow);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(63, 72, 72, 0.08); /* subtle, semi-transparent grey (--color-heading at low opacity) */
  border-radius: var(--radius-lg);
}

.team-row {
  position: relative;
  display: flex;
  /* flex-start, not center — on a row too narrow to fit every card,
     centering clips both the left and right edges equally instead of
     showing the first card in full and letting the rest peek in from
     the right, the usual "swipe for more" affordance. */
  justify-content: flex-start;
  gap: var(--space-lg);
  padding-top: var(--team-shelf-overflow);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.team-row::-webkit-scrollbar {
  display: none;
}

.team-card {
  flex: 0 0 clamp(160px, 18vw, 220px);
  scroll-snap-align: start;
  text-align: center;
  /* Cancels .team-row's padding-top above, landing the portrait flush
     with the row's own top edge — i.e. right at the point where
     .team-shelf::before's background begins, so it reads as the
     portrait rising out of the panel. */
  margin-top: calc(-1 * var(--team-shelf-overflow));
}

/* Exactly 3 cards visible per view at desktop widths — the rest
   scroll off, reached via the prev/next controls or swipe. */
@media (min-width: 62rem) {
  .team-card {
    flex-basis: calc((100% - 2 * var(--space-lg)) / 3);
  }
}

/* Below this, the desktop card size/gap/shelf padding don't leave
   enough room to show even one full card without it — and everything
   after it — getting clipped on both sides (see the justify-content
   note above). Tighten everything, and shrink (not hide) the
   prev/next buttons to free up a bit more of that room. */
@media (max-width: 36rem) {
  /* .team-row-nav is also reused by the homepage blog/FAQ carousel
     (.home-blog-faq__carousel also carries .team-row-wrap) — scoped
     so only the team member row's buttons are resized here. */
  .team-row-wrap:not(.home-blog-faq__carousel) .team-row-nav {
    width: 24px;
    height: 24px;
  }

  .team-row-wrap:not(.home-blog-faq__carousel) .team-row-nav svg {
    width: 16px;
    height: 16px;
  }

  .team-row-wrap:not(.home-blog-faq__carousel) {
    gap: var(--space-2xs);
  }

  .team-shelf {
    padding: 0 var(--space-sm);
  }

  .team-row {
    gap: var(--space-xs);
  }

  /* Exactly one card per view — a full-width card snaps into place
     with no sliver of the next one peeking in. */
  .team-card {
    flex-basis: 100%;
  }
}

.team-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.team-card__caption {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-sm);
}

.team-card__caption strong {
  color: var(--color-ink);
}

.team-card__caption span {
  font-size: var(--fs-eyebrow);
  color: var(--color-primary-700);
}

.team-row-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-heading);
  transform: rotate(180deg);
  transition: color var(--duration-fast) var(--ease-standard);
}

.team-row-nav--next {
  transform: none;
}

.team-row-nav svg {
  width: 24px;
  height: 24px;
}

.team-row-nav:hover,
.team-row-nav:focus-visible {
  color: var(--color-primary-600);
}

/* ---- Bio trigger + dialog ---- */

.team-card__trigger {
  display: block;
  width: 100%;
  text-align: center;
}

.team-card__trigger img {
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.team-card__trigger:hover img,
.team-card__trigger:focus-visible img {
  opacity: 0.85;
}

.team-bio-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.team-bio-dialog[hidden] {
  display: none;
}

.team-bio-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 37, 36, 0.6);
}

.team-bio-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

.team-bio-dialog__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  color: var(--color-heading);
  transform: rotate(45deg); /* turns the shared "plus" icon into an "x" */
  transition: background var(--duration-fast) var(--ease-standard);
}

.team-bio-dialog__close:hover,
.team-bio-dialog__close:focus-visible {
  background: var(--color-secondary);
}

.team-bio-dialog__close svg {
  width: 20px;
  height: 20px;
}

.team-bio-dialog__photo {
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-md);
}

.team-bio-dialog__photo[hidden] {
  display: none;
}

.team-bio-dialog__body h3 {
  margin-bottom: var(--space-3xs);
  text-align: center;
}

.team-bio-dialog__role {
  color: var(--color-primary-600);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.team-bio-dialog__role[hidden] {
  display: none;
}

.team-bio-dialog__text {
  color: var(--color-text-muted);
}