/*
Theme Name: Poma 28
Theme URI: https://www.suffragio.it/poma28/
Description: Tema della Scuola dell'infanzia e sezione primavera S. Maria del Suffragio, via Poma 28, Milano. Tema figlio di Twenty Twenty-Five: riprende i colori e l'impostazione del sito storico su una base a blocchi, adattiva e aggiornabile. Registra il tipo di contenuto "Archivio fotografico" ereditato dal tema DokeDoke, perché le gallerie pubblicate dal 2015 restino raggiungibili.
Author: Scuola dell'infanzia Poma 28
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poma28
Tags: one-column, custom-colors, custom-menu, custom-logo, featured-images, full-site-editing, block-patterns, translation-ready, wide-blocks, accessibility-ready
*/

/*
 * Quasi tutto lo stile di questo tema sta in theme.json.
 * Qui restano solo le poche regole che theme.json non sa esprimere.
 */

/* Testata: il titolo sopra l'illustrazione, leggibile su qualsiasi foto. */
.poma-testata__titolo {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* Barra di navigazione: la voce della pagina corrente resta segnata. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current_page_item > a {
	box-shadow: inset 0 -3px 0 0 currentColor;
}

/* Griglia dell'archivio fotografico: la miniatura riempie sempre il riquadro,
   così le schede restano allineate anche con foto di proporzioni diverse. */
.poma-galleria-elenco .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Galleria di una singola giornata: le foto allegate al contenuto. */
.poma-allegati {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: var(--wp--preset--spacing--40, 2rem) 0;
	padding: 0;
	list-style: none;
}

.poma-allegati li {
	margin: 0;
}

.poma-allegati a {
	display: block;
	line-height: 0;
}

.poma-allegati img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	transition: opacity .2s ease;
}

.poma-allegati a:hover img,
.poma-allegati a:focus img {
	opacity: .82;
}

.poma-allegati__vuoto {
	color: var(--wp--preset--color--contrast-2, #6b6b6b);
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.poma-allegati img {
		transition: none;
	}
}

/* Gallerie classiche [gallery], quelle dell'archivio storico e delle pagine.
   WordPress stampava da sé il CSS delle colonne solo per i vecchi temi: con un
   tema a blocchi non lo fa più, e senza quelle regole le foto cadono una sotto
   l'altra. Qui le rimettiamo in griglia, adattandosi allo schermo. */
.gallery {
	display: grid;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: var(--wp--preset--spacing--40, 2rem) 0;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

.gallery-columns-1 {
	grid-template-columns: 1fr;
}

.gallery-columns-2 {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.gallery-columns-3 {
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.gallery-columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}

.gallery-columns-5,
.gallery-columns-6,
.gallery-columns-7,
.gallery-columns-8,
.gallery-columns-9 {
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

.gallery .gallery-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.gallery .gallery-icon {
	line-height: 0;
	margin: 0;
}

.gallery .gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 2px;
	transition: opacity .2s ease;
}

.gallery .gallery-item a:hover img,
.gallery .gallery-item a:focus img {
	opacity: .82;
}

.gallery .gallery-caption {
	margin: .4rem 0 0;
	font-size: var(--wp--preset--font-size--small, .875rem);
	color: var(--wp--preset--color--contrast-2, #6b6560);
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.gallery .gallery-item img {
		transition: none;
	}
}