/*
	Side by Side reuses the shared .grid-2 primitive per slide (layout.css).
	Below 48em, where .grid-2 collapses to one column (its own default —
	see layout.css), this gap becomes the vertical space between the
	stacked image and header instead of the horizontal gap between them —
	32px there, tighter than the 80px side-by-side gap the singular Callout
	block's own .grid-2 also uses (callout.css) for visual parity at desktop
	widths. Menu's own left/right split uses .grid-2--1-2 instead (also
	shared, layout.css) — same mobile-stacked/desktop-side-by-side gap
	shape as Side by Side's own rule, below, rather than each carrying a
	different value.
*/
.flex-section--callout-carousel .callout-carousel__slide.grid-2,
.flex-section--callout-carousel .grid-2--1-2 {
	gap: var(--space-6); /* 32px, stacked below 48em */
}

@media (min-width: 48em) {
	.flex-section--callout-carousel .callout-carousel__slide.grid-2,
	.flex-section--callout-carousel .grid-2--1-2 {
		gap: var(--space-10); /* 80px, side by side */
	}

	/* Menu's own nav/carousel split — 2fr/3fr instead of .grid-2--1-2's
	   own shared 1fr/2fr (layout.css), a narrower gap between the two
	   ratios than that default gives. */
	.flex-section--callout-carousel .grid-2--1-2 {
		grid-template-columns: 2fr 3fr;
	}
}

/* Same "cover, rounded, contained" treatment the singular Callout block's
   own .callout__media uses (callout.css), including its aspect ratio —
   see that file's own comment for the arithmetic behind 586/430. */
.callout-carousel__media {
	aspect-ratio: 586 / 430;
	overflow: hidden;
	border-radius: var(--radius-lg);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.callout-carousel__content > * + * {
	margin-block-start: var(--space-4);
}

/* Fixed size, independent of the editor's own Heading Style choice — see
   callout-carousel.php's own comment on sd_render_heading()'s $extra_class
   param for why. */
.callout-carousel__heading {
	font-size: 2rem; /* 32px */
	text-transform: uppercase;
	font-weight: var(--font-weight-regular); /* 400 */
}

/* Side by Side's Reverse Layout toggle — same "text-align does double duty"
   technique the singular Callout block's own .callout__content--reversed
   uses (callout.css): right-aligns the heading/text, and since .button is
   display: inline-flex, shifts the button itself right too, so it lines up
   with the text above it instead of sitting stranded on the left. The
   actual left/right swap of image vs. content happens in the markup
   (callout-carousel.php), not here — this only handles the text alignment
   half. */
.callout-carousel__slide--reversed .callout-carousel__content {
	text-align: right;
}

/* ---- Menu layout -------------------------------------------------------- */

/* Overrides .grid--center's own align-items: center (callout-carousel.php's
   own markup) just for the nav column — the carousel column beside it can
   be taller, and centering the nav against that height left it floating;
   top-aligned it instead lines up with the carousel's own first item. */
.callout-carousel__nav {
	align-self: start;
}

.callout-carousel__nav-list {
	display: flex;
	flex-direction: column;
	/* No gap — items sit flush against each other, each its own flat-
	   coloured block with no border between them to separate them instead. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	.is-active is toggled by assets/js/carousel.js's syncActiveGo() whenever
	Splide's active slide changes — see that file's own comment.

	Colour stops are tokens: --callout-carousel-nav-bg/-bg-hover (tokens.css,
	literal greys specific to this list) for resting/hover, and the shared
	--color-dark-bg/-fg (already "black background, white text" in this
	theme's own vocabulary) for active, rather than a third one-off pair.
*/
.callout-carousel__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 5rem; /* 80px */
	padding-inline: var(--space-5); /* 24px */
	border: none;
	border-radius: 0;
	background-color: var(--callout-carousel-nav-bg);
	color: var(--color-white-fg); /* black */
	font: inherit;
	font-size: 1rem; /* 16px */
	font-weight: var(--font-weight-regular); /* 400 */
	text-align: left;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);

	& svg {
		flex: none;
		width: 1rem; /* 16px */
		height: 1rem;
	}

	&:hover {
		background-color: var(--callout-carousel-nav-bg-hover);
	}

	&.is-active {
		background-color: var(--color-dark-bg);
		color: var(--color-dark-fg); /* white */
	}
}

/* Stacked: image, then heading/text/button, vertically — the opposite
   shape from Side by Side's own per-slide .grid-2 (row). */
.callout-carousel__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* 32px, between the image and the header */
}