/*
 * Enquadramento da foto de fundo do hero, por faixa de tela.
 *
 *   DESKTOP  (a partir de 1000px)  imagem larga, alinhada à ESQUERDA - nada
 *                                  muda, é o enquadramento de sempre, definido
 *                                  na própria linha do WPBakery.
 *   TABLET   (691px a 999px)       a MESMA imagem larga, CENTRALIZADA.
 *   CELULAR  (até 690px)           imagens próprias em RETRATO (1080x1920),
 *                                  também CENTRALIZADAS. A troca do arquivo é
 *                                  do JS (ver elo-clima-cena.js); aqui só o
 *                                  enquadramento.
 *
 * ---------------------------------------------------------------------------
 * OS PONTOS DE CORTE SÃO OS DO PRÓPRIO SALIENT, e isso é deliberado
 *
 * 999px é o limite de tablet do tema (o mais usado no style.css dele, e o mesmo
 * da regra que desliga animação de fundo no mobile); 690px é o de celular (o
 * max-width:690px do responsive.css). Usar os números do tema faz a troca de
 * enquadramento acontecer JUNTO com a virada de layout da página, em vez de no
 * meio dela - sem uma faixa de largura com o layout de um lado e a foto do
 * outro.
 *
 * O 690 APARECE TAMBÉM NO PHP (Elo_Clima_Cena::LARGURA_MAXIMA_CELULAR_PX), que
 * o repassa ao JS pra escolher entre a URL larga e a de retrato. São dois
 * lugares porque não há um: media query não lê variável de CSS (é avaliada
 * antes da cascata), e injetar este arquivo inteiro pelo PHP tiraria o CSS de
 * onde se procura por ele. Mexeu num, mexa no outro.
 *
 * ---------------------------------------------------------------------------
 * POR QUE !important, E POR QUE SÓ NO EIXO X
 *
 * O alinhamento de origem é um estilo INLINE que o WPBakery escreve na .row-bg
 * (background-position: 0% 0%). Estilo inline vence qualquer folha de estilo
 * normal, então centralizar exige !important - é author !important contra
 * inline normal, que a cascata resolve a nosso favor sem depender de ordem de
 * carregamento.
 *
 * E só o eixo X porque o Y é configuração da linha (pode ser topo, centro, o
 * que o Robson escolher no WPBakery) e não é assunto deste arquivo. Mexer no
 * atalho `background-position` apagaria o Y junto.
 *
 * ---------------------------------------------------------------------------
 * O QUE ESTE ARQUIVO NÃO TOCA
 *
 * Nem transform, nem animação, nem background-image. Ou seja: o zoom de entrada
 * do WPBakery (transform: scale no .inner-wrap) e o parallax do Salient
 * (transform: translate3d reescrito por quadro no .row-bg) seguem intactos nas
 * três faixas - eles disputam transform, e aqui não se escreve transform em
 * lugar nenhum. A chuva e o relâmpago do hero também não mudam: são filhos do
 * .row-bg e não dependem de qual arquivo está no background nem de onde ele
 * está posicionado.
 *
 * O deslizamento horizontal que existiu aqui até 18/08/2026 está DESATIVADO em
 * elo-clima-hero-deslize.css (o código continua lá, comentado, com a receita de
 * religar) - foi este arquivo, junto com as imagens em retrato, que o
 * substituiu.
 */

/* TABLET: a imagem larga, centralizada. Entre os dois cortes do tema. */
@media only screen and (min-width: 691px) and (max-width: 999px) {
  .elo-clima-hero-bg .row-bg-wrap .row-bg {
    background-position-x: 50% !important;
  }
}

/* CELULAR: a imagem em retrato (trocada pelo JS), centralizada.
   A regra do enquadramento é a mesma do tablet - o que muda nesta faixa é o
   ARQUIVO, não o alinhamento. Ficam separadas mesmo assim, e não numa só
   consulta de max-width:999px, porque são duas decisões diferentes sobre duas
   imagens diferentes: juntá-las esconderia que o celular tem foto própria. */
@media only screen and (max-width: 690px) {
  .elo-clima-hero-bg .row-bg-wrap .row-bg {
    background-position-x: 50% !important;
  }
}