/**
 * Gallery style "Karussell": 3:2 images, blue arrow on the image,
 * caption and counter below (body-2, 600). The arrows sit on a white circle: on
 * dark or blue photos a bare blue arrow would not reach the 3:1 contrast of WCAG 1.4.11.
 *
 * The `:not(#individual-image)` part matches the core gallery selectors, which use it to beat
 * width settings; ours has to be at least as specific.
 */

.wp-block-gallery-carousel {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);

	& > .wp-block-gallery.has-nested-images {
		position: relative;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;

		&::-webkit-scrollbar {
			display: none;
		}

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--signal);
			outline-offset: 2px;
		}

		& figure.wp-block-image:not(#individual-image) {
			flex: 0 0 100%;
			flex-direction: column;
			gap: var(--wp--preset--spacing--8);
			width: 100%;
			margin: 0;
			scroll-snap-align: start;

			& img {
				flex: none;
				aspect-ratio: 3 / 2;
				width: 100%;
				height: auto;
				object-fit: cover;
			}

			/* Credit badge at the bottom of the 3:2 image (the caption follows below). */
			& .cr-image-credit {
				top: calc(100cqw / 1.5 - 26px);
				bottom: auto;
			}

			/* Image captions below the image instead of on top of it. */
			& figcaption {
				position: static;
				max-height: none;
				margin-top: 0.25em;
				padding: 0;
				background: none;
				color: inherit;
				font-size: var(--wp--preset--font-size--body-2);
				font-weight: 600;
				line-height: 1.35;
				text-align: start;
			}
		}
	}
}

.wp-block-gallery-carousel__prev,
.wp-block-gallery-carousel__next {
	position: absolute;
	top: calc(100cqw / 3);
	display: flex;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 90%);
	color: var(--wp--preset--color--signal);
	cursor: pointer;
	transform: translateY(-50%);

	&[hidden] {
		display: none;
	}

	/* Two-tone, so the ring shows on light and dark photos. */
	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--signal);
		outline-offset: 2px;
		box-shadow: 0 0 0 4px var(--wp--preset--color--white);
	}
}

.wp-block-gallery-carousel__prev {
	left: var(--wp--preset--spacing--16);
}

.wp-block-gallery-carousel__next {
	right: var(--wp--preset--spacing--16);
}

.wp-block-gallery-carousel__footer {
	display: flex;
	gap: var(--wp--preset--spacing--16);
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--body-2);
	font-weight: 600;
	line-height: 1.35;

	& > * {
		margin: 0;
	}

	& .blocks-gallery-caption {
		padding: 0;
		font-size: inherit;
		text-align: start;
	}
}

.wp-block-gallery-carousel__counter {
	margin-inline-start: auto;
	white-space: nowrap;
}