/* ========================================
   OTIMIZAÇÕES DE IMAGENS E LAZY LOADING
   ======================================== */

/* Imagens Responsivas Base */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

picture {
    display: block;
}

/* Lazy Loading Styles */
img[loading="lazy"] {
    background-color: #f0f0f0;
}

/* Imagens do Banner */
.banner-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner-image img,
.banner-image picture {
    width: 100%;
    height: auto;
    display: block;
}

/* Aspect Ratio para Cards com Imagens */
.card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Aspect Ratio 16:9 (padrão para vídeos) */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/* Aspect Ratio 4:3 (padrão para imagens) */
.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* Aspect Ratio 1:1 (quadrado) */
.aspect-ratio-1-1 {
    aspect-ratio: 1;
}

/* ========================================
   BACKGROUND IMAGES COM LAZY LOADING
   ======================================== */

[data-bg] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ========================================
   RESPONSIVO - TABLET (481px - 768px)
   ======================================== */

@media (max-width: 768px) {
    .banner-image img,
    .banner-image picture {
        max-height: 50vh;
        object-fit: cover;
    }

    .card-image {
        max-height: 250px;
    }
}

/* ========================================
   RESPONSIVO - MOBILE (até 480px)
   ======================================== */

@media (max-width: 480px) {
    .banner-image img,
    .banner-image picture {
        max-height: 45vh;
        object-fit: cover;
    }

    .card-image {
        max-height: 200px;
    }

    /* Reduz peso de imagens em mobile */
    img[data-mobile-src] {
        /* Use data-mobile-src para imagens otimizadas */
    }
}

/* ========================================
   RESPONSIVO - EXTRA SMALL (até 375px)
   ======================================== */

@media (max-width: 375px) {
    .banner-image img,
    .banner-image picture {
        max-height: 40vh;
    }

    .card-image {
        max-height: 180px;
    }
}

/* ========================================
   OPTIMIZAÇÕES DE PERFORMANCE
   ======================================== */

/* Prevenir layout shift durante lazy loading */
img[src],
img[data-src] {
    min-height: 1px;
}

/* Suavizar transição de imagens carregadas */
img[loading="lazy"].loaded {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* Print Media - Remover imagens lazy loading em impressão */
@media print {
    img[loading="lazy"]:not([src*=".jpg"]):not([src*=".png"]) {
        display: none;
    }
}