/* ==========================================================================
   Facility-type filter (dropdown + animación) — /bedroom-availability/
   Colores del sitio: azul del dropdown de Locations #396FA4, texto oscuro #1C4A65
   ========================================================================== */

/* ---- Dropdown: alineado a la izquierda, mismo look que el select de Locations ---- */
.facility-filter {
  display: flex;
  justify-content: flex-start;
  margin: 12px 0 0;
}

.facility-filter__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 466px;              /* mismo ancho que el select de Locations */
  height: 41px;
  margin: 0;
  padding: 0 48px 0 22px;
  border: 0;
  border-radius: 50px;
  background-color: #396fa4;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  color: #fff;
  font: 400 18px/41px 'Roboto', sans-serif;
  cursor: pointer;
}

.facility-filter__select:hover { background-color: #2f5f8f; }

.facility-filter__select:focus-visible {
  outline: 2px solid #1c4a65;
  outline-offset: 3px;
}

/* Las opciones desplegadas (el navegador ignora casi todo, pero esto sí lo respeta) */
.facility-filter__select option {
  color: #333;
  background: #fff;
  font-size: 16px;
}

.facility-filter__empty {
  margin: 20px 0 0;
  color: #555;
}

/* ---- Grid: las tarjetas se mueven a una sola fila para que se reacomoden al filtrar ---- */
.et_pb_row.facility-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 39px;       /* 39px = gutter actual de las columnas Divi en esta página */
  align-content: start; /* mientras la altura se anima, las filas NO se estiran para llenarla */
}

/* Divi pone order:1 en las columnas y un clearfix ::after con order:0 en la fila;
   dentro de un grid ese ::after se vuelve un item y ocupa la primera celda. Se neutralizan. */
.et_pb_row.facility-grid::before,
.et_pb_row.facility-grid::after {
  content: none !important;
  display: none !important;
}

.facility-grid > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  order: 0 !important;
}

.facility-grid > .et_pb_column.is-hidden { display: none !important; }

/* ---- Animación (las duraciones deben coincidir con LEAVE_MS / MOVE_MS del JS) ---- */
.facility-grid > .et_pb_column {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}

/* Tarjeta que sale: se desvanece y encoge un poco */
.facility-grid > .et_pb_column.is-leaving {
  opacity: 0;
  transform: scale(0.95);
  transition-duration: 200ms;
}

/* Tarjeta que entra: punto de partida (el JS quita la clase y la transición la lleva a 1/1) */
.facility-grid > .et_pb_column.is-entering {
  opacity: 0;
  transform: scale(0.95);
  transition: none;
}

/* Mientras dura el cambio, la altura del grid se anima y se recorta lo que sobresale */
.et_pb_row.facility-grid.is-animating {
  overflow: hidden;
  transition: height 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .facility-grid > .et_pb_column,
  .et_pb_row.facility-grid.is-animating { transition: none; }
}

@media (max-width: 980px) {
  .et_pb_row.facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .et_pb_row.facility-grid { grid-template-columns: minmax(0, 1fr); }
}