/* ==================================================
   1. PRIMITIVES
   ================================================== */

/* --------------------------------------------------
   CDC Divider
-------------------------------------------------- */

hr.cdc-divider,
.cdc-divider {
	display: block;
	width: 100%;
	margin: 1.5rem 0;
	padding: 0;
	border: 0;
	border-top: 1px solid currentColor;
	background: transparent;
	opacity: 1;
}

/* Lunghezza */

hr.cdc-divider--short,
.cdc-divider--short {
	width: 6rem;
	margin-right: auto;
	margin-left: auto;
}

/* Aspetto */

hr.cdc-divider--double,
.cdc-divider--double {
	height: 4px;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

/* Orientamento */

.cdc-divider--vertical {
	width: 0;
	height: 100%;
	min-height: 4rem;
	margin: 0 1.5rem;
	border-top: 0;
	border-left: 1px solid currentColor;
}

/* ==================================================
   2. COMPONENTS
   ================================================== */

/* --------------------------------------------------
   CDC Panel
   contenitore editoriale generico
-------------------------------------------------- */

.cdc-panel {
	box-sizing: border-box;
	padding: var(--cdc-space-md);
	border: var(--cdc-border-thin) solid currentColor;
}

.cdc-panel__header {
	margin-bottom: var(--cdc-space-sm);
	padding-bottom: var(--cdc-space-xs);
	border-bottom: var(--cdc-border-thin) solid currentColor;
}

.cdc-panel__header > :first-child,
.cdc-panel__body > :first-child,
.cdc-panel__footer > :first-child {
	margin-top: 0;
}

.cdc-panel__header > :last-child,
.cdc-panel__body > :last-child,
.cdc-panel__footer > :last-child {
	margin-bottom: 0;
}

.cdc-panel__footer {
	margin-top: var(--cdc-space-sm);
	padding-top: var(--cdc-space-xs);
	border-top: var(--cdc-border-thin) solid currentColor;
}

/* ==================================================
   3. PATTERNS
   ================================================== */

/* --------------------------------------------------
   CDC Columns Separated
   Colonne con separatori verticali interni
-------------------------------------------------- */

.cdc-columns-separated {
	--cdc-columns-gap: 3rem;
	--cdc-columns-divider-color: currentColor;
	--cdc-columns-divider-width: 1px;
	--cdc-columns-divider-inset: 18%;

	gap: var(--cdc-columns-gap);
}

.cdc-columns-separated > .wp-block-column {
	position: relative;
}

.cdc-columns-separated
	> .wp-block-column
	+ .wp-block-column::before {

	content: "";
	position: absolute;

	top: var(--cdc-columns-divider-inset);
	bottom: var(--cdc-columns-divider-inset);
	left: calc(var(--cdc-columns-gap) / -2);

	width: var(--cdc-columns-divider-width);
	background: var(--cdc-columns-divider-color);

	transform: translateX(-50%);
	pointer-events: none;
}


/* Nessun separatore quando le colonne si impilano */

@media (max-width: 781px) {

	.cdc-columns-separated {
		gap: 2rem;
	}

	.cdc-columns-separated
		> .wp-block-column
		+ .wp-block-column::before {

		display: none;
	}
}