/* La pagina di chi insegna, /chi-insegna/<nome>/ (kit pagina-chi-insegna-13-10, CEO 13/10/2026).
 *
 * I componenti sono quelli di «Artigiani verificati» e «Insegna su ToBePolo»: css/tbp-verificati.css si carica prima di
 * questo foglio e fa titoli, testi, icone, collegamenti, righe con il titolo a sinistra, temi chiaro, scuro e ToBePolo.
 * Le schede di mestieri ed esperienze sono quelle del Catalogo (css/tbp-discovery-cards.css e i fogli che le seguono):
 * qui si decide solo in quante colonne stanno. Stessi gettoni (--ver-*), stessi spazi (4-8-12-16-24-32-48), stessi raggi.
 * Niente bordi colorati di lato o in alto, niente ombre, niente gradienti, niente «·», nessun bottone del kit, nessun JavaScript.
 *
 * In fondo, fuori dalla pagina: il nome di chi insegna nella scheda di un'esperienza, il collegamento nel foglio di
 * «Artigiani verificati», la riga «La tua pagina pubblica» nel pannello. */

html body .tbp-ver.tbp-ci {
	--ci-bollino: #2F80ED;
	--ci-anello: #FFFFFF;
}
html[data-tbp-theme="dark"] body .tbp-ver.tbp-ci { --ci-anello: #121A18; }
html body .tbp-ver.tbp-ci #che-cosa-insegna { scroll-margin-top: 96px; }

/* ---------- Foto e nome, che cosa è, dove insegna ---------- */
html body .tbp-ver.tbp-ci .tbp-ci__testa {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 20px;
	align-items: center;
	margin: 0 0 48px;
}
/* Il ritratto ha la forma di quello delle schede (56 × 72), più grande. */
html body .tbp-ver.tbp-ci .tbp-ci__foto { position: relative; display: block; width: 104px; aspect-ratio: 7 / 9; }
html body .tbp-ver.tbp-ci img.tbp-ci__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border-radius: 20px;
	background: var(--ver-scheda);
}
html body .tbp-ver.tbp-ci .tbp-ci__foto--senza { display: grid; place-items: center; border-radius: 20px; background: var(--ver-tondo); }
html body .tbp-ver.tbp-ci .tbp-ci__iniziale {
	color: var(--ver-tondo-testo);
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
}
html body .tbp-ver.tbp-ci .tbp-ci__bollino {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border: 3px solid var(--ci-anello);
	border-radius: 50%;
	background: var(--ci-bollino);
	color: #FFFFFF;
}
html body .tbp-ver.tbp-ci .tbp-ci__bollino svg { display: block; width: 15px; height: 15px; }
html body .tbp-ver.tbp-ci .tbp-ci__chi { min-width: 0; }
html body .tbp-ver.tbp-ci .tbp-ci__chi .tbp-ver__occhiello { margin-bottom: 4px; }
html body .tbp-ver.tbp-ci h1.tbp-ci__nome {
	font-size: 2.25rem !important;
	line-height: 1.05 !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}
html body .tbp-ver.tbp-ci .tbp-ci__fatti { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 62ch; }
html body .tbp-ver.tbp-ci .tbp-ci__qualifica { font-size: 1.0625rem; line-height: 1.5; }
html body .tbp-ver.tbp-ci .tbp-ci__qualifica strong { display: block; color: var(--ver-titolo); font-weight: 800; }
html body .tbp-ver.tbp-ci .tbp-ci__eti {
	display: block;
	margin: 0 0 2px;
	color: var(--ver-nota);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ---------- La presentazione ---------- */
html body .tbp-ver.tbp-ci .tbp-ci__presenta > h2 { margin-bottom: 12px; }

/* ---------- Che cosa insegna: le schede del Catalogo ---------- */
html body .tbp-ver.tbp-ci ul.tbp-ci__schede { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
html body .tbp-ver.tbp-ci .tbp-ci__scheda { min-width: 0; }
html body .tbp-ver.tbp-ci .tbp-ci__scheda::before { content: none !important; }
/* La foto della scheda ha le proporzioni che ha in «Cerca» (5:4 in colonna, quadrata a tre per riga). L'id serve a
   passare davanti alla regola del foglio delle schede, che conta come un id. */
html body #tbp-chi-insegna.tbp-ci .tbp-ci__schede .tbp-exp-card.tbp-exp-card .tbp-exp-card__media { aspect-ratio: 5 / 4 !important; height: auto !important; min-height: 0 !important; }

/* ---------- Che cosa abbiamo controllato, le lingue, una domanda ---------- */
html body .tbp-ver.tbp-ci .tbp-ci__sotto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
html body .tbp-ver.tbp-ci .tbp-ci__blocco { min-width: 0; padding-top: 24px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver.tbp-ci .tbp-ci__blocco > h2 { margin: 0 0 12px; font-size: 1.25rem !important; line-height: 1.25 !important; }
html body .tbp-ver.tbp-ci ul.tbp-ci__voci { display: grid; gap: 16px; }
html body .tbp-ver.tbp-ci .tbp-ci__voce { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html body .tbp-ver.tbp-ci .tbp-ci__voce h3 { margin: 1px 0 2px; font-size: 1rem; }
html body .tbp-ver.tbp-ci .tbp-ci__voce p { font-size: .9375rem; }
html body .tbp-ver.tbp-ci .tbp-ci__nota { margin-top: 16px; color: var(--ver-nota); font-size: .875rem; line-height: 1.5; }
html body .tbp-ver.tbp-ci .tbp-ci__nota a { display: inline-block; padding: 12px 0; margin: -12px 0; }
html body .tbp-ver.tbp-ci .tbp-ci__elenco { color: var(--ver-titolo); font-size: 1.0625rem; font-weight: 700; }

html body .tbp-ver.tbp-ci .tbp-ci__domanda p { max-width: 44ch; }
html body .tbp-ver.tbp-ci .tbp-ci__azione { margin-top: 16px; }
html body .tbp-ver.tbp-ci a.tbp-ci__bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 16px;
	font-family: var(--tbp-font, sans-serif);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

/* ---------- In fondo ---------- */
html body .tbp-ver.tbp-ci .tbp-ci__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ver-linea);
}

/* ---------- Da 700 px: due schede per riga, come in «Cerca» ---------- */
@media (min-width: 700px) {
	html body .tbp-ver.tbp-ci ul.tbp-ci__schede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	/* Una scheda sola: una colonna, larga quanto si legge bene, con la foto in orizzontale. */
	html body .tbp-ver.tbp-ci .tbp-ci__insegna--1 ul.tbp-ci__schede { grid-template-columns: minmax(0, 560px); }
	html body #tbp-chi-insegna.tbp-ci .tbp-ci__insegna--1 .tbp-ci__schede .tbp-exp-card.tbp-exp-card .tbp-exp-card__media { aspect-ratio: 16 / 10 !important; }
}

/* ---------- Da 850 px ---------- */
@media (min-width: 850px) {
	html body .tbp-ver.tbp-ci .tbp-ci__testa { grid-template-columns: 176px minmax(0, 1fr); column-gap: 40px; row-gap: 16px; margin-bottom: 72px; }
	html body .tbp-ver.tbp-ci .tbp-ci__foto { width: 176px; grid-row: 1 / span 2; align-self: start; }
	html body .tbp-ver.tbp-ci img.tbp-ci__img,
	html body .tbp-ver.tbp-ci .tbp-ci__foto--senza { border-radius: 24px; }
	html body .tbp-ver.tbp-ci .tbp-ci__iniziale { font-size: 4rem; }
	html body .tbp-ver.tbp-ci .tbp-ci__bollino { right: -8px; bottom: -8px; width: 36px; height: 36px; }
	html body .tbp-ver.tbp-ci .tbp-ci__bollino svg { width: 20px; height: 20px; }
	html body .tbp-ver.tbp-ci .tbp-ci__chi { align-self: end; }
	html body .tbp-ver.tbp-ci h1.tbp-ci__nome { font-size: 3.25rem !important; }
	html body .tbp-ver.tbp-ci .tbp-ci__fatti { grid-column: 2; align-self: start; }
	/* Una o due schede: il titolo a sinistra e le schede a destra, come la presentazione sopra. */
	html body .tbp-ver.tbp-ci :is(.tbp-ci__insegna--1, .tbp-ci__insegna--2) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
	html body .tbp-ver.tbp-ci :is(.tbp-ci__insegna--1, .tbp-ci__insegna--2) > h2 { margin: 0; }
	html body .tbp-ver.tbp-ci .tbp-ci__insegna--1 ul.tbp-ci__schede { grid-template-columns: minmax(0, 1fr); }
	html body .tbp-ver.tbp-ci .tbp-ci__sotto { gap: 48px; }
	html body .tbp-ver.tbp-ci .tbp-ci__sotto--3 { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
	html body .tbp-ver.tbp-ci .tbp-ci__sotto--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .tbp-ver.tbp-ci .tbp-ci__sotto--1 { grid-template-columns: minmax(0, 560px); }
}

/* ---------- Da 1100 px: tre schede per riga, quadrate, come in «Cerca» ---------- */
@media (min-width: 1100px) {
	html body .tbp-ver.tbp-ci .tbp-ci__insegna--tante ul.tbp-ci__schede { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	html body #tbp-chi-insegna.tbp-ci :is(.tbp-ci__insegna--tante, .tbp-ci__insegna--2) .tbp-ci__schede .tbp-exp-card.tbp-exp-card .tbp-exp-card__media { aspect-ratio: 1 / 1 !important; }
}
@media (min-width: 1200px) {
	html body .tbp-ver.tbp-ci h1.tbp-ci__nome { font-size: 3.5rem !important; }
}

/* ---------- Fuori dalla pagina ---------- */

/* Il foglio di chi insegna in «Artigiani verificati»: il collegamento alla sua pagina, sopra le esperienze. */
html body .tbp-volti-foglio p.tbp-ci-foglio { margin: 0 0 12px; padding: 0; }
html body .tbp-volti-foglio a.tbp-ci-foglio__link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	color: #084828;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
html body .tbp-volti-foglio a.tbp-ci-foglio__link svg { flex: none; }

/* Il pannello di chi insegna: «La tua pagina pubblica». Un riquadro crema, come gli avvisi del pannello. */
html body .tbp-ci-pannello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 24px;
	padding: 20px 24px;
	border-radius: 22px;
	background: #F7F4ED;
	color: #123326;
	font-family: var(--tbp-font, sans-serif);
}
html body .tbp-ci-pannello .tbp-ci-pannello__testo { flex: 1 1 280px; min-width: 0; }
html body .tbp-ci-pannello h2 {
	margin: 0 0 4px;
	padding: 0;
	color: #084828;
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}
html body .tbp-ci-pannello p { margin: 0; max-width: 62ch; color: #123326; font-size: .9375rem; line-height: 1.5; }
html body .tbp-ci-pannello p.tbp-ci-pannello__indirizzo { margin-top: 4px; color: #35503F; font-weight: 700; overflow-wrap: anywhere; }
html body .tbp-ci-pannello a.tbp-ci-pannello__apri {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 16px;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
}

/* ---------- Temi: nello stesso strato di tbp-appearance.css, che colora testi e collegamenti con !important ---------- */
@layer tbp-appearance {
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-ci :is(.tbp-ci__qualifica strong, .tbp-ci__elenco) {
		color: var(--ver-titolo) !important;
		-webkit-text-fill-color: var(--ver-titolo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-ci :is(.tbp-ci__eti, .tbp-ci__nota) {
		color: var(--ver-nota) !important;
		-webkit-text-fill-color: var(--ver-nota) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver.tbp-ci .tbp-ci__iniziale {
		color: var(--ver-tondo-testo) !important;
		-webkit-text-fill-color: var(--ver-tondo-testo) !important;
	}
	/* Nessun bottone con il testo sottolineato (CEO, 13/10). */
	html body :is(.tbp-ver.tbp-ci a.tbp-ci__bottone, .tbp-ci-pannello a.tbp-ci-pannello__apri) { text-decoration: none !important; }

	/* Il nome di chi insegna nella scheda di un'esperienza: è un collegamento, con il colore e il carattere che il
	   nome aveva prima (li prende dalla stessa classe, al telefono sulla foto e al computer sotto il titolo). In più solo
	   la freccia e un'area da toccare più alta, senza spostare niente. */
	html body a.tbp-exp-card__maker-name.tbp-ci-nome {
		display: inline-flex !important;
		align-items: center !important;
		gap: 2px;
		width: fit-content !important;
		max-width: 100% !important;
		padding: 12px 6px !important;
		margin: -12px -6px !important;
		text-decoration: none !important;
		cursor: pointer !important;
		pointer-events: auto !important;
	}
	html body a.tbp-ci-nome .tbp-ci-nome__freccia { flex: none; align-self: center; width: 14px; height: 14px; vertical-align: -2px; }
	html body a.tbp-ci-nome:focus-visible { outline: 3px solid currentColor !important; outline-offset: -6px; border-radius: 10px; }
	@media (hover: hover) and (pointer: fine) {
		html body a.tbp-ci-nome:hover { text-decoration: underline !important; text-underline-offset: 3px; }
	}

	html[data-tbp-theme="dark"] body .tbp-volti-foglio a.tbp-ci-foglio__link { color: #9BDBB5 !important; -webkit-text-fill-color: #9BDBB5 !important; }
	html[data-tbp-theme="dark"] body .tbp-ci-pannello { background: #1E1E1E !important; }
	html[data-tbp-theme="dark"] body .tbp-ci-pannello :is(h2, p) { color: #EDEDED !important; -webkit-text-fill-color: #EDEDED !important; }
	html[data-tbp-theme="dark"] body .tbp-ci-pannello p.tbp-ci-pannello__indirizzo { color: #B5B5B5 !important; -webkit-text-fill-color: #B5B5B5 !important; }
}