/**
 * AC | Big Number — card estatístico.
 * Tokens Figma:
 *   Card: bg #FFFFFF, radius 8px, shadow Elevation/xs
 *   Top: padding 16px 16px 8px, gap 8px, row
 *   Icon: 36×36, color Verde Camargo (currentColor herdado)
 *   Number: Raleway Bold 32px, line-height 120%, color #0E5236 (Verde Camargo)
 *   Unit: pequeno ao lado do número
 *   Bottom: padding 8px 16px 16px
 *   Description: Arial 14px / 160% / #404040
 */

/* Borda opcional (toggle "Mostrar borda"). */
.ac-big-number--border { border: 1px solid #E5E5E5; }

.ac-big-number {
  --ac-bn-color-number: #0E5236;
  --ac-bn-color-icon: #0E5236;
  --ac-bn-color-description: #404040;
  --ac-bn-radius: 8px;
  --ac-bn-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.08);

  background: #FFFFFF;
  border-radius: var(--ac-bn-radius);
  box-shadow: var(--ac-bn-shadow);
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Spec Figma: 108px desktop / 128px mobile (override em media query).
   * Usa min-height pra não cortar conteúdo se crescer; align-self impede
   * que columns flex estiquem o card pra altura do maior. */
  min-height: 108px;
  align-self: flex-start;
}

/* Quando dentro de columns no ac-section, garante que os columns NÃO esticam
 * pra mesma altura (o columns flex default usa align-items: stretch). */
.ac-section__inner .wp-block-columns:has(.ac-big-number) {
  align-items: flex-start !important;
}
.ac-section__inner .wp-block-columns:has(.ac-big-number) .wp-block-column {
  align-self: flex-start !important;
}

.ac-big-number__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
  color: var(--ac-bn-color-icon);
}

.ac-big-number__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  line-height: 0;
}
.ac-big-number__icon svg {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}

.ac-big-number__number-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 4px;
}

.ac-big-number .ac-big-number__number {
  font-family: Raleway, sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  color: var(--ac-bn-color-number) !important;
  margin: 0 !important;
}

.ac-big-number .ac-big-number__unit {
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--ac-bn-color-number) !important;
  margin: 0 !important;
}

.ac-big-number__bottom {
  padding: 8px 16px 16px;
}

.ac-big-number .ac-big-number__description {
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ac-bn-color-description) !important;
  margin: 0 !important;
}

/* Mobile: layout 2+1 do Figma (grid 2 col, o 3º ímpar span 2) — mas SÓ quando o
 * "Stack on mobile" nativo do Columns está DESLIGADO (classe
 * `is-not-stacked-on-mobile`). Com ele LIGADO (padrão), a regra geral da
 * ac-section empilha os cards 1 abaixo do outro (respeitando o toggle do editor).
 * Spec Figma: gap 16px row + 24px column, número 24px.
 * Usa :has() — suportado em Chrome 105+, Safari 15.4+, Firefox 121+. */
@media (max-width: 768px) {
  .ac-section__inner .wp-block-columns.is-not-stacked-on-mobile:has(.ac-big-number) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-direction: unset !important;
    gap: 16px 24px !important;
  }
  .ac-section__inner .wp-block-columns.is-not-stacked-on-mobile:has(.ac-big-number) .wp-block-column {
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    flex-basis: auto !important;
  }
  /* Último card (3º quando ímpar) ocupa as 2 colunas. */
  .ac-section__inner .wp-block-columns.is-not-stacked-on-mobile:has(.ac-big-number) .wp-block-column:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  /* Stack ON (padrão): cards empilhados 1 abaixo do outro com gap 16px (spec). */
  .ac-section__inner .wp-block-columns:not(.is-not-stacked-on-mobile):has(.ac-big-number) {
    gap: 16px !important;
  }
  /* Número diminui pra 24px no mobile (Headding/H2 mobile do DS). */
  .ac-big-number .ac-big-number__number {
    font-size: 24px !important;
  }
  /* Mobile: card cresce pra 128px (spec Figma). */
  .ac-big-number {
    min-height: 128px;
  }
}