/*
 * Course Detail Page
 * Path: /assets/css/pages/course-detail.css
 */

.course-detail-page {
	background: #fff;
}

.course-detail-hero {
	padding-top: 28px;
}

.course-detail-banner {
	height: 340px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 18px 18px 0 0;
	color: #6f679d;
	font-weight: 700;
	background: linear-gradient(135deg, #d8d3ff, #f0edff);
}

.course-detail-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-detail-summary {
	padding: 38px 30px 34px;
	text-align: center;
	background: #fff;
	border-radius: 0 0 18px 18px;
	box-shadow: var(--shadow);
}

.course-breadcrumb {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--muted);
}

.course-breadcrumb a {
	color: var(--primary);
	font-weight: 600;
}

.course-detail-summary h1 {
	margin: 17px 0 12px;
	font-size: clamp(38px, 5vw, 48px);
	line-height: 1.08;
}

.course-detail-meta {
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #4f4b61;
}

.course-stars {
	color: #ffb800;
}

.course-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(280px, .85fr);
	gap: 42px;
	align-items: start;
}

.course-detail-main,
.course-detail-sidebar {
	display: grid;
	gap: 24px;
}

.course-detail-sidebar {
	position: sticky;
	top: 98px;
}

.course-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(30, 22, 100, .07);
}

.course-description {
	padding: 34px;
}

.course-description h2 {
	margin: 0 0 20px;
	font-size: 30px;
}

.course-description h3 {
	margin: 28px 0 12px;
	font-size: 23px;
}

.course-entry-content,
.course-description p,
.course-description li {
	font-size: 14px;
	color: #514d60;
}

.course-entry-content p + p {
	margin-top: 15px;
}

.course-accent-list,
.course-numbered-list {
	margin: 0;
	padding-left: 28px;
}

.course-accent-list {
	border-left: 3px solid #c9c2ff;
}

.course-accent-list li,
.course-numbered-list li {
	list-style: decimal;
	margin: 9px 0;
}

.course-section-divider {
	height: 1px;
	margin: 36px 0 18px;
	background: var(--line);
}

.course-lessons-title {
	font-size: 40px !important;
}

.course-lesson-list {
	display: grid;
	gap: 10px;
}

.course-lesson-item {
	overflow: hidden;
	border-radius: 9px;
	border: 1px solid transparent;
}

.course-lesson-item.active {
	border-color: #ddd8ff;
}

.course-lesson-button {
	width: 100%;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	text-align: left;
	color: #35313f;
	background: var(--soft);
}

.course-lesson-item.active .course-lesson-button {
	color: var(--primary);
}

.course-lesson-icon {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 800;
}

.course-lesson-content {
	padding: 15px 20px 18px;
	background: #fff;
}

.course-lesson-content[hidden] {
	display: none;
}

.course-purchase-card {
	overflow: hidden;
}

.course-purchase-image {
	height: 240px;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: #6f679d;
	background: linear-gradient(135deg, #d8d3ff, #f0edff);
}

.course-purchase-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-purchase-body {
	padding: 26px;
	text-align: center;
}

.course-price {
	display: block;
	margin-bottom: 18px;
	font-family: Manrope, sans-serif;
	font-size: 34px;
}

.course-purchase-body .btn,
.course-contact-card .btn {
	width: 100%;
}

.course-purchase-body small {
	display: block;
	margin-top: 17px;
	font-size: 11px;
	color: #5c5870;
}

.course-features {
	padding: 24px;
	background: var(--soft);
}

.course-features h3 {
	margin: 0 0 18px;
	padding-bottom: 15px;
	font-size: 22px;
	border-bottom: 1px solid #dcd8f2;
}

.course-features ul {
	margin: 0;
	padding: 0;
}

.course-features li {
	margin: 11px 0;
	font-size: 13px;
}

.course-features li::before {
	content: "✓";
	margin-right: 10px;
	color: var(--primary);
	font-weight: 800;
}

.course-contact-card {
	padding: 22px;
	text-align: center;
	background: var(--soft);
}

.course-contact-card p {
	margin-bottom: 18px;
	font-size: 13px;
}

.course-latest {
	padding: 34px;
}

.course-latest > h2 {
	margin: 0 0 20px;
	font-size: 30px;
}

.course-latest-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.course-latest-card {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 14px;
}

.course-latest-image {
	height: 185px;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: #6f679d;
	background: linear-gradient(135deg, #d8d3ff, #f0edff);
}

.course-latest-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.course-latest-card:hover .course-latest-image img {
	transform: scale(1.04);
}

.course-latest-body {
	padding: 16px;
}

.course-latest-body h3 {
	margin-bottom: 12px;
	font-size: 17px;
	line-height: 1.4;
}

.course-latest-body h3 a:hover {
	color: var(--primary);
}

.course-latest-body strong {
	color: var(--primary);
}

@media (max-width: 980px) {
	.course-detail-layout {
		grid-template-columns: 1fr;
	}

	.course-detail-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.course-contact-card {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.course-detail-hero {
		padding-top: 18px;
	}

	.course-detail-banner {
		height: 230px;
	}

	.course-detail-summary {
		padding: 28px 18px;
	}

	.course-detail-summary h1 {
		font-size: 36px;
	}

	.course-detail-meta {
		flex-direction: column;
		gap: 8px;
	}

	.course-description,
	.course-latest {
		padding: 24px 18px;
	}

	.course-lessons-title {
		font-size: 32px !important;
	}

	.course-latest-grid,
	.course-detail-sidebar {
		grid-template-columns: 1fr;
	}

	.course-contact-card {
		grid-column: auto;
	}
}