/* CBN Informatica (IT-Tech) - CSS delle 8 pagine servizio (template unico, sezioni opzionali).
   Caricato SOLO sulle pagine di cbn_service_page_slugs() (functions.php, cbn_enqueue_identity_styles),
   DOPO cbn-servizi.css, che a sua volta segue cbn-chi-siamo.css e cbn-home.css. Riusa invece di
   ridefinire: da cbn-servizi.css la targa .cbn-sv-plate, l'etichetta mono .cbn-sv-tag e il manifesto
   .cbn-sv-intro__manifesto; da cbn-chi-siamo.css breadcrumb, .cbn-cs-lead, .cbn-cs-figlabel e i fondi
   .cbn-cs-light / .cbn-cs-light-deep; da cbn-home.css .cbn-section-dark/-seam, .cbn-title-section,
   .cbn-eyebrow e la CTA .cbn-home-cta; da cbn-chrome.css i bottoni. Qui solo cio' che e' proprio di
   queste pagine (prefisso .cbn-sp-). Il markup lo genera content/servizio-sections/genera-sezioni.py.
   Origine: design/proposte-2026-10-17/servizio.css, varianti scelte: banner B (C con foto per due
   servizi), apertura A, cosa comprende A (C per i servizi con 7-9 voci), fasi B, "tutti gli altri
   servizi", CTA A. Solo token --cbn-* (cbn-tokens.css): nessun colore o misura nuovi. */

/* ===== Tono =====
   Spostato in cbn-chi-siamo.css (2026-10-18): lo usa anche Contatti, che non carica questo foglio. */

/* Foto e blocchi a filo del bordo non devono creare scroll orizzontale */
.cbn-sp-banner,
.cbn-sp-lead {
	overflow: hidden;
}
.cbn-sp-arrow {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}

/* ===== 1. Banner =====
   H1 = nome del servizio. B "Scheda": titolo a sinistra, targa con ambito e come si richiede a destra
   (bottone dentro la targa, sopra la piega). C "Con foto": split 7/5, foto a filo del bordo destro,
   solo per i servizi con una foto pertinente. */
.cbn-sp-banner__title {
	margin: 0 0 var(--cbn-space-lg);
	font: 800 clamp(2.75rem, 7.4vw, 6.75rem)/1 var(--cbn-font-display); /* 1 e non .92: sul titolo a due righe il gambo della p toccava la T sotto */
	letter-spacing: -.055em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
/* il punto arancio e' testo grande (>= 24px) e non porta informazione */
.cbn-sp-banner__title span {
	color: var(--cbn-orange);
}
.cbn-sp-banner__lead {
	max-width: 28em;
	color: var(--cbn-on-dark-muted);
}

.cbn-sp-banner-b {
	padding: var(--cbn-space-xl) 0 var(--cbn-section-pad);
}
.cbn-sp-banner-b__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--cbn-space-xl);
	align-items: end;
	margin-top: var(--cbn-space-xl);
}
/* la targa e' bianca dentro una sezione scura: il testo torna charcoal */
.cbn-sp-banner-b .cbn-sv-plate {
	color: var(--cbn-text);
}
.cbn-sp-banner-b .cbn-sv-plate .cbn-btn {
	margin-bottom: var(--cbn-space-xs);
}
/* nota di accesso sopra il bottone "Apri un ticket" (Help Desk) */
.cbn-sp-banner-b .cbn-sv-plate dd small + .cbn-btn {
	margin-top: var(--cbn-space-sm);
}
/* il bottone ghost eredita charcoal sulla targa bianca: in hover si riempie di charcoal, non di bianco (invisibile su bianco) */
.cbn-block .cbn-sp-banner-b .cbn-sv-plate .cbn-btn--ghost:hover {
	background: var(--cbn-charcoal);
	border-color: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
	--cbn-btn-lift: var(--cbn-orange);
}

.cbn-sp-banner-c__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	min-height: clamp(440px, 42vw, 580px);
}
.cbn-sp-banner-c__copy {
	align-self: center;
	padding: var(--cbn-space-xl) var(--cbn-space-xl) var(--cbn-space-xl) var(--cbn-container-edge);
}
.cbn-sp-banner-c .cbn-sp-banner__title {
	margin: var(--cbn-space-lg) 0;
	font-size: clamp(2.75rem, 6.6vw, 6rem);
}
.cbn-sp-banner-c .cbn-sp-banner__lead {
	max-width: 26em;
	margin-bottom: var(--cbn-space-md);
}
/* Help Desk: nota di accesso + bottone "Apri un ticket" sotto il bottone principale (nel banner B stanno nella targa) */
.cbn-block .cbn-sp-banner-c__ticket {
	margin-top: var(--cbn-space-lg);
}
.cbn-block .cbn-sp-banner-c__ticket p {
	max-width: 28em;
	margin: 0 0 var(--cbn-space-sm);
	font-size: var(--cbn-size-body);
	color: var(--cbn-on-dark-muted);
}
/* Altezza del riquadro foto = proporzione fissa, non quella dell'immagine: le foto delle 8
   pagine hanno proporzioni leggermente diverse (896x1120, 928x1152...) e, lasciandole
   dettare l'altezza della riga, i banner uscivano di 6px diversi tra una pagina e l'altra.
   4/5 = la proporzione della serie (cfr. width/height degli <img>). */
.cbn-sp-banner-c__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-left: 1px solid var(--cbn-line-on-dark);
}
.cbn-sp-banner-c__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

/* ===== 2. Apertura "Manifesto" =====
   Il manifesto e' quello dell'indice Servizi (.cbn-sv-intro__manifesto): solo la larghezza cambia. */
.cbn-sp-lead {
	padding: var(--cbn-section-pad) 0;
}
.cbn-sp-lead .cbn-sv-intro__manifesto {
	max-width: 25em;
	font-size: clamp(var(--cbn-size-h2-long-min), 3.6vw, 3.25rem);
}
/* Variante con elenco "fatti": il manifesto e' una frase sola, quindi scende di corpo e lascia
   la meta' destra ai dati pratici (stessa grammatica a righe di Contatti / "Cosa comprende"). */
.cbn-sp-lead__grid {
	display: grid;
	gap: var(--cbn-space-xl);
}
.cbn-sp-lead--facts .cbn-sv-intro__manifesto {
	font-size: clamp(var(--cbn-size-h2-long-min), 2.8vw, 2.5rem);
}
.cbn-sp-lead__facts {
	margin: 0;
}
.cbn-sp-lead__fact {
	display: grid;
	gap: var(--cbn-space-xs);
	padding: var(--cbn-space-md) 0;
	border-top: 1px solid var(--sp-line);
}
.cbn-sp-lead__fact:last-child {
	border-bottom: 1px solid var(--sp-line);
}
.cbn-sp-lead__fact dt {
	color: var(--sp-muted);
	font: 500 var(--cbn-size-label)/1.3 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-sp-lead__fact dd {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.5;
}
@media (min-width: 900px) {
	.cbn-sp-lead__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		/* centrato: con 3-4 fatti e un manifesto di 2-3 righe le due colonne hanno altezze diverse e "start" lasciava un vuoto sotto il manifesto */
		align-items: center;
	}
	.cbn-sp-lead__fact {
		grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
		gap: var(--cbn-space-lg);
		align-items: baseline;
	}
}

/* ===== 3. Cosa comprende =====
   A "Righe" (3-5 voci) e C "Elenco compatto" (7-9 voci). Etichette e testi: mai sotto 16 px. */
.cbn-sp-includes {
	padding: var(--cbn-section-pad) 0;
	background: var(--sp-bg);
}
.cbn-sp-includes .cbn-eyebrow,
.cbn-sp-steps .cbn-eyebrow,
.cbn-sp-rel .cbn-eyebrow {
	color: var(--sp-accent-text);
	/* i "p { margin: 0 }" di sezione (sotto, specificita' maggiore di .cbn-eyebrow) azzeravano
	   lo spazio sotto l'etichetta: "Dettaglio" restava attaccata all'H2 */
	margin-bottom: var(--cbn-space-md);
}
.cbn-sp-includes h3,
.cbn-sp-steps h3 {
	margin: 0;
	/* evita la congiunzione "e" da sola all'ultima riga ("Configurazione e personalizzazione" a 1440) */
	text-wrap: balance;
}
.cbn-sp-includes p,
.cbn-sp-steps p {
	margin: 0;
	color: var(--sp-muted);
	font-size: 1rem;
	line-height: 1.6;
}
.cbn-sp-includes .cbn-title-section,
.cbn-sp-steps .cbn-title-section,
.cbn-sp-rel .cbn-title-section {
	max-width: 8em;
	margin: 0;
}

.cbn-sp-includes-a__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--cbn-space-xl);
}
.cbn-sp-includes-a__head {
	align-self: start;
	position: sticky;
	top: calc(var(--cbn-header-height) + var(--cbn-space-lg));
}
.cbn-sp-includes-a__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--sp-line);
}
.cbn-sp-includes-a__row {
	display: grid;
	/* titolo piu' largo della descrizione: "e personalizzazione" (voce piu' lunga, hardware) sforava la colonna 5fr e toccava il testo */
	grid-template-columns: 2.5rem minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--cbn-space-lg);
	align-items: baseline;
	padding: var(--cbn-space-lg) var(--cbn-space-md);
	border-top: 1px solid var(--sp-line);
	transition: background-color var(--cbn-dur-ui), box-shadow var(--cbn-dur-ui);
}
.cbn-sp-includes-a__row h3 {
	font: 800 var(--cbn-size-h3-list)/1.08 var(--cbn-font-display);
	letter-spacing: -.035em;
}
.cbn-sp-includes-a__row:hover {
	background: var(--sp-raised-hover);
	box-shadow: inset 4px 0 0 var(--sp-accent);
}

/* 901-1199px: la lista sta nei 2/3 della pagina e le tre colonne della riga lasciavano alla
   descrizione ~190px (fino a 5 righe). Titolo e descrizione si impilano accanto al numero: la
   descrizione prende tutta la larghezza della riga. Sotto 901px la riga e' gia' in colonna. */
@media (min-width: 901px) and (max-width: 1199px) {
	.cbn-sp-includes-a__row {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: var(--cbn-space-lg);
		row-gap: var(--cbn-space-xs);
	}
	.cbn-sp-includes-a__row .cbn-sp-num {
		grid-row: 1 / 3;
	}
	.cbn-sp-includes-a__row h3,
	.cbn-sp-includes-a__row p {
		grid-column: 2;
	}
}

.cbn-sp-includes-c__head {
	margin-bottom: var(--cbn-space-xl);
}
/* Colonne a flusso (non griglia a righe): con 7 voci la griglia accoppiava le voci per riga e lasciava
   un vuoto sotto la voce piu' corta; il flusso a colonne bilancia 4+3 / 5+4 con righe di altezza naturale.
   break-inside: avoid impedisce di spezzare una voce a cavallo delle due colonne. */
.cbn-sp-includes-c__list {
	column-count: 2;
	column-gap: var(--cbn-space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}
.cbn-sp-includes-c__item {
	break-inside: avoid;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--cbn-space-md);
	padding: var(--cbn-space-md) 0;
	border-bottom: 1px solid var(--sp-line);
}
/* il quadratino-marcatore e' sostituito dal numero mono (.cbn-sp-num) */
.cbn-sp-includes-c__item h3 {
	font: 700 1.25rem/1.25 var(--cbn-font-display);
	letter-spacing: -.015em;
}
.cbn-sp-includes-c__item p {
	margin-top: 4px;
}

/* ===== 4. Come si svolge "Tabella delle fasi" =====
   Solo dove il testo reale descrive una sequenza (oggi Linee & Connessioni Business): numeri veri,
   non decorativi. */
.cbn-sp-steps {
	padding: var(--cbn-section-pad) 0;
	background: var(--sp-bg);
}
.cbn-sp-steps-b__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--cbn-space-xl);
}
.cbn-sp-steps-b__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--sp-line);
}
.cbn-sp-steps-b__row {
	display: grid;
	grid-template-columns: clamp(88px, 11vw, 148px) minmax(0, 1fr);
	gap: var(--cbn-space-md);
	align-items: start;
	padding: var(--cbn-space-lg) 0;
	border-top: 1px solid var(--sp-line);
}
.cbn-sp-steps-b__num {
	font: 500 clamp(3rem, 5.4vw, 5rem)/.9 var(--cbn-font-label);
	letter-spacing: -.07em;
	color: var(--sp-fg);
}
.cbn-sp-steps-b__row h3 {
	font: 800 var(--cbn-size-h3-list)/1.1 var(--cbn-font-display);
	letter-spacing: -.035em;
}
.cbn-sp-steps-b__row p {
	margin-top: var(--cbn-space-xs);
}

/* ===== 5. Tutti gli altri servizi =====
   Scelta editoriale nostra (non c'e' sul sito attuale): nessuna classificazione, i sette servizi restanti
   come link. Da confermare col cliente (content/servizio-sections/LEGGIMI.md). */
.cbn-sp-rel {
	padding: var(--cbn-section-pad) 0;
	background: var(--sp-bg);
}
.cbn-sp-rel__head {
	margin-bottom: var(--cbn-space-lg);
}
.cbn-sp-rel__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbn-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cbn-block .cbn-sp-rel__list a {
	display: flex;
	align-items: center;
	gap: var(--cbn-space-sm);
	padding: 16px 20px;
	border: 1px solid var(--sp-line);
	color: var(--sp-fg);
	font: 700 1.0625rem/1.2 var(--cbn-font-display);
	letter-spacing: -.01em;
	transition: background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui), transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-sp-rel__list .cbn-sp-arrow {
	color: var(--sp-accent-text);
}
.cbn-block .cbn-sp-rel__list a:hover {
	background: var(--sp-raised-hover);
	border-color: var(--sp-accent);
	transform: translateY(-2px);
}
.cbn-sp-rel__list a:hover .cbn-sp-arrow {
	transform: translateX(4px);
}
.cbn-block .cbn-sp-rel__list a:focus-visible {
	outline-offset: 3px;
}

/* ===== Identita' e numeri (2026-10-16) =====
   Riga "Servizio NN / 08" + icona sopra la prima sezione, numeri mono sulle voci e sui correlati: stesso
   lessico della tavola Servizi della Home e dell'elenco /servizi/. Decorativi (aria-hidden). */
.cbn-sp-id {
	display: flex;
	align-items: center;
	gap: var(--cbn-space-sm);
	margin-bottom: var(--cbn-space-md);
	color: var(--sp-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cbn-sp-icon {
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--sp-accent-text);
}
.cbn-sp-num {
	color: var(--sp-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
}
.cbn-sp-includes-a__row .cbn-sp-num,
.cbn-sp-includes-c__item .cbn-sp-num {
	padding-top: .5em;
}
.cbn-sp-includes-a__row p,
.cbn-sp-includes-c__item p {
	font-size: 1rem;
}

/* ===== Come si richiede (4 passi, stessi testi della Home) =====
   Colori dal tono della sezione (.cbn-sp-tone): puo' stare su chiaro o su scuro. Nodi arancio sulla linea. */
.cbn-sp-req {
	padding: var(--cbn-section-pad) 0;
	background: var(--sp-bg);
}
.cbn-sp-req__head {
	margin-bottom: var(--cbn-head-gap);
}
.cbn-sp-req__list {
	--cbn-steps-gap: var(--cbn-card-gap);
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cbn-steps-gap);
	margin: 0;
	padding: var(--cbn-space-lg) 0 0;
	list-style: none;
}
.cbn-sp-req__list::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--sp-fg);
}
.cbn-sp-req__step {
	position: relative;
}
.cbn-sp-req__step::before {
	content: "";
	position: absolute;
	top: calc(var(--cbn-space-lg) * -1 + 3px);
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--sp-accent);
}
.cbn-sp-req__num {
	display: block;
	margin-bottom: var(--cbn-space-md);
	color: var(--sp-fg);
	font: 500 clamp(3rem, 4.5vw, 4rem)/.9 var(--cbn-font-label);
	letter-spacing: -.07em;
}
.cbn-sp-req__step h3 {
	margin-bottom: var(--cbn-space-xs);
	font: 700 1.375rem/1.2 var(--cbn-font-display);
	letter-spacing: -.02em;
}
.cbn-sp-req__step p {
	max-width: 20em;
	color: var(--sp-muted);
}

/* ===== Altri servizi: righe numerate + precedente/successivo ===== */
.cbn-sp-rel__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--cbn-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}
.cbn-block .cbn-sp-rel__list a {
	display: grid;
	grid-template-columns: 2.5rem 32px minmax(0, 1fr) 16px;
	align-items: center;
	gap: var(--cbn-space-sm);
	min-height: 64px;
	padding: var(--cbn-space-sm) var(--cbn-space-xs);
	border: 0;
	border-bottom: 1px solid var(--sp-line);
	transform: none;
}
.cbn-sp-rel__name {
	font: 700 1.1875rem/1.2 var(--cbn-font-display);
	letter-spacing: -.015em;
}
.cbn-block .cbn-sp-rel__list a:hover {
	transform: none;
}
.cbn-sp-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cbn-grid-gap);
	margin-top: var(--cbn-head-gap);
}
.cbn-block .cbn-sp-pager__link {
	display: flex;
	flex-direction: column;
	gap: var(--cbn-space-xs);
	min-height: 44px;
	padding: var(--cbn-space-md);
	border: 1px solid var(--sp-line);
	color: var(--sp-fg);
	transition: background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui);
}
.cbn-block .cbn-sp-pager__link--next {
	text-align: right;
}
.cbn-sp-pager__link span {
	color: var(--sp-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cbn-sp-pager__link strong {
	font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.1 var(--cbn-font-display);
	letter-spacing: -.03em;
}
.cbn-block .cbn-sp-pager__link:hover {
	background: var(--sp-raised-hover);
	border-color: var(--sp-accent);
}
.cbn-block .cbn-sp-pager__link:focus-visible {
	outline-offset: 3px;
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
	.cbn-sp-banner-b {
		padding-top: var(--cbn-space-lg);
	}
	.cbn-sp-banner-b__grid {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-lg);
		margin-top: var(--cbn-space-lg);
	}
	.cbn-sp-banner-c__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.cbn-sp-banner-c__copy {
		padding: var(--cbn-space-lg) var(--cbn-gutter);
	}
	/* la foto sotto il testo: altezza fissa, l'immagine riempie il riquadro */
	.cbn-sp-banner-c__media {
		aspect-ratio: auto;
		min-height: 280px;
		border-left: 0;
		border-top: 1px solid var(--cbn-line-on-dark);
	}
	/* Riquadro largo e basso: il ritaglio centrale lasciava il soggetto sotto la targa (Sicurezza,
	   Help Desk). Il fuoco verticale e' per foto (servizi-pagine.json, foto.fuoco_mobile_y). */
	.cbn-sp-banner-c__media img {
		object-position: 60% var(--sp-photo-focus-y, 50%);
	}
	/* "Laboratorio . Domicilio . Reti . Stampanti" andava a capo a 390px: meno spaziatura tra le
	   lettere, stessa dimensione del testo (le altre targhe non cambiano in modo percepibile) */
	.cbn-sp-banner-c__media .cbn-cs-figlabel {
		padding: 12px;
		letter-spacing: .04em;
	}
	.cbn-sp-includes-a__grid,
	.cbn-sp-steps-b__grid {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-lg);
	}
	.cbn-sp-includes-a__head {
		position: static;
	}
	.cbn-sp-includes-a__row {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-xs);
		padding: var(--cbn-space-md) 0;
	}
	.cbn-sp-includes-a__row .cbn-sp-num {
		padding-top: 0;
	}
	/* passi in 2x2 tra 601 e 900 (con la linea dei nodi solo sulla riga alta: la nascondiamo) */
	.cbn-sp-req__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--cbn-head-gap);
	}
	.cbn-sp-req__list::before {
		display: none;
	}
	/* il nodo sta dentro il passo (nello spazio sopra finirebbe a ridosso della riga precedente) */
	.cbn-sp-req__list {
		padding-top: 0;
	}
	.cbn-sp-req__step {
		padding-top: var(--cbn-space-lg);
	}
	.cbn-sp-req__step::before {
		top: 0;
	}
	.cbn-sp-includes-c__list {
		column-count: 1;
	}
	.cbn-sp-rel__list,
	.cbn-sp-pager {
		grid-template-columns: 1fr;
	}
	.cbn-block .cbn-sp-pager__link--next {
		text-align: left;
	}
}
@media (max-width: 560px) {
	.cbn-sp-req__list {
		grid-template-columns: 1fr;
	}
	.cbn-sp-includes-c__item {
		grid-template-columns: 2rem minmax(0, 1fr);
	}
	.cbn-sp-steps-b__row {
		grid-template-columns: 72px minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cbn-block *,
	.cbn-block *::before,
	.cbn-block *::after {
		transition: none !important;
		animation: none !important;
	}
}