/*
 * Shared content blocks used by several layouts (BEM, tokens only):
 * section-heading, feature-list, icon-box, pattern, band.
 */

/* Section heading (partials/section-heading.php) */
.sw-section-heading { display: grid; align-content: start; gap: var(--space-24); }
.sw-section-heading__main { display: grid; gap: var(--space-4); }
.sw-section-heading__title { max-inline-size: 29rem; text-wrap: balance; }
h1.sw-section-heading__title { max-inline-size: 36rem; }

.sw-section-heading__aside {
	display: grid;
	justify-items: start;
	gap: var(--gap-m);
}

.sw-section-heading--center { justify-items: center; text-align: center; }
.sw-section-heading--center .sw-section-heading__main { justify-items: center; }
.sw-section-heading--center .sw-section-heading__title { max-inline-size: none; }
.sw-section-heading--center .sw-section-heading__aside { justify-items: center; max-inline-size: 40.25rem; }

/*
 * Split: title left, text/button right. Flex-wrap instead of a breakpoint: the aside sits next to
 * the title while both fit (title ≥ 20rem, aside up to 40.25rem) and wraps below it otherwise.
 */
.sw-section-heading--split {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-24) var(--gap-l);
}

.sw-section-heading--split .sw-section-heading__main { flex: 1 1 20rem; max-inline-size: 36rem; }
.sw-section-heading--split .sw-section-heading__aside { flex: 0 1 40.25rem; }

.sw-section-heading--button-only { align-items: flex-end; }
.sw-section-heading--button-only .sw-section-heading__aside { flex-basis: auto; justify-items: end; }

/* Feature list (partials/feature-list.php): items with a top divider, title and text */
.sw-feature-list {
	display: grid;
	gap: 0 var(--space-64); /* stacked on phones: the items' own padding and divider separate them */
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-feature-list__item {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	padding-block: var(--space-24);
	border-block-start: var(--border);
}

.sw-feature-list__text { margin: 0; }

.sw-feature-list--numbered { gap: 0; }
.sw-feature-list--numbered .sw-feature-list__item {
	grid-template-columns: var(--space-48) minmax(0, 1fr);
	column-gap: var(--space-16);
}
.sw-feature-list__number { grid-row: span 2; padding-block-start: var(--space-4); }

@media (min-width: 48em) {
	.sw-feature-list--columns-2,
	.sw-feature-list--columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-24); }
	.sw-feature-list--numbered .sw-feature-list__item { grid-template-columns: var(--space-64) minmax(0, 1fr); }
}

@media (min-width: 62em) {
	.sw-feature-list--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Icon boxes (partials/icon-boxes.php): square icon tiles with a bottom-right chamfer */
.sw-icon-boxes { display: flex; gap: var(--space-8); }

.sw-icon-box {
	--cut: var(--space-16);
	display: inline-grid;
	place-items: center;
	inline-size: var(--space-48);  /* 64px from 768px */
	block-size: var(--space-48);
	background: var(--color-bg-alt);
	color: var(--color-heading);
}
.sw-icon-box--primary { background: var(--color-primary); color: var(--color-on-primary); }
.sw-icon-box--secondary { background: var(--color-secondary); }
.sw-icon-box__icon { inline-size: var(--space-24); block-size: var(--space-24); }

@media (min-width: 48em) {
	.sw-icon-box { inline-size: var(--space-64); block-size: var(--space-64); }
	.sw-icon-box__icon { inline-size: var(--space-32); block-size: var(--space-32); }
}

.sw-icon-boxes--small .sw-icon-box { --cut: var(--space-8); inline-size: var(--space-40); block-size: var(--space-40); }
.sw-icon-boxes--small .sw-icon-box__icon { inline-size: 1.25rem; block-size: 1.25rem; }

/*
 * Plus pattern component (SolidWorks\Components\Pattern): inline SVG, one <path> per plus.
 * Each plus has --plus-index / --plus-col / --plus-row for staggered animations later.
 */
.sw-plus-pattern {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	color: var(--color-pattern);
	stroke: currentColor;
	stroke-width: 1;
	overflow: visible;
}
.sw-plus-pattern--bright { color: rgb(255 255 255 / 0.3); }
.sw-plus-pattern__plus { vector-effect: non-scaling-stroke; }

/* Pattern: plus-sign background (CSS image, for large areas) */
.sw-pattern {
	background-image: url("../img/patterns/plus.svg");
	background-size: var(--space-40) var(--space-40);
}
.sw-pattern--bright { background-image: url("../img/patterns/plus-bright.svg"); }

/*
 * Band: a dark top band (bg-alt) that ends part-way down an image.
 * Put .sw-band on the section and .sw-band__split on the image wrapper;
 * --band-split is where the band ends, measured from the top of the image.
 */
.sw-band {
	position: relative;
	isolation: isolate; /* keeps the split background above the band but below the content */
	overflow: hidden;
	background: var(--color-bg-alt);
}

.sw-band__split { position: relative; --band-split: 55%; }
.sw-band__split::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: var(--band-split) -100vh;
	inset-inline: -100vw;
	background: var(--color-bg);
}

.sw-band__pattern {
	position: absolute;
	z-index: -1;
	inset-inline: -100vw;
	block-size: var(--space-128);
	inset-block-end: calc(100% - var(--band-split));
}