/**
 * [mdpd_props_slider] — ver inc/front/props-slider.php.
 *
 * El ancho de columnas (5/3/1 según breakpoint) y el drag/flechas/bullets
 * salen enteros de flatsome.css + chunk.slider.js (`.row.large-columns-N`
 * + `.slider` con `groupCells:"100%"`, ya cargados siempre) — el mismo
 * mecanismo que usa Flatsome para su slider de productos relacionados.
 * Acá solo queda lo que ese sistema no cubre: el centrado del `.row-slider`,
 * el título y el alto parejo de la tarjeta dentro de la celda.
 */

.mdpd-props-slider {
	margin: 0 0 1.5em;
}

/* Flickity/chunk.slider.js le pone su propio margin inline al `.row-slider`
   que rompe el centrado del conjunto dentro del contenedor del shortcode. */
.mdpd-props-slider .row-slider {
	margin: 0 auto !important;
}

.mdpd-props-slider__titulo {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 0.75em;
}

/*
 * «Ver todos» debajo del carrusel. En el toggle va uno por panel, así que se
 * mueve solo con la pestaña activa: el panel inactivo de Flatsome se esconde
 * con `height:0;overflow:hidden`, y el link se esconde con él.
 *
 * Va centrado y con margen arriba porque queda debajo de los bullets del
 * slider, que son lo último que se ve de la fila.
 */
.mdpd-props-slider__vertodos {
	margin: 0.6em 0 0;
	text-align: center;
}

.mdpd-props-slider__vertodos a {
	display: inline-block;
	padding: 0.35em 1.2em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fs-color-primary, #168ea6);
	border: 1px solid currentColor;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mdpd-props-slider__vertodos a:hover,
.mdpd-props-slider__vertodos a:focus-visible {
	color: #fff;
	background: var(--fs-color-primary, #168ea6);
}

/* La tarjeta ya viene pensada para estirarse a la altura de su contenedor
   (grilla de /propiedades/, ver prop-results.css); acá el contenedor es la
   `.col` de Flatsome, no una fila de grid, así que sin esto cada tarjeta
   quedaría a su alto natural pese a `equalize-box` en la fila. */
.mdpd-props-slider .tarjetaProp {
	height: 100%;
}