/**
 * Profesores (widget de Elementor).
 *
 * Medidas y colores en las variables de .acc-teachers; también se cambian
 * desde la pestaña Estilo del widget. La tarjeta mide 227 × 283 (maqueta) y la
 * foto la rellena recortada con object-fit. Con el slider activado, en tablet
 * y móvil el ancho lo marca slider.css (el alto no cambia) y el carril empieza
 * a la izquierda: centrado, las primeras tarjetas quedarían fuera.
 */
.acc-teachers {
	--acc-teachers-width: 227px;
	--acc-teachers-height: 283px;
	--acc-teachers-gap: 24px;
	--acc-teachers-radius: 8px;
	--acc-teachers-overlay: rgba(0, 0, 0, 0.6);
	--acc-teachers-name-color: #fff;

	.acc-teachers__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--acc-teachers-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (max-width: 1024px) {
		&.acc-slider .acc-teachers__list {
			justify-content: flex-start;
		}
	}

	.acc-teachers__item {
		position: relative;
		flex: 0 1 var(--acc-teachers-width);
		height: var(--acc-teachers-height);
		margin: 0;
		padding: 0;
		overflow: hidden;
		border-radius: var(--acc-teachers-radius);
		background: #e5e5e5;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, transparent 50%, var(--acc-teachers-overlay) 100%);
			pointer-events: none;
		}
	}

	.acc-teachers__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.acc-teachers__name {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		margin: 0;
		padding: 0 12px 16px;
		color: var(--acc-teachers-name-color);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
	}
}