/* The shell retains WordPress root gutters; query its available content width. */
.lpl-three-column-shell {
	container: lpl-three-column / inline-size;
}

.lpl-three-column-shell > .lpl-three-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding-inline: 0;
}

.lpl-three-column > .lpl-three-column__content,
.lpl-three-column > .lpl-three-column__right,
.lpl-three-column > .lpl-three-column__left {
	min-width: 0;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding-inline: 0;
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

/* Full alignment belongs to the content column, including nested Groups. */
.lpl-three-column__content .alignfull,
.lpl-three-column__content .alignwide {
	max-width: 100%;
	margin-inline: 0;
	box-sizing: border-box;
}

.lpl-three-column > .lpl-three-column__right,
.lpl-three-column > .lpl-three-column__left {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

/* Comments and whitespace in an empty part must not leave a mobile gap. */
.lpl-three-column > :is(.lpl-three-column__right, .lpl-three-column__left):not(:has(> *)) {
	display: none;
}

/* 645px center + two 300px side tracks + two 40px gaps. */
@container lpl-three-column (min-width: 1325px) {
	.lpl-three-column-shell > .lpl-three-column {
		grid-template-columns: minmax(0, 1fr) var(--wp--style--global--content-size) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	.lpl-three-column > .lpl-three-column__content {
		grid-column: 2;
		grid-row: 1;
	}

	.lpl-three-column > .lpl-three-column__right {
		grid-column: 3;
		grid-row: 1;
		margin-block-start: 0;
	}

	.lpl-three-column > .lpl-three-column__left {
		grid-column: 1;
		grid-row: 1;
		margin-block-start: 0;
	}
}