/* ============================================================
   team.css — Team page styles
   PSCA & Co. Website
   ============================================================ */


/* ── Team Hero — editorial two-column layout ─────────────────── */

.team-hero {
  background: var(--color-surface-page);
  /* Minimal top padding — photo should start close to the ticker */
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Two-column: photo slightly wider than the right content column */
.team-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* Right column — stacks breadcrumb, heading, then directory */
.team-hero__right {
  display: flex;
  flex-direction: column;
}

/* Heading lives inside the right column — use a compact size */
.team-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-navy);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.team-hero__heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-navy-mid);
}

/* Photo: natural proportions, no forced crop — shows every partner */
.team-hero__photo-wrap {
  margin: 0;
}

.team-hero__photo {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 20px rgba(21, 32, 56, 0.09);
}

/* ── Partner directory ──────────────────────────────────────── */

/* Tighten the global rule-gold margins specifically inside the hero right column */
.team-hero__right .rule-gold {
  margin-block: var(--space-2);
}

.team-hero__directory {
  margin-top: var(--space-3);  /* gap between the heading rule and the directory label */
}

.team-hero__dir-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.team-hero__dir-rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: var(--space-4);
}

.team-hero__partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-subtle);
  /* Two columns: names read left→right across each row */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
}

.team-hero__partner-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  /* Stagger: each item fades up in turn — felt on first visit, invisible on repeat */
  animation: teamDirFadeUp 180ms ease-out both;
}

/* 40ms between items — tight enough to feel cascading, fast enough not to wait */
.team-hero__partner-item:nth-child(1)  { animation-delay:  60ms; }
.team-hero__partner-item:nth-child(2)  { animation-delay: 100ms; }
.team-hero__partner-item:nth-child(3)  { animation-delay: 140ms; }
.team-hero__partner-item:nth-child(4)  { animation-delay: 180ms; }
.team-hero__partner-item:nth-child(5)  { animation-delay: 220ms; }
.team-hero__partner-item:nth-child(6)  { animation-delay: 260ms; }
.team-hero__partner-item:nth-child(7)  { animation-delay: 300ms; }
.team-hero__partner-item:nth-child(8)  { animation-delay: 340ms; }
.team-hero__partner-item:nth-child(9)  { animation-delay: 380ms; }
.team-hero__partner-item:nth-child(10) { animation-delay: 420ms; }

@keyframes teamDirFadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Remove motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .team-hero__partner-item { animation: none; opacity: 1; }
}

.team-hero__partner-num {
  font-family: var(--font-serif);
  font-size: 0.65rem;
  color: var(--color-gold-a35);
  flex-shrink: 0;
  width: 18px;
  line-height: 1;
  padding-top: 1px;
}

.team-hero__partner-link {
  display: block;
  flex: 1;
  padding: var(--space-2) 0;   /* tighter — 10 items must fit the right column */
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1.3;
  /* color-only transition: no direction, use ease not ease-out */
  transition: color 150ms ease;
}

/* Gate hover behind real pointer — no false flashes on touch */
@media (hover: hover) and (pointer: fine) {
  .team-hero__partner-link:hover { color: var(--color-gold-deep); }
}

/* Senior Management CTA ─────────────────────────────────────── */

.team-hero__sm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  transition: color 150ms ease, transform 160ms ease-out;
}

.team-hero__sm-link svg {
  flex-shrink: 0;
  transition: transform 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .team-hero__sm-link:hover { color: var(--color-gold-deep); }
  /* Arrow nudges right — confirms the link direction */
  .team-hero__sm-link:hover svg { transform: translateX(3px); }
}

/* Press feedback — scales down to confirm click */
.team-hero__sm-link:active { transform: scale(0.97); }

/* Scroll offset — nav + ticker + breathing room */
.team-card {
  scroll-margin-top: calc(var(--nav-height) + var(--banner-height) + var(--space-8));
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .team-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .team-hero__directory { margin-top: var(--space-3); }
}

@media (max-width: 600px) {
  .team-hero__heading { font-size: var(--text-h2-size); }
}


/* ── Section ─────────────────────────────────────────────────── */
.team-section {
  padding: var(--space-section) 0;
  background: var(--color-surface-page);
}

.team-section--alt {
  background: var(--color-white);
}

.section-sub {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  max-width: 560px;
}

/* ── Partner grid ────────────────────────────────────────────── */
.team-grid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 750px)  { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 480px)  { .team-grid { grid-template-columns: 1fr; } }

/* ── Partner card ────────────────────────────────────────────── */
.team-card {
  display: flex;
  flex-direction: column;
}

/* ── Photo ───────────────────────────────────────────────────── */
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;   /* was 3/4 — slightly squarer, crops more background */
  overflow: hidden;
  background: var(--color-navy-mid);
  margin-bottom: var(--space-4);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* top center: headshots have face near top of frame — show from top down */
  object-position: top center;
  display: block;
  filter: grayscale(15%);
  transition: filter var(--transition-slow);
}

.team-card:hover .team-card__photo img { filter: grayscale(0%); }

/* ── Photo placeholder ───────────────────────────────────────── */
.team-card__photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__photo-placeholder span {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: var(--text-label-ls);
  text-transform: uppercase;
  color: var(--color-on-dark-ghost); /* [P3] was rgba raw; token (decorative placeholder initials) */
}

/* ── Info block ──────────────────────────────────────────────── */
.team-card__info { flex: 1; }

.team-card__name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 var(--space-1);
  line-height: 1.2;
}

.team-card__role {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

/* Qualification line — sits between role and rule */
.team-card__qual {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.team-card__rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-border-default);
  margin-bottom: var(--space-3);
}

.team-card__practice {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.team-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: #0A66C2;
  text-decoration: none;
  word-break: break-all;
  transition: color var(--transition-fast);
}

.team-card__linkedin:hover { color: #004182; }

.team-card__linkedin svg {
  flex-shrink: 0;
}

/* ── Senior management grid — 3 columns, vertical cards ─────── */
.team-sm-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

@media (max-width: 960px) { .team-sm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .team-sm-grid { grid-template-columns: 1fr; } }

/* ── Senior management card — vertical profile layout ────────── */
.team-sm-card {
  padding: var(--space-6) var(--space-6);
  background: var(--color-white);
  border-top: 2px solid transparent;
  transition: border-top-color var(--transition-base);
}

.team-sm-card:hover { border-top-color: var(--color-gold); }

.team-sm-card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.team-sm-card__role {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.team-sm-card__qual {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.team-sm-card__rule {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-border-default);
  margin-bottom: var(--space-3);
}

.team-sm-card__practice {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  color: var(--color-text-secondary);
  line-height: 1.65;
}