/* ==========================================================================
   Courses — additive-only styles layered on top of the Webinars plugin's own
   assets/css/frontend.css (handle `pp-webinars-frontend`, enqueued alongside
   this file by ProgramsModule::render_courses_grid()).

   This file must NEVER redefine a `.pp-card`/`.pp-grid`/`.pp-library`/
   `.pp-btn`/`.pp-pagination` rule — those come from frontend.css so Courses
   and Webinars stay pixel-identical with zero drift. The only thing a course
   card needs that a webinar card doesn't is the Level + Duration meta line
   below (no module count, per owner request), built from the SAME custom
   properties frontend.css defines (falls back to sane literals if
   frontend.css is ever unavailable, e.g. the Webinars plugin deactivated).
   ========================================================================== */

.pp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pp-text-muted, #6b7280);
}
.pp-card__meta-item--difficulty { text-transform: capitalize; }

/* ==========================================================================
   "My Courses" additions — the signed-in learner's own shelf.

   Only ever rendered when the card was given a `progress` array, i.e. on
   /training-programs/?pp_mine=1. The public catalog renders the identical
   card markup without any of this.
   ========================================================================== */
.pp-courses-mine__sub {
	margin: 6px 0 0;
	color: #55606c;
	font-size: 15px;
}

.pp-card__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}
.pp-card__progress-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .08);
	overflow: hidden;
}
.pp-card__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #12b76a;
	transition: width .4s ease;
}
.pp-card__progress-text {
	font-size: 12.5px;
	font-weight: 600;
	color: #55606c;
}