/**
 * Uno LMS — course-player parent layout.
 *
 * The `uno-lms/course-player` root may use theme/global border radius
 * (`--wp--style--global--border--radius`, preset radius, then 8px fallback)
 * so the player surface aligns with block theme styles without forcing nested
 * child radii in CSS. Default border/shadow match `course-authors` / `course-tabs`
 * (`--wp--custom--uno-lms--surface--border-color`, `--wp--custom--uno-lms--surface--shadow`).
 * Border, padding, and block spacing can still be overridden via Global Styles
 * or a wrapping `core/group`. `overflow: hidden` with
 * `overflow: clip` (where supported) keeps inner panels inside the rounded
 * outline. Inner grid rules keep normal specificity so the internal cascade for
 * loading state survives.
 *
 * Tokens and section-style invariants: docs/DESIGN-GUARDRAILS.md
 * (Phase 1: course-player).
 */
:where(.wp-block-uno-lms-course-player) {
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--uno-lms--surface--border-color, var(--wp--preset--color--contrast-3, #d0d7de));
	border-radius: var(
		--wp--style--global--border--radius,
		var(--wp--preset--radius--medium, 8px)
	);
	box-shadow: var(--wp--custom--uno-lms--surface--shadow, none);
	overflow: hidden;
	overflow: clip;
}

.wp-block-uno-lms-course-player .uno-lms-course-player__layout {
	--uno-lms-course-player-lessons-width: 420px;

	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr) minmax(300px, var(--uno-lms-course-player-lessons-width));
	grid-template-areas: "video lessons";
	/* stretch: lessons column fills row height; video uses align-self:start so 16:9 is not stretched */
	align-items: stretch;
	container-type: inline-size;
}

/*
 * Desktop: named grid areas keep the physical order stable when a theme changes
 * text direction.
 */
@media (min-width: 901px) {

	.wp-block-uno-lms-course-player .uno-lms-course-player__layout .wp-block-uno-lms-course-player-video {
		grid-area: video;
		min-width: 0;
		/* Row height follows 16:9; do not stretch video cell below intrinsic height. */
		align-self: start;
	}

	.wp-block-uno-lms-course-player .uno-lms-course-player__layout .wp-block-uno-lms-course-player-lessons {
		grid-area: lessons;
		min-width: 0;
		min-height: 0;
		height: 100%;
	}
}

@media (max-width: 900px) {
	/*
	 * Allow the video child to break out to 100vw; root overflow:clip would
	 * otherwise clip negative margins on `.wp-block-uno-lms-course-player-video`.
	 */
	.wp-block-uno-lms-course-player {
		overflow: visible;
	}

	.wp-block-uno-lms-course-player .uno-lms-course-player__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"video"
			"lessons";
	}

	.wp-block-uno-lms-course-player .uno-lms-course-player__layout .wp-block-uno-lms-course-player-video {
		grid-area: video;
	}

	.wp-block-uno-lms-course-player .uno-lms-course-player__layout .wp-block-uno-lms-course-player-lessons {
		grid-area: lessons;
		min-height: 0;
	}
}

.wp-block-uno-lms-course-player.is-loading {
	opacity: 0.95;
}