/* Carruseles en filas y tarjetas enteras como enlace. Ver histamai-carrusel-filas.php. */

/*
 * En modo filas Swiper coloca las tarjetas con flex-wrap. Las diapositivas de Elementor miden
 * height:100% por defecto, que en varias filas haría que cada una ocupara todo el alto: se
 * dejan con su alto natural. Las de una misma fila se igualan por flexbox (stretch).
 */
[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide {
	height: auto;
}

[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide > .e-loop-item,
[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide .e-con,
[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide .elementor-widget-sasi-iconbox,
[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide .elementor-widget-container,
[class*="hm-carrusel-filas-"] .swiper-grid .swiper-slide .sasi-icon-box {
	height: 100%;
}

/*
 * Con una sola columna el carrusel se llena por columnas (1 sobre 2, 3 sobre 4…). Swiper lo
 * dibujaría como columna flexible con alto fijo; se sigue dibujando en filas y cada tarjeta
 * va al lugar que le calcula carrusel.js en --hm-orden. El !important es porque, al pasar de
 * escritorio a móvil, Swiper deja escrito en línea el `order` del modo por filas.
 */
[class*="hm-carrusel-filas-"] .swiper-grid-column > .swiper-wrapper {
	flex-direction: row;
}

[class*="hm-carrusel-filas-"] .swiper-grid-column > .swiper-wrapper > .swiper-slide {
	order: var(--hm-orden) !important;
}

/*
 * Tarjeta entera clicable: el enlace del título se estira sobre toda la tarjeta con un
 * pseudo-elemento. Así sigue habiendo un único enlace —el del título, que es el que leen los
 * lectores de pantalla y el teclado— en vez de envolver la tarjeta en otro <a>.
 */
.hm-tarjeta-completa .sasi-icon-box {
	position: relative;
}

.hm-tarjeta-completa .icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hm-tarjeta-completa .icon-box-title a:focus-visible {
	outline: none;
}

.hm-tarjeta-completa .icon-box-title a:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}