/**
 * AC | Feature Item — ícone + título + descrição + logos (Figma Frame 115).
 * Linha: ícone 56×56 à esquerda + coluna de texto à direita.
 */
.ac-feature-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* Ícone à esquerda (default): centraliza verticalmente o ícone com o texto. */
.ac-feature-item--icon-left {
  align-items: center;
}
.ac-feature-item--icon-left .ac-feature-item__icon {
  align-self: center;
}

/* Alinhamento vertical do ícone (icon-left) configurável: topo vs centro.
 * Default = centro (regra acima). `iconAlign: top` alinha ícone+texto ao topo. */
.ac-feature-item--icon-left.ac-feature-item--icon-align-top {
  align-items: flex-start;
}
.ac-feature-item--icon-left.ac-feature-item--icon-align-top .ac-feature-item__icon {
  align-self: flex-start;
}

/* Variante ícone ACIMA do título (DS card vertical): empilha ícone + conteúdo. */
.ac-feature-item--icon-top {
  flex-direction: column;
  align-items: stretch;
}
.ac-feature-item--icon-top .ac-feature-item__icon { align-self: flex-start; }
/* Icon-top: altura "hug" (DS) — o card acompanha o conteúdo, não estica
 * junto com a célula do grid (diferente do card icon-left, que alinha 100%). */
.ac-feature-item--icon-top.ac-feature-item--card {
  height: auto;
  align-self: start;
}
/* Igualar altura (opt-in, "equalHeight"): reverte o hug do icon-top card →
 * estica pra preencher a célula do grid (que já é stretch) → todos os cards da
 * linha ficam na altura do mais alto. Ligar em TODOS os cards da linha. Default
 * é hug (regra acima) = zero regressão nas páginas atuais. */
.ac-feature-item--icon-top.ac-feature-item--card.ac-feature-item--fill {
  height: 100%;
  align-self: stretch;
}
.ac-feature-item__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  align-self: flex-start;
  display: block;
}
.ac-feature-item__icon svg { width: 56px; height: 56px; display: block; }

.ac-feature-item__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ac-feature-item__subheader {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  color: #774900;
}
.ac-feature-item__title {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #0E5236;
}
.ac-feature-item__text {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #404040;
}

/* Fileira de logos (chips 80×80), com wrap. margin-top:auto empurra pro rodapé
 * → alinha entre colunas no feature-grid mesmo com descrições de tamanhos
 * diferentes. */
.ac-feature-item__logos {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
}

/* CTA (cta-button via InnerBlocks) compartilha o container __logos com os
 * logos; ocupa a linha inteira em vez de virar item da fileira. */
.ac-feature-item__logos > .ac-cta {
  flex: 0 0 100%;
  justify-content: flex-start !important;
}

/* Seta opcional (chevron-right 24×24) no fim da linha, alinhada à base. */
.ac-feature-item__arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-self: flex-end;
  color: #0E5236;
  line-height: 0;
}
.ac-feature-item__arrow svg { width: 24px; height: 24px; display: block; }

/* ---------------------------------------------------------------------------
 * Variante CARD (DS "Item", 874:166): chrome de card branco.
 * Ícone 48×48 e título 16px (Card-title/sm). Preenche a célula no card-grid.
 * --------------------------------------------------------------------------- */
.ac-feature-item--card {
  gap: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.08);
  height: 100%;
  /* Largura do card conforme DS (Item): preenche a coluna, mín 240 / máx 524. */
  min-width: min(240px, 100%);
  max-width: 524px;
}
.ac-feature-item--card .ac-feature-item__icon { flex-basis: 48px; width: 48px; height: 48px; }
.ac-feature-item--card .ac-feature-item__icon svg { width: 48px; height: 48px; }
.ac-feature-item--card .ac-feature-item__title { font-size: 16px; }

/* ---------------------------------------------------------------------------
 * Tamanho de fonte configurável (sobrescreve os defaults, inclusive o card).
 * Vêm depois do bloco --card pra vencer no desempate de especificidade.
 * --------------------------------------------------------------------------- */
.ac-feature-item--title-16 .ac-feature-item__title { font-size: 16px; }
.ac-feature-item--title-18 .ac-feature-item__title { font-size: 18px; }
.ac-feature-item--title-20 .ac-feature-item__title { font-size: 20px; }
.ac-feature-item--title-24 .ac-feature-item__title { font-size: 24px; }
.ac-feature-item--text-16 .ac-feature-item__text { font-size: 16px; }
.ac-feature-item--text-18 .ac-feature-item__text { font-size: 18px; }
.ac-feature-item--text-20 .ac-feature-item__text { font-size: 20px; }

/* ---------------------------------------------------------------------------
 * Mobile (≤768px): a variante icon-top vira ícone à ESQUERDA, lado a lado com
 * o texto (Figma mobile — card largo/baixo), gap 16px e ícone centralizado.
 * --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ac-feature-item--icon-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .ac-feature-item--icon-top .ac-feature-item__icon { align-self: flex-start; }

  /* Alinhamento vertical do ícone no mobile (icon-left), independente do desktop.
   * Ambos declarados pra vencer a regra desktop (--icon-align-*) que vale em
   * qualquer largura — aqui (no @media, depois no arquivo) sobrescreve. */
  .ac-feature-item--icon-left.ac-feature-item--icon-align-m-top {
    align-items: flex-start;
  }
  .ac-feature-item--icon-left.ac-feature-item--icon-align-m-top .ac-feature-item__icon {
    align-self: flex-start;
  }
  .ac-feature-item--icon-left.ac-feature-item--icon-align-m-center {
    align-items: center;
  }
  .ac-feature-item--icon-left.ac-feature-item--icon-align-m-center .ac-feature-item__icon {
    align-self: center;
  }
}