/**
 * woocommerce/product-image-gallery block styles.
 *
 * Moved here out of assets/scss/woocommerce/_single-product.scss --
 * DECISIONS.md #4. Enqueued for the block from functions.php; there is no
 * build step for this file, so edit it directly, and write logical
 * properties because it never passes through rtlcss.
 *
 * The block renders WooCommerce's classic gallery, so what is on the page is
 * flexslider's markup: `.woocommerce-product-gallery` wrapping a
 * `.flex-viewport` for the main image and a `.flex-control-nav` list of
 * thumbnails, both of which flexslider writes at runtime. The gallery is also
 * one of the few places where the plugin sets inline styles from JavaScript
 * (the wrapper's opacity, the viewport's height), so anything that has to beat
 * those is called out where it sits.
 *
 * Nested per DECISIONS.md #5, mobile-first with the breakpoint blocks last per
 * #2.
 *
 * Sections:
 *   1. The plate -- the framed area the main image sits on
 *   2. Main image
 *   3. Zoom trigger
 *   4. Thumbnails
 *   5. Sale badge
 *   6. Responsive
 */

.wp-block-woocommerce-product-image-gallery {
	margin: 0 auto;

	/*
	 * The plugin caps the block at 512px, from `.woocommerce
	 * .wp-block-woocommerce-product-image-gallery` -- a class heavier than this
	 * file's root. Repeating the root class is what outweighs it, rather than
	 * hanging the whole file off a body class or reaching for `!important`.
	 */
	&.wp-block-woocommerce-product-image-gallery {
		max-width: 655px;
	}

	/* --------------------------------------------------------------------------
	 * 1. The plate
	 *
	 * The design calls for a 655x575 image area. Both numbers are written here
	 * as one `aspect-ratio` plus a `max-inline-size`, not as a fixed width and
	 * height: the block sits in a 50% column that is narrower than 655px for
	 * most of the viewport range, and a hard 655px would simply overflow it.
	 * At 655px and up the plate is exactly 655x575; below that it shrinks and
	 * keeps the ratio, which is the same shape everywhere.
	 *
	 * The product photography is cut out on white, so on a white page the image
	 * had no edges -- the helmet floated in the column with nothing saying where
	 * the gallery began or ended. A gray-1100 hairline around it gives it that
	 * edge, and flexslider's viewport carries a base-2 fill behind the slides.
	 * Both are a step off white rather than a colour, so the plate reads as a
	 * frame and not as a panel competing with the product. The gallery wrapper
	 * takes the frame but no fill -- see the two rules below.
	 * ----------------------------------------------------------------------- */

	.woocommerce-product-gallery {
		position: relative;

		/*
		 * Once flexslider initialises it moves the gallery wrapper inside a
		 * `.flex-viewport` of its own and turns the wrapper into the slide
		 * track; on a product with a single image it never runs and the wrapper
		 * stays where the plugin printed it. Whichever of the two is the
		 * gallery's own child is the box the image fills, so the plate is drawn
		 * on that, and the thumbnail list -- a sibling of it, inside the same
		 * gallery -- stays outside the frame.
		 */
		> .flex-viewport,
		> .woocommerce-product-gallery__wrapper {
			aspect-ratio: 655 / 575;
			overflow: hidden;
			border: 1px solid var(--wp--preset--color--gray-1100);
			border-radius: 20px;

			/*
			 * Transparent, so the wrapper shows the page through the frame
			 * wherever it lands -- as the gallery's own child here, and as the
			 * slide track inside the viewport. Written out rather than left to
			 * the initial value: the wrapper is the one box in this file that
			 * changes parent at runtime, and stating it keeps a fill added to
			 * this shared rule later from reaching it by accident.
			 */
			background-color: transparent;
		}

		> .flex-viewport {
			height: auto !important; /* flexslider writes a measured pixel height on it inline */
			background-color: var(--wp--preset--color--base-2);

			> .woocommerce-product-gallery__wrapper {
				height: 100%;
			}
		}
	}

	/* --------------------------------------------------------------------------
	 * 2. Main image
	 *
	 * `contain`, not `cover`: these are cut-out product shots of very different
	 * proportions, and cropping one to fill the plate cuts the ends off a bike.
	 * The plate's own background is what fills the space left over.
	 * ----------------------------------------------------------------------- */

	.woocommerce-product-gallery__image {
		height: 100%;
		border-radius: 20px;

		> a {
			display: flex;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	/* --------------------------------------------------------------------------
	 * 3. Zoom trigger
	 *
	 * WooCommerce prints a magnifier emoji here. It is replaced with a drawn
	 * glass -- a circle and a handle out of the two pseudo-elements -- because
	 * the emoji renders at whatever size and colour the platform feels like.
	 * ----------------------------------------------------------------------- */

	.woocommerce-product-gallery__trigger {
		position: absolute;
		z-index: 1;
		inset-block-start: 0.5em;
		inset-inline-end: 0.5em;
		width: 36px;
		height: 36px;
		box-sizing: content-box;
		border-radius: 100%;
		background: var(--wp--preset--color--base);
		font-size: 2em;
		text-indent: -9999px;
		opacity: 0.5;

		img,
		svg {
			display: none !important; /* the emoji is an <img> the plugin prints */
		}

		&::before {
			content: "";
			position: absolute;
			inset-block-start: 9px;
			inset-inline-start: 9px;
			display: block;
			width: 10px;
			height: 10px;
			box-sizing: content-box;
			border: 2px solid var(--wp--preset--color--contrast);
			border-radius: 100%;
		}

		&::after {
			content: "";
			position: absolute;
			inset-block-start: 19px;
			inset-inline-start: 22px;
			display: block;
			width: 2px;
			height: 8px;
			box-sizing: content-box;
			border-radius: 6px;
			background: var(--wp--preset--color--contrast);
			transform: rotate(-45deg);
		}
	}

	/* --------------------------------------------------------------------------
	 * 4. Thumbnails
	 *
	 * flexslider's control nav. Two up on mobile, widening at the two
	 * breakpoints at the bottom of the file.
	 * ----------------------------------------------------------------------- */

	.flex-control-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
		margin-block: 20px 0;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			display: flex;

			> * {
				border: 1px solid transparent;
				opacity: 0.5;
				cursor: pointer;
				transition: all ease 0.2s;

				&:hover {
					opacity: 1;
				}
			}

			img {
				max-width: 100%;
				border-radius: 12px;
			}

			.flex-active {
				border-color: var(--wp--preset--color--primary);
				opacity: 1;
			}
		}
	}

	/* --------------------------------------------------------------------------
	 * 5. Sale badge
	 * ----------------------------------------------------------------------- */

	span.onsale {
		inset-inline-start: 16px !important; /* the plugin sets `left` inline-adjacent at the same weight */
		padding: 3px 9px;
		border-radius: 50px;
	}
}

/* --------------------------------------------------------------------------
 * 6. Responsive
 * ----------------------------------------------------------------------- */

/* md */
@media (min-width: 48rem) {

	.wp-block-woocommerce-product-image-gallery .flex-control-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* lg */
@media (min-width: 64rem) {

	.wp-block-woocommerce-product-image-gallery .flex-control-nav {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}