{% for item in module.banners %}
	{% if item.image.src %}
		{% set sizeAttrs = 'width="" height=""' %}
		{% if item.image.size_type == 'auto' %}
			{% set sizeAttrs = 'width="" height="" style="max-width: 100%; height: auto;"' %}
		{% elif item.image.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="" height="" style="max-width: 100%; height: auto;"' %}
		{% endif %}
		 {% set loadingAttr = item.image.loading != 'disabled' ? 'loading=""' : '' %}
		<img src="" alt=""  >
	{% endif %}
	{% if item.imagem_destaque_mobile.src %}
		{% set sizeAttrs = 'width="" height=""' %}
		{% if item.imagem_destaque_mobile.size_type == 'auto' %}
			{% set sizeAttrs = 'width="" height="" style="max-width: 100%; height: auto;"' %}
		{% elif item.imagem_destaque_mobile.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="" height="" style="max-width: 100%; height: auto;"' %}
		{% endif %}

/* ============================================= */
/* CONTAINER PRINCIPAL */
/* ============================================= */
.banners-destaques-container {
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

/* ============================================= */
/* ESTILOS DO WRAPPER DO LINK */
/* ============================================= */
.banner-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1 1 calc(100% - 30px);
}

/* Ajusta a lógica de largura para o wrapper do link */
.banner-link-wrapper:nth-last-child(1):first-child {
  flex: 1 1 100%;
}

.banner-link-wrapper:nth-last-child(2):first-child,
.banner-link-wrapper:nth-last-child(2):first-child ~ .banner-link-wrapper {
  flex: 1 1 calc(50% - 15px);
}

.banner-link-wrapper:nth-last-child(3):first-child,
.banner-link-wrapper:nth-last-child(3):first-child ~ .banner-link-wrapper {
  flex: 1 1 calc(33.333% - 20px);
}

.banner-link-wrapper:nth-last-child(4):first-child,
.banner-link-wrapper:nth-last-child(4):first-child ~ .banner-link-wrapper {
  flex: 1 1 calc(25% - 22.5px);
}

.banner-link-wrapper:nth-last-child(5):first-child,
.banner-link-wrapper:nth-last-child(5):first-child ~ .banner-link-wrapper {
  flex: 1 1 calc(20% - 24px);
}

.banner-link-wrapper:nth-last-child(6):first-child,
.banner-link-wrapper:nth-last-child(6):first-child ~ .banner-link-wrapper {
  flex: 1 1 calc(16.666% - 25px);
}

/* Remove qualquer efeito de hover do banner individual */
.banner-link-wrapper:hover .banner-destaque {
  transform: none;
}

/* Mantém o estilo do texto do link, mas agora como span */
.banner-link {
  display: inline-block;
  padding: 0px 16px;
  color: white;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.banner-link-wrapper:hover .banner-link {
  text-decoration: underline;
  opacity: 0.9;
}

/* Ajustes responsivos para mobile */
@media (max-width: 767px) {
  .banner-link-wrapper {
    flex: 1 1 calc(50% - 8px) !important;
  }
  
  @media (max-width: 480px) {
    .banner-link-wrapper {
      flex: 1 1 100% !important;
    }
  }
}

  /* ============================================= */
  /* LAYOUT DOS BANNERS - RESPONSIVO POR QUANTIDADE */
  /* ============================================= */
  .banners-destaques-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
  }


  .banner-destaque {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
    position: relative;
    flex: 1 1 calc(100% - 30px);
  }

  /* Lógica de largura proporcional baseada na quantidade */
  .banner-destaque:nth-last-child(1):first-child {
    flex: 1 1 100%;
  }

  .banner-destaque:nth-last-child(2):first-child,
  .banner-destaque:nth-last-child(2):first-child ~ .banner-destaque {
    flex: 1 1 calc(50% - 15px);
  }

  .banner-destaque:nth-last-child(3):first-child,
  .banner-destaque:nth-last-child(3):first-child ~ .banner-destaque {
    flex: 1 1 calc(33.333% - 20px);
  }

  .banner-destaque:nth-last-child(4):first-child,
  .banner-destaque:nth-last-child(4):first-child ~ .banner-destaque {
    flex: 1 1 calc(25% - 22.5px);
  }

  .banner-destaque:nth-last-child(5):first-child,
  .banner-destaque:nth-last-child(5):first-child ~ .banner-destaque {
    flex: 1 1 calc(20% - 24px);
  }

  .banner-destaque:nth-last-child(6):first-child,
  .banner-destaque:nth-last-child(6):first-child ~ .banner-destaque {
    flex: 1 1 calc(16.666% - 25px);
  }

  /* Overlay para melhor legibilidade */
  .banner-destaque::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    transition: background 0.3s ease;
  }

  

  /* ============================================= */
  /* ESTILOS DO CONTEÚDO */
  /* ============================================= */
  .banner-content {
    position: relative;
    z-index: 1;
    padding: 25px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
  }

  /* ============================================= */
  /* ESTILOS DO TÍTULO */
  /* ============================================= */
  .banner-title {
    font-size: 25px;
    color: white;
    font-family: inherit;
    margin: 0;
    line-height: 1.3;
    font-weight: 500;
  }

  /* ============================================= */
  /* ESTILOS DO LINK */
  /* ============================================= */
  .banner-link {
    display: inline-block;
    padding: 0px 16px;
    color: white;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .banner-link:hover {
    color: white !important; /* Garante que permaneça branco */
    text-decoration: underline; /* Opcional: sublinhado no hover */
    opacity: 0.9; /* Leve redução de opacidade para efeito */
    transform: translateY(-2px); /* Efeito de levantar (opcional) */
  }

  /* ============================================= */
  /* RESPONSIVIDADE - TABLET (768px a 1024px) */
  /* ============================================= */
  @media (min-width: 768px) and (max-width: 1024px) {
    .banners-destaques-wrapper {
      gap: 20px;
    }
    
    .banner-title {
      font-size: 26px;
      margin-bottom: 12px;
    }
    
    .banner-link {
      font-size: 13px;
      padding: 6px 12px;
    }
    
    .banner-content {
      padding: 25px 15px;
    }
  }

  /* ============================================= */
  /* RESPONSIVIDADE - MOBILE (até 767px) */
  /* ============================================= */
  @media (max-width: 767px) {
    .banners-destaques-wrapper {
      gap: 15px;
    }
    
    .banner-destaque {
      flex: 1 1 calc(50% - 8px) !important;
    }
    
    .banners-destaques-container {
      padding: 30px 15px;
    }
    
    .banner-title {
      font-size: 23px;
      margin-bottom: 10px;
    }
    
    .banner-link {
      font-size: 12px;
      padding: 6px 12px;
    }
    
    /* 1 banner por linha em telas muito pequenas */
    @media (max-width: 480px) {
      .banner-destaque {
        flex: 1 1 100% !important;
      }
    }
  }

  /* Desativa interações durante a animação */
  .banner-destaque[data-aos] {
    pointer-events: none;
  }

  /* Reativa interações quando animação completa */
  .banner-destaque[data-aos].aos-animate {
    pointer-events: auto;
  }

  /* Otimizações de performance */
  .banner-destaque {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

@media (max-width: 767px) {
  /* Esta regra serve como fallback caso o JavaScript não execute */
  .banner-destaque[data-mobile-height] {
    min-height: attr(data-mobile-height px, 250px) !important;
  }
}

/* Otimização adicional para transições suaves */
.banner-destaque {
  /* transition: min-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease; */


}