/* ==========================================================================
   Layout: sections, rows, columns, grids and splits.
   Works on Divi sections/rows/columns/groups carrying dc- classes and on the
   same class names in PHP templates.
   ========================================================================== */
#page-container .dc-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dc-space-8);
	padding: var(--dc-section-y) 0;
	background-color: var(--dc-white);
}
#page-container .dc-section--surface { background-color: var(--dc-surface); }
#page-container .dc-section--tint { background-color: var(--dc-sky-tint); }
#page-container .dc-section--dark { background-color: var(--dc-navy-deep); overflow: hidden; }
#page-container .dc-section--tight { padding: clamp(32px, 4vw, 48px) 0; }
#page-container .dc-section--flush { padding: 0; }
#page-container .dc-section--border { border-bottom: 1px solid var(--dc-line); }

#page-container .dc-row {
	position: relative;
	display: flex;
	width: 100%;
	max-width: calc(var(--dc-container) + 2 * var(--dc-gutter));
	margin: 0 auto;
	padding: 0 var(--dc-gutter);
	box-sizing: border-box;
}
#page-container .dc-row--narrow { max-width: calc(880px + 2 * var(--dc-gutter)); }
#page-container .dc-row--wide { max-width: none; }

#page-container .dc-col {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.5vw, 48px);
	width: 100%;
	min-width: 0;
	padding: 0;
	margin: 0;
}

/* Generic stacks ---------------------------------------------------------- */
#page-container .dc-stack { display: flex; flex-direction: column; gap: var(--dc-space-5); min-width: 0; }
#page-container .dc-stack--sm { gap: var(--dc-space-3); }
#page-container .dc-stack--lg { gap: var(--dc-space-7); }
#page-container .dc-center { align-items: center; text-align: center; }
#page-container .dc-center .dc-lead { margin-inline: auto; }

/* Section header: eyebrow, heading, optional intro ------------------------ */
#page-container .dc-head { display: flex; flex-direction: column; gap: var(--dc-space-3); max-width: 780px; }
#page-container .dc-head--row { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--dc-space-5); }
#page-container .dc-head--row > .dc-head { flex: 1 1 420px; }

/* Buttons side by side ----------------------------------------------------- */
#page-container .dc-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--dc-space-3) var(--dc-space-5); }

/* Grids: columns are created by available width, not by breakpoints -------- */
#page-container .dc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min, 260px), 100%), 1fr));
	gap: var(--dc-gap-grid);
	width: 100%;
}
#page-container .dc-grid--2 { --dc-grid-min: 420px; }
#page-container .dc-grid--3 { --dc-grid-min: 300px; }
#page-container .dc-grid--4 { --dc-grid-min: 240px; }
#page-container .dc-grid--tight { --dc-grid-min: 220px; }
#page-container .dc-grid > * { min-width: 0; margin: 0; width: auto; }

/* Two-part split that stacks when space runs out --------------------------- */
#page-container .dc-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: var(--dc-gap-split);
	align-items: center;
	width: 100%;
}
#page-container .dc-split--top { align-items: start; }
#page-container .dc-split--aside { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
#page-container .dc-split > * { min-width: 0; margin: 0; width: auto; }

@media (min-width: 900px) {
	#page-container .dc-split--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
	#page-container .dc-split--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
	#page-container .dc-sticky { position: sticky; top: calc(var(--dc-header-h) + 24px); }
}