/*
 * Horoh CSS Segura | horoh-loop-slider.css
 * Seção extraída do main.css para reduzir conflito e facilitar manutenção.
 */

/* ==========================================================================
   HOROH | Loop alternado desktop/tablet
   Mobile sem alternância
   ========================================================================== */

/* Garante 1 item por linha no Loop Grid */
.horoh-loop-alternado .elementor-loop-container,
.horoh-loop-alternado .elementor-grid {
  grid-template-columns: 1fr !important;
}

/* Card base */
.horoh-loop-alternado .e-loop-item .horoh-loop-card {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* DESKTOP + TABLET: alterna */
@media (min-width: 768px) {
  .horoh-loop-alternado .e-loop-item .horoh-loop-card {
    --display: flex !important;
    --flex-direction: row !important;

    flex-direction: row !important;
  }

  .horoh-loop-alternado .e-loop-item .horoh-loop-card > .e-con,
  .horoh-loop-alternado .e-loop-item .horoh-loop-card > .elementor-element {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* ÍMPARES: imagem à direita / texto à esquerda */
  .horoh-loop-alternado .e-loop-item:nth-of-type(odd) .horoh-loop-imagem {
    order: 2 !important;
  }

  .horoh-loop-alternado
    .e-loop-item:nth-of-type(odd)
    .horoh-loop-card
    > .e-con:not(.horoh-loop-imagem),
  .horoh-loop-alternado
    .e-loop-item:nth-of-type(odd)
    .horoh-loop-card
    > .elementor-element:not(.horoh-loop-imagem) {
    order: 1 !important;
  }

  /* PARES: imagem à esquerda / texto à direita */
  .horoh-loop-alternado .e-loop-item:nth-of-type(even) .horoh-loop-imagem {
    order: 1 !important;
  }

  .horoh-loop-alternado
    .e-loop-item:nth-of-type(even)
    .horoh-loop-card
    > .e-con:not(.horoh-loop-imagem),
  .horoh-loop-alternado
    .e-loop-item:nth-of-type(even)
    .horoh-loop-card
    > .elementor-element:not(.horoh-loop-imagem) {
    order: 2 !important;
  }
}

/* Imagem preenchendo o bloco */
.horoh-loop-alternado .horoh-loop-imagem,
.horoh-loop-alternado .horoh-loop-imagem .elementor-widget-image,
.horoh-loop-alternado .horoh-loop-imagem .elementor-widget-container,
.horoh-loop-alternado .horoh-loop-imagem figure {
  width: 100% !important;
  height: 100% !important;
}

.horoh-loop-alternado .horoh-loop-imagem img,
.horoh-loop-alternado .horoh-loop-card img {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}

/* MOBILE: sem alternância */
@media (max-width: 767px) {
  .horoh-loop-alternado .e-loop-item .horoh-loop-card {
    --flex-direction: column !important;
    flex-direction: column !important;
  }

  .horoh-loop-alternado .e-loop-item .horoh-loop-card > .e-con,
  .horoh-loop-alternado .e-loop-item .horoh-loop-card > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Texto sempre primeiro */
  .horoh-loop-alternado .horoh-loop-card > .e-con:not(.horoh-loop-imagem),
  .horoh-loop-alternado
    .horoh-loop-card
    > .elementor-element:not(.horoh-loop-imagem) {
    order: 1 !important;
  }

  /* Imagem sempre depois */
  .horoh-loop-alternado .horoh-loop-imagem {
    order: 2 !important;
  }

  .horoh-loop-alternado .horoh-loop-imagem img,
  .horoh-loop-alternado .horoh-loop-card img {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}

/* ==========================================================================
   HOROH | Slider de imagens no Container Elementor
   Classe base no container:
   horoh-acomodacao-slider

   Controle de quantidade visível:
   horoh-slider-1 | horoh-slider-2 | horoh-slider-3 | horoh-slider-4 | horoh-slider-5

   Exemplo no Elementor:
   horoh-acomodacao-slider horoh-slider-5
   ========================================================================== */

.horoh-acomodacao-slider {
  --horoh-slider-gap: 24px;
  --horoh-slider-width: 100%;

  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Quantidade de imagens visíveis
   ========================================================================== */

.horoh-acomodacao-slider.horoh-slider-1 {
  --horoh-slider-width: 100%;
}

.horoh-acomodacao-slider.horoh-slider-2 {
  --horoh-slider-width: calc((100% - var(--horoh-slider-gap)) / 2);
}

.horoh-acomodacao-slider.horoh-slider-3 {
  --horoh-slider-width: calc((100% - (var(--horoh-slider-gap) * 2)) / 3);
}

.horoh-acomodacao-slider.horoh-slider-4 {
  --horoh-slider-width: calc((100% - (var(--horoh-slider-gap) * 3)) / 4);
}

.horoh-acomodacao-slider.horoh-slider-5 {
  --horoh-slider-width: calc((100% - (var(--horoh-slider-gap) * 4)) / 5);
}

/* ==========================================================================
   Estrutura criada pelo JS
   ========================================================================== */

.horoh-acomodacao-slider .horoh-slider-track {
  display: flex;
  gap: var(--horoh-slider-gap);
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.horoh-acomodacao-slider .horoh-slider-slide {
  flex: 0 0 var(--horoh-slider-width);
  width: var(--horoh-slider-width);
  min-width: 0;
  scroll-snap-align: start;
}

.horoh-acomodacao-slider .horoh-slider-slide .elementor-widget-image {
  width: 100%;
  height: 100%;
}

.horoh-acomodacao-slider .horoh-slider-slide .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.horoh-acomodacao-slider .horoh-slider-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ==========================================================================
   Setas discretas e quadradas
   ========================================================================== */

.horoh-acomodacao-slider .horoh-slider-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(35, 45, 43, 0.18);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.62);
  color: #002816;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0.68;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.horoh-acomodacao-slider .horoh-slider-btn:hover,
.horoh-acomodacao-slider .horoh-slider-btn:focus {
  background: #002816;
  color: #f4efe7;
  border-color: #002816;
  opacity: 1;
  outline: none;
}

.horoh-acomodacao-slider .horoh-slider-prev {
  left: 12px;
}

.horoh-acomodacao-slider .horoh-slider-next {
  right: 12px;
}

/* ==========================================================================
   Responsivo tablet
   ========================================================================== */

@media (max-width: 1024px) {
  .horoh-acomodacao-slider {
    --horoh-slider-gap: 18px;
  }

  .horoh-acomodacao-slider.horoh-slider-4,
  .horoh-acomodacao-slider.horoh-slider-5 {
    --horoh-slider-width: calc((100% - var(--horoh-slider-gap)) / 2);
  }

  .horoh-acomodacao-slider.horoh-slider-3 {
    --horoh-slider-width: calc((100% - var(--horoh-slider-gap)) / 2);
  }
}

/* ==========================================================================
   Responsivo mobile
   ========================================================================== */

@media (max-width: 767px) {
  .horoh-acomodacao-slider {
    --horoh-slider-gap: 14px;
    --horoh-slider-width: 100%;
  }

  .horoh-acomodacao-slider.horoh-slider-1,
  .horoh-acomodacao-slider.horoh-slider-2,
  .horoh-acomodacao-slider.horoh-slider-3,
  .horoh-acomodacao-slider.horoh-slider-4,
  .horoh-acomodacao-slider.horoh-slider-5 {
    --horoh-slider-width: 100%;
  }

  .horoh-acomodacao-slider .horoh-slider-slide img {
    aspect-ratio: 4 / 3;
  }

  .horoh-acomodacao-slider .horoh-slider-btn {
    width: 30px;
    height: 30px;
    font-size: 21px;
  }

  .horoh-acomodacao-slider .horoh-slider-prev {
    left: 8px;
  }

  .horoh-acomodacao-slider .horoh-slider-next {
    right: 8px;
  }
}