/**
 * Widget "CUME Oferta Académica".
 *
 * Rejilla de programas agrupada por nivel: encabezado con barra lateral y
 * contador, y tarjetas con barra de acento superior a dos colores, etiqueta de
 * nivel, título enlazado, descripción, emblema de modalidad, duración/campus y
 * enlace a la ficha.
 *
 * Construido sobre los tokens de tema de CUME Core (`--cume-*`), por lo que se
 * adapta al modo claro/oscuro. Todos los valores clave son custom properties
 * que los controles de Elementor sobreescriben.
 */

.cume-oferta {
	--cume-of-cols: 3;
	--cume-of-gap: 24px;
	--cume-of-group-gap: 72px;
	--cume-of-transition: 240ms;

	--cume-of-nivel-color: var(--cume-primary-light, #6c63b5);
	--cume-of-count-color: var(--cume-text-muted, #5b5b6e);
	--cume-of-note-color: var(--cume-text-muted, #5b5b6e);
	--cume-of-nivel-rule: var(--cume-primary-light, #6c63b5);
	--cume-of-nivel-rule-w: 3px;

	--cume-of-bg: var(--cume-surface, #ffffff);
	--cume-of-border: var(--cume-border, #e6e6ec);
	/* Al hover el borde se ilumina con el acento, a juego con el título. Se
	 * anula desde el control «Tarjeta → Hover → Borde». */
	--cume-of-hover-border: var(--cume-accent, #ffa800);
	--cume-of-radius: 10px;
	--cume-of-padding: 24px;
	--cume-of-lift: 4px;

	--cume-of-bar-1: #ffa800;
	--cume-of-bar-2: #6c63b5;
	--cume-of-bar-split: 22%;
	--cume-of-bar-h: 4px;

	--cume-of-label-color: var(--cume-text-muted, #5b5b6e);
	--cume-of-title-color: var(--cume-primary-light, #6c63b5);
	--cume-of-title-hover: var(--cume-accent, #ffa800);
	--cume-of-resumen-color: var(--cume-text-muted, #5b5b6e);
	--cume-of-meta-color: var(--cume-text-muted, #5b5b6e);

	--cume-of-mod-color: var(--cume-primary-light, #6c63b5);
	--cume-of-mod-border: var(--cume-border, #e6e6ec);
	--cume-of-mod-bg: transparent;

	--cume-of-beca-color: #ffa800;
	--cume-of-beca-border: #ffa800;
	--cume-of-beca-bg: rgba(255, 168, 0, 0.12);

	--cume-of-cta-color: var(--cume-primary-light, #6c63b5);
	--cume-of-cta-hover: var(--cume-accent, #ffa800);

	display: flex;
	flex-direction: column;
	gap: var(--cume-of-group-gap);
}

/* --- Encabezado de nivel --- */
.cume-oferta__head {
	margin: 0 0 28px;
	padding-left: 18px;
	border-left: var(--cume-of-nivel-rule-w) solid var(--cume-of-nivel-rule);
}

.cume-oferta__nivel {
	margin: 0;
	color: var(--cume-of-nivel-color);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.cume-oferta__count {
	color: var(--cume-of-count-color);
	font-size: 0.62em;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	vertical-align: middle;
}

.cume-oferta__note {
	max-width: 68ch;
	margin: 10px 0 0;
	color: var(--cume-of-note-color);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* --- Rejilla --- */
.cume-oferta__grid {
	display: grid;
	grid-template-columns: repeat(var(--cume-of-cols), minmax(0, 1fr));
	gap: var(--cume-of-gap);
	align-items: stretch;
}

/* --- Tarjeta --- */
.cume-oferta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background: var(--cume-of-bg);
	border: 1px solid var(--cume-of-border);
	border-radius: var(--cume-of-radius);
	transition: transform var(--cume-of-transition) cubic-bezier(0.22, 1, 0.36, 1),
		border-color var(--cume-of-transition) ease;
}

.cume-oferta__card:hover {
	transform: translateY(calc(-1 * var(--cume-of-lift)));
	border-color: var(--cume-of-hover-border);
}

/* Barra de acento superior: dos colores con corte configurable. */
.cume-oferta__bar {
	display: block;
	flex: 0 0 auto;
	height: var(--cume-of-bar-h);
	background: linear-gradient(
		90deg,
		var(--cume-of-bar-1) 0,
		var(--cume-of-bar-1) var(--cume-of-bar-split),
		var(--cume-of-bar-2) var(--cume-of-bar-split),
		var(--cume-of-bar-2) 100%
	);
}

.cume-oferta__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: var(--cume-of-padding);
}

/* --- Fila superior: etiqueta de nivel + emblema de beca --- */
.cume-oferta__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.cume-oferta__label {
	color: var(--cume-of-label-color);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.cume-oferta__beca {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 4px 10px;
	border: 1px solid var(--cume-of-beca-border);
	border-radius: 999px;
	background: var(--cume-of-beca-bg);
	color: var(--cume-of-beca-color);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.1;
}

.cume-oferta__beca-icon {
	display: inline-flex;
	align-items: center;
}

.cume-oferta__beca-icon i,
.cume-oferta__beca-icon svg,
.cume-oferta__cta-icon i,
.cume-oferta__cta-icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	fill: currentColor;
	color: currentColor;
}

/* --- Título --- */
.cume-oferta__title {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Cualificado con la etiqueta para ganar a los estilos de enlace del tema. */
.cume-oferta__title a.cume-oferta__title-link,
.cume-oferta__title a {
	color: var(--cume-of-title-color);
	text-decoration: none;
	transition: color var(--cume-of-transition) ease;
}

.cume-oferta__title a:hover,
.cume-oferta__title a:focus {
	color: var(--cume-of-title-hover);
}

/* El título se ilumina al pasar por CUALQUIER punto de la tarjeta, no solo
 * sobre el texto del enlace: es lo que hace que el efecto se lea como una sola
 * pieza junto con el borde y la elevación. */
.cume-oferta__card:hover .cume-oferta__title a {
	color: var(--cume-of-title-hover);
}

/* --- Descripción --- */
.cume-oferta__resumen {
	margin: 0 0 16px;
	color: var(--cume-of-resumen-color);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* --- Emblemas de modalidad --- */
.cume-oferta__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.cume-oferta__modalidad {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--cume-of-mod-border);
	border-radius: 999px;
	background: var(--cume-of-mod-bg);
	color: var(--cume-of-mod-color);
	font-size: 0.75rem;
	line-height: 1.2;
}

/* --- Duración y campus --- */
.cume-oferta__meta {
	margin: 0;
	color: var(--cume-of-meta-color);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* --- Enlace a la ficha: anclado al fondo para que las tarjetas de una fila
 * lo alineen aunque los textos midan distinto. --- */
.cume-oferta__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--cume-of-cta-color);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--cume-of-transition) ease, gap var(--cume-of-transition) ease;
}

.cume-oferta__cta:hover,
.cume-oferta__cta:focus {
	gap: 12px;
	color: var(--cume-of-cta-hover);
}

/* --- Aviso en el editor cuando no hay datos --- */
.cume-oferta__empty {
	padding: 24px;
	border: 1px dashed var(--cume-border, #e6e6ec);
	border-radius: 8px;
	color: var(--cume-text-muted, #5b5b6e);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: center;
}

/* --- Responsive ---
 * Las columnas por dispositivo las emite el control «Columnas», que gana en
 * especificidad; aquí solo lo que no es configurable. */
@media (max-width: 767px) {
	.cume-oferta__nivel {
		font-size: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-oferta__card,
	.cume-oferta__cta,
	.cume-oferta__title a {
		transition: none;
	}

	.cume-oferta__card:hover {
		transform: none;
	}
}

/* =====================================================================
 * ACORDEÓN EN MÓVIL Y TARJETA COMPACTA
 *
 * Con 35 programas la rejilla completa son unos dieciséis mil píxeles de
 * desplazamiento en un teléfono. Plegada por nivel y con la tarjeta reducida
 * a lo esencial, el visitante ve toda la oferta sin bajar y abre solo lo suyo.
 * ================================================================== */

/* El título del nivel es un botón cuando el acordeón está activo; hay que
 * quitarle la apariencia de botón, no la de título. */
.cume-oferta button.cume-oferta__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: default;
}

.cume-oferta__chevron {
	display: none;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform 200ms ease;
}

@media (max-width: 767px) {
	.cume-oferta button.cume-oferta__toggle {
		cursor: pointer;
	}

	.cume-oferta__chevron {
		display: block;
	}

	/* Abierto: la punta mira hacia arriba. */
	.cume-oferta__toggle[aria-expanded="true"] .cume-oferta__chevron {
		transform: rotate( -135deg ) translate( -4px, -4px );
	}

	/* --- Tarjeta compacta ---
	 * No se ocultan datos por capricho: en un listado nadie lee la descripción,
	 * y está entera a un toque en la ficha del programa. */
	.cume-oferta-compacta-yes .cume-oferta__resumen,
	.cume-oferta-compacta-yes .cume-oferta__meta {
		display: none;
	}

	.cume-oferta-compacta-yes .cume-oferta__body {
		padding: 14px 16px;
	}

	.cume-oferta-compacta-yes .cume-oferta__title {
		margin-bottom: 8px;
		font-size: 1rem;
	}

	.cume-oferta-compacta-yes .cume-oferta__badges {
		margin-bottom: 0;
	}

	.cume-oferta-compacta-yes .cume-oferta__cta {
		margin-top: 10px;
	}
}

/* --- Deslizador en móvil ---
 * Las tarjetas del nivel se recorren de lado en vez de apilarse. El
 * desplazamiento es nativo, con anclaje: funciona con el dedo tal cual, sin
 * JavaScript de arrastre. */
@media (max-width: 767px) {
	.cume-oferta-slider-yes .cume-oferta__grid {
		display: flex;
		grid-template-columns: none;
		/* Sin este tope la pista puede crecer más que su contenedor y
		 * desbordar la página entera en horizontal. */
		max-width: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Que el gesto no arrastre también la página al llegar al extremo. */
		overscroll-behavior-x: contain;
		padding: 4px 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cume-oferta-slider-yes .cume-oferta__grid::-webkit-scrollbar {
		display: none;
	}

	/* Menos del ancho completo: la siguiente tarjeta se asoma y así se ve que
	 * hay más. Sin ese asomo, media pantalla parece el final de la lista. */
	.cume-oferta-slider-yes .cume-oferta__card {
		flex: 0 0 82%;
		/* Al inicio y no al centro: centrada, la primera tarjeta arrancaría
		 * desplazada y parecería que falta contenido a la izquierda. */
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-oferta__chevron {
		transition: none;
	}
}

/* El atributo `hidden` solo vale `display: none` del navegador, y lo pisa
 * cualquier regla nuestra de `display` —la rejilla es grid, o flex cuando
 * desliza—. Con las dos clases más el atributo, esta gana a las otras. */
.cume-oferta .cume-oferta__grid[hidden] {
	display: none;
}