/*
 * Carousel (template-parts/components/carousel.php, assets/js/carousel.js).
 * Desktop from 72em: three cards per view, round arrows in the page margin
 * beside the cards, level with their middle; with a mouse they appear only
 * while the pointer is over the section or the keyboard is in the carousel
 * (user, 2026-10-26: they sat too high and overlapped the cards).
 * Tablet and small laptops: two cards (three were too narrow at 1024 px).
 * Phone: one card with the next one peeking. Below 72em there is no margin
 * wide enough, so the arrows sit under the cards and are always shown.
 */

.hf-carousel
{
	--hf-carousel-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
	--hf-carousel-item: calc((100% - 2 * var(--hf-carousel-gap)) / 3);
	--hf-carousel-arrow: 3rem;
	/* Arrow plus its distance from the cards, never wider than the page
	   margin, so the page does not scroll sideways. */
	--hf-carousel-arrow-offset: min(var(--hf-carousel-arrow) + 0.75rem, var(--hf-gutter));
	/* 1 shows the arrows, 0 hides them (still focusable). */
	--hf-carousel-arrows: 1;

	position: relative;
}

.hf-carousel__track
{
	display: grid;
	grid-auto-columns: var(--hf-carousel-item);
	grid-auto-flow: column;
	gap: var(--hf-carousel-gap);
	/* Room for the card focus ring inside the scroll box. */
	margin: -0.5rem;
	padding: 0.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-padding-inline: 0.5rem;
	scroll-snap-type: x mandatory;
}

/* With the arrows working, the scrollbar is not needed. */
.hf-carousel.is-enhanced .hf-carousel__track
{
	scrollbar-width: none;
}

.hf-carousel.is-enhanced .hf-carousel__track::-webkit-scrollbar
{
	display: none;
}

.hf-carousel__item
{
	display: flex;
	scroll-snap-align: start;
}

.hf-carousel__arrow
{
	position: absolute;
	z-index: 1;
	/* Middle of the cards: the carousel is exactly as tall as they are. */
	top: 50%;
	display: grid;
	width: var(--hf-carousel-arrow);
	height: var(--hf-carousel-arrow);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hf-color-surface);
	box-shadow: 0 4px 18px color-mix(in srgb, var(--hf-color-heading) 16%, transparent);
	color: var(--hf-color-heading);
	cursor: pointer;
	opacity: var(--hf-carousel-arrows);
	place-items: center;
	transform: translateY(-50%);
	transition: opacity var(--hf-transition), background-color var(--hf-transition);
}

.hf-carousel__arrow[hidden]
{
	display: none;
}

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

.hf-carousel__arrow:disabled
{
	opacity: calc(0.35 * var(--hf-carousel-arrows));
	cursor: default;
}

.hf-carousel__arrow--prev
{
	left: calc(-1 * var(--hf-carousel-arrow-offset));
}

.hf-carousel__arrow--next
{
	right: calc(-1 * var(--hf-carousel-arrow-offset));
}

.hf-carousel__arrow-icon
{
	width: 1.5rem;
	height: 1.5rem;
}

/* Mouse on desktop: arrows on hover over the section, or with the keyboard
   inside the carousel. Touch screens keep them visible. */
@media (min-width: 72em) and (hover: hover) and (pointer: fine)
{
	.hf-carousel
	{
		--hf-carousel-arrows: 0;
	}

	section:hover .hf-carousel,
	.hf-carousel:hover,
	.hf-carousel:focus-within
	{
		--hf-carousel-arrows: 1;
	}
}

@media (max-width: 71.99em)
{
	.hf-carousel
	{
		--hf-carousel-item: calc((100% - var(--hf-carousel-gap)) / 2);

		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--hf-space-m) 0.75rem;
	}

	.hf-carousel__track
	{
		grid-row: 1;
		grid-column: 1 / -1;
	}

	/* Under the cards, side by side in the middle. */
	.hf-carousel__arrow
	{
		position: static;
		grid-row: 2;
		transform: none;
	}

	.hf-carousel__arrow--prev
	{
		justify-self: end;
	}

	.hf-carousel__arrow--next
	{
		justify-self: start;
	}
}

@media (max-width: 40em)
{
	.hf-carousel
	{
		--hf-carousel-item: 85%;
	}
}