/* Constrain mobile-phone screenshots in LMS lesson views to a sensible
 * size on desktop. Authors upload screenshots at the device's native
 * resolution (~1080px wide) which then renders huge on a desktop
 * browser. The LMS app's lesson renderer leaves images at their natural
 * dimensions, so we cap via container CSS.
 *
 * Targets the LMS "Edit lesson" and student-view lesson-content blocks.
 * Keeps aspect ratio. On phone browsers max-width:100% kicks in first
 * so they still render edge-to-edge.
 */

.lesson-content img,
.lms-lesson-content img,
.cdx-block img,
.ce-block__content img {
	max-width: 100%;
	height: auto;
	max-height: 600px;
	display: block;
	margin: 12px auto;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Phone-screenshot heuristic: uploaded portrait images often have
 * inline width attribute matching the device viewport. Force a sane
 * desktop ceiling. */
@media (min-width: 768px) {
	.lesson-content img,
	.lms-lesson-content img,
	.cdx-block img,
	.ce-block__content img {
		max-width: 360px;
	}
}