/* Map carousel — route stop cards in a scroll-snap slider.
   Card metrics measured from the reference map-carousel component;
   the slider itself is rebuilt with CSS scroll-snap (the reference world-map
   SVG is proprietary artwork and is intentionally not reproduced). */

.map-carousel { position: relative; }

/* ------------------------------------------------------------- Track */

.map-carousel__track {
	display: flex;
	gap: var(--grid-col-gutter);
	margin: 0 calc(var(--grid-col-gutter) * -1);
	overflow-x: auto;
	padding: 25px var(--grid-col-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.map-carousel__track::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------- Slides */

.map-carousel__slide {
	background-color: var(--color-soft-white);
	border-radius: 0;
	box-shadow: 0 0 25px #0000001a;
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	position: relative;
	scroll-snap-align: center;
}
@media screen and (min-width: 1024px) {
	.map-carousel__slide { flex-direction: row; }
}

.map-carousel__slide-image {
	margin: 0;
	min-width: 200px;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.map-carousel__slide-image img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}
@media screen and (min-width: 1024px) {
	.map-carousel__slide-image {
		padding-bottom: 0;
		position: static;
	}
	.map-carousel__slide-image img {
		position: static;
		width: 200px;
	}
}

.map-carousel__slide-content {
	flex-grow: 1;
	padding: 25px 30px 12px;
}

.map-carousel__slide-title {
	margin-bottom: 0;
	max-width: calc(100% - 90px);
}
@media screen and (min-width: 768px) {
	.map-carousel__slide-title { max-width: calc(100% - 106px); }
}

.map-carousel__slide-sub-title {
	color: var(--color-gray-600);
	margin-bottom: 3px;
}

.map-carousel__slide-columns { margin-top: 12px; }
@media screen and (min-width: 1280px) {
	.map-carousel__slide-columns {
		grid-row-gap: var(--grid-row-gutter);
		grid-template-columns: repeat(2, 1fr);
	}
}
.map-carousel__slide-column + .map-carousel__slide-column ul {
	list-style: none;
	padding: 0;
}

.map-carousel__slide-link-wrap { text-align: right; }
.map-carousel__slide-link-wrap a { color: var(--color-burgundy-2); }

/* ------------------------------------------------------------- Arrows */

.map-carousel__arrows {
	align-items: center;
	aspect-ratio: 16 / 9;
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: 0 10px;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 25px;
	width: 100%;
	z-index: 2;
}
@media screen and (min-width: 1024px) {
	.map-carousel__arrows {
		aspect-ratio: auto;
		gap: 10px;
		left: auto;
		padding: 0;
		right: 20px;
		top: 45px;
		width: auto;
	}
}

.map-carousel__arrow-button {
	align-items: center;
	background-color: var(--color-soft-white);
	border: 1px solid var(--color-gray-400);
	border-radius: 50%;
	color: var(--color-soft-black);
	cursor: pointer;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	pointer-events: auto;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
	user-select: none;
	width: 36px;
}
@media screen and (min-width: 1280px) {
	.map-carousel__arrow-button { height: 46px; width: 46px; }
}
.map-carousel__arrow-button svg { scale: 0.8; }
@media screen and (min-width: 1280px) {
	.map-carousel__arrow-button svg { scale: 1; }
}
@media (hover: hover) {
	.map-carousel__arrow-button:hover { background-color: var(--color-gray-100); }
}
.map-carousel__arrow-button--right svg { transform: rotate(180deg); }
.map-carousel__arrow-button[disabled] { cursor: auto; opacity: 0.3; }