/**
 * La casella e le immagini
 *
 * Parte del tema Squagliasole. Caricato da inc/assets.php.
 */

/* ------------------------------------------------------------------ *
 * 3. Immagini: mai ingrandite oltre la risoluzione reale
 *
 * functions.php scrive le dimensioni native in --sq-native-width/height.
 * Il doppio tetto (100% del contenitore E dimensione nativa) fa si' che
 * un'immagine da 400px resti a 400px dentro una casella da 15rem, invece
 * di essere stirata per riempirla.
 * ------------------------------------------------------------------ */
.wp-block-post-featured-image {
	margin: 0;
	line-height: 0;
}

.sq-media-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.sq-media-box .wp-block-post-featured-image,
.sq-media-box .wp-block-post-featured-image a {
	display: flex;
	align-items: center;
	justify-content: inherit;
	height: 100%;
	width: 100%;
}

/*
 * Il tetto sull'altezza e' una LUNGHEZZA, non una percentuale.
 *
 * Con "max-height: 100%" o "78%" il vincolo si perde ogni volta che il
 * contenitore ha altezza automatica - come nell'apertura dell'articolo - e
 * l'immagine cresce senza limite: una copertina verticale arrivava a 1217px.
 * Ogni contesto dichiara il proprio --sq-tetto in rem, e da li' tutto e'
 * calcolabile.
 */
.sq-media-box {
	--sq-tetto: 32rem;
}

/* ------------------------------------------------------------------ *
 * LA CASELLA
 *
 * Il blocco riutilizzabile per le immagini di dimensioni diverse, che e' il
 * problema ricorrente di questo archivio: 61 orizzontali, 27 verticali, 13
 * quadrate, da 179 a 2560 pixel di lato.
 *
 * La regola e' una sola: ha misura fissa la CASELLA, non la foto.
 *
 *   - la casella ha un rapporto dichiarato (--sq-rapporto), quindi si adatta
 *     alla larghezza della colonna e resta identica per tutte le schede della
 *     stessa fila: i titoli sotto partono tutti dalla stessa quota;
 *   - la foto ci sta dentro centrata, mai ritagliata e mai ingrandita oltre
 *     la sua risoluzione;
 *   - il vuoto attorno non e' un difetto, e' il fondo della casella, pieno.
 *
 * Un rapporto invece di un'altezza in rem perche' cosi' funziona identica in
 * una colonna da 240px e in una da 900 senza doverla ritarare ogni volta.
 * ------------------------------------------------------------------ */
/*
 * La casella e' una misura, e un colore pieno.
 *
 * Niente bordo, niente alone, niente sfocatura attorno alla foto: quello che
 * avanza e' un fondo piatto. Il colore lo decide la foto stessa: GIALLO
 * (cioe' la pagina) sotto le foto scure, BLU sotto quelle chiare, che sul
 * giallo sparirebbero. Chiara o scura lo dice un meta dell'immagine calcolato
 * al caricamento (inc/blocchi.php), che arriva qui come classe sulla figura.
 */
.sq-casella {
	--sq-rapporto: 4 / 3;

	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--sq-rapporto);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border: 0;
}

.sq-casella:has(.is-chiara) {
	background: var(--wp--preset--color--accent);
}

.sq-casella .wp-block-post-featured-image,
.sq-casella .wp-block-post-featured-image a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.sq-casella img {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	/* Il doppio tetto: il contenitore E la risoluzione vera. Mai ingrandita. */
	max-width: min(100%, var(--sq-native-width, 100%));
	max-height: min(100%, var(--sq-native-height, 100%));
	object-fit: contain;
	outline: none;
}

/*
 * Mai ritagliata: la foto sta intera nella casella, sul fondo pieno, alla
 * sua misura o piu' piccola. Prima le orizzontali grandi riempivano la casella
 * ritagliando; in Solleone la casella e' un colore pieno e la foto un oggetto
 * appoggiato sopra, e un ritaglio la farebbe sembrare un'altra cosa.
 */
.sq-media-box img {
	width: auto;
	height: auto;
	max-width: min(100%, var(--sq-native-width, 100%));
	max-height: min(var(--sq-tetto), var(--sq-native-height, 100vh));
	object-fit: contain;
	/* nessun contorno: la foto sta sul fondo pieno, senza traccia di cornice */
	outline: none;
}

/*
 * Le verticali, a parita' di altezza, occupano molto piu' campo delle
 * orizzontali: un tetto piu' basso le riporta in scala con le altre.
 *
 * E' una frazione dello stesso --sq-tetto, quindi si compone con il contesto
 * invece di sovrascriverlo: prima questa regola vinceva per specificita' e
 * imponeva la sua percentuale a tutti i contesti.
 */
.sq-media-box .wp-block-post-featured-image.is-portrait img {
	max-height: min(calc(var(--sq-tetto) * 0.82), var(--sq-native-height, 100vh));
}