/*
 * Mobile fitting for Anita and Shadow Core galleries.
 * WebGL galleries are corrected in mobile-image-fit.js because their images
 * are rendered inside a canvas and cannot be resized with CSS.
 */
@media (max-width: 767px) and (orientation: portrait) {
	/* Background-based gallery items: preserve the entire photograph. */
	.anita-main .anita-div-image,
	.anita-main .shadowcore-div-image,
	.anita-main .shadowcore-gallery-image,
	.anita-main .shadowcore-grid-image,
	.anita-main .shadowcore-slider-item--image,
	.anita-main .shadowcore-kenburns-slide-image,
	.anita-main .shadowcore-ribbon-item--image {
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	/* Disable only the mobile Ken Burns zoom that would crop a contained image. */
	.anita-main .shadowcore-kenburns-slide-image {
		transform: none !important;
	}

	/* Standard Anita/Elementor grids, masonry, adjusted and bricks galleries. */
	.anita-main .anita-grid-gallery img,
	.anita-main .shadowcore-gallery-grid img,
	.anita-main .shadowcore-gallery-adjusted img,
	.anita-main .shadowcore-gallery-bricks img,
	.anita-main .shadowcore-gallery-item img,
	.anita-main .shadowcore-grid-item img,
	.anita-main .shadowcore-ribbon-item--image img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}

	/* Anita's non-WebGL horizontal carousel. */
	.anita-main .anita-carousel-gallery img,
	.anita-main .anita-carousel-gallery video {
		width: auto !important;
		height: auto !important;
		max-width: calc(100vw - 48px) !important;
		max-height: calc(100vh - 210px) !important;
		max-height: calc(100svh - 210px) !important;
		object-fit: contain !important;
	}

	/*
	 * JustifiedGallery normally crops photographs to equal-height rows.
	 * On a phone it becomes a one-column gallery so every ratio remains intact.
	 */
	.anita-main .justified-gallery {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--anita-grid-gallery-gap, 20px) !important;
		height: auto !important;
	}

	.anita-main .justified-gallery > a,
	.anita-main .justified-gallery > div {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		display: block !important;
	}

	.anita-main .justified-gallery > a > img,
	.anita-main .justified-gallery > div > img {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		object-fit: contain !important;
	}
}

/* Telefoni orizzontali: il lato corto deve lasciare spazio all'interfaccia. */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
	.anita-main .anita-div-image,
	.anita-main .shadowcore-div-image,
	.anita-main .shadowcore-gallery-image,
	.anita-main .shadowcore-grid-image,
	.anita-main .shadowcore-slider-item--image,
	.anita-main .shadowcore-kenburns-slide-image,
	.anita-main .shadowcore-ribbon-item--image {
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	.anita-main .shadowcore-kenburns-slide-image {
		transform: none !important;
	}

	.anita-main .anita-carousel-gallery img,
	.anita-main .anita-carousel-gallery video {
		width: auto !important;
		height: auto !important;
		max-width: calc(100vw - 180px) !important;
		max-height: calc(100vh - 110px) !important;
		max-height: calc(100svh - 110px) !important;
		object-fit: contain !important;
	}
}