/* ============================================================================
   JNZ Insurance — Team page styles
   ============================================================================
   Loaded only on /team/. Depends on /styles.css being loaded first.
   Hero, header, footer, buttons, section-navy, quote-cta, scroll-reveal,
   and the base .team-card / .team-photo / .team-body / .team-name /
   .team-title / .team-meta / .team-meta-row pattern all come from
   /styles.css.

   This file owns: the 3-up grid modifier (overrides the default 4-up
   .team-grid), the .team-license caption above .team-meta, the bio
   teaser/full elements with smooth height-animated reveal, and the
   "Read more / Read less" toggle button.
============================================================================ */

/* ============ 3-up grid modifier (override default 4-up .team-grid) ============ */
.team-grid--3up {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .team-grid--3up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .team-grid--3up { grid-template-columns: 1fr; }
}

/* ============ License caption (small, monospace, above .team-meta) ============ */
.team-license {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--jnz-slate);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  font-weight: var(--fw-semibold);
}

/* ============ Bio teaser + full, with smooth height-animated reveal ============
   Teaser is shown by default. Full is height: 0 + opacity: 0 by default; expands
   smoothly via interpolate-size: allow-keywords (same technique the FAQ accordion
   and quote-form conditional fieldsets use). */
.team-card-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 14px 0 0;
}
.team-card-bio--full {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0;
  interpolate-size: allow-keywords;
  transition:
    height 320ms var(--ease-premium),
    opacity 220ms var(--ease-premium),
    transform 280ms var(--ease-premium),
    margin 320ms var(--ease-premium);
}
.team-card[data-bio-expanded="true"] .team-card-bio--teaser { display: none; }
.team-card[data-bio-expanded="true"] .team-card-bio--full {
  height: auto;
  opacity: 1;
  transform: translateY(0);
  margin-top: 14px;
}

/* ============ "Read more / Read less" toggle button ============ */
.team-card-toggle {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--jnz-blue);
  cursor: pointer;
  padding: 14px 0 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.team-card-toggle:hover { color: var(--jnz-navy); }
.team-card-toggle:focus-visible {
  outline: none;
  color: var(--jnz-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.team-card-toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.team-card[data-bio-expanded="true"] .team-card-toggle::after {
  transform: rotate(-135deg);
  margin-bottom: 0;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .team-card-bio--full,
  .team-card-toggle::after { transition: none; }
}