/**
 * «Acerca de este curso» como tarjeta blanca.
 *
 * EL PROBLEMA
 * Tutor recorta la descripción a 200 px y tapa el corte con un degradado que va
 * a BLANCO PURO (`.tutor-toggle-more-collapsed::before`). El fondo de este tema
 * es marfil (#F6F2EA), así que ese degradado no se fundía con nada: se veía una
 * banda blanca y un corte duro justo encima del botón «Mostrar más».
 *
 * LA SOLUCIÓN
 * Poner debajo el blanco que el degradado espera. La descripción pasa a ser una
 * tarjeta blanca y el degradado se funde con ella, que es para lo que estaba
 * pensado.
 *
 * CUIDADO AL EDITAR: Tutor escribe `height: 200px` EN LÍNEA sobre el contenedor.
 * Por eso aquí se usa `box-sizing: content-box`: así esos 200 px siguen
 * significando «200 px de texto» y el relleno de la tarjeta se suma por fuera,
 * en vez de comerse cuatro líneas de la descripción.
 */

/* ── La tarjeta: descripción ───────────────────────────────────────────── */
.tutor-course-details-content.tutor-toggle-more-content {
	box-sizing: content-box;
	padding: 1.75rem 1.75rem 0;
	background: #fff;
	border: 1px solid #e9e1d3;
	border-bottom: 0;
	border-radius: 0.625rem 0.625rem 0 0;
}

/* Desplegada, que no quede nada cortado: la altura en línea que calcula Tutor
   no cuenta con el relleno que acabamos de añadir. */
.tutor-course-details-content.tutor-toggle-more-content:not(.tutor-toggle-more-collapsed) {
	height: auto !important;
	padding-bottom: 0.5rem;
}

/* ── El degradado, anclado abajo ───────────────────────────────────────── */
/* Tutor lo coloca con `top: 138px`, una medida atada a los 200 px de alto. Con
   la tarjeta ese cálculo deja de cuadrar y el degradado quedaría flotando en
   mitad del texto. Anclado a `bottom` está siempre donde debe, mida lo que mida
   el recorte. */
.tutor-course-details-content.tutor-toggle-more-collapsed::before {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 78%);
}

/* ── El botón «Mostrar más», como pie de la misma tarjeta ──────────────── */
/* Es hermano de la descripción, no hijo: no hay ningún contenedor que envuelva
   a los dos. En vez de tocar la plantilla de Tutor —que se pierde en cada
   actualización del plugin— se le da el borde y el fondo que continúan la
   tarjeta, y los dos se leen como una sola pieza. */
.tutor-tab-item > a.tutor-btn-show-more {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 0;
	padding: 0.875rem 1.75rem 1.25rem;
	background: #fff;
	border: 1px solid #e9e1d3;
	border-top: 0;
	border-radius: 0 0 0.625rem 0.625rem;
}

.tutor-tab-item > a.tutor-btn-show-more:hover,
.tutor-tab-item > a.tutor-btn-show-more:focus {
	background: #fffdf8;
}

/* El resto de la pestaña respira respecto a la tarjeta. */
.tutor-tab-item > .tutor-course-details-widget {
	margin-top: 2.5rem;
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */
/* A 375 px, 1,75rem por lado se comen casi un tercio del ancho útil y el texto
   queda en columnas de cuatro palabras. */
@media (max-width: 640px) {
	.tutor-course-details-content.tutor-toggle-more-content {
		padding: 1.25rem 1.25rem 0;
	}

	.tutor-tab-item > a.tutor-btn-show-more {
		padding: 0.75rem 1.25rem 1rem;
	}
}

/* ── Aire entre el final del temario y el pie ──────────────────────────── */
/* Tutor cierra la ficha del curso sin ningún margen inferior: medido, la última
   lección terminaba EXACTAMENTE donde empieza el verde del pie (0 px). El
   acordeón del temario quedaba pegado al footer y la página parecía cortada.
   El relleno va en el contenedor de la ficha, así vale tanto si la columna más
   larga es la del temario como si es la de la barra lateral de compra. */
.tutor-course-details-page {
	padding-bottom: 4.5rem;
}

@media (max-width: 640px) {
	.tutor-course-details-page {
		padding-bottom: 2.5rem;
	}
}