/*
 * Carousels: the home page's product rails and the product page's "You May
 * Also Like" / "Also In This Range".
 *
 * Site-wide rather than in home.css: the same component renders on the home
 * page and the product page, and a page-scoped copy leaves it unstyled
 * everywhere else — the mistake that has bitten this project three times.
 *
 * The row is a scroll container with snap points, not a transform: a finger
 * swipes it natively, carousel.js pages it with the arrows, and with
 * JavaScript off it is still a scrollable row.
 */

/* ─── Product rails ──────────────────────────────────────────────────────── */

.rail {
	padding-block: var(--section-gap);
}

.rail__frame {
	position: relative;
}

/*
 * Both axes declared. A lone overflow-x makes the browser compute overflow-y
 * as `auto` too, which turns the rail into a vertical scroller and makes the
 * page draggable sideways.
 */
.rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rail__viewport::-webkit-scrollbar {
	display: none;
}

.rail__track {
	display: grid;
	grid-auto-flow: column;
	/* Five across on a wide screen, and on a narrow one a card and a bit of
	   the next, which is what tells a thumb there is more to the right. */
	grid-auto-columns: var(--rail-card-width);
	gap: var(--tile-gap);
	align-items: start;
}

.rail__track > * {
	scroll-snap-align: start;
}

.rail__cta {
	display: flex;
	justify-content: center;
	margin-block-start: 36px;
}

/* ─── Carousel arrows (rails; the hero has its own placement) ───────────── */

.carousel__arrow {
	position: absolute;
	inset-block-start: var(--rail-arrow-top);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	color: var(--color-ink);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.22s ease, background-color 0.18s ease;
}

.carousel__arrow:hover {
	background: var(--color-white);
}

.carousel__arrow--prev {
	inset-inline-start: -10px;
}

.carousel__arrow--next {
	inset-inline-end: -10px;
}

.carousel__arrow .icon {
	width: 20px;
	height: 20px;
}

.carousel__arrow--prev .icon {
	transform: rotate(90deg);
}

.carousel__arrow--next .icon {
	transform: rotate(-90deg);
}

/* Hidden until the pointer is over the rail — same reasoning as the hero. */
@media (hover: hover) {
	.carousel__arrow {
		opacity: 0;
	}

	.rail__frame:hover .carousel__arrow,
	.rail__frame:focus-within .carousel__arrow {
		opacity: 1;
	}
}

/* An arrow that cannot move anything is not offered. */
.carousel__arrow[disabled] {
	cursor: default;
	opacity: 0 !important;
}

/* ─── Product page rails ─────────────────────────────────────────────────── */

/* Six across, left-aligned heading over a hairline, arrows over the first and
   last cards — the reference's "You May Also Like". */
.rail--related {
	padding-block: 0;
	margin-block-start: var(--section-gap);
}

.rail--related .rail__track {
	grid-auto-columns: calc((100% - 5 * var(--tile-gap)) / 6);
}

.rail--related .carousel__arrow--prev {
	inset-inline-start: 8px;
}

.rail--related .carousel__arrow--next {
	inset-inline-end: 8px;
}

.rail-heading {
	margin: 0 0 22px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: start;
	text-transform: uppercase;
}

@media (max-width: 899px) {
	.rail__cta {
		margin-block-start: 24px;
	}

	/* No arrows on a phone — a swipe is the gesture, and there is no hover to
	   reveal them with. */
	.carousel__arrow {
		display: none;
	}

	.rail--related .rail__track {
		grid-auto-columns: 44vw;
	}
}