/**
 * Card de curso — componente do carrossel de progresso.
 *
 * Duas dimensões independentes:
 *   game-course-card--{status}  → estado do usuário (done, late, new)
 *   game-course-card-art--{cor} → cor temática da ilustração (definida pelo plugin)
 */

/* ── Card ── */

.game-course-card {
	display: flex;
	flex-direction: column;
	width: 240px;
	min-width: 240px;
	min-height: 304px;
	border-radius: var(--radius-16);
	background: var(--color-pure-white);
	overflow: hidden;
	position: relative;
	padding: var(--space-8);
	scroll-snap-align: start;
	flex-shrink: 0;
}

.game-course-card:hover 
{
	cursor: pointer;
}

/* ── Área de arte (ilustração SVG do curso) ── */

.game-course-card-art {
	position: relative;
	height: 150px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-background);
	border-radius: var(--radius-8);
	overflow: hidden;
}

.game-course-card-art-icon {
	width: 80px;
	height: 80px;
	color: var(--overlay-white-lg);
}

/* Cor temática da arte — definida pelo plugin por curso */
.game-course-card-art--primary { background: var(--color-primary); }
.game-course-card-art--accent  { background: var(--color-accent); }
.game-course-card-art--purple  { background: var(--color-purple); }
.game-course-card-art--muted   { background: var(--color-pastel-grey); }

/* ── Informações do curso ── */

.game-course-card-info {
	padding: var(--space-16) 0 var(--space-40);
	flex: 1;
}

.game-course-card-title {
	font-family: var(--font-body);
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary-dark);
	line-height: var(--line-height-tight);
	margin: 0;
}

/* ── Recompensa ── */

.game-course-card-reward {
	position: absolute;
	right: var(--space-8);
	bottom: var(--space-8);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-8);
	background: var(--color-pure-white);
	font-family: var(--font-body);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-semibold);
	color: var(--color-purple);
	white-space: nowrap;
}

.game-course-card-reward .game-object {
	width: var(--space-16);
	height: var(--space-16);
	flex-shrink: 0;
}

/* ── Responsivo ── */

@media (max-width: 48rem) {
	.game-course-card {
		width: 192px;
		min-width: 192px;
		min-height: 244px;
	}

	.game-course-card-art {
		height: 120px;
	}
}