/* base/layout.css
   Page scaffolding: the wrap, section spacing, splits and stacks.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.stack { display: flex; flex-direction: column; gap: 28px; }

.stack-sm { display: flex; flex-direction: column; gap: 20px; }

.stack-xl { display: flex; flex-direction: column; gap: 60px; }

.section-pt { padding-top: 80px; }

.section-pb { padding-bottom: 96px; }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	padding-top: 96px;
	padding-bottom: 96px;
}

.split-center { align-items: center; }

.band-soft {
	background: var(--soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 74px 0;
}

.rule-head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.rule-head h2 {
	font-weight: 700;
	font-size: 34px;
}

.rule {
	flex: 1;
	height: 1px;
	background: #DFE3EC;
}

.bordered { border: 1px solid var(--line); }

@media (max-width: 980px) {
	.split {
		grid-template-columns: 1fr; gap: 40px;
	}

	/* 35px from 980px down. The two columns are already stacked at this width, so the
		   grid's own 40px row gap is doing most of the separating and the section padding
		   only has to hold the block apart from its neighbours. */
	.split { padding-top: 35px; padding-bottom: 35px; }

	/* 74px was the only section side in the theme that never scaled down, and because a
		   gap between two sections is one section's bottom padding plus the next one's top,
		   it was landing as 135px between the tab panel and "Related products" and 144px
		   against the footer's own 70px. 56px puts it in the same family as .section-pt. */
	.band-soft { padding: 56px 0; }

	.rule-head h2 { font-size: 28px; }

	.section-pt { padding-top: 56px; }

	.section-pb { padding-bottom: 64px; }

	.stack-xl { gap: 44px; }
}

@media (max-width: 680px) {
	.rule-head h2 { font-size: 23px; }

	/* These two have to sit in this block rather than the earlier 680px one: that block
		   comes before the 980px block in the file, so the 56px values there would win over
		   it. Verified in the browser - with .ptabs in the earlier block it computed 56px at
		   390px wide instead of 44px. */
	.band-soft { padding: 46px 0; }
}