/*!
 * creeerenleer-lesblok — Default kaart-styling.
 *
 * Reproduceert ongeveer de v1-look. Sites met een eigen child-theme styling
 * kunnen 'm uitzetten:
 *
 *     add_filter( 'cnl_enqueue_default_card_styles', '__return_false' );
 *
 * Alle kleuren zijn CSS-vars op `.selected-lessons` — eenvoudig
 * overschrijfbaar zonder hier in te grijpen.
 */

.selected-lessons {
	/* Discipline-kleuren voor de option-bar. */
	--cnl-color-beeldend: #7a7b1c;
	--cnl-color-drama:    #2a78b1;
	--cnl-color-muziek:   #ab1d52;

	/* Diamond-marker kleuren per descriptor-type. */
	--cnl-marker-title:   #e8c133;
	--cnl-marker-format:  #5db8d6;
	--cnl-marker-method:  #d9425d;
}

.selected-lessons .lesson-card {
	background: #ffffff;
	border: 1px solid #ececec;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* Fluid base font-size: ~13.6px op smal scherm tot ~16px op breed.
	 * Alle child-typografie (titel, descriptors, groep) is uitgedrukt
	 * in em relatief aan deze waarde, dus alles schaalt mee. */
	font-size: clamp(0.85rem, 0.6rem + 0.4vw, 1rem);
	line-height: 1.45;
}

.selected-lessons .lesson-card > div {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 1) Vierkante preview-afbeelding. */
.selected-lessons .lesson-card .preview-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 2) Discipline-balk: vaste hoogte 10px. */
.selected-lessons .lesson-card .lesson-option-bar {
	height: 20px;
	background: #cccccc;
	flex: 0 0 auto;
}
.selected-lessons .lesson-card .lesson-option-bar.beeldend { background: var(--cnl-color-beeldend); }
.selected-lessons .lesson-card .lesson-option-bar.drama    { background: var(--cnl-color-drama); }
.selected-lessons .lesson-card .lesson-option-bar.muziek   { background: var(--cnl-color-muziek); }

.selected-lessons .lesson-card .lesson-body {
	padding: 1em 1.1em 1.1em;
	flex: 1 1 auto;
}

/* 3) GROEP op een eigen regel boven de descriptor-lijst. */
.selected-lessons .lesson-card .lesson-grade {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #8c8f94;
	text-transform: uppercase;
	margin: 0 0 0.65em;
	white-space: normal;
}

.selected-lessons .lesson-card .lesson-descriptors {
	list-style: none;
	padding: 0;
	margin: 0;
}

.selected-lessons .lesson-card .lesson-descriptors li {
	position: relative;
	padding-left: 1.4em;
	line-height: 1.45;
	margin-bottom: 0.3em;
	font-size: 0.95em;
}

.selected-lessons .lesson-card .lesson-descriptors li:last-child {
	margin-bottom: 0;
}

.selected-lessons .lesson-card .lesson-descriptors li::before {
	content: "\25C6"; /* ◆ */
	position: absolute;
	left: 0;
	top: 0;
	line-height: 1.45;
	font-size: 0.85em;
}

.selected-lessons .lesson-card .lesson-title {
	font-size: 1em;
	font-weight: 600;
	margin-bottom: 0.45em;
}

.selected-lessons .lesson-card .lesson-title::before  { color: var(--cnl-marker-title); }
.selected-lessons .lesson-card .lesson-format::before { color: var(--cnl-marker-format); }
.selected-lessons .lesson-card .lesson-method::before { color: var(--cnl-marker-method); }