/**
 * Mobile aspect ratio overrides for blocks with a Celeste mobile image.
 * Desktop aspect ratio comes from the block Dimensions control / theme CSS.
 */

@media (max-width: 767px) {
	figure.wp-block-image:has(.celeste-mobile-aspect--4-3),
	.wp-block-cover:has(.celeste-mobile-aspect--4-3) {
		aspect-ratio: 4 / 3 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--3-4),
	.wp-block-cover:has(.celeste-mobile-aspect--3-4) {
		aspect-ratio: 3 / 4 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--16-9),
	.wp-block-cover:has(.celeste-mobile-aspect--16-9) {
		aspect-ratio: 16 / 9 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--9-16),
	.wp-block-cover:has(.celeste-mobile-aspect--9-16) {
		aspect-ratio: 9 / 16 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--1-1),
	.wp-block-cover:has(.celeste-mobile-aspect--1-1) {
		aspect-ratio: 1 / 1 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--2-3),
	.wp-block-cover:has(.celeste-mobile-aspect--2-3) {
		aspect-ratio: 2 / 3 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has(.celeste-mobile-aspect--3-2),
	.wp-block-cover:has(.celeste-mobile-aspect--3-2) {
		aspect-ratio: 3 / 2 !important;
		min-height: unset !important;
		height: auto;
	}

	figure.wp-block-image:has([class*='celeste-mobile-aspect--']) img,
	.wp-block-cover:has([class*='celeste-mobile-aspect--']) .wp-block-cover__image-background {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	figure.wp-block-image.is-style-content-height-image:has([class*='celeste-mobile-aspect--']) {
		height: auto !important;
	}

	figure.wp-block-image.is-style-content-height-image:has([class*='celeste-mobile-aspect--']) img {
		height: 100% !important;
	}
}

/* Editor: mobile device preview (class on block wrapper) */
@media (max-width: 767px) {
	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--4-3,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--4-3,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--4-3),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--4-3) {
		aspect-ratio: 4 / 3 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--3-4,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--3-4,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--3-4),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--3-4) {
		aspect-ratio: 3 / 4 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--16-9,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--16-9,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--16-9),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--16-9) {
		aspect-ratio: 16 / 9 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--9-16,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--9-16,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--9-16),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--9-16) {
		aspect-ratio: 9 / 16 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--1-1,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--1-1,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--1-1),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--1-1) {
		aspect-ratio: 1 / 1 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--2-3,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--2-3,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--2-3),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--2-3) {
		aspect-ratio: 2 / 3 !important;
		min-height: unset !important;
	}

	.editor-styles-wrapper figure.wp-block-image.celeste-mobile-aspect--3-2,
	.editor-styles-wrapper .wp-block-cover.celeste-mobile-aspect--3-2,
	.editor-styles-wrapper figure.wp-block-image:has(.celeste-mobile-aspect--3-2),
	.editor-styles-wrapper .wp-block-cover:has(.celeste-mobile-aspect--3-2) {
		aspect-ratio: 3 / 2 !important;
		min-height: unset !important;
	}
}