/*
 * V3 section package: team
 *
 * Canonical CSS variables used in this stylesheet:
 *   --pd-color-primary
 *   --pd-color-surface
 *   --pd-color-surface-alt  (monogram fallback tint)
 *   --pd-color-text
 *   --pd-color-muted
 *   --pd-color-border
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5, --pd-space-6, --pd-space-8
 *   --pd-radius-sm, --pd-radius-md, --pd-radius-lg
 *   --pd-shadow-sm
 *   --pd-font-heading, --pd-font-body
 *
 * CSS isolation contract (section-package-authoring-llm-contract.md section 10):
 *   Every selector is rooted under
 *   .pd-section--team[data-pd-module]
 *
 *   Scoping via the presence of [data-pd-module] matches the staged-section
 *   validator's required root pattern and keeps rules confined to this
 *   package's rendered sections.
 */

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. Member cards keep their surface bg with a 1px border so
 * cards stay distinct on dark tones; only the section header text
 * needs scoped contrast inversion since it sits directly on the
 * section root. */
/* PASS 4BO: __headline / __subheadline tone-aware contrast moved to
 * shared [data-background-tone] rules in components.css. */

.pd-section--team[data-pd-module] .pd-team__header {
  display: grid;
  gap: var(--pd-space-2);
  margin-bottom: var(--pd-space-6);
  text-align: center;
}

/* PASS 4BO: team __headline / __subheadline typography moved to
 * shared .pd-section-heading / .pd-section-intro in components.css.
 * __subheadline keeps `margin: 0 auto` for the centered team header. */
.pd-section--team[data-pd-module] .pd-team__subheadline {
  margin: 0 auto;
}

.pd-section--team[data-pd-module] .pd-team__grid {
  display: grid;
  gap: var(--pd-space-5);
  grid-template-columns: 1fr;
}

.pd-section--team[data-pd-module] .pd-team__card {
  display: grid;
  gap: var(--pd-space-3);
  padding: var(--pd-space-5);
  background: var(--pd-color-surface);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.pd-section--team[data-pd-module] .pd-team__card:hover {
  transform: translateY(-2px);
}

.pd-section--team[data-pd-module] .pd-team__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-section--team[data-pd-module] .pd-team__photo {
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 50%;
  background: var(--pd-color-surface-alt);
}

.pd-section--team[data-pd-module] .pd-team__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--pd-color-surface-alt);
  color: var(--pd-color-primary);
  font-family: var(--pd-font-heading);
  font-size: 2rem;
  font-weight: 600;
}

.pd-section--team[data-pd-module] .pd-team__body {
  display: grid;
  gap: var(--pd-space-2);
  text-align: center;
}

.pd-section--team[data-pd-module] .pd-team__name {
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: 1.125rem;
  line-height: 1.25;
}

.pd-section--team[data-pd-module] .pd-team__role {
  margin: 0;
  color: var(--pd-color-muted);
  font-size: 0.9375rem;
}

.pd-section--team[data-pd-module] .pd-team__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pd-section--team[data-pd-module] .pd-team__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-3);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-section--team[data-pd-module] .pd-team__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-sm);
  color: var(--pd-color-text);
  text-decoration: none;
  font-size: 0.8125rem;
}

.pd-section--team[data-pd-module] .pd-team__contact-link:hover {
  border-color: var(--pd-color-primary);
  color: var(--pd-color-primary);
}

/* Variant: grid - responsive columns driven by data-items-per-row */
@media (min-width: 48rem) {
  .pd-section--team[data-pd-module][data-pd-variant="grid"] .pd-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .pd-section--team[data-pd-module][data-pd-variant="grid"][data-items-per-row="2"] .pd-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-section--team[data-pd-module][data-pd-variant="grid"][data-items-per-row="3"] .pd-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pd-section--team[data-pd-module][data-pd-variant="grid"][data-items-per-row="4"] .pd-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Variant: compact-list - horizontal scrolling strip on desktop, stacked on mobile */
.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__list {
  display: grid;
  gap: var(--pd-space-4);
}

.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--pd-space-4);
  padding: var(--pd-space-3) var(--pd-space-4);
  text-align: left;
}

.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact .pd-team__photo,
.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact .pd-team__monogram {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.25rem;
}

.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact .pd-team__body {
  gap: 2px;
  text-align: left;
}

.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact .pd-team__bio,
.pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact .pd-team__contacts {
  display: none;
}

@media (min-width: 64rem) {
  .pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__list {
    display: flex;
    flex-direction: row;
    gap: var(--pd-space-4);
    overflow-x: auto;
    padding-bottom: var(--pd-space-3);
    scroll-snap-type: x mandatory;
  }
  .pd-section--team[data-pd-module][data-pd-variant="compact-list"] .pd-team__card--compact {
    flex: 0 0 auto;
    min-width: 18rem;
    scroll-snap-align: start;
  }
}

/* Variant: featured-lead - one large featured card, rest in grid below */
.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__featured {
  display: grid;
  margin-bottom: var(--pd-space-6);
}

.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead {
  gap: var(--pd-space-4);
  padding: var(--pd-space-6);
  text-align: left;
}

.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead .pd-team__photo,
.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead .pd-team__monogram {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--pd-radius-md);
  font-size: 3rem;
}

.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead .pd-team__body {
  text-align: left;
}

.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead .pd-team__name {
  font-size: 1.5rem;
}

.pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead .pd-team__contacts {
  justify-content: flex-start;
}

@media (min-width: 64rem) {
  .pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__card--lead {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .pd-section--team[data-pd-module][data-pd-variant="featured-lead"] .pd-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}