/**
 * Section.
 *
 * The band's side padding is the shared stepped gutter (24 / 48 / 128px), or the fluid Home
 * gutter (`--acini-gutter-home`). Vertical
 * padding is set per side from the design's own steps, each growing at 1024px.
 * The gap between children is a flex gap, so stacked components need no margins.
 */

.acini-section {
	padding-inline: var(--acini-gutter-section);
	color: var(--acini-text);
}

.acini-section__inner {
	display: flex;
	flex-direction: column;
	max-inline-size: var(--acini-container-max);
	margin-inline: auto;
}

.acini-section--xl .acini-section__inner {
	max-inline-size: var(--acini-container-xl);
}

.acini-section--narrow .acini-section__inner {
	max-inline-size: var(--acini-container-narrow);
}

.acini-section--gutter-fluid {
	padding-inline: var(--acini-gutter-home);
}

.acini-section--full {
	padding-inline: 0;
}

.acini-section--full .acini-section__inner {
	max-inline-size: none;
}

/* Backgrounds */
.acini-section--bg-subtle {
	background: var(--acini-bg-subtle);
}

.acini-section--bg-tint {
	background: var(--acini-bg-tint);
}

.acini-section--bg-lavender {
	background: var(--acini-gradient-band);
}

/* The Home articles band: a lavender band that fades in from the grey and back out. */
.acini-section--bg-wash {
	position: relative;
	overflow: hidden;
	background: var(--acini-bg-subtle);
}

.acini-section--bg-wash::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(transparent 0%, var(--acini-accent-band) 30%, var(--acini-accent-band) 64%, transparent 100%);
}

.acini-section--bg-wash > .acini-section__inner {
	position: relative;
}

/* The "more posts" band of a post: from the page's grey to lavender at 54%, as in the design. */
.acini-section--bg-fade {
	background: linear-gradient(var(--acini-bg-subtle) 0%, var(--acini-accent-band) 54%);
}

.acini-section--bg-dark {
	color: var(--acini-text-inverse);
	background: var(--acini-bg-inverse);
}

/* Space between children */
.acini-section--gap-fx56 .acini-section__inner {
	gap: 5.6rem;
}

.acini-section--gap-compact .acini-section__inner,
.acini-section--gap-regular .acini-section__inner {
	gap: var(--acini-space-xl);
}

/* Padding above */
.acini-section--pt-none { padding-block-start: 0; }
.acini-section--pt-sm { padding-block-start: var(--acini-space-xl); }
.acini-section--pt-md { padding-block-start: var(--acini-space-2xl); }
.acini-section--pt-lg { padding-block-start: var(--acini-space-3xl); }
.acini-section--pt-xl { padding-block-start: var(--acini-space-4xl); }
.acini-section--pt-header { padding-block-start: 13.6rem; }
.acini-section--pt-fx64 { padding-block-start: var(--acini-space-2xl); }
.acini-section--pt-fx80 { padding-block-start: calc(var(--acini-space-2xl) + var(--acini-space-md)); }
.acini-section--pt-fx96 { padding-block-start: var(--acini-space-3xl); }
.acini-section--pt-fx100 { padding-block-start: calc(var(--acini-space-3xl) + var(--acini-space-2xs)); }
.acini-section--pt-fx150 { padding-block-start: calc(var(--acini-space-4xl) + var(--acini-space-lg) - 0.2rem); }

/* Padding below */
.acini-section--pb-none { padding-block-end: 0; }
.acini-section--pb-sm { padding-block-end: var(--acini-space-xl); }
.acini-section--pb-md { padding-block-end: var(--acini-space-2xl); }
.acini-section--pb-lg { padding-block-end: var(--acini-space-3xl); }
.acini-section--pb-xl { padding-block-end: var(--acini-space-4xl); }
.acini-section--pb-header { padding-block-end: 13.6rem; }
.acini-section--pb-fx64 { padding-block-end: var(--acini-space-2xl); }
.acini-section--pb-fx80 { padding-block-end: calc(var(--acini-space-2xl) + var(--acini-space-md)); }
.acini-section--pb-fx96 { padding-block-end: var(--acini-space-3xl); }
.acini-section--pb-fx100 { padding-block-end: calc(var(--acini-space-3xl) + var(--acini-space-2xs)); }
.acini-section--pb-fx150 { padding-block-end: calc(var(--acini-space-4xl) + var(--acini-space-lg) - 0.2rem); }

@media (min-width: 64em) {
	.acini-section--gap-compact .acini-section__inner {
		gap: 4.6rem;
	}

	.acini-section--gap-regular .acini-section__inner {
		gap: var(--acini-space-2xl);
	}

	.acini-section--pt-sm { padding-block-start: var(--acini-space-2xl); }
	.acini-section--pt-md { padding-block-start: var(--acini-space-4xl); }
	.acini-section--pt-lg { padding-block-start: var(--acini-space-4xl); }
	.acini-section--pt-xl { padding-block-start: calc(var(--acini-space-4xl) + var(--acini-space-2xl)); }
	.acini-section--pt-header { padding-block-start: var(--acini-space-4xl); }

	.acini-section--pb-sm { padding-block-end: var(--acini-space-2xl); }
	.acini-section--pb-md { padding-block-end: var(--acini-space-4xl); }
	.acini-section--pb-lg { padding-block-end: var(--acini-space-4xl); }
	.acini-section--pb-xl { padding-block-end: calc(var(--acini-space-4xl) + var(--acini-space-2xl)); }
	.acini-section--pb-header { padding-block-end: var(--acini-space-4xl); }
}