/**
 * Batu LMS — Public Course Listing ([batuedu_course_listing] shortcode and
 * the no-chrome /batu-courses page). Reuses every token/color from
 * frontend/css/batuedu-frontend.css (loaded first) — this file only adds
 * this listing's own hero, toolbar, and course-card grid/list layout.
 */

.batuedu-course-listing-page {
	margin: 0;
	background: var(--batuedu-color-bg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.batuedu-course-listing-hero {
	background: linear-gradient(135deg, var(--batuedu-color-primary), var(--batuedu-color-primary-hover));
	padding: var(--batuedu-space-xl) var(--batuedu-space-lg) calc(var(--batuedu-space-xl) * 2);
	text-align: center;
}

.batuedu-course-listing-hero-inner {
	max-width: 720px;
	margin: 0 auto;
}

.batuedu-course-listing-heading {
	margin: 0 0 var(--batuedu-space-sm);
	font-size: 28px;
	font-weight: 700;
	color: var(--batuedu-color-text-on-primary);
}

.batuedu-course-listing-subheading {
	margin: 0;
	font-size: var(--batuedu-font-size-md);
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Body / toolbar
   ========================================================================== */

.batuedu-course-listing-body {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--batuedu-space-lg) calc(var(--batuedu-space-xl) * 1.5);
}

/* Pulled up over the hero's bottom padding so it reads as a floating,
   elevated bar rather than a plain toolbar. */
.batuedu-course-listing-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--batuedu-space-md);
	background: var(--batuedu-color-surface);
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-lg);
	box-shadow: var(--batuedu-shadow-lg);
	padding: var(--batuedu-space-md) var(--batuedu-space-lg);
	margin-top: calc(var(--batuedu-space-xl) * -1);
	margin-bottom: var(--batuedu-space-xl);
	position: relative;
	z-index: 1;
}

.batuedu-course-listing-search-wrap {
	position: relative;
	flex: 1 1 260px;
	min-width: 220px;
}

.batuedu-course-listing-search-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--batuedu-color-text-muted);
	pointer-events: none;
}

.batuedu-course-listing-search-wrap .batuedu-input {
	width: 100%;
	padding-left: 40px;
	border-radius: var(--batuedu-radius-full);
}

.batuedu-course-listing-controls-right {
	display: flex;
	align-items: center;
	gap: var(--batuedu-space-sm);
	flex-shrink: 0;
}

.batuedu-course-listing-controls-right .batuedu-select {
	border-radius: var(--batuedu-radius-full);
}

.batuedu-course-listing-view-toggle {
	display: inline-flex;
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-full);
	overflow: hidden;
	flex-shrink: 0;
}

.batuedu-course-listing-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--batuedu-color-surface);
	color: var(--batuedu-color-text-muted);
	cursor: pointer;
	transition: background-color var(--batuedu-transition), color var(--batuedu-transition);
}

.batuedu-course-listing-view-btn svg {
	width: 18px;
	height: 18px;
}

.batuedu-course-listing-view-btn + .batuedu-course-listing-view-btn {
	border-left: 1px solid var(--batuedu-color-border);
}

.batuedu-course-listing-view-btn[aria-pressed="true"] {
	background: var(--batuedu-color-primary);
	color: var(--batuedu-color-text-on-primary);
}

.batuedu-course-listing-view-btn:not([aria-pressed="true"]):hover {
	background: var(--batuedu-color-surface-muted);
	color: var(--batuedu-color-text);
}

/* ==========================================================================
   Results grid — fades gently while a new page/filter is loading.
   ========================================================================== */

.batuedu-course-listing-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--batuedu-space-lg);
	transition: opacity 150ms ease;
}

@media (max-width: 900px) {
	.batuedu-course-listing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.batuedu-course-listing-grid {
		grid-template-columns: 1fr;
	}
}

.batuedu-course-listing-grid.batuedu-is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.batuedu-course-listing-item {
	display: flex;
	flex-direction: column;
	background: var(--batuedu-color-surface);
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-lg);
	box-shadow: var(--batuedu-shadow-sm);
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

/* Wraps the thumb + body — everything except the Enroll Now/View Details
   row below — so the whole visual area still links to the course's detail
   view the way the card itself used to before that row was added. */
.batuedu-course-listing-item-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.batuedu-course-listing-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--batuedu-shadow-lg);
	border-color: var(--batuedu-color-primary);
}

.batuedu-course-listing-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--batuedu-color-surface-muted);
	overflow: hidden;
}

.batuedu-course-listing-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.batuedu-course-listing-item:hover .batuedu-course-listing-thumb img {
	transform: scale(1.06);
}

.batuedu-course-listing-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--batuedu-color-surface-muted), var(--batuedu-color-border));
	color: var(--batuedu-color-text-muted);
}

.batuedu-course-listing-thumb-placeholder svg {
	width: 40px;
	height: 40px;
}

.batuedu-course-listing-free-badge {
	position: absolute;
	top: var(--batuedu-space-sm);
	left: var(--batuedu-space-sm);
	background: var(--batuedu-color-success);
	color: #fff;
	font-size: var(--batuedu-font-size-sm);
	font-weight: 700;
	padding: 4px var(--batuedu-space-sm);
	border-radius: var(--batuedu-radius-full);
	box-shadow: var(--batuedu-shadow-sm);
}

.batuedu-course-listing-body {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-xs);
	padding: var(--batuedu-space-md);
	min-width: 0;
	flex: 1 1 auto;
}

/* This card body reuses the page-wrapper's own .batuedu-course-listing-body
   class name above — without this, that wrapper's own "margin: 0 auto"
   also applies here, shrinking the card body to its content width and
   centering it instead of letting it stretch to the card's full width
   (the same width as the Enroll Now/View Details row below it). Scoped to
   .batuedu-course-listing-item so the page wrapper's own centering is
   untouched. */
.batuedu-course-listing-item .batuedu-course-listing-body {
	margin: 0;
	max-width: none;
}

.batuedu-course-listing-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--batuedu-space-xs);
}

.batuedu-course-listing-duration {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.batuedu-course-listing-duration svg {
	width: 12px;
	height: 12px;
}

.batuedu-course-listing-title {
	margin: var(--batuedu-space-xs) 0 var(--batuedu-space-sm);
	font-size: var(--batuedu-font-size-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--batuedu-color-text);
}

.batuedu-course-listing-desc {
	margin: 0;
	font-size: var(--batuedu-font-size-sm);
	color: var(--batuedu-color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.batuedu-course-listing-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--batuedu-space-sm);
	margin-top: auto;
	padding-top: var(--batuedu-space-sm);
	border-top: 1px solid var(--batuedu-color-border);
}

.batuedu-course-listing-price {
	font-size: var(--batuedu-font-size-md);
	font-weight: 700;
	color: var(--batuedu-color-text);
}

/* Enroll Now / View Details, side by side — sits below the card's own
   linked thumb+body area (see .batuedu-course-listing-item-link above). */
.batuedu-course-listing-cta-row {
	display: flex;
	gap: var(--batuedu-space-sm);
	padding: 0 var(--batuedu-space-md) var(--batuedu-space-md);
}

.batuedu-course-listing-cta-row .batuedu-btn {
	flex: 1 1 0;
	justify-content: center;
	text-align: center;
	text-decoration: none;
}

/* ==========================================================================
   List view — one column, each item a horizontal row instead of a card.
   ========================================================================== */

.batuedu-course-listing-grid[data-view="list"] {
	grid-template-columns: 1fr;
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-item {
	flex-direction: row;
	align-items: stretch;
	gap: var(--batuedu-space-xl);
}

/* In list view the item itself becomes the row layout (see above) — thumb
   left, title/price/level in the middle, growing to fill the space between
   them, so the Enroll Now/View Details column (further below) lands as the
   row's end element with a large gap (the item's own "gap" above) in front
   of it instead of directly against the middle content. */
.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-item-link {
	flex-direction: row;
	flex: 1 1 auto;
	min-width: 0;
}

/* Enroll Now stacked above View Details, both a fixed column width (so
   they match each other) instead of side by side, aligned to the row's end. */
.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-cta-row {
	flex: 0 0 auto;
	flex-direction: column;
	align-self: center;
	width: 180px;
	padding: 0 var(--batuedu-space-lg) 0 0;
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-cta-row .batuedu-btn {
	flex: 0 0 auto;
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-item:hover {
	transform: translateY(-2px);
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-thumb {
	width: 220px;
	flex-shrink: 0;
	aspect-ratio: auto;
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-body {
	flex-direction: column;
	justify-content: center;
}

.batuedu-course-listing-grid[data-view="list"] .batuedu-course-listing-footer {
	border-top: none;
	padding-top: 0;
	margin-top: var(--batuedu-space-xs);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.batuedu-course-listing-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--batuedu-space-sm);
	padding: calc(var(--batuedu-space-xl) * 2) var(--batuedu-space-lg);
	color: var(--batuedu-color-text-muted);
	text-align: center;
}

.batuedu-course-listing-empty svg {
	width: 40px;
	height: 40px;
}

.batuedu-course-listing-empty p {
	margin: 0;
	font-size: var(--batuedu-font-size-lg);
}

/* ==========================================================================
   Single-course detail view
   ========================================================================== */

.batuedu-course-listing-detail {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-lg);
}

.batuedu-course-listing-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-weight: 600;
	color: var(--batuedu-color-text-muted);
	text-decoration: none;
}

.batuedu-course-listing-back:hover {
	color: var(--batuedu-color-primary);
}

.batuedu-course-listing-back svg {
	width: 16px;
	height: 16px;
}

.batuedu-course-listing-detail-title {
	margin: 0 0 var(--batuedu-space-xs);
	font-size: 26px;
	font-weight: 700;
	color: var(--batuedu-color-text);
}

.batuedu-course-listing-detail-lead {
	margin: 0 0 var(--batuedu-space-sm);
	color: var(--batuedu-color-text-muted);
}

.batuedu-course-listing-detail-body {
	color: var(--batuedu-color-text);
	line-height: 1.7;
}

.batuedu-course-listing-purchase-box {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--batuedu-space-sm);
}

.batuedu-course-listing-purchase-box .batuedu-btn {
	width: 100%;
	justify-content: center;
	text-decoration: none;
}

/* ==========================================================================
   Detail view — hero (media + title/meta/instructor)
   ========================================================================== */

.batuedu-course-detail-preview-badge {
	align-self: flex-start;
}

.batuedu-course-detail-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--batuedu-space-xl);
	align-items: start;
}

.batuedu-course-detail-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--batuedu-color-surface-muted);
	border-radius: var(--batuedu-radius-lg);
	overflow: hidden;
	box-shadow: var(--batuedu-shadow-md);
}

.batuedu-course-detail-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.batuedu-course-detail-media .batuedu-course-listing-thumb-placeholder {
	width: 100%;
	height: 100%;
}

.batuedu-course-detail-preview-link {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--batuedu-space-sm);
	background: rgba(15, 23, 42, 0.35);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	opacity: 0;
	transition: opacity 200ms ease;
}

.batuedu-course-detail-media:hover .batuedu-course-detail-preview-link,
.batuedu-course-detail-preview-link:focus-visible {
	opacity: 1;
}

.batuedu-course-detail-play-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--batuedu-radius-full);
	background: #fff;
	color: var(--batuedu-color-primary);
	box-shadow: var(--batuedu-shadow-lg);
}

.batuedu-course-detail-play-btn svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

.batuedu-course-detail-headline {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-sm);
	min-width: 0;
}

.batuedu-course-detail-rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.batuedu-course-detail-instructor {
	display: flex;
	align-items: center;
	gap: var(--batuedu-space-sm);
}

.batuedu-course-detail-instructor-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--batuedu-radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.batuedu-course-detail-instructor div {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.batuedu-course-detail-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--batuedu-space-md);
	margin-top: var(--batuedu-space-xs);
}

.batuedu-course-detail-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--batuedu-color-text-muted);
	font-size: var(--batuedu-font-size-sm);
}

.batuedu-course-detail-meta-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   Detail view — two-column body (tabs + sidebar)
   ========================================================================== */

.batuedu-course-detail-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--batuedu-space-lg);
	align-items: start;
}

.batuedu-course-detail-main {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-lg);
	min-width: 0;
}

.batuedu-course-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-lg);
	position: sticky;
	top: var(--batuedu-space-lg);
}

.batuedu-course-detail-purchase-card {
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-md);
}

.batuedu-course-detail-price-amount,
.batuedu-course-detail-price-free {
	font-size: 30px;
	font-weight: 700;
	color: var(--batuedu-color-text);
}

/* "Only 3 seats left" — seat-limited courses only (Settings > Appearance >
   Enrollment Limit). Warning colors while seats remain, danger once full;
   the icon plus the words carry the meaning, not the color alone. */
.batuedu-course-seats-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 4px var(--batuedu-space-sm);
	border-radius: var(--batuedu-radius-full);
	background: var(--batuedu-color-warning-bg);
	color: var(--batuedu-color-warning);
	font-size: var(--batuedu-font-size-sm);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.batuedu-course-seats-badge svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.batuedu-course-seats-badge.is-full {
	background: var(--batuedu-color-danger-bg);
	color: var(--batuedu-color-danger);
}

/* "Fully booked" — can't be clicked, and looks it. */
.batuedu-course-listing-purchase-box .batuedu-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* On a course card: top-right of the thumbnail, opposite the Free badge. */
.batuedu-course-seats-badge-on-thumb {
	position: absolute;
	top: var(--batuedu-space-sm);
	right: var(--batuedu-space-sm);
	max-width: calc(100% - 90px);
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: var(--batuedu-shadow-sm);
}

/* A clearly-marked placeholder for copy this LMS has no real backing data
   for yet (a refund policy, structured learning outcomes, generic social
   proof) — reuses the plain (unmodified) .batuedu-badge look already used
   for tags elsewhere, so it reads as a neutral dev label, not a status. */
.batuedu-course-detail-sample-tag {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 10px;
}

.batuedu-course-detail-guarantee {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	color: var(--batuedu-color-text-muted);
	font-size: var(--batuedu-font-size-sm);
}

.batuedu-course-detail-guarantee svg {
	width: 16px;
	height: 16px;
	color: var(--batuedu-color-success);
	flex-shrink: 0;
}

.batuedu-course-detail-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-sm);
}

.batuedu-course-detail-benefits li {
	display: flex;
	align-items: center;
	gap: var(--batuedu-space-sm);
	color: var(--batuedu-color-text);
	font-size: var(--batuedu-font-size-sm);
}

.batuedu-course-detail-benefits svg {
	width: 18px;
	height: 18px;
	color: var(--batuedu-color-success);
	flex-shrink: 0;
}

.batuedu-course-detail-learn-grid {
	list-style: none;
	margin: 0 0 var(--batuedu-space-md);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--batuedu-space-sm) var(--batuedu-space-lg);
}

.batuedu-course-detail-learn-grid li {
	display: flex;
	align-items: flex-start;
	gap: var(--batuedu-space-sm);
	color: var(--batuedu-color-text);
}

.batuedu-course-detail-learn-grid svg {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--batuedu-color-success);
	flex-shrink: 0;
}

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

/* ==========================================================================
   Detail view — tabs
   ========================================================================== */

.batuedu-course-detail-tabs-card {
	padding-top: var(--batuedu-space-sm);
}

.batuedu-course-detail-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--batuedu-space-xs);
	border-bottom: 1px solid var(--batuedu-color-border);
	margin: 0 calc(var(--batuedu-space-lg) * -1) var(--batuedu-space-md);
	padding: 0 var(--batuedu-space-lg);
}

.batuedu-course-detail-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
	font-family: inherit;
	font-size: var(--batuedu-font-size-md);
	font-weight: 600;
	color: var(--batuedu-color-text-muted);
	cursor: pointer;
	transition: color var(--batuedu-transition), border-color var(--batuedu-transition);
}

.batuedu-course-detail-tab-active {
	color: var(--batuedu-color-primary);
	border-bottom-color: var(--batuedu-color-primary);
}

.batuedu-course-detail-plain-list {
	margin: 0 0 var(--batuedu-space-md);
	padding-left: var(--batuedu-space-lg);
	color: var(--batuedu-color-text);
}

.batuedu-course-detail-rating-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--batuedu-space-md);
}

.batuedu-course-detail-review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--batuedu-space-md);
}

.batuedu-course-detail-review {
	padding-top: var(--batuedu-space-md);
	border-top: 1px solid var(--batuedu-color-border);
}

.batuedu-course-detail-review:first-child {
	padding-top: 0;
	border-top: none;
}

.batuedu-course-detail-review-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--batuedu-space-sm);
	margin-bottom: 4px;
}

.batuedu-course-detail-review p {
	margin: 0;
	color: var(--batuedu-color-text-muted);
}

.batuedu-course-detail-faq {
	padding-bottom: var(--batuedu-space-md);
	margin-bottom: var(--batuedu-space-md);
	border-bottom: 1px solid var(--batuedu-color-border);
}

.batuedu-course-detail-faq:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.batuedu-course-detail-faq p {
	margin: var(--batuedu-space-xs) 0 0;
	color: var(--batuedu-color-text-muted);
}

/* ==========================================================================
   Detail view — curriculum outline
   ========================================================================== */

.batuedu-course-detail-chapter + .batuedu-course-detail-chapter {
	margin-top: var(--batuedu-space-md);
}

.batuedu-course-detail-chapter-title {
	margin: 0 0 var(--batuedu-space-sm);
	font-size: var(--batuedu-font-size-md);
	font-weight: 700;
	color: var(--batuedu-color-text);
}

.batuedu-course-detail-lesson-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--batuedu-color-border);
	border-radius: var(--batuedu-radius-md);
	overflow: hidden;
}

.batuedu-course-detail-lesson-row {
	display: flex;
	align-items: center;
	gap: var(--batuedu-space-sm);
	padding: var(--batuedu-space-sm) var(--batuedu-space-md);
}

.batuedu-course-detail-lesson-row + .batuedu-course-detail-lesson-row {
	border-top: 1px solid var(--batuedu-color-border);
}

.batuedu-course-detail-lesson-row-preview {
	cursor: pointer;
}

.batuedu-course-detail-lesson-row-preview:hover,
.batuedu-course-detail-lesson-row-preview:focus-visible {
	background: var(--batuedu-color-surface-muted);
}

.batuedu-course-detail-preview-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--batuedu-radius-md);
	overflow: hidden;
}

.batuedu-course-detail-preview-video iframe,
.batuedu-course-detail-preview-video video {
	width: 100%;
	height: 100%;
	border: 0;
}

.batuedu-course-detail-lesson-icon {
	display: inline-flex;
	color: var(--batuedu-color-text-muted);
	flex-shrink: 0;
}

.batuedu-course-detail-lesson-icon svg {
	width: 18px;
	height: 18px;
}

.batuedu-course-detail-lesson-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--batuedu-color-text);
}

.batuedu-course-detail-lesson-duration {
	flex-shrink: 0;
	color: var(--batuedu-color-text-muted);
	font-size: var(--batuedu-font-size-sm);
}

@media (max-width: 900px) {
	.batuedu-course-detail-hero,
	.batuedu-course-detail-columns {
		grid-template-columns: 1fr;
	}

	.batuedu-course-detail-sidebar {
		position: static;
	}
}

.batuedu-course-listing-purchase-status {
	margin: 0;
}

.batuedu-course-listing-purchase-note {
	margin: 0;
}


/* ==========================================================================
   Pagination
   ========================================================================== */

.batuedu-course-listing-pagination-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--batuedu-space-lg);
	margin-top: calc(var(--batuedu-space-xl) * 1.5);
}

.batuedu-course-listing-pagination-row .batuedu-btn {
	border-radius: var(--batuedu-radius-full);
	min-width: 110px;
}

.batuedu-course-listing-pagination {
	color: var(--batuedu-color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ==========================================================================
   Detail view — Related Courses row (reuses the catalog's own
   .batuedu-course-listing-grid/-item card, just forced to a single row of
   four on desktop instead of that grid's own auto-fill wrapping).
   ========================================================================== */

.batuedu-course-detail-related-title {
	margin: 0 0 var(--batuedu-space-md);
	font-size: var(--batuedu-font-size-xl);
	font-weight: 700;
	color: var(--batuedu-color-text);
}

.batuedu-course-detail-related-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.batuedu-course-detail-related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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