/* Carrusel de tarjetas de alojamiento. */

/*
 * El contenedor es un flex que envuelve, y la colocación de cada pieza la decide
 * `order` (más abajo).
 */
.av-carousel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/*
 * De partida la lista se lleva la fila entera: es lo que toca sin flechas o con
 * ellas debajo.
 */
.av-carousel .av-listings__row {
  flex: 0 0 100%;
  min-width: 0;
}

/*
 * El relleno no es decorativo: `overflow-x: auto` recorta a ras de la pista por los
 * cuatro lados, y sin él se cortaban la sombra de la tarjeta y sus esquinas de
 * abajo. A los lados hacía falta igual: la primera y la última tarjeta quedan
 * pegadas al borde, y en móvil, con una por pantalla, todas.
 *
 * El hueco lateral estrecha la pista en vez de salirse de ella: compensarlo con
 * margen negativo desbordaba la página a lo ancho.
 */
.av-carousel .av-listings__row {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 16px 16px;

  /* Las paradas del scroll van al borde del contenido, no al de la pista: si no,
     al desplazarse las tarjetas se colocan 16px más a la izquierda que en reposo */
  scroll-padding-inline: 16px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra de scroll se oculta: la navegación son las flechas y los puntos */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.av-carousel .av-listings__row::-webkit-scrollbar {
  display: none;
}

/*
 * El ancho sale del número de tarjetas visibles y del hueco, los dos publicados por
 * sus controles como variables.
 */
.av-carousel .av-listings__item {
  flex: 0 0 calc(
    (100% - (var(--av-columnas, 1) - 1) * var(--av-gap, 0px)) / var(--av-columnas, 1)
  );
  /* La tarjeta suelta se topa a 600px; aquí manda el reparto de arriba */
  max-width: none;
  scroll-snap-align: start;
}

/* Quien no puede con animaciones tampoco quiere el desplazamiento suave */
@media (prefers-reduced-motion: reduce) {
  .av-carousel .av-listings__row {
    scroll-behavior: auto;
  }
}

/* --- Colocación de flechas y puntos -------------------------------------- */

/* A los lados: flecha, lista y flecha en la misma fila; los puntos, debajo. */
.av-flechas-lados .av-carousel__flecha--anterior {
  order: 1;
}

/* Base 0, no `auto`. */
.av-flechas-lados .av-listings__row {
  flex: 1 1 0%;
  order: 2;
}

.av-flechas-lados .av-carousel__flecha--siguiente {
  order: 3;
}

.av-flechas-lados .av-carousel__puntos {
  order: 4;
  flex: 0 0 100%;
}

/* Abajo: la lista se lleva la fila entera y los mandos caen debajo, centrados */
.av-flechas-abajo .av-listings__row {
  flex: 0 0 100%;
  order: 1;
}

.av-flechas-abajo .av-carousel__flecha--anterior {
  order: 2;
}

.av-flechas-abajo .av-carousel__puntos {
  order: 3;
}

.av-flechas-abajo .av-carousel__flecha--siguiente {
  order: 4;
}

/*
 * El aviso del editor es un hermano más del flex: sin esto entra en la fila de
 * las tarjetas y les roba el ancho. Fila entera y detrás de todo.
 */
.av-carousel .av-listings__vacio {
  flex: 0 0 100%;
  order: 9;
}

/* --- Flechas ------------------------------------------------------------- */

/*
 * Todo lo de los botones va anidado bajo .av-carousel, y no suelto, por una razón
 * concreta: el kit de Elementor define los botones del sitio con `.elementor-kit-N
 * button`, que es (0,1,1).
 */
.av-carousel .av-carousel__flecha {
  flex: 0 0 auto;
  z-index: 2;
  /* La variable la escribe el control de visibilidad, que va por dispositivo */
  display: var(--av-flechas-display, flex);
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
}

.av-carousel .av-carousel__flecha svg {
  width: 55%;
  height: 55%;
}

/* Nada de position:absolute aquí. */

/*
 * Al llegar al extremo la flecha se deshabilita en vez de desaparecer: si se
 * quitara, las tarjetas darían un salto al recolocarse el ancho disponible.
 */
.av-carousel .av-carousel__flecha[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Sin navegación cuando cabe todo de una vez: lo decide el JS midiendo */
.av-carousel--completo .av-carousel__flecha,
.av-carousel--completo .av-carousel__puntos {
  display: none;
}

/* --- Puntos -------------------------------------------------------------- */

/* Sin margen propio: el hueco lo pone la barra que los contiene */
.av-carousel__puntos {
  /* Igual que las flechas; el valor de reserva cubre lo guardado sin el control */
  display: var(--av-puntos-display, flex);
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.av-carousel__puntos:empty {
  display: none;
}

/*
 * Anidado por lo mismo que las flechas: hay que ganarle al botón del kit. Los
 * colores llegan en variables desde sus controles y se reparten aquí; el
 * respaldo del activo es el acento, para un carrusel sin CSS generado todavía.
 */
.av-carousel .av-carousel__punto {
  flex: 0 0 auto;
  /* El tamaño llega en variable desde su control, como los colores */
  width: var(--av-punto-tam, 8px);
  height: var(--av-punto-tam, 8px);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  background-color: var(--av-punto-color, #d5d5d5);
  transition: transform 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
}

.av-carousel .av-carousel__punto[aria-current="true"] {
  background-color: var(--av-punto-activo, var(--e-global-color-accent, #333333));
  transform: scale(1.35);
}