/*
 * Popular Courses rail (template-parts/home-courses.php): the filter tabs, the
 * Slick row of course cards and its prev/next arrows. On the home, seminar
 * and gallery pages, so it loads site-wide rather than with home.css.
 */

/*
 * Course slider. Same treatment as the category row: the list gets room for
 * the card's hover lift and shadow, and a flex track keeps every card the
 * height of the tallest.
 */
.course-slider .slick-list {
	padding-top: 0.75rem;
	padding-bottom: 2rem;
}

.course-slider .slick-track {
	display: flex;
	align-items: stretch;
}

/* Slick makes each .course-cell the slide itself, so the cell must keep an
   auto height: a set height (even 100%) stops a flex item stretching, and
   every card would stay as tall as its own text. The extra class outranks
   the height: 100% below, which is for a cell Slick wraps in its own div. */
.course-slider .slick-slide,
.course-slider .slick-slide.course-cell {
	height: auto;
}

.course-slider .slick-slide>div,
.course-slider .course-cell {
	height: 100%;
}

/*
 * Course filter tabs over the slider. The pills are the shared .filter-btn
 * (src/tailwind.css, corners in buttons.css). Below sm they stay on one line
 * and slide sideways, out to the screen edges so a cut-off pill shows there
 * is more; from sm up they wrap, centred. The bottom padding keeps the active
 * pill's shadow from being clipped by the scroll box.
 */
.course-tabs {
	position: relative; /* offsetParent for the scroll-into-view in the template */
	display: flex;
	gap: 0.625rem;
	margin: 0 -1.5rem 0.5rem;
	padding: 0.25rem 1.5rem 0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.course-tabs::-webkit-scrollbar {
	display: none;
}

@media (min-width: 640px) {
	.course-tabs {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 0 0.5rem;
		padding: 0.25rem 0 0.75rem;
		overflow: visible;
	}
}

/* Covers the rebuild when a tab is picked. */
.course-slider {
	transition: opacity 0.18s ease;
}

.course-slider.is-fading {
	opacity: 0;
}

/* Every course in the tab already fits across: nothing to scroll to. */
.course-rail.is-static .course-arrow {
	display: none;
}

/*
 * Prev/next arrows on either side of the course row, centred on the cards
 * (the list's padding is 0.75rem above and 2rem below, hence the offset).
 * They sit just over the card edges until the viewport has room to put
 * them fully outside the row.
 */
.course-rail .course-arrow {
	position: absolute;
	top: calc(50% - 0.625rem);
	z-index: 2;
	transform: translateY(-50%);
}

.course-rail .course-prev {
	left: -1.25rem;
}

.course-rail .course-next {
	right: -1.25rem;
}

@media (min-width: 1440px) {
	.course-rail .course-prev {
		left: -4.5rem;
	}

	.course-rail .course-next {
		right: -4.5rem;
	}
}