/* components/gallery.css
   Product image gallery with thumbnails.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.pgal { display: flex; flex-direction: column; gap: 14px; }

.pgal-stage {
	position: relative;
	border: 1px solid var(--line);
	background: #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* Every slide stays in the DOM so the lightbox opens the whole set; only the
   active one is visible. */
.pgal-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease;
	cursor: zoom-in;
}

.pgal-slide.is-active { opacity: 1; visibility: visible; }

.pgal-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 24px;
}

.pgal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-2);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pgal-prev { left: 12px; }

.pgal-next { right: 12px; }

/* Keep the arrows out of the way until the image is being looked at, but never
   hide them from keyboard users. */
.pgal:hover .pgal-arrow,
.pgal:focus-within .pgal-arrow { opacity: 1; }

.pgal-arrow:hover,
.pgal-arrow:focus-visible { border-color: var(--red); color: var(--red); }

.pgal-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 4px 9px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ink-3);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
}

/* Flex rather than a 5-column grid so three photos stay thumbnail-sized instead of
   stretching to fill the row. */
.pgal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pgal-thumb {
	position: relative;
	flex: 0 0 calc((100% - 40px) / 5);
	padding: 0;
	border: 1px solid var(--line);
	background: #fff;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.pgal-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.pgal-thumb:hover { border-color: var(--line-2); }

/* The red border is the whole active signal. There used to be a 2px bar across the
   bottom edge as well, which made that one side render twice as heavy as the other
   three and read as a rendering fault rather than a state. */
.pgal-thumb.is-active { border-color: var(--red); }

@media (prefers-reduced-motion: reduce) {
	.pgal-slide,
		.pgal-arrow,
		.pgal-thumb { transition: none; }

	.pgal-arrow { opacity: 1; }
}

@media (max-width: 680px) {
	/* Touch has no hover, so the arrows would never appear. */
	.pgal-arrow { opacity: 1; width: 36px; height: 36px; }

	.pgal-thumb { flex-basis: calc((100% - 30px) / 4); }

	.pgal-img { padding: 14px; }
}