/* ============================================
   OTIMIZAÇÕES PARA REDUZIR CLS (Cumulative Layout Shift)
   ============================================ */

/* 1. Reservar espaço para banners dinâmicos */
.bannerHome {
  min-height: 250px; /* Mobile - Ajustado */
  background: #f5f5f5;
}

@media (min-width: 768px) {
  .bannerHome {
    min-height: 500px; /* Tablet/Desktop */
  }
}

/* 2. Skeleton loading para conteúdos */
.destaqueConteudo:not(:has(*)),
.listaSubdestaques:not(:has(*)) {
  min-height: 300px;
}

.destaqueAgenda .swiper-wrapper {
  min-height: 400px;
}

/* 3. Reservar espaço para sliders de sociedades */
.bannerSociedades {
  min-height: 200px; /* Mobile - Ajustado */
  background: #f0f0f0;
}

@media (min-width: 768px) {
  .bannerSociedades {
    min-height: 450px;
  }
}

/* 4. Slider de organização */
.slideOrganizacao {
  min-height: 280px;
}

/* 5. Slider de projetos */
#slideProjetos {
  min-height: 450px;
}

/* 6. Prevenir layout shift em imagens */
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

/* 7. Container para Brasil Presbiteriano */
.brasilPresbiteriano:not(:has(*)) {
  min-height: 450px;
}

/* 8. Área de banners publicitários */
#bannerPublicidade:not(:has(*)) {
  min-height: 200px;
}

/* 9. Área de comunicação */
#comunicacao_verdadeevidade:not(:has(*)),
#comunicacao_banner:not(:has(*)) {
  min-height: 150px;
}

/* 10. Prevenir shift em elementos que usam position absolute */
.card .data,
.swiper-slide .data {
  will-change: transform;
  transform: translateZ(0);
}

/* 11. Otimizar transições para evitar repaints */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
  transform: translateZ(0);
  will-change: transform;
}

/* 12. Skeleton loading animation (opcional) */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* 13. Manter aspect ratio de imagens importantes */
.bannerHome img,
.destaqueConteudo .card,
.swiper-slide img {
  display: block;
}

section#sociedades .bannerSociedades .swiper-slide img {
  display: inline-block;
}

/* 14. Prevenir CLS em iframes (YouTube) */
iframe {
  max-width: 100%;
}

.youtube-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix para iframes do YouTube na seção de vídeos */
#comunicacao_canal iframe {
  min-height: 0; /* Remove min-height forçado */
}

.ytvideo {
  min-height: 0; /* Remove min-height forçado */
}

/* 15. Prevenir CLS em background images dinâmicas */
[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* 16. Melhorar performance de animações */
.swiper-wrapper,
.swiper-slide {
  will-change: transform;
  transform: translateZ(0);
}

/* 17. Aspect ratios específicos para imagens comuns */
.logo_sociedade {
  aspect-ratio: 1 / 1;
  max-width: 150px;
}

.img_organizacao {
  aspect-ratio: 3 / 4;
}

.img_projeto {
  aspect-ratio: 16 / 9;
}

/* 18. Evitar reflow em elementos com texto dinâmico */
h1, h2, h3, h4, h5, h6 {
  contain: layout;
}

/* 19. Container com height mínimo para avoid CLS */
.container:empty {
  min-height: 100px;
}