/*
 * Riquadro video.
 *
 * Due obiettivi: che il video non diventi mai enorme su uno schermo grande,
 * e che non diventi mai un francobollo su un telefono. Da qui i due limiti —
 * uno sulla larghezza, uno sull'altezza dello schermo.
 */

.atalis-video {
	margin: 1.5rem auto;
	width: 100%;
}

/* Orizzontale: si ferma a 760px, sotto scende con la pagina. */
.atalis-video--orizzontale {
	max-width: 760px;
}

/* Verticale: due limiti insieme. Non più largo di 300px, e mai così alto
   da superare metà abbondante dello schermo — perché su un telefono un 9:16
   a piena larghezza diventa una parete: si vede solo lui e sparisce tutto
   il resto della pagina. Vince il più piccolo dei due limiti. */
.atalis-video--verticale {
	max-width: min(300px, calc(56vh * 9 / 16));
}

/* Da telefono si stringe ancora: mai più di tre quarti della larghezza
   dello schermo, così restano i margini e si capisce che la pagina continua. */
@media (max-width: 600px) {
	.atalis-video--verticale {
		max-width: min(74vw, calc(52vh * 9 / 16));
	}
}

.atalis-video__cornice {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #231F20;
	box-shadow: 0 4px 20px rgba(35, 31, 32, 0.12);
}

.atalis-video--orizzontale .atalis-video__cornice {
	aspect-ratio: 16 / 9;
}

.atalis-video--verticale .atalis-video__cornice {
	aspect-ratio: 9 / 16;
}

.atalis-video__cornice iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Avviso visibile solo a chi è collegato al pannello. */
.atalis-video__avviso {
	border: 2px dashed #DED6C7;
	border-radius: 6px;
	padding: 1.25rem;
	text-align: center;
	color: #5B5648;
	font-size: 0.9375rem;
}

/* Browser vecchi che non conoscono aspect-ratio: si torna al vecchio
   trucco del riempimento proporzionale, così il riquadro non collassa. */
@supports not (aspect-ratio: 16 / 9) {
	.atalis-video--orizzontale .atalis-video__cornice {
		padding-top: 56.25%;
	}

	.atalis-video--verticale .atalis-video__cornice {
		padding-top: 177.78%;
	}
}