/**
 * Tutor LMS Lesson Overview / Spotlight
 *
 * Centering and layout for the lesson content area (Overview tab).
 * This handles the spotlight flex chain for non-H5P content.
 *
 * IMPORTANT: The lesson-wrapper * selector has been replaced with
 * targeted selectors. H5P lessons override these via h5p-lesson.css.
 */

/* ── Spotlight overview centering ────────────────────────────────── */

#tutor-course-spotlight-overview {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 60vh !important;
	text-align: center !important;
}

#tutor-course-spotlight-overview .tutor-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	height: 100% !important;
}

#tutor-course-spotlight-overview .tutor-row {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	height: 100% !important;
}

#tutor-course-spotlight-overview .tutor-col-xl-8 {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	height: 100% !important;
}

/* ── Lesson wrapper centering ────────────────────────────────────── */

#tutor-course-spotlight-overview .tutor-lesson-wrapper {
	text-align: center !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	order: 1 !important;
}

/*
 * Targeted centering for lesson wrapper children.
 * REPLACES the old: .tutor-lesson-wrapper * { text-align: center; margin: auto }
 * which was destroying H5P, iframes, and embedded content.
 */
#tutor-course-spotlight-overview .tutor-lesson-wrapper > p,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > div,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > span,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > h1,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > h2,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > h3,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > h4,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > ul,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > ol,
#tutor-course-spotlight-overview .tutor-lesson-wrapper > blockquote {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── Paragraph ordering ──────────────────────────────────────────── */

#tutor-course-spotlight-overview .tutor-lesson-wrapper p {
	text-align: center !important;
	order: 1 !important;
}

/* Button paragraph appears last */
#tutor-course-spotlight-overview .tutor-lesson-wrapper p:has(a) {
	order: 3 !important;
	margin-top: 20px !important;
}

/* Last paragraph (no button) appears second */
#tutor-course-spotlight-overview .tutor-lesson-wrapper p:last-child {
	order: 2 !important;
}

/* ── Video wrapper ───────────────────────────────────────────────── */

.video-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.video-container {
	position: relative;
	width: 100%;
	height: 100% !important;
	background-color: #000;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	margin-bottom: 0 !important;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background-color: transparent;
}

iframe[src*="ispring.com"] {
	margin-top: 5px !important;
}

/* ── Spotlight wrapper layout ────────────────────────────────────── */

.tutor-course-spotlight-wrapper {
	display: block !important;
	position: relative !important;
	z-index: 10 !important;
	height: 100% !important;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-course-spotlight-nav {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 5px 0 !important;
	position: relative;
	z-index: 15 !important;
	background-color: #000 !important;
	flex-shrink: 0;
}

.tutor-course-spotlight-tab {
	height: 100% !important;
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-course-spotlight-tab .tutor-container {
	height: 100% !important;
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-course-spotlight-tab .tutor-container .tutor-row {
	height: 100% !important;
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-course-spotlight-tab .tutor-container .tutor-row .tutor-col-xl-8 {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	flex: 1;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-lesson-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100% !important;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.video-wrapper {
		margin-top: 50px !important;
		padding: 0 5px;
	}
	.video-container {
		height: 100% !important;
	}
}

@media (max-width: 480px) {
	.video-wrapper {
		margin-top: 40px !important;
		padding: 0 5px;
	}
	.video-container {
		height: 100% !important;
	}
}