/* ==========================================================================
   Course card block – wrapper shell
   Makes the shared .md-course-card design self-contained outside the Tutor
   archive (e.g. inside a Greenshift query-loop slider on the homepage).
   Depends on course-card.css for the inner card design.
   ========================================================================== */
.md-course-card-block {
	display: flex;
	height: 100%;
	background: var(--md-card-bg);
	border: 2px solid var(--md-card-border);
	border-radius: 20px;
	overflow: visible;
	box-shadow: var(--md-card-shadow);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.md-course-card-block .md-course-card {
	border-radius: inherit;
	width: 100%;
}

.md-course-card-block:hover {
	border-color: var(--md-card-border-hover);
	box-shadow: var(--md-card-shadow-hover);
	transform: translateY(-2px);
}

/* Hover the whole card reveals the CTA emphasis (matches the archive). */
.md-course-card-block:hover .md-course-card__btn {
	border-color: var(--md-card-accent);
	color: var(--md-card-accent-hover);
	background: color-mix(in srgb, var(--theme-palette-color-6, #f3efeb) 55%, var(--md-card-bg));
}

/* Inside a Greenshift slider, let the slide stretch so cards match height. */
.swiper-slide > .md-course-card-block,
.gspbgrid_item > .md-course-card-block {
	height: 100%;
}

/* ==========================================================================
   Bundle card – inverted highlight shell (block wrapper)
   ========================================================================== */
.md-course-card-block:has(.md-course-card--bundle) {
	background: var(--md-card-accent);
	border-color: var(--md-card-accent);
	box-shadow: 0 4px 20px color-mix(in srgb, var(--md-card-accent) 28%, transparent);
}

.md-course-card-block:has(.md-course-card--bundle):hover {
	border-color: color-mix(in srgb, var(--theme-palette-color-8, #ffffff) 35%, var(--md-card-accent));
	box-shadow: 0 10px 32px color-mix(in srgb, var(--md-card-accent) 38%, transparent);
}

.md-course-card-block:has(.md-course-card--bundle):hover .md-course-card__btn {
	border-color: var(--theme-palette-color-8, #ffffff);
	color: var(--theme-palette-color-8, #ffffff);
	background: color-mix(in srgb, var(--theme-palette-color-8, #ffffff) 12%, transparent);
}