/**
 * Listado filtrable de cursos — solo estructura.
 *
 * Ni una familia tipográfica, ni un tamaño de letra, ni un color de marca, por
 * la misma razón que en campos.css: el aspecto lo pone el tema, y aquí además lo
 * pone la pestaña Design de Divi. Todo lo que se declarase aquí habría que
 * ganárselo luego a base de especificidad contra el CSS que Divi genera, y esa
 * pelea la pierde siempre quien la empieza.
 *
 * Lo que sí vive aquí es lo que Divi no sabe declarar: la retícula, el reflujo de
 * la barra de filtros, el estado de carga y el foco visible.
 *
 * Todos los selectores cuelgan de .ip-listado, .ip-filtros o .ip-curso. Ninguno
 * puede alcanzar nada del tema.
 */

.ip-listado {
	--ip-columnas: 3;
	--ip-hueco: 1.5rem;
}

/* ------------------------------------------------------------ la rejilla */

.ip-listado__rejilla {
	display: grid;
	grid-template-columns: repeat(var(--ip-columnas), minmax(0, 1fr));
	gap: var(--ip-hueco);
}

/* `minmax(0, 1fr)` y no `1fr` a secas: sin el mínimo en cero, un título largo
   sin espacios ensancha su columna y descuadra la fila entera. */

@media (max-width: 980px) {
	.ip-listado {
		--ip-columnas: 2;
	}
}

@media (max-width: 767px) {
	.ip-listado {
		--ip-columnas: 1;
	}
}

/* Los valores de arriba son el respaldo. Si en la pestaña Design se pone un
   número de columnas por tamaño de pantalla, Divi escribe su propia regla sobre
   --ip-columnas y gana por orden de aparición. */

/* --------------------------------------------------- la barra de filtros */

.ip-listado__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ip-hueco);
	margin-bottom: var(--ip-hueco);
}

.ip-filtros__grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ip-filtros__titulo {
	font-weight: 600;
}

.ip-filtros__boton {
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: inherit;

	/* 32 px de alto mínimo, que es el objetivo de clic que el proyecto se ha
	   fijado en todas sus pantallas. */
	min-height: 32px;
	padding: 0.35em 0.9em;
	border-radius: 999px;
}

.ip-filtros__boton[aria-pressed="true"] {
	/* Sin color: solo el peso, que se ve igual en cualquier tema y no depende de
	   que alguien haya configurado la pestaña Design. */
	font-weight: 700;
}

.ip-filtros__conteo {
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- las fichas */

.ip-curso {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
}

.ip-curso__imagen {
	display: block;
	overflow: hidden;
}

.ip-curso__imagen img {
	display: block;
	width: 100%;
	height: auto;
}

.ip-curso__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	/* Empuja el botón al fondo de la tarjeta, de modo que en una fila de tres
	   todos los botones queden a la misma altura aunque los títulos midan
	   distinto. Sin esto, una fila de tarjetas parece descuadrada. */
	flex: 1 1 auto;
}

.ip-curso__accion {
	margin-top: auto;
}

.ip-curso__titulo,
.ip-curso__categoria,
.ip-curso__fecha,
.ip-curso__extracto,
.ip-curso__precio,
.ip-curso__accion {
	margin: 0;
}

.ip-curso__titulo a {
	text-decoration: none;
	color: inherit;
}

.ip-curso__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}

.ip-curso__badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.8em;
	line-height: 1.6;
}

.ip-curso--agotado .ip-curso__imagen img {
	opacity: 0.55;
}

.ip-curso__boton {
	display: inline-block;
	text-decoration: none;
	min-height: 32px;
	padding: 0.4em 1.1em;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: inherit;
}

/* -------------------------------------------------- conteo y paginación */

.ip-listado__conteo {
	margin: 0 0 var(--ip-hueco);
	font-variant-numeric: tabular-nums;
}

.ip-listado__vacio {
	margin: 0;
	padding: 2rem 0;
}

.ip-listado__paginacion {
	margin-top: var(--ip-hueco);
	text-align: center;
}

.ip-listado__paginacion ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-listado__paginacion a,
.ip-listado__paginacion span,
.ip-listado__cargar {
	display: inline-block;
	min-height: 32px;
	padding: 0.4em 0.9em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.ip-listado__cargar {
	cursor: pointer;
}

.ip-listado__paginacion .current {
	font-weight: 700;
}

/* --------------------------------------------------- estados y accesibilidad */

/* Un solo anillo de foco para todo, siempre visible y nunca suprimido. Es la
   misma regla que rige el panel de administración del plugin. */
.ip-listado :is(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Mientras se cargan resultados, la región baja de opacidad y deja de aceptar
   clics. `aria-busy` lo dice para quien no ve la opacidad. */
.ip-listado__resultados[aria-busy="true"] {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 120ms linear;
}

.ip-listado__cargar[disabled] {
	cursor: default;
	opacity: 0.55;
}

/* El aviso del constructor cuando falta WooCommerce. No sale nunca en la web
   publicada: el módulo devuelve cadena vacía fuera del constructor. */
.ip-listado__aviso {
	padding: 1rem;
	border: 1px dashed currentColor;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.ip-listado__resultados[aria-busy="true"] {
		transition: none;
	}
}