/**
 * Layout articolo singolo: immagine formato / in evidenza a sinistra, titolo + contenuto a destra (desktop).
 */
.ms-single-post__intro-row {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	width: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

.ms-single-post__intro-media .ms-single-post--img {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.single-post .ms-single-post__intro-media .ms-single-post--img .media-wrapper-sp {
	display: flex !important;
	flex-direction: column !important;
	aspect-ratio: 4 / 5 !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	overflow: hidden !important;
	min-height: 0 !important;
}

/*
 * Featured: prima era height:auto → immagine alla dimensione “intrinseca”, minuscola nel box flex/grigio.
 * Riempie il riquadro 4:5 usando contain (intera foto visibile, massimo ingrandimento possibile nel box).
 */
.ms-single-post__intro-media .media-wrapper-sp img {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
	display: block !important;
}

.ms-single-post__intro-media figure.media-wrapper img {
	width: 100%;
	height: auto !important;
	max-height: none !important;
	display: block;
}

/*
 * Gallery: il tema usa padding-bottom (~box panoramico) → con contain le slide portrait diventano piccolissime.
 * Box verticale 4:5 come la colonna media; slide al 100% così contain usa tutta l’area.
 */
body.single-post .ms-single-post__intro-media .ms-post-media__gallery {
	padding-bottom: 0 !important;
	width: 100% !important;
	aspect-ratio: 4 / 5 !important;
	height: auto !important;
}

body.single-post .ms-single-post__intro-media .ms-post-media__gallery .swiper-wrapper {
	width: 100% !important;
	height: 100% !important;
	right: 0 !important;
	bottom: 0 !important;
}

body.single-post .ms-single-post__intro-media .ms-post-media__gallery .swiper-slide {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	width: 100% !important;
	min-height: 0 !important;
	background-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), 0.12);
}

body.single-post .ms-single-post__intro-media .ms-post-media__gallery img,
body.single-post .ms-single-post__intro-media .ms-post-media__gallery a img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
}

.ms-single-post__intro-main .ms-sp--header {
	margin-top: 0;
}

.ms-single-post__intro-main .ms-sp--header .post-meta-date.meta-date-sp,
.ms-single-post__intro-main .ms-sp--header h1 {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

@media (min-width: 992px) {
	body.single-post .ms-single-post__intro-row:has(.ms-single-post__intro-media > *) {
		grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
	}

	body.single-post .ms-single-post__intro-media {
		position: sticky !important;
		top: var(--single-post-intro-sticky-top, calc(var(--global-padding, 1rem) + 72px)) !important;
		align-self: start !important;
	}
}