/* «Professionisti verificati» e «Hobbisti ToBePolo» (kit verificati-hobbisti-design-8-10, CEO 8/10).
 * Stesso linguaggio di /per-le-aziende/, /servizi/ e /vacanze-dei-mestieri/: apertura con foto vera di mani al lavoro,
 * icone Lava solo oggetti, schede a riempimento crema, testi entro 65 caratteri.
 * Gettoni del sito: spazi 4-8-12-16-24-32-48-64, raggi 12-16-22-24, caratteri via var(--tbp-font) e var(--tbp-font-titoli).
 * Niente bordi colorati di lato o in alto, niente gradienti, niente ombre grandi, niente «·».
 * Righe piene: 5 passi = 5 colonne (elenco sotto i 1024 px), 3 schede = 3 colonne, 4 regole = 4 colonne (2 x 2 sotto i 1100). */

html body .tbp-ver {
	--ver-titolo: #084828;
	--ver-testo: #123326;
	--ver-nota: #35503F;
	--ver-scheda: #F7F4ED;      /* crema delle schede, come --az-scheda */
	--ver-sezione: #F4F7F5;
	--ver-linea: rgba(8, 72, 40, .14);
	--ver-link: #084828;
	--ver-tondo: #E4F1E8;
	--ver-tondo-testo: #145E3F;
	--ver-invito: #145E3F;      /* verde del marchio */
	--ver-invito-testo: #FFFFFF;
	--ver-fuoco: #084828;
	--ver-larga: 1160px;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--ver-larga) + 32px);
	margin: 0 auto;
	padding: 24px 16px 56px;
	color: var(--ver-testo);
	font-family: var(--tbp-font, sans-serif);
	font-size: 1rem;
	line-height: 1.55;
}
html[data-tbp-theme="tobepolo"] body .tbp-ver {
	--ver-testo: #10261B;
	--ver-scheda: #FFFFFF;
	--ver-sezione: #FFFFFF;
}
html[data-tbp-theme="dark"] body .tbp-ver {
	--ver-titolo: #EDEDED;
	--ver-testo: #EDEDED;
	--ver-nota: #B5B5B5;
	--ver-scheda: #1E1E1E;
	--ver-sezione: #1A1F1D;
	--ver-linea: #333333;
	--ver-link: #9BDBB5;
	--ver-tondo: #1E3A2B;
	--ver-tondo-testo: #9BDBB5;
	--ver-invito: #1E3A2B;
	--ver-invito-testo: #EDEDED;
	--ver-fuoco: #9BDBB5;
}
html body .tbp-ver *,
html body .tbp-ver *::before,
html body .tbp-ver *::after { box-sizing: border-box; }

/* ---------- Tipografia ---------- */
html body .tbp-ver :is(h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
	color: var(--ver-titolo);
	font-family: var(--tbp-font-titoli, var(--tbp-font, sans-serif));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}
/* Il foglio del rebrand ingrandisce ogni h1 al telefono con !important: qui la scala della pagina (come /per-le-aziende/). */
html body .tbp-ver h1.tbp-ver__titolo { font-size: 2.5rem !important; line-height: 1.05 !important; font-weight: 800; letter-spacing: -0.02em; }
html body .tbp-ver h2 { font-size: 1.5rem !important; line-height: 1.2 !important; margin: 0 0 16px; }
html body .tbp-ver h3 { font-size: 1.0625rem; line-height: 1.3; }
html body .tbp-ver h4 { font-size: 1rem; line-height: 1.3; }
html body .tbp-ver p { margin: 0; color: var(--ver-testo); }
html body .tbp-ver ul,
html body .tbp-ver ol { margin: 0; padding: 0; list-style: none; }
html body .tbp-ver li { margin: 0; }
html body .tbp-ver a:not(.tbp-btn) { color: var(--ver-link); text-decoration: underline; text-underline-offset: 3px; }
html body .tbp-ver :is(a, button):focus-visible { outline: 3px solid var(--ver-fuoco); outline-offset: 3px; }
html body .tbp-ver :is(#tbp-ver-controlli, #tbp-ver-regole) { scroll-margin-top: 96px; }

/* ---------- Apertura ---------- */
html body .tbp-ver__apertura { display: grid; gap: 24px; align-items: center; margin: 0 0 56px; }
html body .tbp-ver .tbp-ver__occhiello {
	margin: 0 0 8px;
	color: var(--ver-nota);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
html body .tbp-ver .tbp-ver__lead { margin-top: 16px; max-width: 34em; font-size: 1.125rem; line-height: 1.5; }
html body .tbp-ver .tbp-ver__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
html body .tbp-ver .tbp-ver__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 24px;
	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;
}
html body .tbp-ver a.tbp-ver__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

html body .tbp-ver figure.tbp-ver__foto { margin: 0; padding: 0; width: 100%; max-width: none; }
html body .tbp-ver .tbp-ver__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	background: var(--ver-scheda);
}
html body .tbp-ver .tbp-ver__credito { margin-top: 8px; color: var(--ver-nota); font-size: 12px; line-height: 1.4; text-align: right; }
html body .tbp-ver .tbp-ver__credito a { color: inherit; }

/* ---------- Sezioni ---------- */
html body .tbp-ver .tbp-ver__sezione { margin: 0 0 56px; }
html body .tbp-ver .tbp-ver__capo { margin: 0 0 24px; }
html body .tbp-ver .tbp-ver__capo p { max-width: 65ch; }
/* Icona: riquadro fisso, disegno ingrandito al centro (--k dal PHP) perché i PNG Lava hanno margini trasparenti diversi. */
html body .tbp-ver .tbp-ver__icona { position: relative; display: block; flex: none; overflow: visible; }
html body .tbp-ver .tbp-ver__icona img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% * var(--k, 1.5)) !important;
	max-width: none !important;
	height: auto !important;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Passi (professionisti): riquadro chiaro come «Ci pensiamo noi» di /per-le-aziende/. Al telefono un elenco con l'icona a sinistra. */
html body .tbp-ver .tbp-ver__passi-sezione { padding: 24px 20px; border-radius: 24px; background: var(--ver-sezione); }
html body .tbp-ver ol.tbp-ver__passi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; counter-reset: none; }
html body .tbp-ver .tbp-ver__passo { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
html body .tbp-ver .tbp-ver__passo > .tbp-ver__icona { grid-row: span 3; }
html body .tbp-ver .tbp-ver__passo .tbp-ver__n { color: var(--ver-nota); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
html body .tbp-ver .tbp-ver__passo h3 { margin: 2px 0 4px; }
html body .tbp-ver .tbp-ver__passo p:last-child { font-size: .9375rem; }

/* Schede crema (cosa ottieni, le regole). */
html body .tbp-ver ul.tbp-ver__schede { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
html body .tbp-ver .tbp-ver__schede .tbp-ver__voce { padding: 24px; border-radius: 22px; background: var(--ver-scheda); }
html body .tbp-ver .tbp-ver__voce .tbp-ver__icona { margin: 0 0 16px; }
html body .tbp-ver .tbp-ver__voce h3 { margin: 0 0 8px; }
html body .tbp-ver .tbp-ver__voce p { font-size: .9375rem; }
html body .tbp-ver .tbp-ver__dopo { margin-top: 24px; max-width: 65ch; }

/* Titolo a sinistra e testo a destra (al computer), come le domande di /per-le-aziende/. */
html body .tbp-ver .tbp-ver__riga { display: grid; gap: 4px; }
html body .tbp-ver .tbp-ver__testo p { max-width: 65ch; }
html body .tbp-ver .tbp-ver__testo p + p { margin-top: 12px; }
html body .tbp-ver .tbp-ver__onesta { padding-top: 32px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver .tbp-ver__onesta > * + * { margin-top: 40px; }

/* Livelli di rischio: tre colonne semplici, niente schede (sono una tabella da leggere). */
html body .tbp-ver ul.tbp-ver__livelli { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
html body .tbp-ver .tbp-ver__livello { padding-top: 12px; border-top: 1px solid var(--ver-linea); }
html body .tbp-ver .tbp-ver__livello h3 { margin: 0 0 4px; }
html body .tbp-ver .tbp-ver__livello p { font-size: .9375rem; }

/* Chi prenota / chi insegna (hobbisti). */
html body .tbp-ver .tbp-ver__lati { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
html body .tbp-ver .tbp-ver__lato { padding: 24px 20px; border-radius: 22px; background: var(--ver-sezione); }
html body .tbp-ver h3.tbp-ver__lato-t { margin: 0 0 16px; font-size: 1.25rem; }
html body .tbp-ver .tbp-ver__lato ul { display: grid; gap: 20px; }
html body .tbp-ver .tbp-ver__lato li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
html body .tbp-ver .tbp-ver__lato h4 { margin: 2px 0 4px; }
html body .tbp-ver .tbp-ver__lato p { font-size: .9375rem; }

/* Volti di chi insegna: il componente di tbp-volti.css dentro la pagina nuova, senza i suoi margini di pagina. */
html body .tbp-ver .tbp-ver__volti-elenco.tbp-volti-pagina { width: 100%; max-width: none; margin: 0; padding: 0; }
html body .tbp-ver .tbp-ver__vuoto { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 22px; background: var(--ver-scheda); }
html body .tbp-ver .tbp-ver__vuoto p { max-width: 65ch; }
html body .tbp-ver .tbp-ver__vuoto p + p { margin-top: 4px; }
html body .tbp-ver .tbp-ver__vuoto-t { font-weight: 700; color: var(--ver-titolo); }

/* Invito finale: riempimento verde del marchio, bottone oro. */
html body .tbp-ver .tbp-ver__invito {
	display: grid;
	gap: 20px;
	margin: 0 0 24px;
	padding: 32px 24px;
	border-radius: 24px;
	background: var(--ver-invito);
}
html body .tbp-ver .tbp-ver__invito h2 { margin-bottom: 8px; color: var(--ver-invito-testo); }
html body .tbp-ver .tbp-ver__invito p { max-width: 60ch; color: var(--ver-invito-testo); }
html body .tbp-ver .tbp-ver__invito .tbp-ver__cta { width: 100%; }
html body .tbp-ver .tbp-ver__invito :focus-visible { outline-color: #FFFFFF; }

html body .tbp-ver .tbp-ver__nota { max-width: 75ch; color: var(--ver-nota); font-size: .875rem; line-height: 1.5; }
html body .tbp-ver .tbp-ver__nota a { color: inherit; }

/* ---------- Da 640 px ---------- */
@media (min-width: 640px) {
	html body .tbp-ver ul.tbp-ver__schede--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .tbp-ver ul.tbp-ver__schede--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .tbp-ver ul.tbp-ver__livelli { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	html body .tbp-ver .tbp-ver__invito .tbp-ver__cta { width: auto; }
}
/* 3 schede strette fra 640 e 900: testo più piccolo e meno margine. */
@media (min-width: 640px) and (max-width: 899px) {
	html body .tbp-ver .tbp-ver__schede--3 .tbp-ver__voce { padding: 20px 16px; }
}

/* ---------- Da 850 px ---------- */
@media (min-width: 850px) {
	html body .tbp-ver { padding: 32px 24px 72px; max-width: calc(var(--ver-larga) + 48px); }
	html body .tbp-ver h1.tbp-ver__titolo { font-size: 3.25rem !important; }
	html body .tbp-ver h2 { font-size: 1.75rem !important; margin-bottom: 20px; }
	html body .tbp-ver__apertura { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; margin-bottom: 72px; }
	html body .tbp-ver .tbp-ver__foto img { aspect-ratio: 5 / 4; }
	html body .tbp-ver .tbp-ver__sezione { margin-bottom: 72px; }
	html body .tbp-ver .tbp-ver__passi-sezione { padding: 40px; }
	html body .tbp-ver .tbp-ver__riga { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
	html body .tbp-ver .tbp-ver__riga > h2 { margin: 0; }
	html body .tbp-ver .tbp-ver__onesta { padding-top: 48px; }
	html body .tbp-ver .tbp-ver__onesta > * + * { margin-top: 56px; }
	html body .tbp-ver .tbp-ver__lati { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	html body .tbp-ver .tbp-ver__lato { padding: 32px; }
	html body .tbp-ver .tbp-ver__invito { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 40px 48px; }
}

/* ---------- Da 1024 px: i 5 passi in una riga ---------- */
@media (min-width: 1024px) {
	html body .tbp-ver ol.tbp-ver__passi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
	html body .tbp-ver .tbp-ver__passo { display: block; }
	html body .tbp-ver .tbp-ver__passo > .tbp-ver__icona { margin: 0 0 16px; }
}

/* ---------- Da 1100 px: le 4 regole in una riga ---------- */
@media (min-width: 1100px) {
	html body .tbp-ver ul.tbp-ver__schede--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	html body .tbp-ver ul.tbp-ver__schede { gap: 24px; }
}

/* ---------- Da 1200 px: la larghezza comune delle pagine nuove (kit desktop-griglie-8-10) ---------- */
@media (min-width: 1200px) {
	html body .tbp-ver { --ver-larga: clamp(1160px, calc(100vw - 282px), 1280px); }
	html body .tbp-ver h1.tbp-ver__titolo { font-size: 3.5rem !important; }
}

/* ---------- Temi: testi nello stesso strato di tbp-appearance.css, che colora titoli, paragrafi e link con !important ---------- */
@layer tbp-appearance {
	html[data-tbp-theme="dark"] body .tbp-ver :is(h1, h2, h3, h4, .tbp-ver__vuoto-t) {
		color: var(--ver-titolo) !important;
		-webkit-text-fill-color: var(--ver-titolo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver :is(p, li) {
		color: var(--ver-testo) !important;
		-webkit-text-fill-color: var(--ver-testo) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver :is(.tbp-ver__occhiello, .tbp-ver__credito, .tbp-ver__nota, .tbp-ver__n) {
		color: var(--ver-nota) !important;
		-webkit-text-fill-color: var(--ver-nota) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver a:not(.tbp-btn) {
		color: var(--ver-link) !important;
		-webkit-text-fill-color: var(--ver-link) !important;
	}
	html[data-tbp-theme="dark"] body .tbp-ver :is(.tbp-ver__credito, .tbp-ver__nota) a {
		color: var(--ver-nota) !important;
		-webkit-text-fill-color: var(--ver-nota) !important;
	}
	html body .tbp-ver .tbp-ver__invito :is(h2, p) {
		color: var(--ver-invito-testo) !important;
		-webkit-text-fill-color: var(--ver-invito-testo) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .tbp-ver * { scroll-behavior: auto; }
}