/* Composizione: tela a 12 colonne. I pezzi si posizionano con le variabili scritte da posizione.php
   (--c colonna, --s ampiezza, --r riga, --rs altezza in righe, --z livello, --x/--y spostamento, --rot rotazione). */
.fc-comp {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(var(--fc-riga, 90px), auto);
	gap: var(--fc-spazio, 16px);
	position: relative;
	isolation: isolate;
	min-height: var(--fc-min, auto);
}
.fc-comp > * { grid-column: 1 / -1; margin: 0 !important; min-width: 0; max-width: none !important; }
.fc-comp > .fc-pezzo {
	grid-column: var(--c, auto) / span var(--s, 12);
	grid-row: var(--r, auto) / span var(--rs, 1);
	z-index: var(--z, 1);
	align-self: var(--al, stretch);
	translate: var(--x, 0px) var(--y, 0px);
	rotate: var(--rot, 0deg);
	position: relative;
}
/* se la Composizione ha un colore del testo, titoli e paragrafi lo seguono (il tema altrimenti li colora di scuro) */
.fc-comp.has-text-color :is(h1, h2, h3, h4, h5, h6, p):not(.has-text-color) { color: inherit; }
/* titoli con fondo: un po' d'aria intorno */
.fc-comp > :is(h1, h2, h3, h4).has-background { padding: .45em .6em; }

/* immagini che riempiono la cella (anche se il pezzo occupa più righe) */
.fc-comp > .fc-riempi, .fc-comp > .fc-riempi img, .fc-comp > .fc-riempi .wp-block-image,
.fc-comp > .fc-riempi.wp-block-image img { width: 100%; height: 100%; }
.fc-comp > .fc-riempi img { object-fit: cover; display: block; }
.fc-comp > .fc-riempi.wp-block-image, .fc-comp > .fc-riempi .wp-block-image { margin: 0; }

/* nell'editor: contorno tratteggiato della tela, per capire dove si appoggiano i pezzi */
.editor-styles-wrapper .fc-comp { outline: 1px dashed rgba(127,127,127,.35); outline-offset: 4px; }
.editor-styles-wrapper .fc-comp > .block-list-appender { grid-column: 1 / -1; }

/* sul telefono i pezzi vanno uno sotto l'altro, nell'ordine scelto */
@media (max-width: 781px) {
	.fc-comp { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; min-height: 0; }
	.fc-comp > .fc-pezzo { grid-column: 1 / -1 !important; grid-row: auto !important; translate: none !important; rotate: none !important; order: var(--o, 0); }
	.fc-comp > .fc-nascondi-tel { display: none !important; }
	.fc-comp > .fc-riempi { height: auto; }
	.fc-comp > .fc-riempi img { height: auto; aspect-ratio: 4 / 3; }
}