/* Hero — primeira tela.
   Markup: patterns/hero.php
   Imagem: ../img/hero.webp (1920x1080, 93KB)

   A foto entra como <img> e nao como background do CSS: sendo o maior
   elemento da primeira tela, ela e a LCP da pagina, e o navegador so descobre
   um background depois de baixar e interpretar o CSS. Como <img> com
   fetchpriority alto, ela comeca a baixar junto com o HTML. */

.jhonys-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;

  min-height: clamp(420px, 68vh, 620px);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  background: var(--wp--preset--color--verde-escuro);
}

/* --- o palco do fundo ---
   Container das fotos que se revezam. No futuro e aqui que entra o iframe
   do YouTube, no lugar dos quadros. */

.jhonys-hero__palco {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;

  /* o layout "constrained" do core poe max-width nos filhos — alcanca ate
     elemento absoluto, e o fundo pararia nos 1240px do conteudo */
  max-width: none;
}

.jhonys-hero__quadro {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;

  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
}

/* --- o revezamento ---
   So a partir de 782px e so com movimento permitido. No celular fica o
   primeiro quadro: os outros dois nem sao declarados, entao o navegador nao
   baixa foto que ninguem vai ver.

   O quadro 1 nunca anima — e a LCP, tem de estar la desde o inicio. Os outros
   dois aparecem POR CIMA dele e somem; quando os dois estao transparentes, e
   o quadro 1 que reaparece. Assim nao ha piscada no carregamento. */

@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
  .jhonys-hero__quadro--2 {
    background-image: url(../img/hero-2.webp);
    animation: jhonys-quadro-2 21s infinite;
  }
  .jhonys-hero__quadro--3 {
    background-image: url(../img/hero-3.webp);
    animation: jhonys-quadro-3 21s infinite;
  }

  /* segundo terco do ciclo */
  @keyframes jhonys-quadro-2 {
    0%, 28%   { opacity: 0; }
    33%, 62%  { opacity: 1; }
    67%, 100% { opacity: 0; }
  }

  /* terceiro terco */
  @keyframes jhonys-quadro-3 {
    0%, 62%  { opacity: 0; }
    67%, 95% { opacity: 1; }
    100%     { opacity: 0; }
  }
}

/* veu: o texto precisa de contraste, e a foto precisa continuar aparecendo */
.jhonys-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(20, 30, 14, .92) 0%, rgba(20, 30, 14, .8) 46%, rgba(20, 30, 14, .52) 100%);
}

/* Ocupa os 1240px do container — o core ja o centraliza, entao o conteudo
   comeca alinhado com as demais secoes da pagina. Quem limita a largura do
   texto e o proprio titulo, nao este grupo: assim nada e centralizado a forca. */
.jhonys-hero__conteudo { width: 100%; }

.jhonys-hero__titulo {
  color: var(--wp--preset--color--branco);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

/* --- os tres diferenciais --- */

.jhonys-hero__pilares {
  /* gap zerado porque o respiro entre os itens vem do losango separador */
  gap: 0 !important;
  align-items: center;
}
.jhonys-hero__pilares p {
  margin: 0;
  color: var(--wp--preset--color--creme);
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 600;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  letter-spacing: .01em;
}

/* Separador em losango DEPOIS de cada item, menos o ultimo.
   Se fosse antes, uma linha quebrada comecaria com o losango solto — do jeito
   que esta, ela termina com ele, que e como se le uma lista. */
.jhonys-hero__pilares p:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 .85em .12em;
  rotate: 45deg;
  background: var(--wp--preset--color--amarelo);
}

/* --- acoes --- */

.jhonys-hero__acoes { margin-top: clamp(1.1rem, 2.4vw, 1.75rem); }

.jhonys-hero__acoes .wp-block-button__link {
  padding: .8em 1.6em;
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}

/* contorno: o padrao do core herda a cor do texto do tema, que aqui sumiria */
.jhonys-hero__acoes .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--branco);
  border: 2px solid rgba(255, 255, 255, .55);
  background: transparent;
}
.jhonys-hero__acoes .is-style-outline .wp-block-button__link:hover,
.jhonys-hero__acoes .is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--branco);
  color: var(--wp--preset--color--verde-escuro);
  border-color: var(--wp--preset--color--branco);
}

.jhonys-hero__acao--principal .wp-block-button__link:hover,
.jhonys-hero__acao--principal .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--branco);
  color: var(--wp--preset--color--verde-escuro);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(249, 174, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  .jhonys-hero__acoes .wp-block-button__link { transition: none; }
  .jhonys-hero__acao--principal .wp-block-button__link:hover { transform: none; }
}

/* --- celular --- */

@media (max-width: 600px) {
  .jhonys-hero { text-align: center; }
  .jhonys-hero::before {
    background: linear-gradient(180deg, rgba(20, 30, 14, .82) 0%, rgba(20, 30, 14, .9) 100%);
  }
  .jhonys-hero__titulo { max-width: none; margin-inline: auto; }
  .jhonys-hero__pilares { justify-content: center; }
  .jhonys-hero__acoes { justify-content: center; }
  .jhonys-hero__acoes .wp-block-button { flex: 1 1 100%; }
  .jhonys-hero__acoes .wp-block-button__link { display: block; text-align: center; }
}