/* Section: features. */
.s-features__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}
.s-features__media {
	margin: calc(-1 * var(--wp--preset--spacing--30));
	margin-block-end: var(--wp--preset--spacing--10);
}
.s-features__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-start-start-radius: var(--wp--custom--radius--medium);
	border-start-end-radius: var(--wp--custom--radius--medium);
}
.s-features__media:has(.is-svg) { margin: 0; }
.s-features__img.is-svg { inline-size: 56px; block-size: 56px; border-radius: 0; }
.s-features__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
	margin-block-end: var(--wp--preset--spacing--10);
}
.s-features__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.s-features--band .s-features__icon { background: rgba(255, 255, 255, 0.1); color: var(--wp--preset--color--accent); }
.s-features--list .s-features__icon { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--accent); }
.s-features__title {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}
.s-features__text { color: var(--wp--preset--color--muted); }
.s-features__item .link-more { margin-block-start: auto; }
/* band and list: plain columns under a short rule instead of cards */
.s-features--band .s-features__item,
.s-features--list .s-features__item {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 3px solid var(--wp--preset--color--primary);
}
.s-features--band .s-features__media,
.s-features--list .s-features__media { margin: 0 0 var(--wp--preset--spacing--10); }
.s-features--band {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}
.s-features--band .s-features__item { border-block-start-color: var(--wp--preset--color--accent); }
.s-features--band :is(.section-head__title, .section-head__text, .s-features__title, .s-features__text, a) {
	color: var(--wp--preset--color--primary-contrast);
}
/* On a phone an item with an icon is a compact row: the icon beside the title, the text under it. */
@media (max-width: 599px) {
	.s-features__grid { gap: var(--wp--preset--spacing--20); }
	.s-features__item:has(> .s-features__icon) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--20);
		row-gap: 0.25rem;
		align-items: center;
		align-content: start;
	}
	.s-features__item > .s-features__icon { grid-row: span 2; align-self: start; margin: 0; inline-size: 2.5rem; block-size: 2.5rem; }
	.s-features__item:has(> .s-features__icon) .s-features__text { grid-column: 2; margin: 0; }
	.s-features--cards .s-features__item { padding: var(--wp--preset--spacing--20); }
	.s-features--band .s-features__item, .s-features--list .s-features__item { padding-block-start: var(--wp--preset--spacing--10); }
	/* a list of many short items is a row the visitor swipes, the next item showing at the edge */
	.s-features--list .s-features__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 80%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		padding-block-end: var(--wp--preset--spacing--10);
		scrollbar-width: thin;
	}
	.s-features--list .s-features__item { scroll-snap-align: start; }
}
/* the arrows and dots under the row are base.css's .swipe-nav; on the dark band the current dot takes the accent */
.s-features--band .swipe-nav__dots i { background: rgba(255, 255, 255, 0.35); }
.s-features--band .swipe-nav__dots i.is-on { background: var(--wp--preset--color--accent); }
/* Three items in two tablet columns leave the third alone on its row: three narrower columns from 720px instead. */
@media (min-width: 720px) {
	.s-features__grid.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* In those narrower tablet columns the cards' padding is halved, so titles and places wrap less. */
@media (min-width: 720px) and (max-width: 1099px) {
	.s-features--cards .s-features__grid.grid--3 .s-features__item { padding: var(--wp--preset--spacing--20); }
	.s-features--cards .s-features__grid.grid--3 .s-features__media { margin: calc(-1 * var(--wp--preset--spacing--20)); margin-block-end: var(--wp--preset--spacing--10); }
}