/**
 * Piero Blocks — un unico foglio di stile, e WordPress lo carica solo nelle
 * pagine dove c'e' almeno un blocco nostro.
 *
 * I colori NON sono scritti a mano: sono quelli scelti nel tema. Cosi' i
 * blocchi si vestono da soli, anche su un sito con un tema diverso.
 */

:root {
	--piero-bordo: var( --wp--preset--color--argento, #dce6ea );
	--piero-tenue: var( --wp--preset--color--tenue, #5a6772 );
	--piero-chiaro: var( --wp--preset--color--chiaro, #f6f8f9 );
	--piero-forte: var( --wp--preset--color--acciaio, #2e4a5e );
	--piero-raggio: 12px;
	--piero-vuoto: 1.35rem;
}

/* ---------- pezzi comuni ---------- */

.piero-colonne-1 { --piero-col: 1; }
.piero-colonne-2 { --piero-col: 2; }
.piero-colonne-3 { --piero-col: 3; }
.piero-colonne-4 { --piero-col: 4; }
.piero-colonne-5 { --piero-col: 5; }
.piero-colonne-6 { --piero-col: 6; }

.piero-allinea-centro { text-align: center; }
.piero-allinea-destra { text-align: right; }
.piero-allinea-sinistra { text-align: left; }

.piero-icona { width: 2.2em; height: 2.2em; display: block; }

/* ---------- griglia e schede ---------- */

.piero-griglia {
	display: grid;
	grid-template-columns: repeat( var( --piero-col, 3 ), minmax( 0, 1fr ) );
	gap: var( --piero-vuoto );
}

@media ( max-width: 980px ) {
	.piero-griglia { grid-template-columns: repeat( min( var( --piero-col, 3 ), 3 ), minmax( 0, 1fr ) ); }
}

@media ( max-width: 720px ) {
	.piero-griglia { grid-template-columns: repeat( min( var( --piero-col, 3 ), 2 ), minmax( 0, 1fr ) ); }
}

@media ( max-width: 460px ) {
	.piero-griglia { grid-template-columns: 1fr; }
}

.piero-scheda { display: flex; flex-direction: column; gap: 0.65rem; height: 100%; }
.piero-scheda__foto { display: block; overflow: hidden; border-radius: var( --piero-raggio ); background: var( --piero-chiaro ); }
.piero-scheda__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.piero-scheda__foto:hover img { transform: scale( 1.04 ); }
.piero-scheda__corpo { display: flex; flex-direction: column; gap: 0.3rem; }
.piero-scheda__titolo { font-size: 1.05rem; margin: 0; line-height: 1.35; }
.piero-scheda__titolo a { text-decoration: none; color: inherit; }
.piero-scheda__titolo a:hover { text-decoration: underline; }
.piero-scheda__prezzo { font-weight: 600; }
.piero-scheda__prezzo del { opacity: .55; font-weight: 400; margin-right: .4em; }
.piero-scheda__testo { margin: 0; color: var( --piero-tenue ); font-size: .95em; }

/* ---------- carosello ---------- */

.piero-carosello { position: relative; }
.piero-carosello__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( var( --piero-col, 4 ) - 1 ) * var( --piero-vuoto ) ) / var( --piero-col, 4 ) );
	gap: var( --piero-vuoto );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.piero-carosello__pista::-webkit-scrollbar { display: none; }
.piero-carosello__voce, .piero-carosello__pista > * { scroll-snap-align: start; }

@media ( max-width: 980px ) { .piero-carosello__pista { grid-auto-columns: calc( ( 100% - var( --piero-vuoto ) * 2 ) / 2.4 ); } }
@media ( max-width: 600px ) { .piero-carosello__pista { grid-auto-columns: 82%; } }

.piero-carosello__freccia {
	position: absolute;
	top: 38%;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var( --piero-bordo );
	background: #fff;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .1 );
}
.piero-carosello__freccia--su { left: -18px; }
.piero-carosello__freccia--giu { right: -18px; }
.piero-carosello__freccia:disabled { opacity: .35; cursor: default; }
.piero-carosello.e-senza-frecce .piero-carosello__freccia { display: none; }

@media ( max-width: 782px ) {
	.piero-carosello__freccia--su { left: 2px; }
	.piero-carosello__freccia--giu { right: 2px; }
}

/* ---------- riquadro con icona ---------- */

.piero-iconbox { display: flex; gap: 0.9rem; }
.piero-iconbox--sopra { flex-direction: column; }
.piero-iconbox--sopra.piero-allinea-centro { align-items: center; }
.piero-iconbox--lato { flex-direction: row; align-items: flex-start; text-align: left; }
.piero-iconbox--riquadro {
	background: var( --piero-chiaro );
	border: 1px solid var( --piero-bordo );
	border-radius: var( --piero-raggio );
	padding: 1.5rem;
	height: 100%;
}
.piero-iconbox__icona { color: var( --piero-forte ); flex: 0 0 auto; margin-bottom: var( --piero-iconbox-icona-sotto, 0 ); }
.piero-iconbox__titolo { margin: 0 0 .2rem; font-size: var( --piero-iconbox-titolo, 1.15rem ); }
.piero-iconbox__testo { margin: 0; color: var( --piero-tenue ); }
.piero-iconbox__link { display: inline-block; margin-top: .5rem; font-weight: 600; }

/* ---------- banner ---------- */

.piero-banner {
	position: relative;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	border-radius: var( --piero-raggio );
	overflow: hidden;
	padding: 3rem 2rem;
}
.piero-banner__velo { position: absolute; inset: 0; background: #000; }
.piero-banner__corpo { position: relative; z-index: 1; width: 100%; max-width: 640px; }
.piero-banner.piero-allinea-centro .piero-banner__corpo { margin: 0 auto; }
.piero-banner.piero-allinea-destra .piero-banner__corpo { margin-left: auto; }
.piero-banner__titolo { margin: 0 0 .5rem; color: inherit; }
.piero-banner__testo { margin: 0 0 1.2rem; }
.piero-banner__pulsante { display: inline-block; text-decoration: none; }

/* ---------- linguette ---------- */

.piero-linguette__barra { display: none; }
.piero-linguette.e-pronta .piero-linguette__barra { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var( --piero-bordo ); }
.piero-linguette.e-pronta .piero-linguette__titolo-fuori { display: none; }
.piero-linguette__voce {
	border: 0;
	background: none;
	padding: .8rem 1.1rem;
	font: inherit;
	font-weight: 600;
	color: var( --piero-tenue );
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.piero-linguette__voce.e-attiva { color: inherit; border-bottom-color: var( --piero-forte ); }
.piero-linguette__pannello { padding: 1.3rem 0; }
.piero-linguette.e-pronta .piero-linguette__pannello[hidden] { display: none; }

.piero-linguette--lato.e-pronta { display: grid; grid-template-columns: minmax( 160px, 220px ) 1fr; gap: 1.5rem; }
.piero-linguette--lato.e-pronta .piero-linguette__barra { flex-direction: column; border-bottom: 0; border-right: 1px solid var( --piero-bordo ); }
.piero-linguette--lato.e-pronta .piero-linguette__voce { text-align: left; border-bottom: 0; border-right: 2px solid transparent; margin: 0 -1px 0 0; }
.piero-linguette--lato.e-pronta .piero-linguette__voce.e-attiva { border-right-color: var( --piero-forte ); }

@media ( max-width: 600px ) {
	.piero-linguette--lato.e-pronta { grid-template-columns: 1fr; }
	.piero-linguette--lato.e-pronta .piero-linguette__barra { flex-direction: row; border-right: 0; border-bottom: 1px solid var( --piero-bordo ); }
}

/* ---------- fisarmonica ---------- */

.piero-fisarmonica__riga { border-bottom: 1px solid var( --piero-bordo ); }
.piero-fisarmonica__domanda {
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	font-weight: 600;
	position: relative;
	list-style: none;
}
.piero-fisarmonica__domanda::-webkit-details-marker { display: none; }
.piero-fisarmonica__domanda::after {
	content: "";
	position: absolute;
	right: .4rem;
	top: 1.35rem;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform .2s ease;
	opacity: .6;
}
.piero-fisarmonica__riga[open] .piero-fisarmonica__domanda::after { transform: rotate( -135deg ); }
.piero-fisarmonica__risposta { padding: 0 0 1.1rem; }

/* ---------- testimonianze ---------- */

.piero-testimonianza {
	margin: 0;
	background: var( --piero-chiaro );
	border: 1px solid var( --piero-bordo );
	border-radius: var( --piero-raggio );
	padding: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.piero-testimonianza__stelle { color: #f0a92b; letter-spacing: 2px; }
.piero-testimonianza__stelle .e-vuota { opacity: .25; }
.piero-testimonianza__testo { margin: 0; border: 0; padding: 0; font-size: 1em; }
.piero-testimonianza__testo p { margin: 0 0 .6rem; }
.piero-testimonianza__firma { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.piero-testimonianza__foto { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }
.piero-testimonianza__nome { display: block; }
.piero-testimonianza__ruolo { color: var( --piero-tenue ); font-size: .9em; }

/* ---------- elenco categorie ---------- */

.piero-categorie {
	display: grid;
	grid-template-columns: repeat( var( --piero-col, 4 ), minmax( 0, 1fr ) );
	gap: var( --piero-vuoto );
}
@media ( max-width: 720px ) { .piero-categorie { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }

.piero-categoria { display: block; text-decoration: none; color: inherit; text-align: center; }
.piero-categoria__foto { display: block; border-radius: var( --piero-raggio ); overflow: hidden; background: var( --piero-chiaro ); margin-bottom: .6rem; }
.piero-categoria__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.piero-categoria__nome { display: block; font-weight: 600; }
.piero-categoria__conteggio { color: var( --piero-tenue ); font-size: .9em; }

/* ---------- contatore ---------- */

.piero-contatore { text-align: center; }
.piero-contatore__icona { margin: 0 auto .5rem; color: var( --piero-forte ); }
.piero-contatore__numero { font-size: clamp( 2.2rem, 5vw, 3.4rem ); font-weight: 700; line-height: 1.1; }
.piero-contatore__etichetta { color: var( --piero-tenue ); margin-top: .3rem; }

/* ---------- briciole ---------- */

.piero-briciole { font-size: .9em; color: var( --piero-tenue ); }
.piero-briciole a { color: inherit; text-decoration: none; }
.piero-briciole a:hover { text-decoration: underline; }
.piero-briciole__sep { opacity: .5; }

/* ---------- mappa ---------- */

.piero-mappa { position: relative; border-radius: var( --piero-raggio ); overflow: hidden; background: var( --piero-chiaro ); }
.piero-mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.piero-mappa__attiva {
	width: 100%;
	height: 100%;
	border: 1px dashed var( --piero-bordo );
	background: var( --piero-chiaro );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	font: inherit;
	color: inherit;
}
.piero-mappa__indirizzo { color: var( --piero-tenue ); font-size: .95em; }

/* ---------- social ---------- */

.piero-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.piero-social.piero-allinea-centro { justify-content: center; }
.piero-social.piero-allinea-destra { justify-content: flex-end; }
.piero-social__voce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc( var( --piero-social-dim, 22px ) * 1.9 );
	height: calc( var( --piero-social-dim, 22px ) * 1.9 );
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}
.piero-social__voce svg { width: var( --piero-social-dim, 22px ); height: var( --piero-social-dim, 22px ); }
.piero-social--tondo .piero-social__voce { border: 1px solid var( --piero-bordo ); border-radius: 50%; }
.piero-social--tondo .piero-social__voce:hover { background: var( --piero-chiaro ); }
.piero-social__voce.e-copiato { color: #1a7f4b; }

/* ---------- prezzo e carrello nella scheda ---------- */

.piero-prezzo { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.piero-prezzo del { opacity: .55; font-weight: 400; }
.piero-prezzo__offerta {
	background: var( --piero-forte );
	color: #fff;
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .15em .5em;
	border-radius: 999px;
}
.piero-carrello--largo a { display: block; text-align: center; }

/* ---------- modulo contatti ---------- */

.piero-contatti__nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.piero-contatti__campo { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.piero-contatti__campo input, .piero-contatti__campo textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var( --piero-bordo );
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: inherit;
}
.piero-contatti__campo input:focus, .piero-contatti__campo textarea:focus { outline: 2px solid var( --piero-forte ); outline-offset: 1px; }
.piero-contatti__consenso { display: flex; gap: .5rem; font-size: .92em; color: var( --piero-tenue ); }
.piero-contatti__esito { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem; }
.piero-contatti__esito.e-ok { background: #e8f5ee; color: #14663c; }
.piero-contatti__esito.e-errore { background: #fdecea; color: #8c2018; }

/* ---------- come si vedono nell'editor ---------- */

.piero-editor-linguetta, .piero-editor-fisa-voce { border: 1px solid var( --piero-bordo ); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; }
.piero-editor-linguetta__titolo, .piero-editor-fisa-voce__titolo { font-weight: 700; margin-bottom: .4rem; }
.piero-editor-testimonianza { border: 1px solid var( --piero-bordo ); border-radius: 10px; padding: 1rem; }
.piero-editor-testimonianza__firma { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; color: var( --piero-tenue ); font-size: .9em; }
.piero-editor-testimonianze { display: grid; grid-template-columns: repeat( var( --piero-col, 3 ), minmax( 0, 1fr ) ); gap: 1rem; }

/* La scheda disegnata con un modello: i pezzi in colonna, il pulsante in fondo. */
.piero-scheda--modello { display: flex; flex-direction: column; gap: .5rem; }
.piero-scheda--modello > * { margin: 0; }
.piero-scheda--modello .wp-block-post-title { font-size: 1.05rem; line-height: 1.35; }
.piero-scheda--modello .wp-block-post-title a { text-decoration: none; color: inherit; }
.piero-scheda--modello .wp-block-post-featured-image img { width: 100%; height: auto; object-fit: cover; }
.piero-scheda--modello .piero-carrello { margin-top: auto; padding-top: .3rem; }

/* WooCommerce marca il prezzo scontato con <ins>: senza questo si vede sottolineato. */
.piero-prezzo ins, .piero-scheda__prezzo ins, .piero-scheda--modello ins { text-decoration: none; background: none; }