/* ==================================================

	Feed layout

	z-index lives here, not on the components: the rails and the feed sit on opposite sides of the posters

	@related stacking_order

================================================== */

.feed-layout {
	display: flex;
	align-items: flex-start;
	gap: var(--gutter);

	padding-top: var(--chrome-gap);
}

/* sticky survives .site-main's `overflow-x: clip` - clip, unlike hidden, makes no scroll container */
.feed-layout__rail {
	position: sticky;
	top: var(--rail-stick-top);
	z-index: var(--z-ui-front);
}

.feed-layout__rail--left {
	flex: 0 0 var(--rail-left-w);
}

.feed-layout__rail--right {
	flex: 0 0 var(--rail-right-w);
}

.feed-layout__main {
	position: relative;
	z-index: var(--z-ui-back);
	flex: 0 0 var(--feed-w);

	display: flex;
	flex-direction: column;
	gap: var(--feed-gap);

	padding-bottom: 48px;
}

/* passes the column's gap through to the posts */
.feed {
	display: flex;
	flex-direction: column;
	gap: inherit;
}

.feed-layout__rail--left > * + * {
	margin-top: 11.5px;
}

/* -------------------------------------
	=Mobile

	rails and feed drop their positioning so the chrome is one layer for the posters, scoops and nav to stack against

	@related stacking_order
------------------------------------- */

@media ( max-width: 1076px ) {

	.feed-layout {
		display: block;

		padding-top: 0;
	}

	.feed-layout__rail,
	.feed-layout__main {
		position: static;
		z-index: auto;
	}

	.feed-layout__main {
		gap: var(--feed-gap-mobile);

		margin-top: var(--feed-gap-mobile);
		padding-bottom: 0;
	}

	.feed-layout__rail--right {
		display: none;
	}

	.feed-layout__rail--left > * + * {
		margin-top: 0;
	}

}