/* Bender — frontend */

/* Il frame prende il posto di un <img>, cioè di un elemento inline
   sostituito: deve limitarsi a contenerlo, non a definire un box proprio.
   Con display:block + aspect-ratio era il frame a dettare le dimensioni, e
   ogni tema che dimensiona l'immagine per conto suo — via classi (h-100,
   w-100, object-fit-*) o via regole sul selettore img, che il wrapper non
   può ereditare — si ritrovava un riquadro di proporzioni diverse. */
.pg-frame {
	position: relative;
	display: inline-block;
	vertical-align: bottom; /* niente spazio del discendente sotto al frame */
	overflow: hidden;
	line-height: 0;
	max-width: 100%;
	/* Le versioni <= 0.1.9 mettevano aspect-ratio nello style inline: qui si
	   neutralizza per le pagine già in cache generate da quelle versioni. */
	aspect-ratio: auto !important;
}

/* Nessun width/height/object-fit imposto: le dimensioni restano quelle che il
   tema dava all'<img>, quindi il box è identico a quello del sito senza
   plugin. Le classi del tema restano anche sull'<img> (il JS di
   lightbox/slider che le usa come selettore continua a trovarlo), ma margini,
   float e posizionamento vanno azzerati: il wrapper ha ereditato class/style
   e li applica già lui, altrimenti si sommerebbero. L'!important serve
   perché quelle classi (Bootstrap in testa) sono spesso !important a loro
   volta. */
.pg-frame img.pg-lqip {
	/* Il tema perde il controllo dell'immagine anche quando la dimensiona con
	   un combinatore figlio (`.slide > img`): incapsulandola in un <span> la
	   regola non la raggiunge più, e senza il suo `max-width:100%` l'immagine
	   sborderebbe dal frame (che la ritaglia con overflow:hidden). */
	max-width: 100%;
	margin: 0 !important;
	float: none !important;
	position: static !important;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* Con JS attivo la low-res fa da LQIP sfocata finché il canvas non è pronto.
   Senza JS (crawler "semplici", noscript) resta nitida e watermarkata. */
.pg-js .pg-frame:not(.pg-fallback) img.pg-lqip {
	filter: blur(16px) saturate(1.08);
	transform: scale(1.06);
}

.pg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.pg-frame.pg-ready .pg-canvas {
	opacity: 1;
}

/* Shimmer di caricamento */
.pg-js .pg-frame:not(.pg-ready):not(.pg-fallback)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
	background-size: 250% 100%;
	animation: pg-shimmer 1.4s ease infinite;
	pointer-events: none;
}

@keyframes pg-shimmer {
	from { background-position: 130% 0; }
	to   { background-position: -30% 0; }
}

/* Badge di protezione */
.pg-frame[data-pg-badge].pg-ready::after {
	content: var(--pg-badge, "\00a9  protetta");
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(6px);
	padding: 5px 9px;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	animation: pg-badge-in 0.5s ease 0.3s forwards;
}

@keyframes pg-badge-in {
	to { opacity: 1; }
}