/* ==========================================================================
   ML Realtor — tarjetas del buscador IDX        v1.0.0
   La página de resultados /idx/search/ (página WP 211).

   POR QUÉ EXISTE: el comprador veía tarjeta de fábrica del plugin → clic →
   ficha de otro nivel. El recorrido estaba partido. Esto cierra ese salto.

   Mismos tokens que ml-listing-design.css a propósito: si algún día cambia
   la paleta, tiene que cambiar en los dos sitios a la vez.

   Todo es CSS sobre las clases que flexmls-idx ya emite
   (.flexmls-listing, .flexmls-image-wrapper, .flexmls-price, .flexmls-address,
   .flexmls-quick-details…), así que una actualización del plugin no lo borra
   y la reversa es quitar el archivo.

   Jerarquía de marca: el negro domina, el oro acompaña, el azul aparece por
   momentos. Aquí el azul NO aparece: una rejilla de 10 tarjetas repetiría el
   acento diez veces y dejaría de ser "por momentos".
   ========================================================================== */

/* --- Ancho de lectura y aire lateral -------------------------------------
   MISMA causa raíz que tenía la ficha: el contenedor medía 1280 px, o sea el
   ancho exacto de la ventana, con padding 0. Por eso el "4,397 Matches Found"
   nacía pegado al borde izquierdo y la primera tarjeta también.

   1360 y no los 1180 de la ficha a propósito: allí el límite lo pone la
   longitud de línea del texto, aquí lo pone la rejilla, y con 1180 las tres
   columnas se quedaban estrechas en pantallas grandes.                     */
.flexmls_connect__search_results_v2 {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(18px, 5vw, 56px);
  padding-right: clamp(18px, 5vw, 56px);
  box-sizing: border-box;
}

.flexmls-listings-list-wrapper {
  --ml-ink:   #0A0A0A;
  --ml-paper: #F5F3EF;
  --ml-gold:  #C8A96E;
  --ml-line:  #E5E1D8;
  --ml-muted: #6E6A63;
  --ml-serif: 'Cormorant Garamond', Georgia, serif;
  --ml-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-curva: cubic-bezier(.2, .75, .2, 1);
}

/* --- Retícula ------------------------------------------------------------
   El plugin usa flex sin gap: las tarjetas quedaban pegadas y de 380 px fijos.

   `auto-fill` + `minmax()` en vez de un número de columnas a propósito: la
   MISMA regla sirve para la rejilla ancha y para la columna estrecha de la
   vista de mapa, que reduce el contenedor a una barra lateral. Con un número
   fijo de columnas, el mapa se rompía.                                     */
.flexmls-listings-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px);
  align-items: start;
  padding: 8px 0 56px;
  box-sizing: border-box;
}

/* --- El <h1> de la página de resultados ----------------------------------
   La página no tenía NINGÚN h1 (medido el 2026-08-10): los únicos encabezados
   eran los del pie. Lo inserta ml-search-design.php §1f, justo encima del
   listado.

   Ojo con el propósito: `/idx/search` está en `Disallow`, así que esto NO es
   SEO — es accesibilidad y orientación. Por eso el diseño es sobrio y no
   intenta cargar palabras clave: dice qué estás viendo y cuántas hay.

   El subtítulo solo trae número cuando no hay filtros puestos; con filtros
   dice "Search results", porque el total dejaría de corresponder con lo que
   se ve en pantalla.                                                        */
.ml-search-encabezado {
  padding: 4px 0 18px;
  margin-bottom: 6px;
}

.ml-search-h1 {
  font-family: var(--ml-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: -.018em;
  color: var(--ml-ink, #0A0A0A) !important;
  margin: 0 0 8px !important;
}

.ml-search-sub {
  font-family: var(--ml-sans, 'Montserrat', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ml-muted, #6E6A63) !important;
  margin: 0 !important;
}

/* --- Cabecera de resultados --------------------------------------------- */
.flexmls-count-wrapper {
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--ml-line, #E5E1D8);
}

.flexmls-matches-count {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: -.014em;
  color: #0A0A0A !important;
}

/* --- La tarjeta ---------------------------------------------------------
   En reposo no lleva borde, ni sombra, ni fondo: la fotografía es la que
   manda. Es el mismo criterio de la tarjeta editorial de exclusive-listings,
   que es el diseño que Marvin señaló como el que le gusta.                 */
.flexmls-listings-list-wrapper .flexmls-listing {
  display: flex;
  flex-direction: column;
  /* `max-width` además de `width`: el plugin emula consultas de contenedor
     con clases que añade por JavaScript (.flexmls-width-600/900/1024) y una
     de ellas trae `width:31.5%; max-width:380px`. Anular solo el `width`
     dejaba la tarjeta topada en 380 px sin llenar su columna de 397. */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ml-ink) !important;
  text-decoration: none !important;
  font-family: var(--ml-sans);
  transition: transform .45s var(--ml-curva), box-shadow .45s var(--ml-curva);
}

.flexmls-listings-list-wrapper .flexmls-listing:hover,
.flexmls-listings-list-wrapper .flexmls-listing:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 26px 65px rgba(0, 0, 0, .16);
}

.flexmls-listings-list-wrapper .flexmls-listing:focus-visible {
  outline: 2px solid var(--ml-gold);
  outline-offset: 4px;
}

/* --- La fotografía -------------------------------------------------------
   El plugin la fija en 238 px de alto. Con `aspect-ratio` la proporción se
   sostiene sola en cualquier ancho de columna, que es justo lo que hace
   falta con una rejilla fluida.

   El velo inferior no es decorativo: el precio va en blanco encima de la
   foto y sin él una foto clara (arena, fachada blanca, cielo) lo deja
   ilegible. Es un degradado, no un bloque, para que no se coma la imagen.  */
.flexmls-listings-list-wrapper .flexmls-image-wrapper {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  background-color: var(--ml-ink);
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden;
  border-radius: 0 !important;
}

/* --- El precio ----------------------------------------------------------
   VA DEBAJO DEL TÍTULO, no encima de la foto. Es el orden de Sotheby's, que
   Marvin señaló como referencia: título → precio → datos. El marcado lo
   mueve el mu-plugin (§2c); aquí solo se le da forma.

   Encima de la foto competía con la imagen y obligaba a un velo oscuro para
   ser legible; abajo se lee como cifra y la fotografía queda limpia.       */
.flexmls-listings-list-wrapper .flexmls-price {
  display: block;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: none !important;
  font-family: var(--ml-serif) !important;
  font-size: clamp(23px, 2vw, 27px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em;
  color: var(--ml-ink) !important;
  text-shadow: none;
}

/* --- Antetítulo "New Listing" -------------------------------------------
   Bloque negro macizo con texto blanco, como el "VIDEO" de Sotheby's. Antes
   era un filete de oro sobre velo; el bloque macizo se lee mejor sobre
   cualquier fotografía y no gasta oro en un elemento repetido 10 veces.    */
.flexmls-listings-list-wrapper .new-listing-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 8px 14px;
  background: var(--ml-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ml-sans);
  font-size: 9.5px !important;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFF !important;
}

/* --- Favorito / descartar -----------------------------------------------
   Son del portal del plugin y piden registro. NO se ocultan (Marvin decidió
   conservar el portal en el buscador), pero en reposo estorban a la foto:
   se atenúan y aparecen del todo al pasar el cursor o al enfocarlos con el
   teclado. En pantalla táctil no hay hover, así que ahí quedan siempre
   visibles — se resuelve con la consulta de puntero de más abajo.          */
.flexmls-listings-list-wrapper .flexmls-portal-links {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.flexmls-listings-list-wrapper .flexmls-portal-links .flexmls_portal_cart_handle {
  color: #FFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  transition: opacity .3s var(--ml-curva), color .3s var(--ml-curva);
}

.flexmls-listings-list-wrapper .flexmls-portal-links .flexmls_portal_cart_handle:hover {
  color: var(--ml-gold) !important;
}

@media (hover: hover) and (pointer: fine) {
  .flexmls-listings-list-wrapper .flexmls-portal-links { opacity: 0; transition: opacity .35s var(--ml-curva); }
  .flexmls-listing:hover .flexmls-portal-links,
  .flexmls-listing:focus-within .flexmls-portal-links { opacity: 1; }
}

/* --- Texto bajo la foto -------------------------------------------------- */
.flexmls-listings-list-wrapper .flexmls-content-wrapper {
  padding: 18px 2px 0 !important;
  background: none !important;
  border: 0 !important;
}

/* La dirección es el título de la tarjeta: Cormorant, como el <h1> de la
   ficha. Se limita a dos líneas para que la rejilla no se descuadre cuando
   el MLS manda una dirección larguísima (las hay de 90 caracteres).

   `min-height` de dos líneas además del `line-clamp`: sin él, las tarjetas
   de una sola línea quedaban 24 px más bajas y la fila de "ACTIVE · 4BD ·
   3,234SF" bailaba de una tarjeta a otra. Medido: alturas de 406 y 430 px
   mezcladas en la misma fila.                                             */
.flexmls-listings-list-wrapper .flexmls-address {
  min-height: 2.5em;
  font-family: var(--ml-serif) !important;
  font-size: clamp(18px, 1.5vw, 21px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.014em;
  color: var(--ml-ink) !important;
  margin: 0 0 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Estado y datos rápidos ---------------------------------------------
   Una sola línea corrida, separada por puntos de oro, como
   "4 Bedrooms · Interior: 3,920 Sq Ft" de Sotheby's. El texto lo pasa a
   lenguaje de persona el mu-plugin (§2c: "3BD" → "3 Bedrooms").

   Se abandona la versalita espaciada en los datos: servía cuando eran
   claves cortas del MLS, pero en prosa cansa y se lee peor. El estado
   ("Active") sí la conserva, porque ahí sigue funcionando como etiqueta.  */
.flexmls-listings-list-wrapper .flexmls-quick-details {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--ml-line);
}

.flexmls-listings-list-wrapper .flexmls-status {
  font-family: var(--ml-sans) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ml-muted) !important;
  max-width: none !important;
}

.flexmls-listings-list-wrapper .flexmls-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  max-width: none !important;
  font-size: 0 !important;   /* mata el espacio en blanco del marcado */
}

.flexmls-listings-list-wrapper .flexmls-detail {
  font-family: var(--ml-sans) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ml-muted) !important;
  white-space: nowrap;
}

/* El punto separador es un pseudo-elemento y no un carácter del marcado:
   así nunca queda uno huérfano si el MLS omite un dato (pasa a menudo con
   la superficie). */
.flexmls-listings-list-wrapper .flexmls-detail + .flexmls-detail::before,
.flexmls-listings-list-wrapper .flexmls-status + .flexmls-details::before {
  content: '·';
  margin: 0 9px;
  color: var(--ml-gold);
  font-size: 12.5px;
  font-weight: 700;
}

.flexmls-listings-list-wrapper .flexmls-status + .flexmls-details::before {
  margin-left: 0;
}

/* --- Pie: última modificación -------------------------------------------
   EL SELLO DEL MLS SE OCULTA POR PETICIÓN DE MARVIN (2026-08-09), igual que
   ya había decidido para la ficha. Es `img.flexmls-idx-compliance-badge`, la
   marca de cumplimiento del convenio IDX con MLS BCS.
   **La fecha de última actualización SÍ se conserva**, que es la otra parte
   habitual de esa divulgación. Revertir = borrar la regla del `img`.       */
.flexmls-listings-list-wrapper .flexmls-last-modified-and-idx-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 2px 0 !important;
  border: 0 !important;
  font-family: var(--ml-sans) !important;
  font-size: 9.5px !important;
  letter-spacing: .06em;
  color: var(--ml-muted) !important;
}

.flexmls-listings-list-wrapper .flexmls-last-modified-and-idx-wrapper * {
  font-size: inherit !important;
  font-weight: 400 !important;
  color: inherit !important;
}

.flexmls-listings-list-wrapper .flexmls-idx-compliance-badge {
  display: none !important;
}

/* --- Botones del plugin -------------------------------------------------
   "Sign up or log in" y "Open Map" venían con el tono de fábrica #BCAC93 y
   texto blanco encima: **2.2:1, reprueba WCAG**. Es el mismo color que ya
   hubo que corregir en el título de la ficha.

   Se resuelven con negro y texto blanco (18.4:1) y el oro reservado al
   hover, que es donde el oro rinde: acento, no superficie.                 */
.flexmls_connect__search_results_v2 .flexmls-btn {
  font-family: var(--ml-sans, 'Montserrat', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0 !important;
  transition: background-color .3s var(--ml-curva, ease), color .3s var(--ml-curva, ease);
}

.flexmls_connect__search_results_v2 .flexmls-btn-primary,
.flexmls_connect__search_results_v2 .flexmls-primary-color-background {
  background-color: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #FFF !important;
}

.flexmls_connect__search_results_v2 .flexmls-btn-primary:hover,
.flexmls_connect__search_results_v2 .flexmls-primary-color-background:hover {
  background-color: #C8A96E !important;
  border-color: #C8A96E !important;
  color: #0A0A0A !important;
}

/* --- Barra de controles (orden, resultados por página) ------------------- */
.flexmls-search-results-header,
.flexmls-listings-controls {
  font-family: var(--ml-sans) !important;
}

.flexmls-search-results-header label,
.flexmls-listings-controls label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ml-muted) !important;
}

/* --- Móvil ---------------------------------------------------------------
   Una sola columna por debajo de 700: con dos, la foto baja de 160 px y
   deja de vender.                                                          */
@media (max-width: 700px) {
  /* Sin padding lateral propio: el aire ya lo pone
     .flexmls_connect__search_results_v2. Sumar los dos dejaba la tarjeta en
     315 px sobre una pantalla de 390 — 75 px de márgenes en el sitio donde
     menos sobra el ancho. */
  .flexmls-listings-list-wrapper {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 8px 0 44px;
  }
  /* Sin hover en táctil, el levantamiento no aporta y roba fluidez. */
  .flexmls-listings-list-wrapper .flexmls-listing:hover {
    transform: none;
    box-shadow: none;
  }
}