/*
 * «Il sindaco» nella scheda di un Comune aderente (kit asola-sindaco-8-10, CEO 8/10).
 * Usa le variabili di tbp-enti-pagine.css. Riquadro pieno senza bordi colorati, iniziali in un cerchio crema
 * finché il Comune non manda una foto ufficiale con il consenso. Tre temi: chiaro, scuro, ToBePolo (chiaro).
 */
.tbp-ep-sindaco { --ep-crema: #F3EAD6; --ep-crema-testo: #084828; }
html[data-tbp-theme="dark"] .tbp-ep-sindaco { --ep-crema: #2B2720; --ep-crema-testo: #F3EAD6; }
html[data-tbp-theme="tobepolo"] .tbp-ep-sindaco { --ep-crema: #EADFC6; }

.tbp-ep-sindaco__carta {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-areas: "volto testo" "corpo corpo";
	gap: 16px 16px;
	align-items: center;
	margin-top: 16px;
	padding: 20px;
	border-radius: 22px;
	background: var(--ep-salvia);
}
.tbp-ep-sindaco__volto {
	grid-area: volto;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--ep-crema);
	color: var(--ep-crema-testo);
	font: 800 26px/1 var(--ep-t);
	letter-spacing: 0.02em;
}
.tbp-ep-sindaco__volto img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 25%; }
.tbp-ep-sindaco__testo { grid-area: testo; min-width: 0; }
.tbp-ep .tbp-ep-sindaco__nome { font-size: 22px; line-height: 1.15; }
.tbp-ep .tbp-ep-sindaco__ruolo { margin: 4px 0 0 !important; font: 700 15px/1.3 var(--ep-f) !important; color: var(--ep-testo); }
.tbp-ep-sindaco__mandato { margin: 2px 0 0 !important; font-size: 14px; line-height: 1.4; color: var(--ep-tenue); }
.tbp-ep-sindaco__corpo { grid-area: corpo; min-width: 0; }
.tbp-ep-sindaco__riga { margin: 0 !important; font-size: 16px; line-height: 1.55; color: var(--ep-ink); max-width: 620px; }
.tbp-ep-sindaco__contatti { list-style: none; margin: 14px 0 0 !important; padding: 0 !important; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.tbp-ep-sindaco__contatti li { margin: 0 !important; padding: 0 !important; list-style: none; overflow-wrap: anywhere; }
.tbp-ep-sindaco__contatti li::before { content: none !important; }
.tbp-ep-sindaco__contatti span { color: var(--ep-tenue); }
.tbp-ep .tbp-ep-sindaco__contatti a { color: var(--ep-link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.tbp-ep .tbp-ep-sindaco__contatti a:focus-visible { outline: 3px solid var(--ep-link); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 850px) {
	.tbp-ep-sindaco__carta {
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-areas: "volto testo" "volto corpo";
		gap: 6px 28px;
		align-items: start;
		margin-top: 20px;
		padding: 28px;
	}
	.tbp-ep-sindaco__volto { width: 112px; height: 112px; font-size: 38px; }
	.tbp-ep .tbp-ep-sindaco__nome { font-size: 26px; }
	.tbp-ep .tbp-ep-sindaco__ruolo { font-size: 16px !important; }
	.tbp-ep-sindaco__mandato { font-size: 15px; }
	.tbp-ep-sindaco__corpo { padding-top: 10px; }
	.tbp-ep-sindaco__riga { font-size: 17px; }
}

/* CEO 8/10: foto del sindaco piu grande. */
.tbp-ep .tbp-ep-sindaco__volto--foto { width: 120px !important; height: 120px !important; flex: none; }
.tbp-ep .tbp-ep-sindaco__volto--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (min-width: 850px) { .tbp-ep .tbp-ep-sindaco__volto--foto { width: 168px !important; height: 168px !important; } }
.tbp-ep-sindaco__carta:has(.tbp-ep-sindaco__volto--foto) { grid-template-columns: 120px minmax(0, 1fr); }
@media (min-width: 850px) { .tbp-ep-sindaco__carta:has(.tbp-ep-sindaco__volto--foto) { grid-template-columns: 168px minmax(0, 1fr); gap: 6px 32px; } }
@media (max-width: 849px) { .tbp-ep .tbp-ep-sindaco__volto--foto { width: 120px !important; height: 120px !important; } }