/**
 * Simó Lorenzo Kit — Testimonios.
 *
 * Solo el interior de cada tarjeta (comillas, texto, persona).
 * La carcasa (columnas, tarjeta/líneas, deslizable...) está en card-collection.css.
 */

.slk-tm {
	--slk-tm-quote-size: 72px;
	--slk-tm-quote-gap: 24px;
	--slk-tm-author-gap: 32px;
	--slk-tm-text-valign: flex-start;
	--slk-tm-avatar-display: block;
	--slk-tm-avatar-size: 64px;
	--slk-tm-avatar-radius: 50%;
	--slk-tm-avatar-gap: 14px;
}

/* La figura ocupa toda la tarjeta: así la persona puede ir siempre al pie. */
.slk-tm__figure {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

/*
 * Comillas: el carácter “ con la tipografía del sitio. Una "caja" de 0.45em de alto
 * recorta el hueco que las fuentes dejan bajo las comillas, para que el espacio
 * con el texto sea el del control y no dependa de la fuente.
 */
.slk-tm__quote {
	display: block;
	height: 0.45em;
	margin-bottom: var(--slk-tm-quote-gap);
	font-size: var(--slk-tm-quote-size);
	font-weight: 900;
	line-height: 0.9;
	overflow: visible;
	user-select: none;
}

/* Testimonio: ocupa el espacio libre y se coloca arriba o centrado en él. */
.slk-tm__text {
	display: flex;
	flex-direction: column;
	justify-content: var(--slk-tm-text-valign);
	flex: 1 1 auto;
	/* Reseteo de los estilos de <blockquote> que ponen muchos temas. */
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	quotes: none;
}

.slk-tm__text::before,
.slk-tm__text::after {
	content: none;
}

.slk-tm__text p {
	margin: 0 0 0.8em;
}

.slk-tm__text p:last-child {
	margin-bottom: 0;
}

/* Persona: siempre al pie de la tarjeta, con un espacio mínimo sobre ella. */
.slk-tm__author {
	display: flex;
	align-items: center;
	gap: var(--slk-tm-avatar-gap);
	margin-top: auto;
	padding-top: var(--slk-tm-author-gap);
	/* Sigue la "Alineación del texto" (left / center / right). */
	justify-content: var(--slk-tm-author-justify, flex-start);
}

.slk-tm__avatar {
	display: var(--slk-tm-avatar-display);
	flex: 0 0 var(--slk-tm-avatar-size);
	width: var(--slk-tm-avatar-size);
	height: var(--slk-tm-avatar-size);
	max-width: none;
	border-radius: var(--slk-tm-avatar-radius);
	object-fit: cover;
}

.slk-tm__person {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.slk-tm__name {
	font-weight: 700;
}

.slk-tm__role {
	font-size: 0.85em;
}