/**
 * Nexo Information Card.
 *
 * Card visual reutilizável para blocos informativos, benefícios,
 * diferenciais, recursos técnicos e chamadas auxiliares.
 *
 * Também inclui um grid composto para organizar cards diretamente
 * dentro de uma única coluna/editor do SiteOrigin, evitando conflitos
 * com gutters e colunas nativas do Page Builder.
 *
 * @package NexoBase
 */

/* ==========================================================================
   Base do card
   ========================================================================== */

.nexo-information-card {
  --nexo-info-card-bg: #050707;
  --nexo-info-card-color: #ffffff;
  --nexo-info-card-muted-color: rgba(255, 255, 255, 0.86);
  --nexo-info-card-accent: #ff5a00;
  --nexo-info-card-radius: 8px;
  --nexo-info-card-padding-y: 32px;
  --nexo-info-card-padding-x: 30px;
  --nexo-info-card-height: 240px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--nexo-card-height, var(--nexo-info-card-height, 240px));
  min-height: var(--nexo-card-height, var(--nexo-info-card-height, 240px));
  padding: var(--nexo-card-padding-y, var(--nexo-info-card-padding-y, 32px))
    var(--nexo-card-padding-x, var(--nexo-info-card-padding-x, 30px));
  border: var(--nexo-card-border-width, 0) solid
    var(--nexo-card-border-color, transparent);
  border-radius: var(
    --nexo-card-border-radius,
    var(--nexo-info-card-radius, 8px)
  );
  background: var(--nexo-card-background, var(--nexo-info-card-bg, #050707));
  color: var(--nexo-card-text-color, var(--nexo-info-card-color, #ffffff));
  box-shadow: var(--nexo-card-box-shadow, none);
  text-align: var(--nexo-card-text-align, left);
  overflow: hidden;
}

/* ==========================================================================
   Variações visuais
   ========================================================================== */

.nexo-information-card--dark {
  --nexo-info-card-bg: #050707;
  --nexo-info-card-color: #ffffff;
  --nexo-info-card-muted-color: rgba(255, 255, 255, 0.86);
}

.nexo-information-card--gray {
  --nexo-info-card-bg: #676868;
  --nexo-info-card-color: #ffffff;
  --nexo-info-card-muted-color: rgba(255, 255, 255, 0.9);
}

.nexo-information-card--light {
  --nexo-info-card-bg: #ffffff;
  --nexo-info-card-color: #1f2523;
  --nexo-info-card-muted-color: rgba(31, 37, 35, 0.78);
}

/* ==========================================================================
   Variações dimensionais opcionais
   ========================================================================== */

.nexo-information-card--compact {
  --nexo-info-card-padding-y: 28px;
  --nexo-info-card-padding-x: 26px;
  --nexo-info-card-height: 220px;
}

.nexo-information-card--large {
  --nexo-info-card-padding-y: 38px;
  --nexo-info-card-padding-x: 34px;
  --nexo-info-card-height: 270px;
}

.nexo-information-card--taller {
  --nexo-info-card-height: 280px;
}

.nexo-information-card--auto-height {
  height: auto;
  min-height: var(--nexo-info-card-height);
  overflow: visible;
}

/* ==========================================================================
   Estrutura interna do card
   ========================================================================== */

.nexo-information-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  color: var(
    --nexo-card-icon-color,
    var(--nexo-info-card-accent, currentColor)
  );
}

.nexo-information-card__icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.nexo-information-card__icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.nexo-information-card__title {
  flex: 0 0 auto;
  margin: 0 0 18px;
  color: var(
    --nexo-card-title-color,
    var(--nexo-card-text-color, var(--nexo-info-card-color, #ffffff))
  );
  font-family: var(
    --nexo-font-family-headings,
    "Nunito Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif
  );
  font-size: var(--nexo-card-title-size, var(--nexo-font-size-h4, 24px));
  font-weight: var(--nexo-card-title-weight, var(--nexo-font-weight-h4, 800));
  line-height: var(--nexo-card-title-line-height, 1.08);
  letter-spacing: var(--nexo-card-title-letter-spacing, -0.02em);
  text-transform: var(--nexo-card-title-transform, none);
}

.nexo-information-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

.nexo-information-card--center-content .nexo-information-card__content {
  justify-content: center;
}

.nexo-information-card__text {
  max-width: 330px;
  margin: 0;
  color: var(
    --nexo-card-content-color,
    var(--nexo-info-card-muted-color, currentColor)
  );
  font-family: var(
    --nexo-font-family-body,
    "Nunito Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif
  );
  font-size: var(--nexo-card-text-size, 12.5px);
  font-weight: var(--nexo-card-text-weight, var(--nexo-font-weight-body, 400));
  line-height: var(--nexo-card-text-line-height, 1.42);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.nexo-information-card__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 20px;
}

/* ==========================================================================
   Slot para botão alinhado aos cards
   ========================================================================== */

.nexo-information-card-slot {
  --nexo-info-card-height: 240px;

  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--nexo-info-card-height);
  min-height: var(--nexo-info-card-height);
}

.nexo-information-card-slot .nexo-cta-button-wrap {
  width: 100% !important;
  margin: 0 !important;
}

.nexo-information-card-slot .nexo-cta-button {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
}

/* Evita margens automáticas se o shortcode for embrulhado pelo editor. */
.nexo-information-card-slot p {
  width: 100%;
  margin: 0;
}

/* ==========================================================================
   Grid composto para row única / coluna única do SiteOrigin
   ========================================================================== */

.nexo-information-card-feature-grid {
  --nexo-info-card-grid-gap: 16px;
  --nexo-info-card-height: 240px;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nexo-info-card-grid-gap);
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Remove margens que o editor visual pode aplicar ao redor do grid. */
.siteorigin-widget-tinymce .nexo-information-card-feature-grid,
.textwidget .nexo-information-card-feature-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.nexo-information-card-feature-grid > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.nexo-information-card-feature-grid .nexo-information-card,
.nexo-information-card-feature-grid .nexo-information-card-slot {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   Intro textual dentro do grid composto
   ========================================================================== */

.nexo-information-card-feature-grid__intro {
  box-sizing: border-box;
  grid-column: span 2;
  width: 100%;
  text-align: right;
}

.nexo-information-card-feature-grid__title {
  margin: 0;
  color: #272b2c;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.nexo-information-card-feature-grid__text {
  max-width: 590px;
  margin: 42px 0 0 auto;
  color: #1f2523;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

/* ==========================================================================
   Compatibilidade opcional com rows antigas de múltiplas colunas
   ========================================================================== */

.panel-grid.nexo-information-card-grid,
.panel-row-style.nexo-information-card-grid {
  --nexo-info-card-grid-gap: 16px;
  margin-bottom: 0 !important;
}

.panel-grid.nexo-information-card-grid .panel-row-style {
  width: calc(100% + var(--nexo-info-card-grid-gap)) !important;
  margin-right: calc(var(--nexo-info-card-grid-gap) / -2) !important;
  margin-left: calc(var(--nexo-info-card-grid-gap) / -2) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.panel-row-style.nexo-information-card-grid {
  width: calc(100% + var(--nexo-info-card-grid-gap)) !important;
  margin-right: calc(var(--nexo-info-card-grid-gap) / -2) !important;
  margin-left: calc(var(--nexo-info-card-grid-gap) / -2) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.panel-grid.nexo-information-card-grid .panel-grid-cell,
.panel-row-style.nexo-information-card-grid > .panel-grid-cell {
  box-sizing: border-box;
  margin-left: 0 !important;
  padding-right: calc(var(--nexo-info-card-grid-gap) / 2) !important;
  padding-left: calc(var(--nexo-info-card-grid-gap) / 2) !important;
}

.panel-grid.nexo-information-card-grid .so-panel,
.panel-row-style.nexo-information-card-grid .so-panel {
  margin-bottom: 0 !important;
}

.panel-grid.nexo-information-card-grid .nexo-information-card,
.panel-grid.nexo-information-card-grid .nexo-information-card-slot,
.panel-row-style.nexo-information-card-grid .nexo-information-card,
.panel-row-style.nexo-information-card-grid .nexo-information-card-slot {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
  .nexo-information-card {
    --nexo-info-card-height: 250px;
    --nexo-info-card-padding-y: 30px;
    --nexo-info-card-padding-x: 28px;
  }

  .nexo-information-card-slot {
    --nexo-info-card-height: 250px;
  }

  .nexo-information-card-feature-grid {
    --nexo-info-card-grid-gap: 14px;
    --nexo-info-card-height: 250px;
  }

  .nexo-information-card-feature-grid__title {
    font-size: 34px;
  }

  .panel-grid.nexo-information-card-grid,
  .panel-row-style.nexo-information-card-grid {
    --nexo-info-card-grid-gap: 12px;
  }
}

@media (max-width: 767px) {
  .nexo-information-card {
    --nexo-info-card-padding-y: 28px;
    --nexo-info-card-padding-x: 24px;

    height: auto;
    min-height: 220px;
    overflow: visible;
  }

  .nexo-information-card-slot {
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    min-height: 80px;
  }

  .nexo-information-card__title {
    font-size: var(--nexo-card-title-size-mobile, 22px);
  }

  .nexo-information-card__text {
    max-width: none;
    font-size: var(--nexo-card-text-size-mobile, 13px);
  }

  .nexo-information-card-feature-grid {
    --nexo-info-card-grid-gap: 14px;

    grid-template-columns: 1fr;
  }

  .nexo-information-card-feature-grid__intro {
    grid-column: auto;
    text-align: left;
  }

  .nexo-information-card-feature-grid__title {
    font-size: 28px;
  }

  .nexo-information-card-feature-grid__text {
    margin: 22px 0 0;
  }

  .nexo-information-card-feature-grid__title br,
  .nexo-information-card-feature-grid__text br {
    display: none;
  }

  .panel-grid.nexo-information-card-grid,
  .panel-row-style.nexo-information-card-grid {
    --nexo-info-card-grid-gap: 8px;
  }
}