/* ===== Course slider / khoá học ([peter_course_slider]) ===== */
.peter-course-card {
	--peter-course-bg: rgb(100, 66, 153);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 10px;
	background: var(--peter-course-bg);
	color: #fff;
	text-decoration: none;
	transition: transform .3s, box-shadow .3s;
}

.peter-course-card:hover {
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

.peter-course-card-image {
	display: block;
	position: relative;
	padding-top: 100%;
	overflow: hidden;
	background: #eee;
}

.peter-course-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.peter-course-card:hover .peter-course-card-img {
	transform: scale(1.05);
}

.peter-course-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 16px;
	/* Reserve 2 lines so long titles (e.g. "STARTERS – MOVERS – FLYERS")
	   don't make one card taller than its neighbours. */
	min-height: calc(1.3em * 2 + 28px);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * Flatsome's flickity.css resets plain slide <div>s with
 * ".flickity-slider > div:not(.col) { margin:0; padding:0 }" — match that
 * specificity for the gap (margin-right only; see slider_shortcode()).
 * The top/bottom padding leaves room for the hover lift + shadow, which
 * Flickity's overflow:hidden viewport would otherwise clip.
 */
.peter-course-slider .flickity-slider > .peter-course-card {
	/* Flickity cells are absolutely positioned (shrink-to-fit) and ux_slider's
	   slide_width only sets max-width, so give the card full width to cap. */
	width: 100%;
	margin: 8px 20px 16px 0;
}

.peter-course-slider .flickity-page-dots {
	position: static;
	margin-top: 12px;
}

/* Fallback if Flatsome's slider isn't available. */
.peter-course-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 849px) {
	.peter-course-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 549px) {
	.peter-course-grid {
		grid-template-columns: 1fr;
	}
}