/**
 * Course Card + Course Listing/Archive
 *
 * Scope: .resalah-course-card (added via template override
 * tutor/loop/loop-before-content.php — see that file's header comment)
 * and .tutor-courses-wrap (Tutor's own archive page wrapper, untouched).
 *
 * Restyles Tutor LMS's existing course-card markup in place — no DOM
 * rename, no removed functionality. Loaded after Astra + Tutor's own
 * stylesheets (see functions.php enqueue order), so 3-class-deep
 * selectors beat their defaults without !important. Read tokens.css
 * before editing this file; every value here should trace back to a
 * --resalah-* variable, not a new hard-coded number.
 */

/* =========================================================
   1. Listing / archive page shell
   ========================================================= */
.tutor-courses-wrap.course-archive-page {
	padding-block: var(--resalah-space-6) var(--resalah-space-7);
}

.tutor-courses-wrap .tutor-course-list.tutor-grid {
	gap: var(--resalah-space-6);
}

.tutor-courses-wrap .tutor-empty-state {
	background: var(--resalah-color-surface-tint);
	border-radius: var(--resalah-radius-md);
	padding: var(--resalah-space-7) var(--resalah-space-5);
}

.tutor-courses-wrap .tutor-empty-state img {
	width: 220px;
	max-width: 60%;
	opacity: .85;
}

.tutor-courses-wrap .tutor-empty-state > div {
	color: var(--resalah-color-text-muted);
	font-family: var(--resalah-font-base);
	margin-top: var(--resalah-space-4);
}

/* =========================================================
   2. Card shell — default / hover / focus states
   ========================================================= */
.resalah-course-card.tutor-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--resalah-color-surface);
	border: var(--resalah-border-width) solid var(--resalah-color-border);
	border-radius: var(--resalah-radius-md);
	box-shadow: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.resalah-course-card.tutor-card:hover,
.resalah-course-card.tutor-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--resalah-shadow-card);
	border-color: var(--resalah-border-soft);
}

.resalah-course-card a:focus-visible,
.resalah-course-card button:focus-visible {
	outline: 2px solid var(--resalah-color-primary);
	outline-offset: 2px;
}

/* =========================================================
   3. Thumbnail + wishlist bookmark
   ========================================================= */
.resalah-course-card .tutor-course-thumbnail {
	margin: 0;
}

.resalah-course-card .tutor-ratio-16x9 img.tutor-card-image-top {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.resalah-course-card.tutor-card:hover .tutor-card-image-top {
	transform: scale(1.03);
}

.resalah-course-card .tutor-course-bookmark {
	position: absolute;
	top: var(--resalah-space-3);
	right: var(--resalah-space-3);
	z-index: 2;
}

.resalah-course-card .tutor-course-bookmark .save-bookmark-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--resalah-radius-pill);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 6px rgba(15, 23, 42, .12);
	color: var(--resalah-color-primary);
	transition: background .18s ease, transform .15s ease;
}

.resalah-course-card .tutor-course-bookmark .save-bookmark-btn:hover {
	background: #ffffff;
	transform: translateY(-1px);
}

/* =========================================================
   4. Body — rating, title, meta
   ========================================================= */
.resalah-course-card .tutor-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--resalah-space-5) var(--resalah-space-5) var(--resalah-space-4);
	gap: var(--resalah-space-2);
	font-family: var(--resalah-font-base);
}

/* Neutralize Tutor's own utility margins on these children so our
   .tutor-card-body `gap` is the single spacing source — avoids stacking
   two spacing systems. */
.resalah-course-card .tutor-card-body > * {
	margin-top: 0;
	margin-bottom: 0;
}

.resalah-course-card .tutor-course-ratings {
	min-height: 20px;
}

/* Empty (0-review) rating rows read as clutter — hide them, keep real
   ratings. Tutor renders an empty `tutor-ratings-` modifier class when a
   course has 0 reviews. Same rule also exists (for now) in the legacy
   wp-content/mu-plugins/resalah-shop-design.php — harmless duplicate,
   removed from there once that file is fully migrated. */
.resalah-course-card .tutor-course-ratings:has(.tutor-ratings.tutor-ratings-) {
	display: none;
}

.resalah-course-card .tutor-ratings-average,
.resalah-course-card .tutor-ratings-count {
	color: var(--resalah-color-text-muted);
	font-size: var(--resalah-fs-xs);
}

.resalah-course-card .tutor-course-name {
	font-size: var(--resalah-fs-lg);
	line-height: 1.35;
	font-weight: 600;
	/* Reserve 2 lines so cards with short vs. long titles stay the same
	   height in a row — covers the "different title lengths" test case. */
	min-height: calc(var(--resalah-fs-lg) * 1.35 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.resalah-course-card .tutor-course-name a {
	color: var(--resalah-color-text);
	text-decoration: none;
}

.resalah-course-card .tutor-course-name a:hover {
	color: var(--resalah-color-primary);
}

.resalah-course-card .tutor-meta {
	gap: var(--resalah-space-4);
	font-size: var(--resalah-fs-xs);
	color: var(--resalah-color-text-muted);
}

.resalah-course-card .tutor-meta-icon {
	color: var(--resalah-muted-2);
}

.resalah-course-card .tutor-meta-course-cat a,
.resalah-course-card .tutor-meta > div a {
	color: var(--resalah-color-text-muted);
}

.resalah-course-card .tutor-meta-course-cat a:hover,
.resalah-course-card .tutor-meta > div a:hover {
	color: var(--resalah-color-primary);
}

.resalah-course-card .tutor-meta:last-child {
	margin-top: auto;
	padding-top: var(--resalah-space-2);
}

/* =========================================================
   5. Enrolled course progress (dashboard "My Courses")
   ========================================================= */
.resalah-course-card .tutor-course-progress {
	padding: 0 var(--resalah-space-5) var(--resalah-space-4);
}

.resalah-course-card .tutor-progress-bar {
	height: 8px;
	border-radius: var(--resalah-radius-pill);
	background: var(--resalah-color-border);
	overflow: hidden;
}

.resalah-course-card .tutor-progress-bar .tutor-progress-value {
	display: block;
	height: 100%;
	border-radius: var(--resalah-radius-pill);
	background: var(--resalah-color-accent);
}

/* =========================================================
   6. Footer — price / enroll / continue-learning
   ========================================================= */
.resalah-course-card .tutor-card-footer {
	padding: var(--resalah-space-4) var(--resalah-space-5) var(--resalah-space-5);
	border-top: var(--resalah-border-width) solid var(--resalah-color-border);
	margin-top: auto;
}

.resalah-course-card .tutor-card-footer .tutor-course-price,
.resalah-course-card .tutor-card-footer .price {
	color: var(--resalah-color-text);
	font-weight: 700;
	font-size: var(--resalah-fs-md);
}

.resalah-course-card .tutor-card-footer .tutor-btn {
	border-radius: var(--resalah-radius-pill);
	font-weight: 600;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

.resalah-course-card .tutor-card-footer .tutor-btn:active {
	transform: translateY(1px);
}

.resalah-course-card .tutor-card-footer .tutor-btn.tutor-btn-primary,
.resalah-course-card .tutor-card-footer a.tutor-btn:not(.tutor-btn-outline-primary) {
	background: var(--resalah-color-accent);
	border-color: var(--resalah-color-accent);
	color: #ffffff;
}

.resalah-course-card .tutor-card-footer .tutor-btn.tutor-btn-primary:hover,
.resalah-course-card .tutor-card-footer a.tutor-btn:not(.tutor-btn-outline-primary):hover {
	background: var(--resalah-color-accent-hover);
	border-color: var(--resalah-color-accent-hover);
}

.resalah-course-card .tutor-card-footer .tutor-btn-outline-primary {
	background: transparent;
	border-color: var(--resalah-color-primary);
	color: var(--resalah-color-primary);
}

.resalah-course-card .tutor-card-footer .tutor-btn-outline-primary:hover {
	background: var(--resalah-color-primary);
	border-color: var(--resalah-color-primary);
	color: #ffffff;
}

.resalah-course-card .tutor-card-footer .tutor-btn[disabled],
.resalah-course-card .tutor-card-footer .tutor-btn.tutor-btn-disable {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

/* Booking-progress (limited-seat courses) pill — restyle to match, keep
   Tutor's own inline --pro percentage variable and mechanism untouched. */
.resalah-course-card .tutor-course-booking-progress .tutor-progress-circle {
	border-color: var(--resalah-color-border);
}

/* =========================================================
   7. Responsive
   ========================================================= */
@media (max-width: 900px) {
	.resalah-course-card .tutor-card-body {
		padding: var(--resalah-space-4);
	}

	.resalah-course-card .tutor-card-footer {
		padding: var(--resalah-space-3) var(--resalah-space-4) var(--resalah-space-4);
	}
}

@media (max-width: 480px) {
	.resalah-course-card .tutor-course-name {
		font-size: var(--resalah-fs-md);
		min-height: calc(var(--resalah-fs-md) * 1.35 * 2);
	}
}