/*
 * Sana Horizontal Scroll Cotnainer.
 * No transitions. Arrow clicks move the rail one card at a time without
 * smooth-scroll animation; native swipe and trackpad scrolling are untouched.
 */
.sana-horizontal-scroll {
	--sana-rail-ink: #123F46;
	--sana-rail-teal: #267D89;
	--sana-rail-line: #D8CFBD;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
}

.sana-horizontal-scroll__navigation {
	display: flex;
	justify-content: flex-start;
	order: 2;
	gap: 10px;
	margin: 20px 0 0;
	padding-inline: max(2rem, calc((100% - 76rem) / 2));
}

.sana-horizontal-scroll__navigation--top {
	order: -1;
	margin-top: 0;
	margin-bottom: 20px;
}

.sana-horizontal-scroll__arrow {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--sana-rail-line);
	border-radius: 50%;
	color: var(--sana-rail-ink);
	background: #fff;
	cursor: pointer;
}

.sana-horizontal-scroll__arrow:hover,
.sana-horizontal-scroll__arrow:focus-visible {
	border-color: var(--sana-rail-ink);
}

.sana-horizontal-scroll__arrow:active {
	background: var(--sana-rail-line);
}

.sana-horizontal-scroll__arrow:focus-visible {
	outline: 2px solid var(--sana-rail-teal);
	outline-offset: 3px;
}

.sana-horizontal-scroll__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.sana-horizontal-scroll__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.sana-horizontal-scroll__arrow i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

.sana-horizontal-scroll__viewport {
	--sana-scroll-track: #D8CFBD;
	--sana-scroll-thumb: #267D89;
	width: 100%;
	max-width: 100%;
	padding-bottom: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: auto;
	scrollbar-color: var(--sana-scroll-thumb) var(--sana-scroll-track);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.sana-horizontal-scroll__viewport::-webkit-scrollbar {
	height: 6px;
}

.sana-horizontal-scroll__viewport::-webkit-scrollbar-track {
	background: var(--sana-scroll-track);
}

.sana-horizontal-scroll__viewport::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--sana-scroll-thumb);
}

/* Default side padding lines the first card up with the 76rem page column. */
.sana-horizontal-scroll__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	gap: 24px;
	padding-inline: max(2rem, calc((100% - 76rem) / 2));
}

.sana-horizontal-scroll__item {
	flex: 0 0 350px;
	width: 350px;
	min-width: 0;
	scroll-snap-align: start;
	scroll-margin-inline: max(2rem, calc((100vw - 76rem) / 2));
}

.sana-horizontal-scroll__item .sana-card-hover {
	height: 470px;
}

.sana-horizontal-scroll--no-snap .sana-horizontal-scroll__viewport {
	scroll-snap-type: none;
}

.sana-horizontal-scroll--no-snap .sana-horizontal-scroll__item {
	scroll-snap-align: none;
}

.sana-horizontal-scroll--hide-scrollbar .sana-horizontal-scroll__viewport {
	padding-bottom: 0;
	scrollbar-width: none;
}

.sana-horizontal-scroll--hide-scrollbar .sana-horizontal-scroll__viewport::-webkit-scrollbar {
	display: none;
}

@media (max-width: 767px) {
	.sana-horizontal-scroll__navigation {
		padding-inline: 1.25rem;
	}

	/* Like Yako (slidesPerView 1.1, 20px gap, rail starts 20px from the
	   left): measured 335 x 446px cards on a 390px screen, with about 15px
	   of the next card showing. Overrides the widget's card width and gap
	   settings. */
	.sana-horizontal-scroll__track {
		gap: 20px !important;
		padding-inline: 1.25rem;
	}

	.sana-horizontal-scroll__item {
		flex-basis: calc((100vw - 1.25rem - 2px) / 1.1) !important;
		width: calc((100vw - 1.25rem - 2px) / 1.1) !important;
		max-width: 350px;
		scroll-margin-inline: 1.25rem;
	}
}