/* ============================================================
   Associazione - trascrizione di associazione.css dell'HTML di
   riferimento (.chisiamo-grid, .chisiamo-title, .chisiamo-text,
   .chisiamo-media, .assoc-stats, .assoc-stat, .valori-box,
   .values-list, .value-item, .zone-table, .zone-note,
   .info-boxes, .info-box, .punti-vendita, .team-grid, .team-card).

   .section, .container e i colori stanno gia' altrove: il primo
   in style.css, i secondi nei preset di theme.json.
   ============================================================ */

/* ─── CHI SIAMO ──────────────────────────────────────── */
.chisiamo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
	row-gap: 0;
	margin-bottom: 64px;
	align-items: start;
}

.chisiamo-title { grid-column: 1; grid-row: 1; }
.chisiamo-text  { grid-column: 1; grid-row: 2; }

.chisiamo-media {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: stretch;
	border-radius: var(--wp--custom--radius-lg);
	overflow: hidden;
	min-height: 360px;
}

/* Nel riferimento la classe sta sul contenitore dell'<img>; con core/image quel
   contenitore e' la <figure>, quindi le regole restano identiche.
   La doppia classe serve a battere `.wp-block-image img { height: auto }` di
   core, che ha la stessa specificita' e vincerebbe per ordine di caricamento. */
.chisiamo-media.wp-block-image img,
.chisiamo-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chisiamo-title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 24px;
}

.chisiamo-text p {
	font-size: .97rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.75;
	margin-bottom: 20px;
}

/* Il layout di flusso di core azzera il margine dell'ultimo figlio con una
   regola .wp-container-... > *:last-child, che batte per specificita' quella
   qui sopra. Nel riferimento quel margine resta. */
.chisiamo-text p:last-child {
	margin-bottom: 20px;
}

/* ─── STATISTICHE ────────────────────────────────────── */
.assoc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.assoc-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px 28px;
	border-left: 1px solid var(--wp--preset--color--border-line);
}

.assoc-stat:first-child { border-left: none; }

.assoc-stat-num {
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
}

.assoc-stat-label {
	font-size: .95rem;
	color: var(--wp--preset--color--text-muted);
	margin-top: 12px;
	font-weight: 400;
}

/* ─── I NOSTRI VALORI ────────────────────────────────── */
/* Nel riferimento la classe sta sulla stessa .container della sezione, quindi
   il suo padding di 56px sostituisce il padding-inline della .container. */
.valori-box {
	background: var(--wp--preset--color--surface-alt);
	/* Letterale anche nel riferimento: non e' --radius (12px) ne' --radius-lg (20px). */
	border-radius: 16px;
	padding: 56px;
}

/* Il margine di .section-header, che sta in style.css, lo azzera il layout di
   flusso di core con .wp-container-... > *. Stessa trappola di
   .chisiamo-text p:last-child qui sopra. */
.valori-box .section-header {
	margin-bottom: 56px;
}

/* Su telefono deve seguire le altre intestazioni, che style.css porta a 32px:
   la regola qui sopra e' piu' specifica e vincerebbe. */
@media (max-width: 720px) {
	.valori-box .section-header {
		margin-bottom: 32px;
	}
}

/* Nel riferimento e' una <ul> di <li>: core/list-item non accetta blocchi
   annidati ne' una className, quindi qui la lista e' fatta di gruppi. Le regole
   sono tutte per classe, non per elemento, quindi valgono identiche. */
.values-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.value-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 28px;
	border-left: 1px solid var(--wp--preset--color--border-line);
}

.value-item:nth-child(4n+1) { border-left: none; padding-left: 0; }
.value-item:nth-child(4n)   { padding-right: 0; }

/* Tre classi per battere .wp-container-... > :first-child, che vale 0,2,0 e
   azzererebbe il margine di 2px. */
.values-list .value-item .value-icon {
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
	color: var(--wp--preset--color--amber);
}

.value-icon svg { width: 28px; height: 28px; display: block; }

.value-item strong {
	display: block;
	font-size: .92rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.value-item p {
	font-size: .88rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Nel riferimento lo <strong> del titolo e' figlio diretto del <div> e prende
   il colore del corpo. Qui core lo obbliga dentro un core/paragraph, che la
   regola qui sopra ha gia' portato a text-muted: il colore va restituito. */
.value-item .value-title { color: inherit; }

/* ─── INCONTRI DI ZONA ───────────────────────────────── */
/* core/table avvolge la tabella in una <figure>, che e' l'elemento che prende
   la className del blocco: le regole scritte nel riferimento per l'elemento
   <table> qui vanno su .zone-table table. La doppia classe serve invece a
   battere le regole di core, che hanno la stessa specificita' e vincerebbero
   per ordine di caricamento. */
.zone-table.wp-block-table {
	margin-bottom: 32px;
	/* Sotto i 400px la tabella e' piu' larga del contenitore: l'overflow-x che
	   core mette sulla <figure> fa comparire una barra di scorrimento, e la
	   sezione diventa 15px piu' alta del riferimento. La barra si nasconde come
	   gia' si fa nel carosello - la tabella resta trascinabile, ma non occupa
	   spazio. Nel riferimento quel testo in eccesso e' tagliato e irraggiungibile:
	   qui almeno si raggiunge. */
	scrollbar-width: none;
}

.zone-table.wp-block-table::-webkit-scrollbar {
	display: none;
}

.zone-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

/* core disegna un bordo su tutti e quattro i lati di ogni cella e uno spesso
   sotto la testata; nel riferimento c'e' solo la linea orizzontale. */
.zone-table.wp-block-table thead {
	border-bottom: none;
}

.zone-table.wp-block-table th {
	text-align: left;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wp--preset--color--amber);
	padding: 12px 20px;
	border: none;
	border-bottom: 2px solid var(--wp--preset--color--border-line);
}

.zone-table.wp-block-table td {
	padding: 16px 20px;
	color: var(--wp--preset--color--text-muted);
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--border-line);
	vertical-align: top;
}

.zone-table.wp-block-table tbody tr:last-child td { border-bottom: none; }

/* Nel riferimento la prima cella di ogni riga porta .zona-nome. core/table non
   sa mettere una classe sulla singola cella e in questa tabella la zona e'
   sempre la prima colonna. */
.zone-table.wp-block-table tbody td:first-child {
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

/* ─── Tabella zone su telefono ───────────────────────── */
/* Quattro colonne vogliono 367px e ne restano 327: nel riferimento la tabella
   esce dal contenitore e il testo di destra e' tagliato. Qui sotto i 720px
   ogni riga diventa un riquadro e ogni valore si porta dietro l'etichetta
   della sua colonna, che zone_table_labels() in functions.php scrive nel
   data-label. Divergenza voluta dal proprietario. */
@media (max-width: 720px) {
	.zone-table.wp-block-table thead {
		display: none;
	}

	.zone-table table,
	.zone-table tbody,
	.zone-table tr,
	.zone-table.wp-block-table td {
		display: block;
		width: 100%;
	}

	.zone-table.wp-block-table tbody tr {
		padding: 16px 0;
		border-bottom: 1px solid var(--wp--preset--color--border-line);
	}

	.zone-table.wp-block-table tbody tr:last-child {
		border-bottom: none;
	}

	.zone-table.wp-block-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 3px 0;
		border: none;
		text-align: right;
	}

	.zone-table.wp-block-table td::before {
		content: attr(data-label);
		flex: none;
		font-size: .78rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--wp--preset--color--amber);
		text-align: left;
	}

	/* La zona fa da titolo del riquadro: niente etichetta e niente incolonnamento. */
	.zone-table.wp-block-table tbody td:first-child {
		display: block;
		white-space: normal;
		font-size: 1.05rem;
		padding-bottom: 6px;
		text-align: left;
	}

	.zone-table.wp-block-table tbody td:first-child::before {
		content: none;
	}
}

.zone-note {
	text-align: center;
	font-size: .9rem;
	color: var(--wp--preset--color--text-muted);
}

.zone-note a { color: var(--wp--preset--color--amber); font-weight: 600; }
.zone-note a:hover { text-decoration: underline; }

/* ─── MIELE TRENTINO ─────────────────────────────────── */
/* .info-box esiste anche in servizi.css, dove il riferimento la disegna come un
   riquadro verde pieno. Qui e' un blocco trasparente: due cose diverse con lo
   stesso nome. Non serve piu' annullare a mano le proprieta' dell'altra
   versione - servizi.css su questa pagina non si carica, come nel riferimento,
   dove ogni foglio sta nella pagina sua. L'ambito con l'id della sezione resta
   perche' e' nel riferimento. */
.info-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

#miele-trentino .info-box {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

#miele-trentino .info-box + .info-box {
	padding-left: 48px;
	border-left: 1px solid var(--wp--preset--color--border-line);
}

/* Due classi: il margine di un figlio diretto di un gruppo lo azzera
   .wp-container-... > *, che con una sola vale quanto questa regola. */
.info-box .info-box-body h3 {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 10px;
	color: var(--wp--preset--color--secondary);
	line-height: 1.3;
}

.info-box .info-box-body > p {
	font-size: .9rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.65;
	margin-bottom: 16px;
}

/* L'ultimo paragrafo del riquadro non ripete il margine degli altri. Serve la
   stessa specificita' della regola qui sopra piu' la classe, altrimenti perde:
   e' quello che prima faceva un !important. */
.info-box .info-box-body > p.info-box-contact {
	margin-bottom: 0;
}

.info-box-contact a {
	color: var(--wp--preset--color--amber);
	font-weight: 600;
}

.info-box-contact a:hover { text-decoration: underline; }

.punti-vendita {
	display: flex;
	flex-direction: column;
}

/* La voce dell'elenco e' un gruppo senza classe, come il <li> del riferimento
   che nemmeno lui ne ha una. Vedi il commento nel pattern per il perche' non
   sia una core/list. */
.punti-vendita > * {
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--border-line);
}

.punti-vendita > *:first-child {
	padding-top: 0;
	border-top: none;
}

.punti-vendita strong {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--text-base);
	margin-bottom: 2px;
}

/* Fa le veci dello <span> del riferimento, e per farlo davvero deve tornare
   inline: la riga di uno <span> non la decide lui, gliela detta lo strut del
   <li>, e un blocco al suo posto disegna la propria - riga piu' bassa e testo
   spostato di un pixel. Le altre tre dichiarazioni sono quelle del riferimento. */
.punti-vendita p:last-child {
	display: inline;
	font-size: .82rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.4;
}

/* ─── CONSIGLIO DIRETTIVO ────────────────────────────── */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: 6px;
	padding: 28px 20px;
}

.team-ruolo {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
}

/* Nel riferimento e' un <h3>. Qui il nome e' un paragrafo con la sua classe:
   vedi la nota in patterns/associazione-direttivo.php.
   La spaziatura fra lettere e' quella che theme.json da' alle intestazioni: un
   paragrafo non la eredita, e senza di essa "Claudio Antoniolli" andava a capo
   a 480px mentre nel riferimento sta su una riga. Corpo, peso e colore erano
   gia' stati trasferiti; questa mancava. */
.team-card .team-nome {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: calc(-0.06em + 0.8px);
	color: var(--wp--preset--color--secondary);
}

.team-zona {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .85rem;
	color: var(--wp--preset--color--text-muted);
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 960px) {
	.info-boxes { grid-template-columns: 1fr; gap: 40px; }
	#miele-trentino .info-box + .info-box {
		padding-left: 0;
		padding-top: 40px;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--border-line);
	}
	.chisiamo-grid { grid-template-columns: 1fr; gap: 40px; }
	.chisiamo-title,
	.chisiamo-text,
	.chisiamo-media { grid-column: auto; grid-row: auto; }
	.assoc-stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.assoc-stat:nth-child(2n+1) { border-left: none; }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.values-list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.value-item { border-left: 1px solid var(--wp--preset--color--border-line); padding-left: 28px; padding-right: 28px; }
	.value-item:nth-child(2n+1) { border-left: none; padding-left: 0; }
	.value-item:nth-child(2n)   { padding-right: 0; }
}

@media (max-width: 720px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.assoc-stats { grid-template-columns: repeat(2, 1fr); }
	.zone-table table { font-size: .82rem; }
	.zone-table.wp-block-table th,
	.zone-table.wp-block-table td { padding: 10px 12px; }
}

@media (max-width: 480px) {
	.assoc-stats { grid-template-columns: 1fr; row-gap: 0; }
	.assoc-stat {
		border-left: none;
		padding: 24px 0;
		border-top: 1px solid var(--wp--preset--color--border-line);
	}
	.assoc-stat:first-child { border-top: none; padding-top: 0; }
	.values-list { grid-template-columns: 1fr; row-gap: 0; }
	.value-item {
		border-left: none;
		padding: 24px 0;
		border-top: 1px solid var(--wp--preset--color--border-line);
	}
	.value-item:first-child { border-top: none; padding-top: 0; }
}