/*
 * Promociones en listado: una debajo de otra, con la foto a lo ancho y el panel de
 * texto montado sobre ella por abajo.
 *
 * Va sobre offers.css, de donde salen la foto, el título, las fechas y el botón:
 * aquí solo se deshace la rejilla de dos columnas del carrusel y se recoloca el
 * panel. Lo que gobiernan los controles (altos, anchos, solape, hueco) no se
 * escribe aquí, para que el panel de Elementor no tenga que competir con la hoja.
 */

.av-offers-list__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-offers-list .av-offers-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Deshace la rejilla del carrusel: aquí la foto y el panel van apilados */
.av-offers-list .av-offer {
  display: block;
  min-height: 0;
}

/*
 * El alto lo pone el control de Layout. Sin position:relative la foto, que va
 * absoluta desde offers.css, se saldría de su caja.
 */
.av-offers-list .av-offer__media {
  position: relative;
  height: 320px;
}

/*
 * El panel monta sobre la foto, así que va por encima en el eje Z: sin esto la
 * imagen le taparía el trozo solapado.
 */
.av-offers-list .av-offer__panel {
  position: relative;
  z-index: 1;
  /* El ancho lo pone un control y el relleno otro: sin esto se suman y desborda
     en cuanto el tema no imponga border-box */
  box-sizing: border-box;
  width: 86%;
  margin: -56px auto 0;
  padding: 32px 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* A qué lado se arrima el panel cuando no ocupa todo el ancho */
.av-offers-list--panel-left .av-offer__panel {
  margin-inline: 0 auto;
}

.av-offers-list--panel-right .av-offer__panel {
  margin-inline: auto 0;
}

/* Una promoción sin foto no tiene nada sobre lo que montarse */
.av-offers-list .av-offer--sin-foto .av-offer__panel {
  width: 100%;
  margin-top: 0;
}

/* En el listado el texto no se centra en vertical: manda el orden de arriba abajo */
.av-offers-list .av-offer__panel {
  justify-content: flex-start;
}

/* Lo último de la tarjeta no arrastra su margen: lo pone el hueco del listado */
.av-offers-list .av-offer__btn {
  margin-bottom: 0;
}

@media (max-width: 767px) {

  /* El aspect-ratio del móvil de offers.css pelearía con el alto del control */
  .av-offers-list .av-offer__media {
    aspect-ratio: auto;
  }

  .av-offers-list .av-offer__panel {
    width: 92%;
    padding: 24px 20px;
  }
}