/**
 * NMA Diagrammi — stili base motore diagrammi.
 * Personalizza via CSS custom targettando le classi .diagram-node / .diagram-node--{style} / .diagram-node--{id}
 * (e le eventuali classi extra assegnate dalla pagina di editing del diagramma)
 * o sovrascrivendo le custom properties qui sotto (in :root o per singolo .nma-diagram).
 */

:root {
	--diagram-gap: 24px;
	--diagram-radius: 16px;
	--diagram-padding: 24px;

	--diagram-primary-bg: #2f5bea;
	--diagram-primary-color: #ffffff;

	--diagram-light-bg: #eef1fb;
	--diagram-light-color: #111318;

	--diagram-dark-bg: #17181c;
	--diagram-dark-color: #ffffff;

	--diagram-edge-color: #2f5bea;
	--diagram-edge-width: 2px;

	--diagram-title-size: 1.25rem;
	--diagram-subtitle-size: 0.95rem;
}

.nma-diagram {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--nma-cols, 3), 1fr);
	grid-auto-rows: min-content;
	column-gap: var(--diagram-gap);
	row-gap: calc(var(--diagram-gap) + 20px);
	width: 100%;
}

/*
 * Opzione "Uniforma larghezza delle tab di pari livello".
 * "1fr" equivale a minmax(auto, 1fr): il minimo "auto" e' la larghezza minima
 * del contenuto (parola piu' lunga), quindi una colonna con testo diverso
 * smette di restringersi prima delle altre e le colonne diventano disuguali.
 * minmax(0, 1fr) toglie quel minimo: colonne sempre uguali; le parole troppo
 * lunghe vanno a capo dentro la card invece di allargare la colonna.
 */
.nma-diagram--equal-cols {
	grid-template-columns: repeat(var(--nma-cols, 3), minmax(0, 1fr));
}

/* :where() azzera la specificita': il CSS del sito (es. .diagram-node { min-width: ... }) vince sempre. */
:where(.nma-diagram--equal-cols) .diagram-node {
	min-width: 0;
	overflow-wrap: anywhere;
}

.nma-diagram__edges {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.nma-diagram__edges path {
	fill: none;
	stroke: var(--diagram-edge-color);
	stroke-width: var(--diagram-edge-width);
}

.nma-diagram__edges marker path {
	fill: var(--diagram-edge-color);
	stroke: none;
}

.diagram-node {
	position: relative;
	z-index: 1;
	padding: var(--diagram-padding);
	border-radius: var(--diagram-radius);
	box-sizing: border-box;
	text-align: center;
}

.diagram-node__title {
	margin: 0 0 8px;
	font-size: var(--diagram-title-size);
	font-weight: 700;
	line-height: 1.2;
}

.diagram-node__subtitle {
	margin: 0;
	font-size: var(--diagram-subtitle-size);
	line-height: 1.4;
	opacity: 0.85;
}

.diagram-node--primary {
	background: var(--diagram-primary-bg);
	color: var(--diagram-primary-color);
}

.diagram-node--light {
	background: var(--diagram-light-bg);
	color: var(--diagram-light-color);
}

.diagram-node--dark {
	background: var(--diagram-dark-bg);
	color: var(--diagram-dark-color);
}

/* Il container riceve .is-narrow quando è attivo un layout "narrow" definito nel JSON. */
.nma-diagram.is-narrow {
	--diagram-gap: 16px;
}