/* Schéma — template raw. Uniquement des variables générées par theme.json. */

.bank-diagram__canvas {
	--bank-diagram-gap: var(--wp--preset--spacing--60);
	--bank-diagram-line: var(--wp--preset--color--border);
}

.bank-is-dark .bank-diagram__canvas {
	--bank-diagram-line: color-mix(in srgb, currentColor 35%, transparent);
}

.bank-diagram__nodes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bank-diagram__node {
	position: relative;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--bank-diagram-line);
	border-radius: var(--wp--custom--bank--radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.bank-diagram__node--highlight {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.bank-diagram__node-title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

.bank-diagram__node-title a {
	color: inherit;
}

/* Toute la case est cliquable. */
.bank-diagram__node-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bank-diagram__node-text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.bank-diagram__node--highlight .bank-diagram__node-text {
	color: inherit;
}

.bank-diagram__center {
	display: grid;
	place-content: center;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--bank--radius);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	text-align: center;
}

.bank-diagram__center-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.bank-diagram__center-text {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Petit écran : le centre, puis les éléments reliés par un trait vertical. */
.bank-diagram--hub .bank-diagram__canvas,
.bank-diagram--flow .bank-diagram__nodes {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.bank-diagram--hub .bank-diagram__nodes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-left: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--bank-diagram-line);
}

/* Flèche entre deux étapes d'un flux. */
.bank-diagram--flow .bank-diagram__node + .bank-diagram__node::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--40) / -2);
	left: 50%;
	width: 0.6em;
	height: 0.6em;
	border: solid var(--wp--preset--color--muted);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -75%) rotate(45deg);
}

@media (min-width: 56em) {
	/* Hub : les éléments de rang impair à gauche, pair à droite, le centre entre les deux. */
	.bank-diagram--hub .bank-diagram__canvas {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.7fr) minmax(0, 1fr);
		column-gap: var(--bank-diagram-gap);
		row-gap: var(--wp--preset--spacing--40);
		align-items: center;
	}

	.bank-diagram--hub .bank-diagram__center {
		grid-column: 2;
		grid-row: 1 / span var(--bank-rows);
		align-self: stretch;
	}

	.bank-diagram--hub .bank-diagram__nodes {
		display: contents;
	}

	.bank-diagram--hub .bank-diagram__node:nth-child(odd) {
		grid-column: 1;
	}

	.bank-diagram--hub .bank-diagram__node:nth-child(even) {
		grid-column: 3;
	}

	/* Trait de liaison vers le centre. */
	.bank-diagram--hub .bank-diagram__node::after {
		content: "";
		position: absolute;
		top: 50%;
		width: var(--bank-diagram-gap);
		border-top: 2px solid var(--bank-diagram-line);
	}

	.bank-diagram--hub .bank-diagram__node:nth-child(odd)::after {
		left: 100%;
	}

	.bank-diagram--hub .bank-diagram__node:nth-child(even)::after {
		right: 100%;
	}

	.bank-diagram--flow .bank-diagram__nodes {
		grid-template-columns: repeat(var(--bank-count), minmax(0, 1fr));
		gap: var(--bank-diagram-gap);
	}

	.bank-diagram--flow .bank-diagram__node + .bank-diagram__node::before {
		top: 50%;
		left: calc(var(--bank-diagram-gap) / -2);
		transform: translate(-75%, -50%) rotate(-45deg);
	}
}