/*
 * Home Hero - Hygienize Child
 *
 * A Hero da Home e conteudo Stackable puro (Starter Site), controlado
 * pelo Painel Hygienize via os filtros render_block em
 * inc/dynamic-content.php (classes-marcador .hyg-home-hero e
 * .hyg-home-hero-button). Este arquivo so ajusta a APARENCIA desses
 * blocos - nao mexe em texto/conteudo, que continua 100% editavel pelo
 * cliente no admin.
 *
 * !important e necessario porque o Stackable gera CSS proprio com
 * especificidade baseada no ID do bloco (ex.: .stk-460b17c ...), que
 * precisa ser sobrescrito para valer o visual do Design System do tema.
 *
 * As regras abaixo tambem cobrem a faixa "Diferenciais" logo abaixo do
 * Hero (bloco stk-26063b3): ela veio do Starter Site com uma cor azul
 * propria do Stackable (#1E4F97, "theme-palette-color-1"), diferente de
 * --hyg-color-primary (#2F5EA8) usado em todo o resto do site (botoes,
 * CTA, carrossel do YouTube) - por isso a Home parecia com um tom de
 * azul mais escuro/dissonante do que as demais paginas. Aqui a cor e
 * realinhada ao token do Design System.
 */

/* --- Botao do Hero: de contorno fino/baixo contraste para preenchido,
   com o mesmo peso visual de um CTA primario (.hyg-btn--primary).
   Seletor com 3 classes (.hyg-home-hero-button.stk-block-button
   .stk-button) de proposito: o Stackable injeta um <style> inline por
   bloco (ex.: .stk-9901811 .stk-button {...} !important) com 2 classes
   de especificidade - empatando com um seletor de 2 classes e vencendo
   pela ordem no DOM (ele vem depois). Usar 3 classes aqui garante que
   esta regra vence sempre, independente da ordem de carregamento. */
.hyg-home-hero-button.stk-block-button .stk-button {
  background-color: var(--hyg-color-primary) !important;
  border: none !important;
  border-radius: var(--hyg-radius-md) !important;
  box-shadow: var(--hyg-shadow-lg);
  transition:
    transform var(--hyg-transition-fast),
    box-shadow var(--hyg-transition-base),
    background-color var(--hyg-transition-base);
}

.hyg-home-hero-button.stk-block-button .stk-button .stk-button__inner-text {
  color: var(--hyg-color-on-primary) !important;
  font-weight: var(--hyg-font-weight-semibold) !important;
}

.hyg-home-hero-button.stk-block-button .stk-button:hover {
  background-color: var(--hyg-color-secondary) !important;
  transform: translateY(-2px);
  box-shadow: var(--hyg-shadow-md);
}

.hyg-home-hero-button.stk-block-button .stk-button:focus-visible {
  outline: 2px solid var(--hyg-color-on-primary);
  outline-offset: 2px;
}

/* --- Titulo do Hero: o Starter Site deixou o texto em azul-marinho
   escuro (#0F2D5C) - baixo contraste sobre a foto com overlay escuro.
   Troca para branco, no mesmo tom do subtitulo e do botao, que ja usam
   --hyg-color-on-primary. O Stackable injeta, por bloco, um <style>
   inline mais especifico que uma classe unica (ex.:
   .stk-8b0ceb4 .stk-block-heading__text {...} !important, 2 classes) -
   por isso o seletor abaixo usa 3 classes (wrapper composto + span do
   texto) para vencer sempre, independente da ordem no DOM. */
.hyg-home-hero-title.stk-block-heading .stk-block-heading__text {
  color: var(--hyg-color-on-primary) !important;
}

/* --- Overlay extra de contraste atras do texto: um gradiente somado ao
   overlay padrao do Stackable, concentrado exatamente onde o titulo/
   subtitulo/botao ficam - assim a legibilidade do texto nao depende de
   qual trecho da foto cai atras dele (o cliente pode trocar a imagem de
   fundo no painel sem arriscar o contraste). Desktop: gradiente
   horizontal (texto fica na coluna esquerda). Mobile/tablet: gradiente
   vertical (layout empilha e o texto fica sobre a parte de baixo da
   foto). */
/* Valores propositalmente moderados: o Stackable ja aplica seu proprio
   overlay uniforme (::before, ~50% preto) por cima da foto - este
   gradiente e um reforco pontual na zona do texto, nao uma segunda
   camada por cima da primeira (as duas somadas ficavam escuras/
   "azuladas" demais e destoavam do resto do site, que e predominante-
   mente claro). */
.hyg-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.32) 0%,
    rgba(0, 0, 0, 0.14) 40%,
    rgba(0, 0, 0, 0) 70%
  );
}

@media screen and (max-width: 999px) {
  .hyg-home-hero::after {
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.16) 45%,
      rgba(0, 0, 0, 0) 80%
    );
  }
}

/* --- Faixa "Diferenciais": realinha a cor de fundo ao azul do Design
   System (ver explicacao no topo do arquivo). Seletor com 2 classes
   para vencer o <style> inline do Stackable (.stk-26063b3, 1 classe). */
.stk-26063b3.stk-block-background {
  background-color: var(--hyg-color-primary) !important;
}

.stk-26063b3.stk-block-background::before {
  background-color: var(--hyg-color-primary) !important;
}