/**
 * Widget "CUME Info Card".
 *
 * Tarjeta informativa: icono + título + bajada en la cabecera, lista de ítems
 * con icono, subtítulo intermedio opcional y nota al pie separada por una línea.
 *
 * 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-info-cards {
	--cume-ifc-cols: 1;
	--cume-ifc-gap: 24px;
	--cume-ifc-transition: 240ms;

	--cume-ifc-bg: var(--cume-surface, #ffffff);
	--cume-ifc-border: var(--cume-border, #e6e6ec);
	--cume-ifc-hover-border: var(--cume-ifc-border);
	--cume-ifc-radius: 12px;
	--cume-ifc-padding: 28px;

	--cume-ifc-icon: var(--cume-primary-light, #6c63b5);
	--cume-ifc-icon-size: 26px;
	--cume-ifc-head-gap: 12px;
	--cume-ifc-head-align: flex-start;

	--cume-ifc-item-color: var(--cume-text, #2c2c3a);
	--cume-ifc-item-color-hover: var(--cume-accent, #ffa800);
	--cume-ifc-item-icon: var(--cume-primary-light, #6c63b5);
	--cume-ifc-item-icon-size: 1em;
	--cume-ifc-item-icon-gap: 10px;
	--cume-ifc-item-gap: 12px;
	--cume-ifc-line: var(--cume-border, #e6e6ec);

	display: grid;
	grid-template-columns: repeat(var(--cume-ifc-cols), minmax(0, 1fr));
	gap: var(--cume-ifc-gap);
	align-items: start;
}

/* --- Tarjeta --- */
.cume-info-card {
	min-width: 0;
	padding: var(--cume-ifc-padding);
	background: var(--cume-ifc-bg);
	border: 1px solid var(--cume-ifc-border);
	border-radius: var(--cume-ifc-radius);
	transition: border-color var(--cume-ifc-transition) ease;
}

.cume-info-card:hover {
	border-color: var(--cume-ifc-hover-border);
}

/* --- Cabecera --- */
.cume-info-card__head {
	display: flex;
	align-items: var(--cume-ifc-head-align);
	gap: var(--cume-ifc-head-gap);
	margin-bottom: 20px;
}

.cume-info-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--cume-ifc-icon);
	font-size: var(--cume-ifc-icon-size);
	line-height: 1;
}

.cume-info-card__icon i,
.cume-info-card__icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
	color: currentColor;
}

.cume-info-card__headings {
	min-width: 0;
}

.cume-info-card__title {
	margin: 0;
	color: var(--cume-primary, #26214f);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.cume-info-card__tagline {
	margin: 6px 0 0;
	color: var(--cume-text-muted, #5b5b6e);
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.45;
}

/* --- Lista ---
 * El contenedor puede ser ul, ol o div, y el ítem li, div, p o span: las reglas
 * son de clase para que cualquier combinación se vea igual. */
.cume-info-card__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cume-info-card__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cume-ifc-item-icon-gap);
	margin: 0;
	padding: calc(var(--cume-ifc-item-gap) / 2) 0;
	color: var(--cume-ifc-item-color);
	line-height: 1.45;
}

.cume-info-card__list--divided .cume-info-card__item + .cume-info-card__item {
	border-top: 1px solid var(--cume-ifc-line);
}

.cume-info-card__item-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--cume-ifc-item-icon);
	font-size: var(--cume-ifc-item-icon-size);
}

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

/* El texto del ítem admite cualquier etiqueta: hereda la tipografía del ítem
 * para que el diseño no cambie al elegir un encabezado. */
.cume-info-card__item-text {
	min-width: 0;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

a.cume-info-card__item-text {
	text-decoration: none;
	transition: color var(--cume-ifc-transition) ease;
}

a.cume-info-card__item-text:hover,
a.cume-info-card__item-text:focus {
	color: var(--cume-ifc-item-color-hover);
}

/* --- Subtítulo intermedio --- */
.cume-info-card__subtitle {
	margin: 24px 0 12px;
	padding-top: 20px;
	border-top: 1px solid var(--cume-ifc-line);
	color: var(--cume-primary-light, #6c63b5);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* El subtítulo abre bloque: si es lo primero de la tarjeta no lleva línea. */
.cume-info-card__head + .cume-info-card__subtitle,
.cume-info-card > .cume-info-card__subtitle:first-child {
	padding-top: 0;
	border-top: 0;
}

/* --- Nota al pie --- */
.cume-info-card__note {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid transparent;
	color: var(--cume-text-muted, #5b5b6e);
	font-size: 0.85em;
	line-height: 1.5;
}

.cume-info-card__note--divided {
	border-top-color: var(--cume-ifc-line);
}

.cume-info-card__note a {
	color: inherit;
	text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.cume-info-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-info-card,
	a.cume-info-card__item-text {
		transition: none;
	}
}
