/* ==========================================================================
   DOBRA DIFERENCIAIS — Cards com ícone (V8 — h2-secao--diferenciais)
   Tokens --hm2-on-surface-* definidos em h2-secao.css para h2-contrast-light-text
   ========================================================================== */

/* 1. Remove fundo/sombra do wrapper da view */
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;
}

/* 2. Card item — usa tokens de contraste (adapta claro/escuro automaticamente) */
body:not(.path-admin) .h2-secao--diferenciais .views-view-responsive-grid__item-inner {
  background-color: var(--hm2-on-surface-card-bg, #ffffff) !important;
  border: 1px solid var(--hm2-on-surface-card-border, #e2e8f0) !important;
  border-radius: var(--hm2-border-radius-card, 0.5rem) !important;
  padding: 1.75rem 1.5rem !important;
  box-shadow: 0 2px 14px var(--hm2-on-surface-card-shadow, rgba(0,0,0,0.07)) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.path-admin) .h2-secao--diferenciais .views-view-responsive-grid__item-inner:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px var(--hm2-on-surface-card-shadow, rgba(0,0,0,0.12)) !important;
}

/* 3. Ícones — ocultos por padrão, exibidos com .com-icone na seção */
body:not(.path-admin) .h2-secao--diferenciais .views-field-field-diferencial-icone,
body:not(.path-admin) .h2-secao--diferenciais .views-field-field-diferencial-icone-svg {
  display: none !important;
}

/* 4. 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 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--hm2-on-surface-accent, var(--bs-primary)) !important;
  text-decoration: none !important;
  display: block !important;
}

/* 5. 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.6 !important;
}

/* ===================================================================
   MODIFICADOR com-icone: ativa ícone no topo
   Automaticamente adicionado pelo motor V8 quando nós têm ícone.
   =================================================================== */

/* Exibe campo SVG (primário) */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone-svg {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
}

/* Quando SVG existe, esconde PNG (hide_empty garante que SVG só renderiza se preenchido) */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone-svg ~ .views-field-field-diferencial-icone {
  display: none !important;
}

/* Container do ícone — círculo sólido com cor primária */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone-svg .field-content,
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone .field-content {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background-color: var(--bs-primary, #5b238a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* SVG branco dentro do círculo */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone-svg svg {
  width: 32px !important;
  height: 32px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

/* Imagem PNG (fallback) — branca dentro do círculo */
body:not(.path-admin) .h2-secao--diferenciais.com-icone .views-field-field-diferencial-icone img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}