/*
 * V3 section package: stats
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--stats[data-pd-module^="stats--"]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-text, --pd-color-muted, --pd-color-surface,
 *   --pd-color-surface-alt, --pd-color-primary, --pd-color-accent
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-md, --pd-radius-lg
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6, --pd-space-8
 *
 * Variants:
 *   row-even         equal-width responsive grid
 *   dual-lead        first item larger, followers fill the rest
 *   inline-compact   lightweight horizontal strip
 */

.pd-section--stats[data-pd-module^="stats--"] {
  display: block;
  width: 100%;
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. Stat values, labels, and the section header flip on
 * primary/secondary tones; tile cards keep their surface-alt bg in
 * row-even/dual-lead so values stay readable (inline-compact has
 * transparent tiles and inverts directly with the section). */
/* PASS 4BO: __headline / __eyebrow / __intro tone-aware contrast
 * moved to shared [data-background-tone] rules in components.css. */
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="primary"][data-pd-variant="inline-compact"] .pd-stats__value,
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="secondary"][data-pd-variant="inline-compact"] .pd-stats__value,
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="primary"][data-pd-variant="inline-compact"] .pd-stats__label,
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="secondary"][data-pd-variant="inline-compact"] .pd-stats__label {
  color: var(--pd-color-surface);
}
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="primary"][data-pd-variant="inline-compact"] .pd-stats__description,
.pd-section--stats[data-pd-module^="stats--"][data-background-tone="secondary"][data-pd-variant="inline-compact"] .pd-stats__description {
  color: var(--pd-color-surface);
  opacity: 0.8;
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__header {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  max-width: 48rem;
}

/* PASS 4BO: stats section header typography moved to shared
 * .pd-eyebrow / .pd-section-heading / .pd-section-intro rules in
 * components.css. The placeholder modifier keeps its empty-state cue. */
.pd-section--stats[data-pd-module^="stats--"] .pd-stats__headline--placeholder {
  font-style: italic;
  opacity: 0.7;
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__list {
  display: grid;
  gap: var(--pd-space-5);
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  padding: var(--pd-space-5);
  background: var(--pd-color-surface-alt);
  border-radius: var(--pd-radius-lg);
  box-sizing: border-box;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__value {
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
  color: var(--pd-color-primary);
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pd-color-text);
  line-height: 1.3;
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pd-color-muted);
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__empty {
  padding: var(--pd-space-6);
  background: var(--pd-color-surface-alt);
  border-radius: var(--pd-radius-md);
  text-align: center;
}

.pd-section--stats[data-pd-module^="stats--"] .pd-stats__empty-message {
  margin: 0;
  color: var(--pd-color-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Variant: row-even (default) */
.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="row-even"] .pd-stats__list {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pd-section--stats[data-pd-module^="stats--"][data-pd-variant="row-even"] .pd-stats__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .pd-section--stats[data-pd-module^="stats--"][data-pd-variant="row-even"] .pd-stats__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Variant: dual-lead */
.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__list {
  grid-template-columns: 1fr;
  gap: var(--pd-space-4);
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__item--lead {
  padding: var(--pd-space-6);
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__item--lead .pd-stats__value {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__item--lead .pd-stats__label {
  font-size: 1.0625rem;
}

@media (min-width: 60rem) {
  .pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--pd-space-5);
    align-items: stretch;
  }
  .pd-section--stats[data-pd-module^="stats--"][data-pd-variant="dual-lead"] .pd-stats__item--lead {
    grid-column: 1;
    grid-row: 1 / -1;
  }
}

/* Variant: inline-compact */
.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="inline-compact"] .pd-stats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-4) var(--pd-space-6);
  grid-template-columns: none;
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="inline-compact"] .pd-stats__item {
  padding: 0;
  background: transparent;
  border-radius: 0;
  flex: 0 1 auto;
  min-width: 8rem;
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="inline-compact"] .pd-stats__value {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="inline-compact"] .pd-stats__label {
  font-size: 0.875rem;
  color: var(--pd-color-muted);
  font-weight: 500;
}

.pd-section--stats[data-pd-module^="stats--"][data-pd-variant="inline-compact"] .pd-stats__description {
  display: none;
}