/* ==========================================================================
   NUOVA SALTINI — home                                          v1.0.0
   Si carica: solo in home. Apertura, ricerca guidata, schede delle
   categorie, punti di forza, processo, settori, risorse.
   ========================================================================== */

/* Apertura ------------------------------------------------------------------ */

/* Il velo è sullo sfondo della sezione, non sul contenitore: porta la foto nel
   blu a sinistra, dove sta il testo, senza coprire i pulsanti. */
.ns-site .ns-hero .section-bg::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--kw-scuro) 0%, color-mix(in srgb, var(--kw-scuro) 62%, transparent) 34%, transparent 68%);
	content: '';
}

.ns-site .ns-hero .section-content {
	display: flex;
	min-height: clamp(560px, calc(100vh - 230px), 880px);
	align-items: center;
}

.ns-site .ns-hero .section-content > .row { width: 100%; }
.ns-site .ns-hero__testo { padding-block: 72px 56px; }
.ns-site .ns-titolo--apertura h1 { max-width: 14ch; }
.ns-site .ns-hero .button { margin-bottom: 0; }

/* I tre dati: icona sulla colonna, cifra e didascalia sono due moduli Testo. */
.ns-site .row.ns-fatti { margin-top: 44px; }

.ns-site .ns-fatto > .col-inner {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 0 12px;
	align-items: center;
}

.ns-site .ns-fatto > .col-inner::before {
	grid-row: span 2;
	width: 30px;
	height: 30px;
	color: #fff;
}

.ns-site .ns-fatto > .col-inner > * { grid-column: 2; }
.ns-site .ns-fatto p { margin: 0; }

.ns-site .ns-fatto__valore p {
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.1;
}

.ns-site .ns-fatto__etichetta p {
	color: var(--ns-chiaro);
	font-size: .76rem;
	line-height: 1.35;
}

.ns-site .ns-fatto--anni { --ns-i: var(--ns-i-scudo); }
.ns-site .ns-fatto--sede { --ns-i: var(--ns-i-pianta); }
.ns-site .ns-fatto--cnc { --ns-i: var(--ns-i-cnc); }

/* Il disegno tecnico sopra la foto: l'elemento firmato del sito. */
.ns-site .ns-hero__disegno { align-self: stretch; }
.ns-site .ns-hero__disegno .col-inner { height: 100%; }

.ns-site .ns-quote {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	color: color-mix(in srgb, var(--kw-primario) 55%, #fff);
	opacity: .85;
	pointer-events: none;
}

.ns-site .ns-quote text {
	fill: currentColor;
	font-family: var(--kw-sans);
	font-size: 13px;
	stroke: none;
}

/* Ricerca guidata ------------------------------------------------------------- */

.ns-site .ns-finder__titolo p {
	margin: 0;
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.25;
}

.ns-site .ns-cerca {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 14px;
	align-items: center;
	margin: 0;
}

.ns-site .ns-cerca__campo { position: relative; margin: 0; }

.ns-site .ns-cerca select {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 40px 0 16px;
	border: 1px solid var(--ns-filetto-scuro);
	border-radius: var(--kw-raggio);
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-size: .92rem;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ns-site .ns-cerca select option { color: var(--kw-inchiostro); }

.ns-site .ns-cerca__campo::after {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	content: '';
	pointer-events: none;
	transform: translateY(-70%) rotate(45deg);
}

.ns-site .ns-cerca .kw-btn { margin: 0; white-space: nowrap; }

/* Schede delle categorie: una grande e il mosaico due + tre -------------------- */

.ns-site .ns-categorie--mosaico {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

.ns-site .ns-categorie--mosaico .ns-cat:nth-child(-n+2) { grid-column: span 3; }
.ns-site .ns-categorie--mosaico .ns-cat:nth-child(n+3) { grid-column: span 2; }

.ns-site .ns-cat {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--kw-filetto);
	border-radius: var(--kw-raggio);
	background: #fff;
	transition: border-color var(--kw-durata) var(--kw-curva), box-shadow var(--kw-durata) var(--kw-curva);
}

.ns-site .ns-cat:hover,
.ns-site .ns-cat:focus-within { border-color: var(--kw-primario); box-shadow: var(--kw-ombra); }

.ns-site .ns-cat__img { overflow: hidden; aspect-ratio: 16 / 8; background: var(--kw-carta); }
.ns-site .ns-categorie--mosaico .ns-cat:nth-child(n+3) .ns-cat__img { aspect-ratio: 16 / 10; }

.ns-site .ns-cat__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--kw-curva);
}

.ns-site .ns-cat:hover .ns-cat__img img { transform: scale(1.04); }

.ns-site .ns-cat__corpo { display: flex; flex: 1; flex-direction: column; padding: 18px 18px 16px; }
.ns-site .ns-cat__nome { margin: 0 0 .35em; font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.ns-site .ns-cat__nome a { color: var(--kw-titolo-scuro); }

/* Tutta la scheda è cliccabile, il collegamento resta uno: il nome. */
.ns-site .ns-cat__nome a::after { position: absolute; inset: 0; z-index: 1; content: ''; }

.ns-site .ns-cat__testo { margin: 0 0 14px; color: var(--ns-muto); font-size: .84rem; line-height: 1.5; }

.ns-site .ns-cat__piede {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.ns-site .ns-cat__tag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.ns-site .ns-cat__tag li {
	margin: 0;
	padding: .25em .6em;
	border: 1px solid var(--kw-filetto);
	border-radius: 2px;
	color: var(--kw-testo);
	font-size: .7rem;
	line-height: 1.3;
}

.ns-site .ns-cat__freccia {
	width: 16px;
	height: 16px;
	flex: none;
	margin-left: auto;
	background: var(--kw-primario);
	-webkit-mask: var(--ns-i-freccia) center / contain no-repeat;
	mask: var(--ns-i-freccia) center / contain no-repeat;
	transition: transform var(--kw-durata) var(--kw-curva);
}

.ns-site .ns-cat:hover .ns-cat__freccia { transform: translateX(4px); }

.ns-site .ns-categorie--vetrina .ns-cat { min-height: 340px; justify-content: flex-end; border: 0; background: var(--kw-scuro); }
.ns-site .ns-categorie--vetrina .ns-cat__img { position: absolute; inset: 0; aspect-ratio: auto; }

.ns-site .ns-categorie--vetrina .ns-cat__img::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, color-mix(in srgb, var(--kw-inchiostro) 88%, transparent) 0%, color-mix(in srgb, var(--kw-inchiostro) 45%, transparent) 55%, transparent 100%);
	content: '';
}

.ns-site .ns-categorie--vetrina .ns-cat__corpo { position: relative; flex: 0; padding: 28px; }
.ns-site .ns-categorie--vetrina .ns-cat__nome { font-size: 1.5rem; }
.ns-site .ns-categorie--vetrina .ns-cat__nome a,
.ns-site .ns-categorie--vetrina .ns-cat__testo { color: #fff; }
.ns-site .ns-categorie--vetrina .ns-cat__testo { opacity: .88; }
.ns-site .ns-categorie--vetrina .ns-cat__tag li { border-color: rgba(255, 255, 255, .45); color: #fff; }
.ns-site .ns-categorie--vetrina .ns-cat__freccia { background: #fff; }

/* Punti di forza: quattro colonne in una fascia, divise da filetti ------------ */

.ns-site .row.ns-plus {
	margin-top: 28px;
	padding: 26px 0;
	border-radius: var(--kw-raggio);
	background: var(--kw-carta);
}

.ns-site .ns-plus__voce { padding-bottom: 0; }

.ns-site .ns-plus__voce > .col-inner {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 0 16px;
	align-content: start;
	padding: 0 12px;
}

.ns-site .ns-plus__voce + .ns-plus__voce > .col-inner { border-left: 1px solid var(--kw-filetto); }

.ns-site .ns-plus__voce > .col-inner::before { grid-row: span 3; width: 40px; height: 40px; color: var(--kw-primario); }
.ns-site .ns-plus__voce > .col-inner > * { grid-column: 2; }
.ns-site .ns-plus__voce--esperienza { --ns-i: var(--ns-i-cronometro); }
.ns-site .ns-plus__voce--produzione { --ns-i: var(--ns-i-ingranaggio); }
.ns-site .ns-plus__voce--qualita { --ns-i: var(--ns-i-verifica); }
.ns-site .ns-plus__voce--supporto { --ns-i: var(--ns-i-tecnico); }

.ns-site .ns-plus__titolo h3 { margin: 0 0 .3em; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.ns-site .ns-plus .ns-piccolo p { margin: 0; font-size: .8rem; }

/* Processo: passi numerati da un contatore, non scritti nel testo ------------- */

.ns-site .ns-processo .row { align-items: stretch; }
.ns-site .ns-processo__foto .col-inner { height: 100%; }

.ns-site .ns-passi ol { margin: 1.4rem 0 2rem; padding: 0; list-style: none; counter-reset: ns-passo; }

.ns-site .ns-passi li {
	display: grid;
	grid-template-columns: 56px 150px 1fr;
	gap: 1rem;
	align-items: baseline;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--kw-filetto);
	color: var(--ns-muto);
	font-size: .86rem;
	counter-increment: ns-passo;
}

.ns-site .ns-passi li::before {
	color: var(--kw-primario);
	content: counter(ns-passo, decimal-leading-zero);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
}

.ns-site .ns-passi strong { color: var(--kw-inchiostro); font-size: .95rem; font-weight: 600; }

/* Settori: le linguette di Flatsome, ridisegnate ------------------------------ */

.ns-site .ns-settori .row { align-items: stretch; }
.ns-site .ns-settori__foto .col-inner { height: 100%; }

.ns-site .ns-settori__tab > .nav {
	flex-wrap: nowrap;
	gap: 0 1.3rem;
	margin: 1.4rem 0 2.2rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--ns-filetto-scuro);
	scrollbar-width: none;
}

.ns-site .ns-settori__tab > .nav > li { margin: 0; }

.ns-site .ns-settori__tab > .nav > li > a {
	padding: .7rem 0;
	border-bottom: 2px solid transparent;
	color: var(--ns-chiaro);
	font-size: .88rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.ns-site .ns-settori__tab > .nav > li.active > a,
.ns-site .ns-settori__tab > .nav > li > a:hover { border-bottom-color: #fff; color: #fff; }

/* Flatsome disegna la sua lineetta sopra la voce attiva: la nostra è sotto. */
.ns-site .ns-settori__tab > .nav > li > a::before { display: none; }

.ns-site .ns-titolo--settore h3 { font-size: 1.3rem; }

/* Risorse ---------------------------------------------------------------------- */

.ns-site .ns-risorsa > .col-inner {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 0 22px;
	align-content: start;
}

.ns-site .ns-risorsa + .ns-risorsa > .col-inner { padding-left: 30px; border-left: 1px solid var(--kw-filetto); }

.ns-site .ns-risorsa > .col-inner::before {
	grid-row: span 3;
	width: 72px;
	height: 72px;
	color: var(--kw-primario);
	-webkit-mask-size: 32px;
	mask-size: 32px;
}

/* Il riquadro attorno all'icona: la maschera taglierebbe un bordo messo
   sull'icona, quindi è un secondo strato. */
.ns-site .ns-risorsa > .col-inner::after {
	position: absolute;
	top: 0;
	left: var(--ns-risorsa-x, 0px);
	width: 72px;
	height: 72px;
	border: 1px solid var(--kw-filetto);
	border-radius: var(--kw-raggio);
	content: '';
	pointer-events: none;
}

.ns-site .ns-risorsa + .ns-risorsa { --ns-risorsa-x: 30px; }
.ns-site .ns-risorsa > .col-inner > * { grid-column: 2; }
.ns-site .ns-risorsa--schede { --ns-i: var(--ns-i-scheda); }
.ns-site .ns-risorsa--campioni { --ns-i: var(--ns-i-campione); }
.ns-site .ns-risorsa--tecnico { --ns-i: var(--ns-i-cuffie); }
.ns-site .ns-risorsa__titolo h3 { margin: 0 0 .35em; font-size: 1.05rem; font-weight: 600; }

/* Piccoli schermi e movimento ridotto ----------------------------------------- */

@media (max-width: 849px) {
	.ns-site .ns-hero .section-content { min-height: 0; }
	.ns-site .ns-hero .section-bg::after {
		background: linear-gradient(180deg, color-mix(in srgb, var(--kw-scuro) 92%, transparent) 0%, color-mix(in srgb, var(--kw-scuro) 70%, transparent) 100%);
	}
	.ns-site .ns-hero__disegno { display: none; }
	.ns-site .ns-cerca { grid-template-columns: 1fr 1fr; }
	.ns-site .ns-cerca .kw-btn { grid-column: 1 / -1; justify-content: center; }
	.ns-site .ns-plus__voce + .ns-plus__voce > .col-inner,
	.ns-site .ns-risorsa + .ns-risorsa > .col-inner { padding-left: 0; border-left: 0; }
	.ns-site .ns-risorsa + .ns-risorsa { --ns-risorsa-x: 0px; }
}

@media (max-width: 549px) {
	.ns-site .ns-cerca { grid-template-columns: 1fr; }
	.ns-site .ns-categorie--mosaico { grid-template-columns: 1fr 1fr; }
	.ns-site .ns-categorie--mosaico .ns-cat:nth-child(n) { grid-column: span 1; }
	.ns-site .ns-categorie--mosaico .ns-cat:nth-child(-n+2) { grid-column: 1 / -1; }
	/* Il testo del passo è testo nudo dopo il titolo (così resta una voce
	   d'elenco normale nell'editor): su schermi stretti niente griglia. */
	.ns-site .ns-passi li { position: relative; display: block; padding-left: 48px; }
	.ns-site .ns-passi li::before { position: absolute; top: 1rem; left: 0; }
	.ns-site .ns-passi strong { display: block; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-site .ns-cat__img img,
	.ns-site .ns-cat__freccia { transition: none; }
}