/* ==========================================================================
   Product gallery

   The design reference carries no gallery, so this is built from theme.json's
   scale rather than converted from an export. The stage is 3:2; theme.json's
   aspect scale already holds that ratio, under the name it was first needed
   for, so it is aliased below where the intent can be read.
   ========================================================================== */

.tfs-product-gallery {
	--tfs-gallery-aspect: var(--wp--custom--aspect--room);

	display: grid;
	gap: var(--wp--custom--step--12);
}

.tfs-product-gallery__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--tfs-gallery-aspect);
	background-color: var(--wp--preset--color--placeholder);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
}

.tfs-product-gallery__stage:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-product-gallery__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The stage holds every view at once and hides all but one. An author rule
   setting `display` outranks the user agent's [hidden] rule, so the hidden
   state has to be restated here or all the views would stack. */
.tfs-product-gallery__image[hidden] {
	display: none;
}

.tfs-product-gallery__rail {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--step--12);
}

.tfs-product-gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	aspect-ratio: var(--tfs-gallery-aspect);
	background-color: var(--wp--preset--color--placeholder);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-product-gallery__thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tfs-product-gallery__thumb:hover {
	border-color: var(--wp--preset--color--muted);
}

.tfs-product-gallery__thumb:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* The active view is marked three ways, so it survives a monochrome display,
   a colour vision deficiency, and forced-colours mode: a heavier border in
   ink, a solid bar along the bottom edge, and aria-selected for anything
   reading the page rather than looking at it. */
.tfs-product-gallery__thumb[aria-selected="true"] {
	border-color: var(--wp--preset--color--ink);
}

.tfs-product-gallery__thumb[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--wp--custom--step--4);
	background-color: var(--wp--preset--color--ink);
}

.tfs-product-gallery__thumb[aria-selected="false"] .tfs-product-gallery__thumb-image {
	opacity: 0.72;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-product-gallery__thumb:hover .tfs-product-gallery__thumb-image {
	opacity: 1;
}

/* Touch devices get a full tap target. */
@media (hover: none) {
	.tfs-product-gallery__thumb {
		min-height: var(--wp--custom--control--tap-target-minimum);
	}
}