/*
 * Esqueleto común de las rejillas de tarjetas de alojamiento (destacados, mejor
 * valorados, descuentos).
 */

.av-listings__row {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-listings__item {
  display: flex;
  max-width: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * En móvil no hay nada que cambiar: la fila sigue siendo una rejilla y sus tarjetas
 * se apilan, porque el control de columnas trae 1 de serie en el tamaño móvil.
 */

/*
 * Contenedor de Elementor: sin envolver en móvil. Con el `--flex-wrap-mobile:
 * wrap` que pone Elementor de serie, un widget alto deja de caber en la columna y
 * acaba pintado encima del anterior. No se puede arreglar desde el widget: lo
 * único que lo quita es esto.
 */
@media (max-width: 767px) {
  .e-con-inner:has(> .elementor-widget > .elementor-widget-container > .av-listings),
  .e-con-full:has(> .elementor-widget > .elementor-widget-container > .av-listings) {
    flex-wrap: nowrap;
  }
}

.av-listings__vacio {
  margin: 0;
  padding: 16px;
  border: 1px dashed currentColor;
  opacity: 0.6;
  text-align: center;
}

/* --- Tarjeta ------------------------------------------------------------- */

.av-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-font-smoothing: antialiased;
}

.av-card:hover,
.av-card:focus {
  text-decoration: none;
}

.av-card > * {
  position: relative;
  z-index: 1;
}

.av-card__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* El radio de la caja, repetido en la propia foto. */
/*
 * Dos clases y no una, aunque `.av-card__img` bastaría para acertar con el
 * elemento: es por peso, no por precisión.
 */
.av-card .av-card__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease;
}

.av-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.av-zoom-yes .av-card:hover .av-card__img {
  transform: scale(1.2);
}

/*
 * --- Variante apilada ----------------------------------------------------- La
 * tarjeta de arriba pone el texto ENCIMA de la foto.
 */

.av-card--stack {
  justify-content: flex-start;
  padding: 0;
}

/*
 * Deja de estar detrás del texto y vuelve al flujo. Ni crece ni encoge: su alto
 * sale de la proporción que pone el control, no de lo que sobre.
 */
.av-card--stack .av-card__media {
  position: relative;
  flex: 0 0 auto;
  /*
   * Imprescindible: la regla base la deja en height:100% para hacer de fondo, y
   * aspect-ratio solo entra si una de las dos dimensiones es auto.
   */
  height: auto;
}

/*
 * Fuera del flujo para que no arrastre el alto de la caja, y con el alto en auto a
 * propósito: aquí el alto lo decide la proporción que emite el control (va puesta
 * también sobre la imagen).
 */
.av-card--stack .av-card__img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

/*
 * Centrados entre sí, no alineados por abajo: el precio son dos líneas (importe y
 * "por noche") y el título una o dos, así que cuadrarlos por la base dejaba el
 * título colgando del renglón de abajo en vez de a la altura del importe.
 */
.av-card--stack .av-card__body {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* min-width:0 es lo que permite que el título se recorte dentro del flex */
.av-card--stack .av-card__text {
  min-width: 0;
}

/*
 * Aquí el título comparte fila con el precio, así que una sola línea con "..." se
 * queda en tres palabras.
 */
.av-card--stack .av-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

/* Sin shrink: si no, un título de dos líneas le come el ancho al importe */
.av-card--stack .av-card__price {
  flex: 0 0 auto;
  align-items: flex-end;
  padding: 0;
  text-align: right;
  color: inherit;
}

/* En la tarjeta clásica el rótulo va delante del importe y en versalitas. */
.av-card--stack .av-card__price-label {
  text-transform: none;
  opacity: 1;
}

/* --- Píldora de localidad sobre la foto ---------------------------------- */

.av-card__pin {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
}

.av-card__pin i,
.av-card__pin-icono {
  flex: 0 0 auto;
}

/* En em para que crezca y encoja con el texto de la localidad */
.av-card__pin-icono {
  width: 1.25em;
  height: 1.25em;
}

/* --- Cabecera: título, localidad y distintivos --------------------------- */

.av-card__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.av-card__text {
  flex-grow: 1;
  min-width: 0;
}

.av-card__title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.av-card__town {
  display: block;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.av-card__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.av-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: inherit;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
}

.av-tag i {
  width: 1em;
  text-align: center;
}

/* --- Pie: precio y llamada a la acción ----------------------------------- */

.av-card__foot {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-right: auto;
  min-width: 50%;
  overflow: hidden;
  border-radius: 4px;
}

.av-card__price {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px 16px;
  white-space: nowrap;
  color: #000;
}

.av-card__price-label {
  font-size: max(55%, 12px);
  opacity: 0.6;
  text-transform: capitalize;
}

.av-card__price-label:first-child {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* El tamaño lo pone el control de tipografía del panel, no esta hoja */
.av-card__price-value {
  line-height: 1.2;
}

.av-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  color: #fff;
  overflow: hidden;
}

.av-card__cta i {
  display: inline-block;
  position: relative;
  animation: av-arrow-anime-reverse 400ms ease-out forwards;
}

@media (min-width: 768px) and (hover: hover) {
  .av-card:hover .av-card__cta i {
    animation-name: av-arrow-anime;
  }
}

/*
 * Los nombres de @keyframes son globales y no se pueden acotar a un selector:
 * el prefijo av- evita pisarse con los arrow-anime del plugin antiguo.
 */
@keyframes av-arrow-anime {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(200%); }
  51%  { visibility: hidden; transform: translateX(-200%); }
  75%  { transform: translateX(-100%); visibility: visible; }
  100% { transform: translateX(0); }
}

@keyframes av-arrow-anime-reverse {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-200%); }
  51%  { visibility: hidden; transform: translateX(200%); }
  75%  { transform: translateX(100%); visibility: visible; }
  100% { transform: translateX(0); }
}