/* =====================================================================
   Contenuto delle Pagine: stile "Cartolina NTA" (inc/core/ntra-block-styles.php)
   Foto "polaroid" come nelle card dei viaggi, accanto al testo.
   Le variabili hanno un valore di riserva per l'editor, dove style.css non c'è.
   ===================================================================== */

/* Blocco "Media e testo" */
.wp-block-media-text.is-style-nta-cartolina {
	align-items: center;
	margin: clamp(32px, 6vw, 72px) 0;
}
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__content {padding: 0 clamp(8px, 4vw, 48px);}
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__content > :first-child {margin-top: 0;}
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__content h2,
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__content h3 {margin: 0 0 14px; text-align: left; text-transform: uppercase;}

/* La cartolina: stessa foto "polaroid" delle card dei viaggi (.ntra-trip-ticket-photo,
   assets/css/ntra-trips.css): cornice bianca con bordo, più spessa in basso,
   leggermente inclinata; si raddrizza al passaggio del mouse. */
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__media,
figure.wp-block-image.is-style-nta-cartolina,
.wp-block-image.is-style-nta-cartolina > figure {
	box-sizing: border-box;
	padding: 10px 10px 35px;
	background: var(--nta-white, #fff);
	border: var(--nta-border, 2px solid #000);
	border-radius: var(--nta-field-radius, 8px);
	transform: rotate(-2deg);
	transition: transform 0.3s ease;
}
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__media:hover,
figure.wp-block-image.is-style-nta-cartolina:hover,
.wp-block-image.is-style-nta-cartolina > figure:hover {transform: rotate(0deg);}
.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__media img,
.wp-block-image.is-style-nta-cartolina img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: var(--nta-border, 2px solid #000);
	border-radius: 2.4px;
}

/* Blocco Immagine (il tema genera <div class="wp-block-image is-style-..."><figure class="alignright">
   oppure la figure con tutte le classi: valgono entrambi). Centrata: al massimo 520px. */
figure.wp-block-image.is-style-nta-cartolina,
.wp-block-image.is-style-nta-cartolina > figure:not(.alignleft):not(.alignright) {max-width: 520px; margin: 24px auto 32px;}
.wp-block-image.is-style-nta-cartolina:has(> .alignright),
.wp-block-image.is-style-nta-cartolina:has(> .alignleft) {max-width: none; margin: 0;}
/* Allineata a destra/sinistra: il testo le scorre accanto */
.wp-block-image.is-style-nta-cartolina.alignright,
.wp-block-image.is-style-nta-cartolina > .alignright {display: block; float: right; width: 42%; max-width: 42%; margin: 8px 0 24px clamp(20px, 4vw, 40px);}
.wp-block-image.is-style-nta-cartolina.alignleft,
.wp-block-image.is-style-nta-cartolina > .alignleft {display: block; float: left; width: 42%; max-width: 42%; margin: 8px clamp(20px, 4vw, 40px) 24px 0;}

@media (max-width: 600px) {
	.wp-block-media-text.is-style-nta-cartolina.is-stacked-on-mobile .wp-block-media-text__media {width: 88%; margin: 0 auto 28px;}
	.wp-block-media-text.is-style-nta-cartolina.is-stacked-on-mobile .wp-block-media-text__content {padding: 0;}
	.wp-block-image.is-style-nta-cartolina.alignright,
	.wp-block-image.is-style-nta-cartolina.alignleft,
	.wp-block-image.is-style-nta-cartolina > .alignright,
	.wp-block-image.is-style-nta-cartolina > .alignleft {float: none; width: 100%; max-width: 100%; margin: 16px 0 28px;}
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-media-text.is-style-nta-cartolina .wp-block-media-text__media,
	figure.wp-block-image.is-style-nta-cartolina,
	.wp-block-image.is-style-nta-cartolina > figure {transition: none;}
}