/**
 * cls-fixes.css
 * Correções de CLS (Cumulative Layout Shift) — Fase 2
 * PageSpeed Optimization — novaredencao.com
 * 
 * Objetivo: reduzir o CLS de 0,474 para < 0,1
 * Estratégia: reservar espaço visual ANTES do JavaScript carregar,
 *             evitando que o layout "pule" durante o carregamento.
 */

/* ==========================================================
   1. SLIDER REVOLUTION — Reserva de espaço antes do JS
   ========================================================== */

/* ==========================================================
   1. HERO BANNER CSS — substitui o Revolution Slider (zero JS)
   ========================================================== */

/**
 * Mantém .rev_slider_wrapper para compatibilidade com o CSS
 * existente e a Fase 2 (reserva de espaço anti-CLS).
 * Acrescenta .hero-banner com o layout do novo banner.
 */
.rev_slider_wrapper {
    min-height: 680px;
    background-color: #1a1a2e;
    overflow: hidden;
    position: relative;
    display: block;
}

.hero-banner {
    width: 100%;
}

.hero-banner__inner {
    position: relative;
    width: 100%;
    height: 680px;
    overflow: hidden;
}

/* Imagem de fundo: cobre todo o container */
.hero-banner__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    animation: heroFadeIn 0.8s ease-in-out;
}

/* Overlay escuro para legibilidade da logo */
.hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    z-index: 1;
}

/* Container da logo centralizado */
.hero-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo no banner */
.hero-banner__logo {
    max-width: 320px;
    width: 60%;
    height: auto;
    filter: brightness(0) invert(1); /* torna qualquer logo branca */
    animation: heroFadeIn 1s ease-in-out 0.2s both;
}

/* Animação fade-in simples (substitui o efeito "fade" do Revolution) */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsivo: reduz altura em mobile */
@media (max-width: 768px) {
    .rev_slider_wrapper,
    .hero-banner__inner {
        min-height: 280px;
        height: 280px;
    }
    .hero-banner__logo {
        max-width: 200px;
        width: 75%;
    }
}

@media (max-width: 480px) {
    .rev_slider_wrapper,
    .hero-banner__inner {
        min-height: 200px;
        height: 200px;
    }
}



/* ==========================================================
   2. IMAGEM PRINCIPAL DA SEÇÃO WELLCOME — Dimensões fixas
   ========================================================== */

/**
 * A imagem carregada do banco de dados (id=748) não tem
 * width/height definidos no HTML — causa CLS.
 * Solução: aspect-ratio via CSS + width 100% para que o
 * navegador saiba o tamanho ANTES de baixar a imagem.
 */
.wellcome-2 {
    position: relative;
    overflow: hidden;
}

.wellcome-2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;   /* Proporção padrão para imagens de imóveis */
    object-fit: cover;
    display: block;
}

/* ==========================================================
   3. GALERIA DE FOTOS DE OBRA — Dimensões reservadas
   ========================================================== */

/**
 * Cada imagem da galeria já tem width=465 height=265 no HTML,
 * mas como unidades brutas. O CSS reforça o aspect-ratio para
 * evitar reflow ao carregar com lazy loading.
 */
.item_gallery img {
    width: 100%;
    height: 265px;
    object-fit: cover;
    aspect-ratio: 465 / 265;
    display: block;
}

/* ==========================================================
   4. IMAGENS DAS ABAS (UNILAB, Escola, FMB) — Dimensões fixas
   ========================================================== */

/**
 * Imagens com width="560px" height="350px" (string inválida
 * para cálculo do browser). O CSS garante as dimensões corretas.
 */
.living-img img {
    width: 100%;
    max-width: 560px;
    height: 350px;
    object-fit: cover;
    aspect-ratio: 560 / 350;
    display: block;
}

/* ==========================================================
   5. IMAGENS DAS FIGURAS (Redenção e Polo Industrial)
   ========================================================== */

/**
 * Imagens dentro de <figure class="img-box"> não têm
 * dimensões explícitas — reservamos espaço via aspect-ratio.
 */
.img-box img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* ==========================================================
   6. LOGO DO HEADER — Dimensões explícitas
   ========================================================== */

/**
 * O logo não tem width/height no HTML — o browser não
 * sabe quanto espaço reservar antes do download.
 */
.logo img {
    height: 60px;   /* Altura visual real do logo */
    width: auto;
    display: block;
}

/* ==========================================================
   7. GOOGLE MAPS IFRAME — Dimensões estáveis
   ========================================================== */

/**
 * O iframe do mapa tem width=600 no HTML mas como string.
 * Garante que o espaço seja reservado corretamente.
 */
.google-map {
    width: 100% !important;
    height: 450px;
    display: block;
    aspect-ratio: 4 / 3;
}

/* ==========================================================
   8. FONT-DISPLAY: SWAP — Evita layout shift por troca de fonte
   ========================================================== */

/**
 * As fontes Google (Roboto, Roboto Slab) são importadas via
 * @import no style.css sem font-display:swap.
 * Aplicamos a substituição via @font-face override.
 * Efeito: o texto aparece com fonte fallback imediatamente,
 * sem bloco invisível, evitando FOIT (Flash of Invisible Text).
 */
@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    font-display: swap;
}

/* ==========================================================
   9. SEÇÃO .slider_area (páginas internas) — Altura reservada
   ========================================================== */

/**
 * As páginas internas (empresa, cidade, etc.) usam .slider_area
 * com background-image. Sem min-height definido, o conteúdo
 * abaixo pode sofrer deslocamento ao carregar a imagem de fundo.
 */
.slider_area {
    min-height: 300px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ==========================================================
   10. PREVENÇÃO GERAL — Todas as imagens com comportamento estável
   ========================================================== */

/**
 * Regra global: impede que imagens redimensionem o layout
 * ao serem carregadas, pois mantêm suas dimensões máximas.
 */
img {
    max-width: 100%;
    height: auto;
}