/* Font stencil: i file vanno nella cartella fonts/ del plugin. */
@font-face {
	font-family: 'stencilregular';
	src: url('fonts/stencil-webfont.woff2') format('woff2'),
		url('fonts/stencil-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/*
 * Pulsanti Anteprima e Salva: spazio fisso tra i due, sia affiancati sia uno sotto l'altro
 * (se lo spazio non basta vanno a capo). Lo stile dei pulsanti arriva dal tema.
 */
.ap-incisione-pulsanti {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ap-incisione-pulsanti > button {
	margin: 0;
}

/* Galleria non interattiva: nessun clic, nessun passaggio del mouse, quindi nessuno zoom. */
.ap-galleria-statica,
.ap-galleria-statica * {
	pointer-events: none;
	cursor: default;
}

/* Contenitore dell'immagine principale */
.ap-con-anteprima {
	position: relative;
	display: block;
}

/* L'immagine deve occupare tutto il contenitore, altrimenti le percentuali non coincidono. */
.ap-con-anteprima > img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Riquadro del testo.
 * Valori ricavati dal vecchio sito, dove l'immagine era 494 x 494 px
 * e il riquadro 200 x 310 px, a 155 px da sinistra e 134 px dall'alto.
 * In percentuale segue l'immagine a qualunque dimensione (anche su mobile).
 */
.ap-sovratesto {
	position: absolute;
	left: 31.38%;   /* 155 / 494 */
	left: 30%;   /* 155 / 494 */
	top: 27.13%;    /* 134 / 494 */
	width: 40.49%;  /* 200 / 494 */
	aspect-ratio: 200 / 310;
	overflow: hidden;
	z-index: 2;
	pointer-events: none; /* i clic passano all'immagine sotto */
	container-type: inline-size;
	font-family: 'stencilregular', Arial, sans-serif;
	text-transform: uppercase;
	line-height: normal;
}

/*
 * Righe: dimensioni in cqw (1cqw = 1% della larghezza del riquadro),
 * cioe' i px originali divisi per 2 (riquadro largo 200 px).
 */
.ap-riga-1 {
	text-align: right;
	font-size: 17.5cqw;   /* 35px */
}

.ap-riga-2 {
	text-align: left;
	font-size: 12cqw;     /* 24px */
	margin-top: -5cqw;    /* -10px */
}

.ap-riga-3 {
	text-align: left;
	font-size: 36cqw;     /* 72px */
	margin-top: -7.5cqw;  /* -15px */
	margin-left: -10cqw;  /* -20px */
}

.ap-riga-4 {
	text-align: right;
	font-size: 23.5cqw;   /* 47px */
	margin-top: -7cqw;    /* -14px */
	margin-right: -15cqw; /* -30px */
}

.ap-riga-5 {
	text-align: left;
	font-size: 44.5cqw;   /* 89px */
	margin-top: -10cqw;   /* -20px */
	margin-left: -50cqw;  /* -100px */
}

.ap-riga-6 {
	text-align: right;
	font-size: 14.5cqw;   /* 29px */
	margin-top: -5cqw;    /* -10px */
}