/*!
 * creeerenleer-lesblok — optionele fallback CSS.
 *
 * Doel: een nieuwe site die nog geen grid-rules in het child-theme heeft
 * moet out-of-the-box bruikbare overzichten kunnen tonen. Productie-sites
 * met een echt child-theme zullen deze CSS willen uitschakelen via:
 *
 *     add_filter( 'cnl_enqueue_fallback_css', '__return_false' );
 *
 * De selectors gebruiken alleen `.selected-lessons` en de bijhorende
 * CSS-vars die de renderer inline op de wrapper zet. We raken bewust
 * géén kaart-styling (image, lesson-body, lesson-grade, lesson-title,
 * lesson-format, lesson-method) aan — dat blijft het terrein van het
 * child-theme.
 */

.selected-lessons {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(var(--cnl-cols, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.selected-lessons {
		grid-template-columns: repeat(var(--cnl-cols-tablet, 3), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.selected-lessons {
		grid-template-columns: repeat(var(--cnl-cols-mobile, 1), minmax(0, 1fr));
	}
}

/* Zorg dat losse cards niet uit hun cel barsten op smalle viewports. */
.selected-lessons .lesson-card {
	min-width: 0;
}

.selected-lessons .lesson-card .preview-image {
	max-width: 100%;
	height: auto;
}

/* Optionele afronding: kicker pas in als de shortcode/Divi-module er
 * om vroeg. Default --cnl-radius valt op 5px terug; theme kan deze
 * vars overschrijven of de regel zelf herschrijven. */
.selected-lessons.has-rounded-cards .lesson-card,
.selected-lessons.has-rounded-cards .lesson-card .preview-image {
	border-radius: var(--cnl-radius, 5px);
	overflow: hidden;
}