/**
 * Single course — related courses carousel (grid desktop, Swiper below 1024px).
 */

.cb-course-related-sec h2 {
	margin: 0 0 var(--space-8);
}

.cb-course-related__bleed {
	--cb-course-related-nav-inset: 3.25rem;

	position: relative;
	width: 100%;
	overflow: visible;
}

.cb-course-related__carousel {
	position: relative;
	width: 100%;
	overflow: visible;
}

.cb-course-related__track {
	position: relative;
	width: 100%;
	padding-inline: var(--cb-course-related-nav-inset);
	box-sizing: border-box;
}

.cb-course-related__swiper-viewport {
	overflow: visible;
	padding: 0.5rem;
	box-sizing: border-box;
}

.cb-course-related__swiper {
	overflow: visible !important;
	width: 100%;
}

.cb-course-related__swiper .swiper-wrapper {
	align-items: stretch;
}

.cb-course-related__swiper .swiper-slide {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.cb-course-related__nav {
	position: absolute;
	z-index: 5;
	margin-top: 0;
	transform: translateY(-50%);
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	user-select: none;
}

.cb-course-related__nav--prev {
	inset-inline-start: 0;
}

.cb-course-related__nav--next {
	inset-inline-end: 0;
}

.cb-course-related__nav.cb-swiper__prev:hover,
.cb-course-related__nav.cb-swiper__next:hover,
.cb-course-related__nav.cb-swiper__prev:focus-visible,
.cb-course-related__nav.cb-swiper__next:focus-visible,
.cb-course-related__nav.cb-swiper__prev:active,
.cb-course-related__nav.cb-swiper__next:active {
	transform: translateY(calc(-50% - 2px));
}

.cb-course-related__nav:focus {
	outline: none;
}

.cb-course-related__nav.cb-swiper__prev:disabled,
.cb-course-related__nav.cb-swiper__next:disabled,
.cb-course-related__nav.cb-swiper__prev.swiper-button-disabled,
.cb-course-related__nav.cb-swiper__next.swiper-button-disabled {
	transform: translateY(-50%);
}

.cb-course-related__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-6);
	width: 100%;
}

/* Desktop: 3-column grid (same breakpoint as archive 2-col switch) */
@media (min-width: 1024px) {
	.cb-course-related__bleed {
		--cb-course-related-nav-inset: 0;
	}

	.cb-course-related__nav,
	.cb-course-related__pagination {
		display: none !important;
	}

	.cb-course-related__track {
		padding-inline: 0;
	}

	.cb-course-related__swiper-viewport {
		padding: 0;
	}

	.cb-course-related__swiper .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(var(--cb-course-related-cols, 3), minmax(0, 1fr));
		gap: var(--space-6);
		width: 100% !important;
		transform: none !important;
		box-sizing: border-box;
	}

	.cb-course-related__swiper .swiper-slide,
	.cb-course-related__swiper .cb-swiper-loop-clone {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		flex-shrink: initial;
	}

	.cb-course-related__swiper .cb-swiper-loop-clone,
	.cb-course-related__swiper .cb-course-related__slide--dup {
		display: none !important;
	}

	.cb-course-related__swiper .swiper-slide .cb-dish-card {
		width: 100%;
		max-width: none;
	}
}

/* Tablet / mobile: one full card per slide */
@media (max-width: 1023px) {
	.cb-course-related__bleed {
		--cb-course-related-nav-inset: 2.75rem;
	}

	.cb-course-related__nav {
		top: 50%;
	}

	.cb-course-related__swiper .swiper-slide {
		width: 100%;
		max-width: 100%;
		flex-shrink: 0;
	}

	.cb-course-related__swiper .swiper-slide .cb-dish-card {
		width: 100%;
		max-width: 460px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.cb-course-related-sec {
		padding-inline: 0;
	}

	.cb-course-related-sec > .cb-container {
		padding-inline: var(--cb-mobile-gutter);
	}

	.cb-course-related__bleed {
		--cb-course-related-nav-inset: 0;
		width: calc(100% + (var(--cb-mobile-gutter) * 2));
		margin-inline: calc(var(--cb-mobile-gutter) * -1);
	}

	.cb-course-related__track {
		padding-inline: 0;
	}

	/*
	 * Keep the arrows visible on mobile as compact, inset buttons that
	 * overlap the card so the carousel stays usable without swiping.
	 * Vertical position (top: 50%) is inherited from the tablet block.
	 */
	.cb-course-related__nav {
		--cb-course-related-nav-size: 36px;
		width: var(--cb-course-related-nav-size);
		height: var(--cb-course-related-nav-size);
		box-shadow: var(--shadow-md);
	}

	.cb-course-related__nav--prev {
		inset-inline-start: var(--cb-mobile-gutter);
	}

	.cb-course-related__nav--next {
		inset-inline-end: var(--cb-mobile-gutter);
	}

	.cb-course-related__nav.cb-swiper__prev:hover,
	.cb-course-related__nav.cb-swiper__next:hover,
	.cb-course-related__nav.cb-swiper__prev:focus-visible,
	.cb-course-related__nav.cb-swiper__next:focus-visible,
	.cb-course-related__nav.cb-swiper__prev:active,
	.cb-course-related__nav.cb-swiper__next:active {
		transform: translateY(calc(-50% - 2px));
	}

	.cb-course-related__swiper-viewport {
		padding-inline: var(--cb-mobile-gutter);
	}

	.cb-course-related__swiper .swiper-slide {
		width: 100%;
	}
}