/**
 * acf-stats-strip-section — forest green stats band
 * (Html-css-components/stats-strip + Figma Layout / 675 / Stat cards).
 *
 * Layout modes:
 * - 1–2 stats: large hero cards (unchanged sizing).
 * - 3–4 stats: compact row/grid (Figma Stat cards).
 */

.acf-stats-strip-section {
  display: flex;
  flex-direction: column;
  background-color: var(--color-brand-forest);
  /* Figma Layout / 675 / — py-40px, px-80px desktop */
  padding-block: var(--spacing-10);
  padding-inline: var(--spacing-4);
  color: var(--color-light);
}

.acf-stats-strip-section__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  max-inline-size: var(--container-main);
  margin-inline: auto;
}

.acf-stats-strip-section--has-heading .acf-stats-strip-section__panel {
  gap: var(--spacing-10); /* styleguide-exception: Figma title → cards */
}

/* Beat .entry-content h2 from reset.css */
.acf-stats-strip-section .acf-stats-strip-section__heading {
  margin: 0;
  inline-size: 100%;
  max-inline-size: none;
  text-align: center;
  color: var(--color-light);
}

.acf-stats-strip-section__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-4);
}

.acf-stats-strip-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  box-sizing: border-box;
  padding: var(--spacing-8);
  text-align: center;
  border: 1px solid rgb(255 220 39 / 0.4);
  border-radius: var(--radius-leaf-lg);
}

.acf-stats-strip-section__subtitle {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 21px;
  color: var(--color-light);
}

.acf-stats-strip-section__number {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.15;
  color: var(--color-sunshine-yellow);
}

.acf-stats-strip-section__label {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 21px;
  color: var(--color-light);
}

/* ——— Large layout (1–2 stats) ——— */
@media (min-width: 640px) {
  .acf-stats-strip-section {
    padding-inline: var(--block-pad-inline);
  }

  .acf-stats-strip-section--layout-default .acf-stats-strip-section__list {
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-8);
  }

  .acf-stats-strip-section--layout-default .acf-stats-strip-section__item {
    flex: 1 1 calc(50% - var(--spacing-4));
    min-inline-size: min(100%, 280px);
    max-inline-size: 624px; /* styleguide-exception: Figma large stats card */
    min-block-size: 200px;
  }
}

@media (min-width: 1024px) {
  .acf-stats-strip-section--layout-default .acf-stats-strip-section__list {
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-8);
  }

  .acf-stats-strip-section--layout-default .acf-stats-strip-section__item {
    flex: 1 1 0;
    inline-size: auto;
    max-inline-size: 624px; /* styleguide-exception: Figma large stats card */
    min-block-size: 240px; /* styleguide-exception: Figma large stats card */
    block-size: 240px;
  }

  .acf-stats-strip-section--layout-default .acf-stats-strip-section__subtitle,
  .acf-stats-strip-section--layout-default .acf-stats-strip-section__label {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
  }

  .acf-stats-strip-section--layout-default .acf-stats-strip-section__number {
    font-size: 56px; /* styleguide-exception: desktop large metric */
    line-height: 67px;
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .acf-stats-strip-section {
    padding-inline: var(--spacing-12);
  }
}

@media (max-width: 639px) {
  .acf-stats-strip-section--layout-default .acf-stats-strip-section__item {
    inline-size: min(398px, 100%); /* styleguide-exception: Figma mobile large card */
    max-inline-size: 398px;
    min-block-size: 240px; /* styleguide-exception: Figma mobile large card */
    block-size: 240px;
  }
}

/* ——— Compact layout (3–4 stats, Figma Stat cards) ——— */
.acf-stats-strip-section--layout-compact .acf-stats-strip-section__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
  align-items: stretch;
}

.acf-stats-strip-section--layout-compact .acf-stats-strip-section__item {
  gap: var(--spacing-2);
  padding: var(--spacing-6);
  min-block-size: 0;
  block-size: auto;
  max-inline-size: none;
  inline-size: auto;
}

.acf-stats-strip-section--layout-compact .acf-stats-strip-section__subtitle {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.acf-stats-strip-section--layout-compact .acf-stats-strip-section__number {
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem); /* styleguide-exception: compact metric */
  line-height: 1.15;
  white-space: normal;
}

.acf-stats-strip-section--layout-compact .acf-stats-strip-section__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

@media (min-width: 640px) {
  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__list {
    gap: var(--spacing-6);
  }

  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__item {
    min-block-size: 11rem; /* styleguide-exception: Figma compact stat card ~176px */
    padding: var(--spacing-6) var(--spacing-4);
  }
}

@media (min-width: 1024px) {
  .acf-stats-strip-section--layout-compact.acf-stats-strip-section--count-3 .acf-stats-strip-section__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-8);
  }

  .acf-stats-strip-section--layout-compact.acf-stats-strip-section--count-4 .acf-stats-strip-section__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-8);
  }

  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__item {
    min-block-size: 12.5rem; /* styleguide-exception: Figma compact stat card desktop */
    padding: var(--spacing-6);
  }

  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__number {
    font-size: 2.5rem; /* styleguide-exception: 40px compact metric desktop */
    line-height: 1.2;
  }

  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__label {
    font-size: var(--font-size-h5);
  }
}

@media (max-width: 639px) {
  .acf-stats-strip-section--layout-compact.acf-stats-strip-section--count-3 .acf-stats-strip-section__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .acf-stats-strip-section--layout-compact .acf-stats-strip-section__item {
    min-block-size: 10.5rem; /* styleguide-exception: compact card mobile */
  }
}