/* ==========================================================================
   DOBRA DIFERENCIAIS — Cards com ícone opcional controlado por CSS class
   Estrutura: .view-hm2-lp-diferenciais > .views-view-responsive-grid
   Seção V8: node secao_modular (field_secao_tipo=diferenciais) — classe
   gerada automaticamente pelo motor V8: .h2-secao--diferenciais
   Modificador com-icone: secao_modular não tem campo de classes extras
   ainda, então a regra abaixo fica pronta mas inerte até esse mecanismo
   existir (ou até este injector ser editado manualmente por subsite).
   ========================================================================== */

/* 1. Remove fundo/sombra do bloco de views */
body:not(.path-admin) .h2-secao--diferenciais .view-hm2-lp-diferenciais {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 3. Card item — fundo adaptável ao fundo da seção */
body:not(.path-admin) .h2-secao--diferenciais .views-view-responsive-grid__item-inner {
  background-color: var(--hm2-on-surface-card-bg, #ffffff) !important;
  border-radius: var(--hm2-border-radius-card, 0px) !important;
  padding: 24px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 4. Ícone — oculto por padrão */
body:not(.path-admin) .h2-secao--diferenciais .views-field-field-diferencial-icone {
  display: none !important;
}

/* 5. Título */
body:not(.path-admin) .h2-secao--diferenciais .views-field-title .field-content,
body:not(.path-admin) .h2-secao--diferenciais .views-field-title a,
body:not(.path-admin) .h2-secao--diferenciais .views-field-title a:link,
body:not(.path-admin) .h2-secao--diferenciais .views-field-title a:visited {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--hm2-on-surface-accent, #9d7b53) !important;
  text-decoration: none !important;
  display: block !important;
}

/* 6. Descrição */
body:not(.path-admin) .h2-secao--diferenciais .views-field-field-diferencial-descricao .field-content {
  font-size: 0.875rem !important;
  color: var(--hm2-on-surface-muted, #6b7280) !important;
  line-height: 1.55 !important;
}

/* ===================================================================
   MODIFICADOR com-icone: ativa ícone circular no topo do card
   Uso: adicionar "com-icone" nas classes CSS da seção no Layout Builder
   =================================================================== */

/* Centraliza conteúdo do card */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-view-responsive-grid__item-inner {
  align-items: center !important;
  text-align: center !important;
}

/* Exibe container do ícone */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
}

/* Círculo ao redor do ícone */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone .field-content {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background-color: var(--hm2-on-surface-icon-bg, rgba(157, 123, 83, 0.10)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Imagem do ícone */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}