/* ==========================================================================
   Blacklight Page Builder — Grid System (Frontend)
   Plugin: blpb
   ========================================================================== */

:root {
	--content-width: 1400px;
	--content-padding: 1.5rem;
	--grid-gap: 2rem;
}

/* Grid — Section / Row / Column
   ========================================================================== */

.page-section {
	width: 100%;
}

.section__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

.page-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--grid-gap);
}

.page-col {
	grid-column: span var(--col-width, 12);
	min-width: 0; /* prevent grid blowout */
}

/* Row — Fluid (full-width breakout)
   ========================================================================== */

.page-row--fluid {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* Row — Horizontal Alignment
   ========================================================================== */

.page-row[data-align] {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--grid-gap) / -2);
	gap: 0;
}

.page-row[data-align="center"] { justify-content: center; }
.page-row[data-align="right"] { justify-content: flex-end; }
.page-row[data-align="space-between"] { justify-content: space-between; }
.page-row[data-align="space-evenly"] { justify-content: space-evenly; }

.page-row[data-align] > .page-col {
	grid-column: unset;
	width: calc(var(--col-width, 12) / 12 * 100%);
	padding-inline: calc(var(--grid-gap) / 2);
	box-sizing: border-box;
}

/* Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--grid-gap: 1rem;
		--content-padding: 1rem;
	}

	.page-col {
		grid-column: span 12;
	}

	.page-row[data-align] > .page-col {
		width: 100%;
	}
}