/**
 * Artwork gallery carousel — mobile-first, responsive.
 */

.wp-block-gallery.is-style-artwork-carousel.has-nested-images {
	--jofei-carousel-gap: 12px;
	/* Mobile-first sizing */
	--jofei-carousel-height: clamp(13rem, 56vw, 20rem);
	--jofei-carousel-slide-size: 90%;
	--jofei-carousel-fade-opacity: 0.32;
	--jofei-thumb-size: 3.75rem;
	--jofei-carousel-arrow-inset: max(0.375rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
	position: relative;
}

@media (min-width: 600px) {
	.wp-block-gallery.is-style-artwork-carousel.has-nested-images {
		--jofei-carousel-height: clamp(15rem, 48vw, 26rem);
		--jofei-carousel-slide-size: 86%;
		--jofei-thumb-size: 4.25rem;
	}
}

@media (min-width: 1024px) {
	.wp-block-gallery.is-style-artwork-carousel.has-nested-images {
		--jofei-carousel-height: clamp(18rem, 42vw, 32rem);
		--jofei-carousel-slide-size: 82%;
		--jofei-thumb-size: 4.5rem;
	}
}

/* Before JS: show first slide only. */
.wp-block-gallery.is-style-artwork-carousel.has-nested-images:not(.is-carousel-ready)
	> figure.wp-block-image:not(#individual-image) {
	margin-bottom: var(--jofei-carousel-gap);
	width: 100% !important;
}

.wp-block-gallery.is-style-artwork-carousel.has-nested-images:not(.is-carousel-ready)
	> figure.wp-block-image:nth-child(n + 2) {
	display: none;
}

/* —— Main stage (mobile: stacked viewport + overlay arrows) —— */
.jofei-artwork-carousel__stage {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	position: relative;
}

.jofei-artwork-carousel__viewport--main {
	height: var(--jofei-carousel-height);
	overflow: hidden;
	width: 100%;
}

.jofei-artwork-carousel__viewport--main .jofei-artwork-carousel__container {
	display: flex;
	height: 100%;
	margin-left: calc(var(--jofei-carousel-gap) * -1);
	/* Horizontal swipe for Embla; vertical page scroll still works on the page */
	touch-action: pan-x pinch-zoom;
}

.jofei-artwork-carousel__slide {
	flex: 0 0 var(--jofei-carousel-slide-size);
	height: 100%;
	margin-left: var(--jofei-carousel-gap);
	min-width: 0;
	opacity: 0;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.jofei-artwork-carousel__slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.jofei-artwork-carousel__slide,
	.jofei-artwork-carousel__thumb img {
		transition: none;
	}
}

.jofei-artwork-carousel--reduce-motion .jofei-artwork-carousel__slide,
.jofei-artwork-carousel--reduce-motion .jofei-artwork-carousel__thumb img {
	transition: none;
}

.jofei-artwork-carousel__media {
	align-items: center;
	background: transparent;
	/*background: var(--wp--preset--color--accent-5, #fbfaf3);*/
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.jofei-artwork-carousel__media > a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	/* Comfortable tap target around linked image on touch devices */
	min-height: 44px;
	min-width: 44px;
	width: 100%;
}

/* Never crop: override core gallery .is-cropped rules. */
.wp-block-gallery.is-style-artwork-carousel.has-nested-images.is-cropped
	figure.wp-block-image:not(#individual-image)
	> a,
.wp-block-gallery.is-style-artwork-carousel.has-nested-images.is-cropped
	figure.wp-block-image:not(#individual-image)
	> div:not(.components-drop-zone) {
	align-items: center;
	display: flex !important;
	height: 100%;
	justify-content: center;
}

.wp-block-gallery.is-style-artwork-carousel.has-nested-images.is-cropped
	figure.wp-block-image:not(#individual-image)
	img,
.jofei-artwork-carousel__slide img {
	display: block;
	flex: none !important;
	height: auto !important;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain !important;
	object-position: center;
	width: auto !important;
}

/* —— Arrows: overlay on small screens, inline on large —— */
.jofei-artwork-carousel__btn {
	appearance: none;
	background: transparent; /*var(--wp--preset--color--base, #fff);*/
	border: 0px solid var(--wp--preset--color--accent-2, #9c3939);
	border-radius: 999px;
	box-shadow: none; /*0 2px 12px rgb(17 17 17 / 10%);*/
	color: var(--wp--preset--color--accent-2, #9c3939);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	/* WCAG-friendly touch target */
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
	z-index: 3;
}

.jofei-artwork-carousel__btn span {
	display: block;
	font-size: 1.25rem;
	line-height: 1;
}

.jofei-artwork-carousel__btn--prev {
	left: var(--jofei-carousel-arrow-inset);
}

.jofei-artwork-carousel__btn--next {
	right: max(0.375rem, env(safe-area-inset-right, 0px));
}

.jofei-artwork-carousel__btn:hover:not(:disabled),
.jofei-artwork-carousel__btn:focus-visible {
background: #9c39394d;
color: var(--wp--preset--color--base, #fff);
/* outline: 2px solid var(--wp--preset--color--accent-2, #9c3939);
outline-offset: 2px; */
}
.jofei-artwork-carousel__btn:focus {
	outline: 0px solid var(--wp--preset--color--accent-2, #9c393969);
}
.jofei-artwork-carousel__btn:active {
	outline: 2px solid var(--wp--preset--color--accent-2, #ffffff);
	outline-offset: -2px;
	background: var(--wp--preset--color--accent-2, #9c393974);
}


.jofei-artwork-carousel__btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

/* Tablet+: arrows beside the track (more room, no overlap on image) */
@media (min-width: 768px) {
	.jofei-artwork-carousel__stage {
		align-items: center;
		display: grid;
		gap: 0;
		grid-template-columns: auto 1fr auto;
	}

	.jofei-artwork-carousel__btn {
		position: static;
		transform: none;
	}

	.jofei-artwork-carousel__btn--prev,
	.jofei-artwork-carousel__btn--next {
		left: auto;
		right: auto;
	}

	.jofei-artwork-carousel__viewport--main {
		grid-column: 2;
	}
}

/* —— Thumbnails —— */
.jofei-artwork-carousel__thumbs {
	margin-top: var(--wp--preset--spacing--30, 1rem);
	/* Scroll padding so first/last thumb aren't flush against screen edge */
	padding-inline: max(0px, env(safe-area-inset-left, 0px))
		max(0px, env(safe-area-inset-right, 0px));
}

.jofei-artwork-carousel__viewport--thumbs {
	overflow: hidden;
}

.jofei-artwork-carousel__container--thumbs {
	display: flex;
	gap: var(--jofei-carousel-gap);
	margin: 0;
	touch-action: pan-x pinch-zoom;
}

.jofei-artwork-carousel__thumb {
	align-items: center;
	appearance: none;
	background: var(--wp--preset--color--accent-5, #fbfaf3);
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	display: flex;
	flex: 0 0 var(--jofei-thumb-size);
	height: var(--jofei-thumb-size);
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	overflow: hidden;
	padding: 0;
	transition:
		border-color 0.2s ease,
		opacity 0.2s ease;
	width: var(--jofei-thumb-size);
}

.jofei-artwork-carousel__thumb img {
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0.65;
	transition: opacity 0.2s ease;
	width: auto;
}

.jofei-artwork-carousel__thumb:hover img,
.jofei-artwork-carousel__thumb:focus-visible img {
	opacity: 1;
}

.jofei-artwork-carousel__thumb.is-active {
	border-color: var(--wp--preset--color--accent-2, #9c3939);
}

.jofei-artwork-carousel__thumb.is-active img {
	opacity: 1;
}

.jofei-artwork-carousel__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2, #9c3939);
	outline-offset: 2px;
}

/* —— Editor: static grid (no carousel JS) —— */
.editor-styles-wrapper .wp-block-gallery.is-style-artwork-carousel.has-nested-images,
.block-editor-block-list__layout .wp-block-gallery.is-style-artwork-carousel.has-nested-images {
	column-gap: var(--jofei-carousel-gap);
	display: block;
}

.editor-styles-wrapper
	.wp-block-gallery.is-style-artwork-carousel.has-nested-images
	figure.wp-block-image:not(#individual-image),
.block-editor-block-list__layout
	.wp-block-gallery.is-style-artwork-carousel.has-nested-images
	figure.wp-block-image:not(#individual-image) {
	break-inside: avoid;
	display: block;
	margin: 0 0 var(--jofei-carousel-gap);
	width: 100% !important;
}

/* Editor: single column on narrow / mobile preview */
@media (max-width: 781px) {
	.editor-styles-wrapper
		.wp-block-gallery.is-style-artwork-carousel.has-nested-images,
	.block-editor-block-list__layout
		.wp-block-gallery.is-style-artwork-carousel.has-nested-images {
		column-count: 1;
	}
}

@media (min-width: 600px) {
	.editor-styles-wrapper
		.wp-block-gallery.is-style-artwork-carousel.has-nested-images,
	.block-editor-block-list__layout
		.wp-block-gallery.is-style-artwork-carousel.has-nested-images {
		column-count: 2;
	}
}

@media (min-width: 1024px) {
	.editor-styles-wrapper
		.wp-block-gallery.is-style-artwork-carousel.columns-3.has-nested-images,
	.block-editor-block-list__layout
		.wp-block-gallery.is-style-artwork-carousel.columns-3.has-nested-images {
		column-count: 3;
	}
}

/* Fullscreen background slider: fill viewport with object-fit cover (not carousel contain). */
.wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media {
	align-items: stretch !important;
	display: block !important;
	height: 100%;
	justify-content: stretch !important;
	overflow: hidden;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide img,
.wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image img {
	flex: none !important;
	height: 100% !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover !important;
	object-position: center;
	width: 100% !important;
}