/**
 * Widget "Chamada Intermediária" — assets/css/sections/pagina-chamada.css
 *
 * Faixa de CTA compacta para meio de página, fundo em cor OU imagem
 * (camada de overlay quando há imagem, para garantir contraste do texto).
 *
 * Cores do widget (fundo, título, texto, botões) são aplicadas pelo
 * Elementor via `selectors` nos controles COLOR do painel (ver
 * widgets/pagina-chamada.php) — este arquivo só define layout, tipografia
 * de apoio e a estrutura do overlay.
 *
 * Mobile-first. Zero hex literal — só var(--fjpn-*). Zero !important.
 */

.fjpn-pagina-chamada {
  position: relative;
  overflow: hidden;
  padding-block: var(--fjpn-space-section-py-md);
  background-color: var(--fjpn-blue-primary);
}

.fjpn-pagina-chamada--com-imagem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Camada de sobreposição — só existe no DOM quando há imagem de fundo
   (ver render() do widget). Cor/opacidade controláveis pelo painel;
   valores aqui são só o fallback estrutural antes do CSS do Elementor
   carregar. */
.fjpn-pagina-chamada__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--fjpn-slate-900);
  opacity: 0.55;
}

.fjpn-pagina-chamada__container {
  position: relative;
  z-index: 1;
}

.fjpn-pagina-chamada__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fjpn-gap-medium);
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.fjpn-pagina-chamada__titulo {
  margin: 0;
  color: var(--fjpn-white);
}

.fjpn-pagina-chamada__titulo-destaque {
  color: var(--fjpn-orange-primary);
}

.fjpn-pagina-chamada__texto {
  margin: 0;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-blue-light);
}

/* ==========================================================
 * Botões — mobile: empilhados e de largura confortável; a partir de
 * 640px, lado a lado. Alvo de toque mínimo 44px garantido pelo padding
 * de `.fjpn-btn` (base.css) + min-height explícito aqui.
 * ========================================================== */

.fjpn-pagina-chamada__acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fjpn-gap-medium);
  width: 100%;
  margin-top: var(--fjpn-gap-icon-text);
}

.fjpn-pagina-chamada__btn {
  min-height: 44px;
}

.fjpn-pagina-chamada__btn--1 {
  background-color: var(--fjpn-orange-primary);
  color: var(--fjpn-white);
  box-shadow: var(--fjpn-shadow-button-orange);
}

.fjpn-pagina-chamada__btn--2 {
  background-color: transparent;
  border: var(--fjpn-border-width-outline) solid var(--fjpn-white);
  color: var(--fjpn-white);
  /* compensa a borda de 2px pra manter a mesma altura visual do botão 1,
     sem alterar os tokens de padding — mesmo ajuste de base.css
     (.fjpn-btn-blue-outline). */
  padding:
    calc(var(--fjpn-padding-button-y) - var(--fjpn-border-width-outline))
    calc(var(--fjpn-padding-button-x) - var(--fjpn-border-width-outline));
}

.fjpn-pagina-chamada__btn--2:hover {
  /* Branco translúcido a partir do token — nenhuma cor literal fora de
     var(--fjpn-*), inclusive na opacidade de hover. */
  background-color: color-mix(in srgb, var(--fjpn-white) 12%, transparent);
}

@media (min-width: 640px) {
  .fjpn-pagina-chamada__acoes {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
  }

  .fjpn-pagina-chamada__btn {
    flex: 0 0 auto;
  }
}

/* ==========================================================
 * Sangria de seção — largura total dentro do Elementor.
 * Mesmo padrão da seção 5 de base.css (arquivo somente-leitura), replicado
 * aqui porque este widget novo não está na lista fixa daquele arquivo.
 * ========================================================== */

.elementor-widget-fjpn-pagina-chamada > .elementor-widget-container {
  width: 100%;
  margin: 0;
  padding: 0;
}