/**
 * Customer review photos in the product gallery.
 *
 * Marks the customer photos added by Greg_Customer_Photos with a green strip across
 * the bottom of the photo — on the gallery slide, in the PhotoSwipe lightbox (where
 * customer-photos.js clones the badge into the zoomed photo) and, icon only, on the
 * thumbnail in the FlexSlider control nav (class added by customer-photos.js).
 *
 * The thumbnail and lightbox elements exist only after JS has run, so every selector
 * they need starts with .greg-customer-photo — the prefix Greg_Assets safelists for
 * WP Rocket Remove Unused CSS.
 *
 * The green follows the Elementor kit accent colour (Gregory green). Overridable from
 * the theme via --greg-customer-photo-badge-bg, --greg-customer-photo-badge-color and
 * --greg-customer-photo-badge-size. Text is 15px on phones and 16px from 768px (mobile
 * first), the same in the gallery and the lightbox. White on #6da014 is 3.1:1, below the
 * WCAG AA 4.5:1 for text of this size; a darker --greg-customer-photo-badge-bg such as
 * #578010 (4.7:1) meets it.
 *
 * @package Greg_Customizations
 */

/* Positioning context for the strip on the slide and on the thumbnail. */
.woocommerce-product-gallery__image.is-customer-photo,
.greg-customer-photo-thumb {
	position: relative;
}

/* Slide image: Greg_Customer_Photos sets the main product image's aspect ratio on the
   slide (--greg-customer-photo-ratio; on the <div>, because Imagify moves an img's
   inline style onto its <picture>), so the gallery height stays the same for every
   slide. The photo is fitted inside on a neutral background;
   --greg-customer-photo-fit: cover crops it to fill the frame instead. The jQuery
   zoom image is excluded. */
.woocommerce-product-gallery__image.is-customer-photo img:not(.zoomImg) {
	aspect-ratio: var(--greg-customer-photo-ratio, auto);
	object-fit: var(--greg-customer-photo-fit, contain);
	background-color: var(--greg-customer-photo-bg, #f2f2f2);
}

/* Lightbox: overlay sized to the photo by customer-photos.js, above the image. */
.greg-customer-photo-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/* Green strip across the bottom of the photo. */
.greg-customer-photo-badge,
.greg-customer-photo-thumb::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background-color: var(--greg-customer-photo-badge-bg, var(--e-global-color-accent, #6da014));
	pointer-events: none;
}

.greg-customer-photo-badge {
	display: flex;
	gap: 0.5em;
	align-items: center;
	justify-content: center;
	--greg-customer-photo-font-size: var(--greg-customer-photo-badge-size, 15px);
	padding: 0.3em 0.6em;
	color: var(--greg-customer-photo-badge-color, #fff);
	font-size: var(--greg-customer-photo-font-size);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}

/* Camera icon, shared by the strip and the thumbnail marker. */
.greg-customer-photo-badge::before,
.greg-customer-photo-thumb::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* In the lightbox the photo's wrapper is scaled by PhotoSwipe; customer-photos.js sets
   the current scale, so the strip keeps the same on-screen size for every photo and
   zoom level. Padding and icon are in em and follow. */
.greg-customer-photo-lightbox .greg-customer-photo-badge {
	font-size: calc(var(--greg-customer-photo-font-size) / var(--greg-customer-photo-scale, 1));
}

.greg-customer-photo-badge::before {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-size: contain;
}

/* Thumbnail: a slimmer strip with the icon only (no room for the text). */
.greg-customer-photo-thumb::after {
	height: 22%;
	min-height: 12px;
	background-size: auto 70%;
}

@media (min-width: 768px) {
	.greg-customer-photo-badge {
		--greg-customer-photo-font-size: var(--greg-customer-photo-badge-size, 16px);
		padding: 0.45em 0.75em;
		line-height: 1.2;
	}

	.greg-customer-photo-thumb::after {
		min-height: 18px;
		background-size: auto 60%;
	}
}