/**
 * Content Carousel — card carousel with heading
 */

.module.content-carousel {
	overflow-x: clip;
}

.module.content-carousel header {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-large);
	justify-content: space-between;
	margin-bottom: var(--text-spacing-xlarge);
}

.module.content-carousel .header-text .heading-3 {
	margin: 0 0 var(--text-spacing-xxsmall);
}

.module.content-carousel .header-text p {
	margin: 0;
}

.module.content-carousel .header-text .btn.secondary {
	margin-top: var(--text-spacing-medium);
}

.module.content-carousel .header-actions {
	flex-shrink: 0;
	margin-left: auto;
}

.module.content-carousel header .arrows {
	flex-shrink: 0;
	margin-right: var(--container-breakout-full);
}

/*** Card Styling ***/

.module.content-carousel .card.menu-image {
	align-items: flex-start;
	height: 100%;
	overflow: visible;
}

.module.content-carousel .card.menu-image .media {
	aspect-ratio: 3 / 2;
}

.module.content-carousel .card.menu-image .heading-6 {
	font-size: calc(20rem / 16);
	line-height: calc(28 / 20);
	transition: color .3s ease;
}

.module.content-carousel .card.menu-image p {
	color: var(--grayhound);
	margin: 0;
}

.module.content-carousel .card.menu-image .btn.tertiary {
	border-bottom: none;
	margin-top: auto;
	padding-bottom: 0;
	position: relative;
}

.module.content-carousel .card.menu-image .btn.tertiary::after {
	background: var(--goldie-yellow);
	bottom: -2px;
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	transition: background .3s ease, transform .3s ease;
	width: 100%;
}

.module.content-carousel a.card.menu-image:hover .heading-6 {
	color: var(--russian-blue-hover);
}

.module.content-carousel a.card.menu-image:hover .btn.tertiary {
	color: var(--russian-blue-hover);
}

.module.content-carousel a.card.menu-image:hover .btn.tertiary::after {
	background: var(--goldie-yellow-hover);
	transform: translateY(-2px);
}

/** Dark Background (Russian Blue) **/

.module.content-carousel.background-russian-blue .header-text .heading-3 {
	color: var(--samoyed-white) !important;
}

.module.content-carousel.background-russian-blue .header-text p {
	color: var(--samoyed-white);
}

.module.content-carousel.background-russian-blue .header-text .btn.secondary {
	color: var(--samoyed-white);
}

.module.content-carousel.background-russian-blue .arrows button {
	color: var(--samoyed-white);
}

.module.content-carousel.background-russian-blue .card {
	color: var(--samoyed-white);
}

.module.content-carousel.background-russian-blue .card .heading-6 {
	color: var(--samoyed-white) !important;
}

.module.content-carousel.background-russian-blue .card p {
	color: rgba(255, 255, 255, 0.7);
}

.module.content-carousel.background-russian-blue .card .btn.tertiary {
	color: var(--samoyed-white);
}

.module.content-carousel.background-russian-blue .card .pill {
	color: var(--samoyed-white);
}

/*** Non-Carousel Fallback ***/

.module.content-carousel ul.jazzy-static {
	display: flex;
	gap: var(--text-spacing-small);
}

.module.content-carousel ul.jazzy-static > li {
	flex: 1;
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	/* Heading → small-text stays at 8px even though the card's flex gap is 16px below 1200 */

	.module.content-carousel .card.menu-image .heading-6 + p {
		margin-top: calc(-1 * var(--text-spacing-xxsmall));
	}

}

@media only screen and (max-width: calc(950rem / 16)) {

	.module.content-carousel header {
		margin-bottom: var(--text-spacing-xlarge);
	}

	.module.content-carousel header .arrows {
		margin-right: 0;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.content-carousel header {
		align-items: center;
		display: grid;
		gap: var(--text-spacing-small);
		grid-template-columns: 1fr auto;
		margin-bottom: var(--text-spacing-large);
	}

	.module.content-carousel .header-text .btn.secondary {
		margin-top: var(--text-spacing-small);
	}

	.module.content-carousel .header-text {
		grid-column: 1 / -1;
	}

	.module.content-carousel .header-actions {
		margin-left: 0;
	}

	.module.content-carousel header .arrows {
		margin-right: 0;
	}

	/* Extend the track so the peek of the next card can bleed past
	   the container's right edge to the viewport edge. Jazzy's slide
	   step math handles card width from the responsive peek config. */

	.module.content-carousel ul {
		margin-right: calc(var(--container-outer-padding) * -1);
	}

	/* Disable hover transforms on touch */

	.module.content-carousel a.card.menu-image:hover .heading-6 {
		color: inherit;
	}

	.module.content-carousel a.card.menu-image:hover .btn.tertiary {
		color: inherit;
	}

	.module.content-carousel a.card.menu-image:hover .btn.tertiary::after {
		transform: none;
	}

	/* Static fallback stacks vertically */

	.module.content-carousel ul.jazzy-static {
		flex-direction: column;
	}

}