/**
 * gp/product-gallery
 *
 * Scrolling, snapping and touch swipe come from CSS. view.js only syncs the
 * thumbnails and opens the lightbox; without it the strip still scrolls and
 * the thumbnails still work as anchor links.
 */

.gp-gallery { position: relative; }

.gp-gallery__stage {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 10px;
	/*
	 * The slide is a fixed 3/4 box so the column keeps its height whatever a
	 * product's photo happens to be, and an image that is not 3/4 is letterboxed
	 * inside it. A book cover is 3/4 and fills it; a square product photo does
	 * not, and a grey ground here turned that spare space into two visible bands.
	 * White lets it pass for the page it sits on.
	 */
	background: var(--wp--preset--color--surface);
}

.gp-gallery__stage::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.gp-gallery__stage { scroll-behavior: auto; }
}

/*
 * The slide takes the shape of the photo in it rather than imposing one.
 *
 * It used to be a fixed 3/4 box, which is right for a book cover and wrong for
 * everything else: a square photo sat in the middle of it with a band of empty
 * space above and below, so the image read as much shorter than the space it
 * had been given.
 */
.gp-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
	display: grid;
	grid-template: 1fr / 1fr;
	overflow: hidden;
	border-radius: 10px;
}

/* Full column width, and whatever height that comes to — WordPress emits the
   width and height attributes, so the box is the right shape before the file
   arrives and nothing shifts when it does.

   The cap is for the occasional very tall scan: past it object-fit takes over
   and letterboxes the sides, rather than one image pushing the buy button off
   the screen. */
.gp-gallery__slide > .gp-gallery__image {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 70vh;
	object-fit: contain;
	display: block;
}

.gp-gallery__placeholder {
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	background: var(--wp--preset--color--surface-muted);
}

.gp-gallery__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scrollbar-width: thin;
}

.gp-gallery__thumb {
	flex: 0 0 auto;
	inline-size: 72px;
	block-size: 96px;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-muted);
	display: block;
}

.gp-gallery__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.gp-gallery__thumb[aria-selected="true"] { border-color: var(--wp--preset--color--brand-green); }

.gp-gallery__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

.gp-gallery__zoom {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	appearance: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.4em 0.8em;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	cursor: pointer;
}

.gp-gallery__zoom:hover {
	border-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-green);
}

.gp-gallery__lightbox {
	inline-size: min(96vw, 1000px);
	max-block-size: 92vh;
	border: 0;
	border-radius: 12px;
	padding: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	overflow: hidden;
}

.gp-gallery__lightbox::backdrop { background: rgba(4, 4, 4, 0.75); }

.gp-gallery__lightbox-stage {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	max-block-size: 92vh;
}

.gp-gallery__full {
	flex: 0 0 100%;
	scroll-snap-align: center;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 92vh;
	object-fit: contain;
	display: block;
}

.gp-gallery__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	z-index: 1;
	appearance: none;
	inline-size: 36px;
	block-size: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--card);
}