/* ==========================================================================
   Blocco: Sei colonne con bordo (csp-scb)
   - .csp-scb-wrap → fascia a tutta larghezza del viewport con colore di
                     fondo opzionale (background inline dalla view)
   - .csp-scb      → container interno centrato (max-width 1200px) con fino
                     a 6 card su una riga
   Ogni card ha flex 1 1 0: tutte uguali e sempre allargate a completare la
   riga, qualunque sia il loro numero (1-6).
   Stile della singola card: vedi sei-colonne-bordo-card/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper a tutta larghezza ("full bleed")
   -------------------------------------------------------------------------- */
.csp-scb-wrap {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* 100vw include la scrollbar verticale su Windows/Linux: evita la scrollbar
   orizzontale. "clip" non crea un contesto di scroll e non rompe sticky. */
body:has(.csp-scb-wrap) {
	overflow-x: clip;
}

/* Nell'editor il blocco è già "align full": niente 100vw. */
.editor-styles-wrapper .csp-scb-wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Con colore di fondo la fascia ha respiro sopra e sotto. */
.csp-scb-has-bg {
	padding: 80px 0;
}

/* --------------------------------------------------------------------------
   Container interno + riga di card
   -------------------------------------------------------------------------- */
.csp-scb {
	--csp-scb-gap: 20px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--csp-scb-gap);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
}

.csp-scb > .csp-scb-card {
	flex: 1 1 0;
	min-width: 0;
}

/* Limite di 6 card: eventuali card in eccesso non vengono mostrate. */
.csp-scb > .csp-scb-card:nth-child(n+7 of .csp-scb-card) {
	display: none;
}

/* --------------------------------------------------------------------
   Responsive: righe da 3, poi da 2, poi 1 card per riga. Con flex-grow
   le card dell'ultima riga incompleta si allargano a completarla.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.csp-scb > .csp-scb-card {
		flex-basis: calc(33.333% - (var(--csp-scb-gap) * 2 / 3));
	}
}

@media (max-width: 768px) {
	.csp-scb-has-bg {
		padding: 3.5rem 0;
	}
	.csp-scb {
		padding: 0 1.5rem;
	}
	.csp-scb > .csp-scb-card {
		flex-basis: calc(50% - (var(--csp-scb-gap) / 2));
	}
}

@media (max-width: 480px) {
	.csp-scb > .csp-scb-card {
		flex-basis: 100%;
	}
}