/* Page structure: content column, section spacing and backgrounds. */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow {
	max-width: calc(var(--wrap-narrow) + 2 * var(--gutter));
}

/* Sections (see inc/sections.php): background + spacing come from each section's Settings tab. */
.s {
	position: relative;
}

.bg-cream { background: var(--c-bg); }
.bg-beige { background: var(--c-beige); }
.bg-dark  { background: var(--c-dark); color: var(--c-light); }

.pt-none { padding-top: 0; }
.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }
.pb-none { padding-bottom: 0; }
.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }

/* Two same-coloured sections in a row don't double their spacing (photo sections keep theirs:
   their padding is inside the photo). */
.bg-cream.pb-l:not(.s-hero, .s-image_band, .s-boxed_feature) + .bg-cream.pt-l:not(.s-hero, .s-image_band, .s-boxed_feature),
.bg-beige.pb-l:not(.s-hero, .s-image_band, .s-boxed_feature) + .bg-beige.pt-l:not(.s-hero, .s-image_band, .s-boxed_feature) {
	padding-top: 0;
}