/**
 * Estilos propios de la pagina de detalle de curso (Tutor LMS).
 *
 * Se carga solo en single de curso desde functions.php y se acota con
 * .ycf-single-course (clase agregada en tutor/single-course.php) para no
 * pisar el dashboard ni el archivo de cursos, que se siguen tematizando
 * desde style.css.
 *
 * Toda personalizacion nueva de esta pagina va aca.
 */

/* Resumen de valoraciones: la columna de la derecha ("1 valoracion") venia
   con tutor-col-4 / tutor-col-lg-3, demasiado angosta, y el texto se partia
   en dos renglones ("1 valora / cion"). Se le da un ancho fijo suficiente y
   se evita el corte de palabra. */
.ycf-single-course .tutor-review-summary-rating > .tutor-col-4,
.ycf-single-course .tutor-review-summary-rating > .tutor-col-lg-3 {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
	max-width: none;
}

.ycf-single-course .tutor-individual-star-rating {
	display: block;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/* La barra de progreso queda como columna elastica, absorbiendo el ancho
   que libera la columna del texto. */
.ycf-single-course .tutor-review-summary-rating > .tutor-col {
	min-width: 0;
}

/* El total ("Total 1 Valoracion") comparte el mismo problema de corte. */
.ycf-single-course .tutor-total-rating-count {
	white-space: nowrap;
}

/* En mobile el texto sigue en un renglon (es mas angosto porque baja la
   tipografia), y se le saca el min-width para que la barra de progreso no
   quede aplastada. */
@media (max-width: 575px) {
	.ycf-single-course .tutor-review-summary-rating > .tutor-col-4,
	.ycf-single-course .tutor-review-summary-rating > .tutor-col-lg-3 {
		min-width: 0;
	}

	.ycf-single-course .tutor-individual-star-rating {
		font-size: 13px;
	}
}

/* "Que aprenderas?" (y demas widgets de 2 columnas del detalle de curso):
   Tutor fuerza width: calc(50% - 1.2rem) en cada <li> a partir de 768px, asi
   que un item largo y solitario se parte en un bloque angosto dejando media
   fila vacia. Cuando hay 1 o 2 items se pasa a una sola columna de ancho
   completo; con 3 o mas se conserva el layout de dos columnas del plugin. */
@media (min-width: 768px) {
	.ycf-single-course .tutor-course-details-widget-col-2 ul > li:only-child,
	.ycf-single-course .tutor-course-details-widget-col-2 ul > li:first-child:nth-last-child(2),
	.ycf-single-course .tutor-course-details-widget-col-2 ul > li:first-child:nth-last-child(2) ~ li {
		width: 100%;
	}
}