/* CBN Informatica (IT-Tech) - CSS delle 5 sezioni di Servizi (indice). Caricato SOLO su is_page('servizi')
   (functions.php, cbn_enqueue_identity_styles), DOPO cbn-chi-siamo.css, da cui riusa banner di testata,
   breadcrumb, .cbn-cs-lead, .cbn-cs-light / .cbn-cs-light-deep; da cbn-home.css la CTA .cbn-home-cta,
   .cbn-title-section, .cbn-eyebrow, .cbn-section-seam; da cbn-chrome.css i bottoni. Qui c'e' solo
   cio' che e' proprio di questa pagina (prefisso .cbn-sv-).
   Origine: design/proposte-2026-10-16/servizi.css (banner A, intro A, elenco A, ingressi B, CTA A).
   Solo token --cbn-* (cbn-tokens.css): nessun colore nuovo. */

/* ===== Ritmo e fondi =====
   banner D | intro L | elenco D | ingressi L (paper-deep) | CTA arancio | footer D. */
.cbn-sv-intro,
.cbn-sv-list,
.cbn-sv-doors {
	overflow: hidden;
}
.cbn-sv-tag {
	margin: 0;
	font: 500 var(--cbn-size-label)/1.4 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ===== 2. Introduzione "Manifesto e targa" =====
   Solo tipografia: le parole chiave a contrasto pieno, il resto attenuato; accanto la targa con i dati
   reali (8 servizi, sede, come si richiede). Sezione compressa per variare il ritmo verticale. */
.cbn-sv-intro {
	padding: var(--cbn-section-pad) 0;
}
.cbn-sv-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: var(--cbn-space-2xl);
	align-items: start;
}
.cbn-sv-intro__manifesto {
	margin: 0;
	font: 700 clamp(var(--cbn-size-h2-long-min), 3.4vw, 3.125rem)/1.14 var(--cbn-font-display);
	letter-spacing: -.035em;
	/* testo "spento" derivato dai token (nessun hex nuovo): circa 5,7:1 su paper, supera AA */
	color: color-mix(in srgb, var(--cbn-text) 70%, var(--cbn-paper));
	text-wrap: balance;
}
.cbn-sv-intro__manifesto strong {
	font-weight: 800;
	color: var(--cbn-text);
}
/* targa: stesso linguaggio dei dati della Home (mono, filetto arancio, angoli netti) */
.cbn-sv-plate {
	margin: 0;
	padding: var(--cbn-space-md) var(--cbn-space-md) var(--cbn-space-xs);
	background: var(--cbn-white);
	border-top: 4px solid var(--cbn-orange);
	box-shadow: 0 0 0 1px var(--cbn-line-on-light);
}
.cbn-sv-plate div {
	padding: var(--cbn-space-md) 0;
	border-top: 1px solid var(--cbn-line-on-light);
}
.cbn-sv-plate div:first-child {
	padding-top: var(--cbn-space-xs);
	border-top: 0;
}
.cbn-sv-plate dt {
	margin-bottom: var(--cbn-space-xs);
	color: var(--cbn-text-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cbn-sv-plate dd {
	margin: 0;
	font: 700 1.125rem/1.35 var(--cbn-font-display);
	letter-spacing: -.01em;
}
.cbn-sv-plate dd small {
	display: block;
	margin-top: 2px;
	font: 400 1rem/1.5 var(--cbn-font-body);
	letter-spacing: 0;
	color: var(--cbn-text-muted);
}
.cbn-sv-plate dd.cbn-sv-plate__figure {
	font: 500 3.5rem/.9 var(--cbn-font-label);
	letter-spacing: -.07em;
	color: var(--cbn-orange-strong);
}

/* ===== 3. Elenco degli otto servizi "Indice tipografico" =====
   Il nome e' il gesto grafico; etichette mono = parole gia' presenti nei testi reali. Nessuna numerazione:
   gli otto servizi non sono una sequenza.
   Le righe non sono ancora link (le pagine servizio arrivano dopo): .cbn-sv-rows__item e' un <div>.
   Quando una riga diventa <a class="cbn-sv-rows__item"> prende da sola hover, freccia e cursore
   (regole `a.cbn-sv-rows__item` qui sotto); vedi content/servizi-sections/LEGGIMI.md. */
.cbn-sv-list {
	padding: var(--cbn-section-pad) 0;
}
.cbn-sv-list__head {
	margin-bottom: var(--cbn-space-2xl);
}
.cbn-sv-list__head .cbn-title-section {
	max-width: 10em;
	margin: 0;
}
.cbn-sv-rows {
	/* le righe hanno 16px di padding laterale per l'hover: il margine negativo uguale riporta numero e
	   nome sulla verticale del titolo e dell'eyebrow, mentre lo sfondo dell'hover sporge di 16px */
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cbn-line-on-dark);
}
@media (min-width: 901px) {
	.cbn-sv-rows {
		margin-inline: calc(var(--cbn-space-sm) * -1);
	}
}
.cbn-sv-rows li {
	border-bottom: 1px solid var(--cbn-line-on-dark);
}
.cbn-sv-rows__item {
	display: grid;
	/* 7/5 e non 6/5: il nome piu' lungo ("Linee & Connessioni Business") deve restare su una riga
	   a 1440 e 1100, altrimenti la sua riga e' piu' alta delle altre sette (review 2026-10-14) */
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--cbn-space-lg);
	align-items: center;
	padding: var(--cbn-space-lg) var(--cbn-space-sm);
	color: var(--cbn-on-dark);
}
/* numero decorativo come nella tavola Servizi della Home */
.cbn-sv-rows__num {
	display: block;
	margin-bottom: var(--cbn-space-xs);
	color: var(--cbn-on-dark-muted);
	font: 500 var(--cbn-size-label)/1 var(--cbn-font-label);
	letter-spacing: .14em;
}
.cbn-sv-rows__name h3 {
	margin: 0;
	/* minimo 1.5rem e massimo 2.875rem: a 390 px il nome piu' lungo entra in una riga sola (a 1.75rem andava a capo) */
	font: 800 var(--cbn-size-h3-feature)/1 var(--cbn-font-display);
	letter-spacing: -.04em;
	text-wrap: balance;
}
.cbn-sv-rows__name .cbn-sv-tag {
	margin-top: var(--cbn-space-sm);
	color: var(--cbn-on-dark-muted);
}
.cbn-sv-rows__item > p {
	margin: 0;
	max-width: 32em;
	color: var(--cbn-on-dark-muted);
	/* 16 px: a 15 px la descrizione risultava minuta accanto al nome da 40-50 px (review 2026-10-14) */
	font-size: 1rem;
}
/* numero + icona in testa al nome (decorativi) e miniatura della foto del servizio a destra (2026-10-16):
   la foto e' la stessa della pagina servizio, `alt=""` perche' la riga ha gia' il nome */
.cbn-sv-rows__id {
	display: flex;
	align-items: center;
	gap: var(--cbn-space-sm);
	margin-bottom: var(--cbn-space-xs);
	color: var(--cbn-orange);
}
.cbn-sv-rows__id .cbn-sv-rows__num {
	display: inline;
	margin: 0;
}
.cbn-sv-rows__icon {
	width: 28px;
	height: 28px;
}
/* .elementor img { height:auto } del tema batteva questa regola: serve la specificita' di .cbn-block + classe */
.cbn-block .cbn-sv-rows__thumb {
	width: 112px;
	height: 112px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: saturate(.8) contrast(.98);
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
@media (prefers-reduced-motion: no-preference) {
	a.cbn-sv-rows__item:hover .cbn-sv-rows__thumb,
	a.cbn-sv-rows__item:focus-visible .cbn-sv-rows__thumb {
		transform: scale(1.06);
	}
}
/* --- riga-link (attivare quando esiste la pagina servizio): riga intera cliccabile con freccia --- */
.cbn-block a.cbn-sv-rows__item {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) 112px 24px;
	cursor: pointer;
	transition: background-color var(--cbn-dur-ui), box-shadow var(--cbn-dur-ui);
}
.cbn-sv-rows__name {
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui);
}
.cbn-sv-rows__arrow {
	width: 24px;
	height: 24px;
	color: var(--cbn-orange);
	transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui), color var(--cbn-dur-ui);
}
.cbn-block a.cbn-sv-rows__item:hover {
	background: var(--cbn-surface-raised-hover);
	box-shadow: inset 4px 0 0 var(--cbn-orange);
}
a.cbn-sv-rows__item:hover .cbn-sv-rows__name {
	transform: translateX(14px);
}
a.cbn-sv-rows__item:hover .cbn-sv-rows__arrow {
	transform: translateX(6px);
	color: var(--cbn-on-dark);
}
.cbn-block a.cbn-sv-rows__item:focus-visible {
	outline-offset: -4px;
}

/* ===== 4. Da dove si parte "Due ingressi" =====
   Informazione vera e nuova: due modi di iniziare, a seconda che si sia nuovi clienti o clienti con contratto. */
.cbn-sv-doors {
	padding: var(--cbn-section-pad) 0;
}
.cbn-sv-doors__head {
	margin-bottom: var(--cbn-space-xl);
}
.cbn-sv-doors__head .cbn-title-section {
	max-width: 10em;
	margin: 0;
}
.cbn-sv-doors__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cbn-space-md);
}
.cbn-sv-door {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--cbn-space-xl) var(--cbn-space-lg);
}
.cbn-sv-door .cbn-sv-tag {
	margin-bottom: var(--cbn-space-md);
}
.cbn-sv-door h3 {
	margin: 0 0 var(--cbn-space-sm);
	font: 800 var(--cbn-size-h3-feature)/1.02 var(--cbn-font-display);
	letter-spacing: -.04em;
}
.cbn-sv-door p:not(.cbn-sv-tag) {
	max-width: 28em;
	margin: 0 0 var(--cbn-space-lg);
}
.cbn-sv-door .cbn-btn {
	margin-top: auto;
}
.cbn-sv-door--light {
	background: var(--cbn-white);
	border-top: 4px solid var(--cbn-orange-strong);
	box-shadow: 0 0 0 1px var(--cbn-line-on-light);
}
.cbn-sv-door--light .cbn-sv-tag {
	color: var(--cbn-orange-strong);
}
.cbn-sv-door--light p:not(.cbn-sv-tag) {
	color: var(--cbn-text-muted);
}
.cbn-sv-door--dark {
	--cbn-btn-lift: var(--cbn-orange);
	background: var(--cbn-charcoal);
	color: var(--cbn-on-dark);
	border-top: 4px solid var(--cbn-orange);
}
.cbn-sv-door--dark .cbn-sv-tag,
.cbn-sv-door--dark p:not(.cbn-sv-tag) {
	color: var(--cbn-on-dark-muted);
}
/* la scheda scura sta dentro una sezione .cbn-on-light: l'anello di focus deve essere quello del fondo scuro */
.cbn-block .cbn-sv-door--dark :focus-visible {
	outline-color: var(--cbn-orange);
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
	.cbn-sv-intro__grid {
		grid-template-columns: 1fr;
		gap: var(--cbn-space-xl);
	}
	.cbn-sv-rows__item,
	.cbn-block a.cbn-sv-rows__item {
		grid-template-columns: minmax(0, 1fr) 72px 24px;
		gap: var(--cbn-space-sm) var(--cbn-space-md);
		padding: var(--cbn-space-lg) 0;
	}
	.cbn-block .cbn-sv-rows__thumb {
		grid-column: 2;
		grid-row: 1;
		width: 72px;
		height: 72px;
	}
	/* senza freccia (righe non ancora link) il nome occupa tutta la riga */
	div.cbn-sv-rows__item {
		grid-template-columns: minmax(0, 1fr);
	}
	.cbn-sv-rows__arrow {
		grid-column: 3;
		grid-row: 1;
	}
	.cbn-sv-rows__item > p {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	a.cbn-sv-rows__item:hover .cbn-sv-rows__name {
		transform: none;
	}
	.cbn-sv-doors__grid {
		grid-template-columns: 1fr;
	}
	.cbn-sv-door {
		padding: var(--cbn-space-lg) var(--cbn-space-md);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cbn-block *,
	.cbn-block *::before,
	.cbn-block *::after {
		transition: none !important;
		animation: none !important;
	}
}