/*
 * Video Instagram (widget fm-marangoni-instagram).
 *
 * Prima del clic: card del sito in 9:16 (copertina, pulsante, avviso).
 * Dopo: la cornice di Instagram, bianca e intatta, alta quanto dice lei.
 * Instagram non scende sotto i 326 px di larghezza: le colonne si fermano li'.
 */
.fm-ig {
	--fm-ig-colonne: 3;
	--fm-ig-gap: 24px;
	--fm-ig-max: 400px;
	/* Di serie seguono i colori del Kit (e quindi anche l'inversione all'avorio). */
	--fm-ig-fondo: var(--e-global-color-fmantracite, #18191b);
	--fm-ig-accento: var(--e-global-color-primary, #ffc43d);
	--fm-ig-testo: var(--e-global-color-secondary, #f4f1e9);
	--fm-ig-raggio: 7px;
	display: grid;
	grid-template-columns: repeat(var(--fm-ig-colonne), minmax(min(326px, 100%), var(--fm-ig-max)));
	justify-content: start;
	gap: var(--fm-ig-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Fila che scorre: una riga sola, scorrimento laterale con aggancio alle card. */
.fm-ig--fila {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(326px, 82%), var(--fm-ig-max));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--fm-ig-accento) transparent;
}

.fm-ig--fila .fm-ig__card {
	scroll-snap-align: start;
}

.fm-ig__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
}

.fm-ig__schermo {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--fm-ig-raggio);
	background: var(--fm-ig-fondo);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.fm-ig__schermo--aperto {
	aspect-ratio: auto;
	background: #fff;
	box-shadow: none;
}

.fm-ig__copertina {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/* Selettore rinforzato: lo stile dei pulsanti del Kit (fondo giallo, padding) vale per ogni <button>. */
.fm-ig button.fm-ig__play,
.fm-ig button.fm-ig__play:hover,
.fm-ig button.fm-ig__play:focus {
	all: unset;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: linear-gradient(180deg, rgba(9, 10, 11, 0) 40%, rgba(9, 10, 11, 0.82) 100%) !important;
	color: var(--fm-ig-testo) !important;
	transform: none !important;
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 24px 20px;
	cursor: pointer;
	text-align: center;
}

.fm-ig__tondo {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: auto;
	margin-top: auto;
	border-radius: 50%;
	background: var(--fm-ig-accento);
	color: #111214;
	font-size: 26px;
	transition: transform 0.3s ease;
}

.fm-ig__tondo .fm-icona {
	margin-left: 3px;
}

.fm-ig__etichetta {
	font-weight: 700;
	font-size: 15px;
}

.fm-ig__avviso {
	font-size: 12px;
	opacity: 0.7;
}

.fm-ig__play:hover .fm-ig__tondo,
.fm-ig__play:focus-visible .fm-ig__tondo {
	transform: scale(1.08);
}

.fm-ig__play:hover ~ .fm-ig__copertina,
.fm-ig__schermo:hover .fm-ig__copertina {
	transform: scale(1.03);
}

.fm-ig__play:focus-visible {
	outline: 2px solid var(--fm-ig-accento);
	outline-offset: -4px;
}

.fm-ig__cornice {
	display: block;
	width: 100%;
	height: 640px;
	border: 0;
	background: #fff;
}

.fm-ig__didascalia {
	margin: 0;
	color: var(--fm-ig-testo);
	font-size: 15px;
	line-height: 1.4;
}

.fm-ig__profilo {
	display: block;
	opacity: 0.6;
	font-size: 13px;
}

/* In fondo alla card: con didascalie di una o due righe i link restano tutti alla stessa altezza. */
.fm-ig__link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fm-ig-accento);
	font-size: 14px;
	text-decoration: none;
}

.fm-ig__errore {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.fm-ig__copertina,
	.fm-ig__tondo {
		transition: none;
	}
}

/*
 * Nell'inversione all'avorio (marangoni.css) la card del video resta scura:
 * e' uno schermo, e il pulsante giallo su avorio sparirebbe. Le didascalie
 * sotto invece seguono la pagina.
 */
body.fm-negativo .fm-ig__schermo {
	--fm-ig-fondo: #18191b;
	--fm-ig-accento: #ffc43d;
	--fm-ig-testo: #f4f1e9;
}

/*
 * Nei contenitori flessibili di Elementor un widget si allarga quanto il suo
 * contenuto: con la fila (tutte le card su una riga) allargava la pagina.
 */
.elementor-widget-fm-marangoni-instagram {
	min-width: 0;
	max-width: 100%;
}

/*
 * IL RITAGLIO (opzione «Ritaglia la cornice di Instagram», accesa di serie).
 *
 * La pagina /embed/ di Instagram, misurata il 5/10/2026, e' sempre fatta cosi',
 * a qualunque larghezza L: fascia in alto 54 px (profilo e pulsante blu),
 * riquadro del media in 4:5 (L x 1,25), sotto 154 px («Mi piace», commenti).
 * I reel 9:16 stanno al centro del 4:5 fra due bande nere.
 * Lo schermo tiene la forma della card e fa da finestra: l'iframe sale di 54 px
 * e, per i reel, si allarga finche' il 9:16 riempie la finestra (16/9 : 1,25 =
 * 1,4222). Le misure in cqw sono relative alla larghezza della card.
 * SE META CAMBIA LE MISURE si correggono le tre variabili qui sotto (e il
 * Framework, che ha lo stesso widget).
 */
.fm-ig__schermo--ritaglio {
	--fm-ig-testa: 54px;
	--fm-ig-piede: 154px;
	--fm-ig-media: 1.25;
	--fm-ig-zoom: 1;
	container-type: inline-size;
}

.fm-ig__schermo--ritaglio.fm-ig__schermo--916 {
	--fm-ig-zoom: 1.43; /* 1,4222 piu' un filo, per non lasciare righe nere ai lati */
}

.fm-ig__schermo--ritaglio.fm-ig__schermo--45 {
	aspect-ratio: 4 / 5;
}

.fm-ig__schermo--ritaglio.fm-ig__schermo--aperto {
	aspect-ratio: 9 / 16;
	background: #000;
}

.fm-ig__schermo--ritaglio.fm-ig__schermo--45.fm-ig__schermo--aperto {
	aspect-ratio: 4 / 5;
}

.fm-ig__schermo--ritaglio .fm-ig__cornice {
	position: absolute;
	top: calc(-1 * var(--fm-ig-testa) - 1px);
	left: 50%;
	width: calc(100cqw * var(--fm-ig-zoom));
	height: calc(var(--fm-ig-testa) + var(--fm-ig-piede) + 100cqw * var(--fm-ig-zoom) * var(--fm-ig-media) + 2px) !important;
	max-width: none;
	transform: translateX(-50%);
	background: #000;
}