/**
 * My Account -> Courses  (/my-account/my-courses/)
 *
 * Enqueued only on this endpoint by the "My Account: /my-courses endpoint"
 * WPCodeBox snippet, versioned with filemtime() so it never serves stale.
 */

/* ---------- grid ---------- */

.my-courses__grid {
	margin-block-start: var(--space-m);
}

/* ---------- card ---------- */

.course-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-s);
	border-radius: var(--radius);
	position: relative;
}

.course-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-m);
	position: relative;
}

.course-card__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	transition: transform var(--transition-duration) ease;
}

.course-card__media:hover img,
.course-card__media:focus-visible img {
	transform: scale(1.03);
}

.course-card__title {
	margin-block: 0;
}

.course-card__title a {
	text-decoration: none;
}

.course-card__status-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.course-card__status-chip--not-started {
	background: var(--bg-light);
	color: var(--text-dark);
}

.course-card__status-chip--in-progress {
	background: var(--bg-light);
	color: var(--text-dark);
}

.course-card__status-chip--complete {
	background: var(--accent);
}

/* ---------- progress ---------- */

.course-card__progress {
	display: block;
	inline-size: 100%;
	block-size: 0.5rem;
	overflow: hidden;
	background-color: var(--neutral-ultra-light);
	border-radius: 100vmax;
}

.course-card__progress-bar {
	display: block;
	block-size: 100%;
	background-color: var(--accent);
	border-radius: inherit;
	transition: width var(--transition-duration) ease;
}

/* ---------- meta + cta ---------- */

.course-card__meta {
	margin-block: 0;
	color: var(--text-light-muted, currentColor);
	margin-block-end: var(--space-xs);
}

.course-card__cta {
	align-self: start;
	margin-block-start: auto;
}

/* ---------- empty state ---------- */

.my-courses--empty {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--space-s);
	margin-block-start: var(--space-m);
}

.my-courses__empty-text {
	margin-block: 0;
}