/* CBN Informatica (IT-Tech) - CSS delle 6 sezioni di Chi siamo. Caricato su is_page('chi-siamo') e,
   come base riusata (banner, breadcrumb, fondi), su is_page('servizi')
   (functions.php, cbn_enqueue_identity_styles), DOPO cbn-home.css: da quel foglio riusa i componenti
   condivisi (.cbn-section-dark, .cbn-section-seam, .cbn-title-section, .cbn-eyebrow, .cbn-lead,
   la CTA .cbn-home-cta, l'elenco comuni .cbn-home-area__towns, la mappa con i pin .cbn-home-area__map)
   e il reset dei widget Elementor; qui c'e' solo cio' che e' proprio di questa pagina.
   Origine: design/proposte-2026-10-15/chi-siamo.css (varianti scelte: banner A, presentazione A, valori A,
   motivi C, area A, CTA A). Convenzione come la Home: .cbn-block + .cbn-cs-<sezione>, elementi BEM.
   Solo token --cbn-* (cbn-tokens.css): nessun colore o misura nuovi. */

/* ===== Ritmo e fondi =====
   banner D | presentazione L | valori D | motivi L (paper-deep) | area D | CTA arancio | footer D. */
.cbn-cs-light {
	background: var(--cbn-paper);
	color: var(--cbn-text);
}
.cbn-cs-light-deep {
	background: var(--cbn-paper-deep);
	color: var(--cbn-text);
}
/* le sezioni con foto o elementi a sbalzo non devono creare scroll orizzontale */
.cbn-cs-banner,
.cbn-cs-intro,
.cbn-cs-values,
.cbn-cs-reasons,
.cbn-cs-area {
	overflow: hidden;
}

/* ===== Elementi ricorrenti ===== */
.cbn-cs-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* stessa tecnica del footer (cbn-chrome.css): area di tocco >= 44px, ingombro invariato (riga da 1em) */
.cbn-cs-crumbs a {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	min-height: var(--cbn-touch-target);
	margin-block: calc((1em - var(--cbn-touch-target)) / 2);
	/* la scritta "HOME" e' larga ~37px: il padding porta il bersaglio a >= 44px in larghezza e il
	   margine negativo uguale ne annulla l'ingombro (nessuno spostamento di separatore e titolo) */
	padding-inline: 6px;
	margin-inline: -6px;
}
.cbn-cs-crumbs li + li::before {
	content: "/";
	margin-right: 12px;
	opacity: .6;
}
.cbn-block .cbn-cs-crumbs a {
	color: var(--cbn-on-dark-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	transition: text-decoration-color var(--cbn-dur-ui), color var(--cbn-dur-ui);
}
/* Regola unica per tutte le pagine con banner proprio (Chi siamo, Servizi, 8 servizi). Oltre alla
   sottolineatura arancio, il testo passa a bianco: la sola riga da 2 px era troppo discreta per essere
   percepita come stato hover (rilievo del design review 2026-10-14). */
.cbn-block .cbn-cs-crumbs a:hover {
	color: var(--cbn-on-dark);
	text-decoration-color: var(--cbn-orange);
}
.cbn-cs-crumbs [aria-current] {
	color: var(--cbn-on-dark);
}
.cbn-cs-lead {
	font-size: var(--cbn-size-lead);
	line-height: 1.55;
}
/* etichetta mono sopra una foto ("Fig."): dato tecnico di stile, non una numerazione di contenuto */
.cbn-cs-figlabel {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 12px 16px;
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
	font: 500 var(--cbn-size-label)/1.3 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* timbro: stesso linguaggio della targa della Home (arancio scuro + bianco 5,62:1, quadrato netto) */
.cbn-cs-stamp {
	position: absolute;
	z-index: 2;
	padding: var(--cbn-space-md) var(--cbn-space-lg);
	background: var(--cbn-orange-strong);
	color: var(--cbn-white);
	font: 500 clamp(1.75rem, 2.8vw, 2.5rem)/1 var(--cbn-font-label);
	letter-spacing: -.04em;
}
.cbn-cs-stamp span {
	display: block;
	margin-top: 10px;
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ===== 1. Banner di testata "Tavola" =====
   Titolo enorme su griglia a 6 colonne, nessuna foto (nessun LCP da immagine). E' la prima
   sezione della pagina e porta l'H1: il banner del tema padre (.breadcumb-area) qui non viene
   stampato (functions.php, cbn_page_has_own_banner). */
.cbn-cs-banner {
	position: relative;
	padding: var(--cbn-space-xl) 0 var(--cbn-section-pad);
}
.cbn-cs-banner::before {
	content: "";
	position: absolute;
	inset: 0 var(--cbn-container-edge);
	background: repeating-linear-gradient(90deg, var(--cbn-grid-line-on-dark) 0 1px, transparent 1px calc(100% / 6));
	border-right: 1px solid var(--cbn-grid-line-on-dark);
	pointer-events: none;
}
.cbn-cs-banner > .cbn-container {
	position: relative;
}
.cbn-cs-banner__title {
	margin: var(--cbn-space-xl) 0 var(--cbn-space-lg);
	/* H1 "poster" (Chi siamo, Servizi, Contatti): resta il piu' grande del sito (le altre H1 sono
	   92-100px) ma con tetto 128px; 10.4vw = ~80px a 768; a 360 vale il minimo, invariato */
	font: 800 clamp(3.5rem, 10.4vw, 8rem)/.84 var(--cbn-font-display);
	letter-spacing: -.06em;
}
/* il punto arancio e' testo grande (>= 24px): 4,25:1 su charcoal ammesso, non porta informazione */
.cbn-cs-banner__title span {
	color: var(--cbn-orange);
}
.cbn-cs-banner__lead {
	max-width: 30em;
	padding-top: var(--cbn-space-md);
	border-top: 1px solid var(--cbn-line-on-dark);
	color: var(--cbn-on-dark-muted);
}

/* ===== 2. Presentazione "Foto a sbalzo" =====
   Testo 7/5 con foto verticale che esce dal bordo destro; il timbro "Dal 2015" e' l'elemento
   signature della pagina. */
.cbn-cs-intro {
	padding: var(--cbn-section-pad) 0;
}
.cbn-cs-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--cbn-space-2xl);
	align-items: start;
}
.cbn-cs-intro__copy .cbn-title-section {
	max-width: 10em;
	margin: 0 0 var(--cbn-space-lg);
}
.cbn-cs-intro__copy .cbn-cs-lead {
	max-width: 30em;
	margin-bottom: var(--cbn-space-md);
}
.cbn-cs-intro__copy p:last-child {
	max-width: 34em;
	color: var(--cbn-text-muted);
}
.cbn-cs-intro__media {
	position: relative;
	margin-right: calc(var(--cbn-container-edge) * -1);
}
.cbn-block .cbn-cs-intro__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.08;
	object-fit: cover;
	object-position: 50% 25%;
}
.cbn-cs-intro .cbn-cs-stamp {
	left: calc(var(--cbn-space-xl) * -1);
	top: var(--cbn-space-xl);
}

/* ===== 3. Valori "Tre colonne" =====
   La parola e' il gesto grafico, separata da filetti verticali. Non numerati: sono tre qualita',
   non una sequenza. */
.cbn-cs-values {
	padding: var(--cbn-section-pad) 0;
}
.cbn-cs-values__head {
	margin-bottom: var(--cbn-space-2xl);
}
.cbn-cs-values__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cbn-line-on-dark);
}
.cbn-cs-values__item {
	position: relative;
	padding: var(--cbn-space-xl) var(--cbn-space-lg) var(--cbn-space-xl) 0;
	border-right: 1px solid var(--cbn-line-on-dark);
	transition: background-color var(--cbn-dur-ui);
}
.cbn-cs-values__item + .cbn-cs-values__item {
	padding-left: var(--cbn-space-lg);
}
.cbn-cs-values__item:last-child {
	padding-right: 0;
	border-right: 0;
}
.cbn-cs-values__item::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 48px;
	height: 4px;
	background: var(--cbn-orange);
	transition: width var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-cs-values__item + .cbn-cs-values__item::before {
	left: var(--cbn-space-lg);
}
.cbn-cs-values__item:hover::before {
	width: 96px;
}
.cbn-cs-values__word {
	/* min-height = due righe: allinea i testi delle tre colonne anche quando "Cura personalizzata" va a capo */
	min-height: 2.04em;
	margin-bottom: var(--cbn-space-md);
	font: 800 var(--cbn-size-h3-feature)/1.02 var(--cbn-font-display);
	letter-spacing: -.04em;
	overflow-wrap: break-word;
}
.cbn-cs-values__item p {
	max-width: 22em;
	color: var(--cbn-on-dark-muted);
}
/* numero decorativo come nella tavola Servizi della Home (stesso lessico, nessun ordine implicito) */
.cbn-cs-values__num {
	display: block;
	margin-bottom: var(--cbn-space-sm);
	color: var(--cbn-on-dark-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
}

/* ===== 4. Come lavoriamo "Frase protagonista" =====
   Il primo motivo e' il titolo della sezione, gli altri due stanno sotto. */
.cbn-cs-reasons {
	padding: var(--cbn-section-pad) 0;
}
.cbn-cs-reasons__top {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: var(--cbn-space-xl);
	align-items: end;
	margin-bottom: var(--cbn-space-2xl);
	padding-bottom: var(--cbn-space-xl);
	border-bottom: 4px solid var(--cbn-text);
}
.cbn-cs-reasons__title {
	margin: var(--cbn-space-md) 0 0;
	font: 800 var(--cbn-size-h2-emphasis)/1 var(--cbn-font-display);
	letter-spacing: -.055em;
	text-wrap: balance;
}
.cbn-cs-reasons__top p {
	font-size: var(--cbn-size-lead);
	line-height: 1.5;
	color: var(--cbn-text-muted);
}
.cbn-cs-reasons__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cbn-space-2xl);
}
.cbn-cs-reasons__item {
	padding-top: var(--cbn-space-md);
	border-top: 1px solid var(--cbn-line-on-light);
}
.cbn-cs-reasons__item h3 {
	margin-bottom: var(--cbn-space-xs);
	font: 800 var(--cbn-size-h3-list)/1.1 var(--cbn-font-display);
	letter-spacing: -.035em;
}
.cbn-cs-reasons__item p {
	max-width: 30em;
	color: var(--cbn-text-muted);
}

/* ===== 5. Area operativa "Mappa a filo" =====
   Elenco comuni (.cbn-home-area__towns) e mappa con pin (.cbn-home-area__map/__pin) sono quelli
   della Home. Qui cambia solo l'impaginazione: griglia dentro il contenitore e mappa che esce a destra. */
.cbn-cs-area {
	padding: var(--cbn-section-pad) 0;
}
.cbn-cs-area__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--cbn-space-xl);
	align-items: center;
}
.cbn-cs-area__copy .cbn-title-section {
	margin-bottom: var(--cbn-space-md);
}
.cbn-cs-area__lead {
	max-width: 30em;
	color: var(--cbn-on-dark-muted);
}
.cbn-cs-area__map {
	margin-right: calc(var(--cbn-container-edge) * -1);
}
/* i due modi di lavorare, dal testo reale: in laboratorio e a domicilio */
.cbn-cs-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cbn-space-md);
	margin: var(--cbn-space-xl) 0 0;
	padding: 0;
	list-style: none;
}
.cbn-cs-modes li {
	padding-top: var(--cbn-space-sm);
	border-top: 2px solid var(--cbn-orange);
}
.cbn-cs-modes strong {
	display: block;
	margin-bottom: 4px;
	color: var(--cbn-on-dark);
	font: 500 var(--cbn-size-label)/1.3 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-cs-modes span {
	color: var(--cbn-on-dark-muted);
	font-size: 1rem;
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
	.cbn-cs-banner {
		padding-top: var(--cbn-space-lg);
	}
	.cbn-cs-banner__title {
		margin-top: var(--cbn-space-lg);
	}
	.cbn-cs-intro__grid {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-xl);
	}
	.cbn-cs-intro__media {
		margin-left: calc(var(--cbn-gutter) * 2);
	}
	.cbn-cs-intro .cbn-cs-stamp {
		left: calc(var(--cbn-space-md) * -1);
		top: var(--cbn-space-md);
		padding: var(--cbn-space-sm) var(--cbn-space-md);
	}
	.cbn-cs-values__list {
		grid-template-columns: 1fr;
	}
	.cbn-cs-values__word {
		min-height: 0;
	}
	.cbn-cs-values__item,
	.cbn-cs-values__item + .cbn-cs-values__item {
		padding: var(--cbn-space-lg) 0;
		border-right: 0;
		border-bottom: 1px solid var(--cbn-line-on-dark);
	}
	.cbn-cs-values__item:last-child {
		border-bottom: 0;
	}
	.cbn-cs-values__item + .cbn-cs-values__item::before {
		left: 0;
	}
	.cbn-cs-reasons__top {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-lg);
	}
	.cbn-cs-reasons__pair {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-xl);
	}
	.cbn-cs-area__grid {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-xl);
	}
	.cbn-cs-area__map {
		margin-right: calc(var(--cbn-gutter) * -1);
		margin-left: calc(var(--cbn-gutter) * -1);
	}
	.cbn-cs-modes {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cbn-block *,
	.cbn-block *::before,
	.cbn-block *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ===== Tono (condiviso da pagine servizio e Contatti) =====
   Le sezioni intermedie possono stare su chiaro, su paper-deep o su charcoal, secondo quali sezioni la
   pagina ha (pagine servizio: il generatore alterna i fondi; Contatti: ritmo fisso). Leggono quindi i
   colori da queste variabili invece di fissarli: nessuna coppia scuro-scuro o chiaro-chiaro quando una
   manca. Il prefisso .cbn-sp- e' storico (nato nelle pagine servizio): non rinominarlo, e' nel markup
   gia' applicato. Sta in questo foglio, caricato da tutte le pagine interne, per non far dipendere
   Contatti da cbn-servizio.css. In coda al foglio: il suo `color` deve venire dopo quello di .cbn-cs-light
   (stessa specificita'), come accadeva quando stava nel foglio caricato dopo questo. */
.cbn-sp-tone {
	--sp-bg: var(--cbn-paper);
	--sp-fg: var(--cbn-text);
	--sp-muted: var(--cbn-text-muted);
	--sp-line: var(--cbn-line-on-light);
	--sp-raised-hover: var(--cbn-white);
	--sp-accent: var(--cbn-orange-strong);       /* filetti e marcatori (decorazione) */
	--sp-accent-text: var(--cbn-orange-strong);  /* testo piccolo: 5,11:1 su paper */
	color: var(--sp-fg);
}
.cbn-sp-tone.cbn-cs-light-deep {
	--sp-bg: var(--cbn-paper-deep);
	--sp-raised-hover: var(--cbn-paper);
}
.cbn-sp-tone.cbn-section-dark {
	--sp-bg: var(--cbn-charcoal);
	--sp-fg: var(--cbn-on-dark);
	--sp-muted: var(--cbn-on-dark-muted);
	--sp-line: var(--cbn-line-on-dark);
	--sp-raised-hover: var(--cbn-surface-raised-hover);
	--sp-accent: var(--cbn-orange);
	/* sul charcoal il testo piccolo e' bianco: l'arancio pieno (4,25:1) resta a filetti e marcatori */
	--sp-accent-text: var(--cbn-on-dark);
}