/* ============================================================
   09-team — team cards with full-color portraits, zoom hover + tilt
   All selectors scoped under .sec-09-team
   ============================================================ */

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

@media (max-width: 980px) {
  .sec-09-team__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phone carousel: user-driven horizontal swipe/drag with snap. One full
   card plus a peek of the next; arrows injected by the shared swipe-row
   helper in js/core.js. The track bleeds to the viewport edges (gutter
   moved into scroll padding) and is clipped there, so the page never
   scrolls sideways. The card's offset ring (translate 10px) gets room
   from the track's end padding. */
@media (max-width: 640px) {
  .sec-09-team__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding: 0.5rem 1.25rem 1rem;
  }
  .sec-09-team__grid::-webkit-scrollbar { display: none; }
  .sec-09-team__card { scroll-snap-align: start; }
}

.sec-09-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 0;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

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

/* --- Rounded signature frame: media wrapper stays overflow-visible so
   the offset ring never clips, even under the card's tilt transform --- */
.sec-09-team__media {
  position: relative;
  overflow: visible;
}

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

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

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

.sec-09-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
  /* The headshot files are circular crops on transparent corners; 1.3x
     fills the rounded-rectangle frame edge to edge (no oval showing). */
  transform: scale(1.3);
}

.sec-09-team__card:hover .sec-09-team__photo,
.sec-09-team__card:focus-within .sec-09-team__photo {
  transform: scale(1.34);
}

.sec-09-team__body {
  padding: 1.5rem 0 1.8rem;
}

.sec-09-team__name {
  font-size: var(--fs-h4);
  margin-bottom: 0.2rem;
}

.sec-09-team__role {
  font-size: var(--fs-small);
  color: var(--text-on-bone-dim);
  margin-bottom: 0.9rem;
}

.sec-09-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sec-09-team__chip {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-09-team__quote {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-on-bone-dim);
  border-top: 1px solid var(--line-bone);
  padding-top: 0.9rem;
}

.sec-09-team__ask {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-bone);
}

.sec-09-team__ask-label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.sec-09-team__ask-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-on-bone-dim);
}

.sec-09-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.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-09-team__book-arrow {
  transition: transform 300ms var(--ease-spring);
}

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

.sec-09-team__book:hover .sec-09-team__book-arrow,
.sec-09-team__book:focus-visible .sec-09-team__book-arrow {
  transform: translateX(4px);
}

.sec-09-team__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

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

/* html.reduced-motion (site-wide JS flag) — ring stays static, no draw-in */
html.reduced-motion .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
  transition: none;
}

html.reduced-motion .sec-09-team__card:hover .sec-09-team__ring,
html.reduced-motion .sec-09-team__card:focus-within .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
}