/**
 * Page-independent media, image-role, logo, and icon foundations.
 */

:where(img, picture, video, canvas, svg) {
	max-inline-size: 100%;
}

:where(img, video) {
	block-size: auto;
}

.boopi-media {
	background: var(--boopi-color-surface-subtle);
	border-radius: var(--boopi-radius-lg);
	display: block;
	overflow: hidden;
	position: relative;
}

.boopi-media > :where(img, picture, video) {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: var(--boopi-media-fit, cover);
	object-position: var(--boopi-media-position, center);
}

.boopi-media--square {
	aspect-ratio: 1;
}

.boopi-media--product {
	aspect-ratio: 4 / 5;
}

.boopi-media--editorial {
	aspect-ratio: 3 / 2;
}

.boopi-media--hero {
	aspect-ratio: 16 / 9;
}

.boopi-media--contain {
	--boopi-media-fit: contain;

	padding: var(--boopi-space-4);
}

.boopi-media--missing {
	align-items: center;
	border: var(--boopi-border-width) dashed var(--boopi-color-border-strong);
	color: var(--boopi-color-text-muted);
	display: flex;
	justify-content: center;
	min-block-size: 10rem;
	padding: var(--boopi-space-5);
	text-align: center;
}

.boopi-media--missing > * {
	margin: 0;
	max-inline-size: var(--boopi-text-measure-narrow);
}

figure {
	max-inline-size: 100%;
}

figcaption,
.wp-element-caption {
	padding-inline: var(--boopi-space-2);
}

.boopi-icon {
	block-size: var(--boopi-icon-size, var(--boopi-size-icon-md));
	color: var(--boopi-icon-color, currentcolor);
	display: inline-block;
	flex: 0 0 auto;
	inline-size: var(--boopi-icon-size, var(--boopi-size-icon-md));
	overflow: visible;
	vertical-align: -0.2em;
}

.custom-logo-link {
	align-items: center;
	display: inline-flex;
	min-block-size: var(--boopi-size-control-min);
}

.custom-logo {
	block-size: auto;
	inline-size: auto;
	max-block-size: var(--boopi-size-logo-header);
	max-inline-size: min(10rem, 40vw);
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 5;
	background: var(--boopi-color-surface-subtle);
	object-fit: cover;
}

.woocommerce-product-gallery__image img {
	background: var(--boopi-color-surface-subtle);
	block-size: auto;
	inline-size: 100%;
	object-fit: contain;
}

.flex-control-thumbs img {
	aspect-ratio: 1;
	object-fit: cover;
}

img.woocommerce-placeholder {
	background: var(--boopi-color-surface-subtle);
	border: var(--boopi-border-width) dashed var(--boopi-color-border-strong);
}

@media (forced-colors: active) {
	.boopi-media--missing,
	img.woocommerce-placeholder {
		border-color: CanvasText;
	}
}