/* ============================================
   Feature Lists
   Standard, Zig-Zag, and Annotated variants
   ============================================ */

/* === Base Feature List === */

.feature-list {
	padding-block: var(--section-padding);
}

.feature-list__item {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	/* max-width: var(--content-width); */
	margin-inline: auto;	padding-block: clamp(2rem, 4vh, 4rem);
}

/* Image side — 25% */
.feature-list__image {
	overflow: hidden;
	border-radius: 12px;
}

.feature-list__image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

/* Text side — 75% */
.feature-list__text h3 {
	margin-bottom: 0.5em;
	/* Shared type treatment (see --feature-type-* in main.css). Pinned
	   here so this heading and the home highlights list are byte-for-byte
	   identical in the Computed panel except for font-size. */
	font-family: var(--feature-type-family);
	font-weight: var(--feature-type-weight);
	font-style: var(--feature-type-style);
	color: var(--feature-type-color);
	letter-spacing: var(--feature-type-letter-spacing);
	line-height: var(--feature-type-line-height);
	font-optical-sizing: none;
	font-variation-settings: "opsz" var(--feature-type-opsz), "wght" var(--feature-type-weight);
}

.feature-list__text p {
	color: var(--text-secondary);
	max-width: 55ch;
}

/* === first-image="right" — image on the right === */
.feature-list--image-right .feature-list__item {
	grid-template-columns: 3fr 1fr;
}

.feature-list--image-right .feature-list__image {
	order: 2;
}

.feature-list--image-right .feature-list__text {
	order: 1;
}

/* === Zig-Zag — alternating image side === */

.feature-list--zigzag {
	padding: 2em;
}

.feature-list--zigzag .feature-list__item {
	grid-template-columns: 3fr 2fr;
}

/* Default zigzag starts with image-left */
.feature-list--zigzag .feature-list__item:nth-child(even) {
	grid-template-columns: 1fr 2fr;
}

.feature-list--zigzag .feature-list__item:nth-child(even) .feature-list__image {
	order: 2;
}

.feature-list--zigzag .feature-list__item:nth-child(even) .feature-list__text {
	order: 1;
}

/* Zigzag starting with image-right flips the pattern */
.feature-list--zigzag.feature-list--image-right .feature-list__item {
	grid-template-columns: 3fr 1fr;
}

.feature-list--zigzag.feature-list--image-right .feature-list__item .feature-list__image {
	order: 2;
}

.feature-list--zigzag.feature-list--image-right .feature-list__item .feature-list__text {
	order: 1;
}

.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) {
	grid-template-columns: 1fr 3fr;
}

.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) .feature-list__image {
	order: 1;
}

.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) .feature-list__text {
	order: 2;
}

/* === Functions Banner === */

.functions-banner {	padding-block: clamp(2rem, 4vh, 4rem);
	margin-inline: auto;
}

.functions-banner img {
	width: 100%;
	height: auto;
}

/* === Responsive === */

@media (max-width: 48rem) {
	.feature-list__item,
	.feature-list--image-right .feature-list__item,
	.feature-list--zigzag .feature-list__item,
	.feature-list--zigzag .feature-list__item:nth-child(even),
	.feature-list--zigzag.feature-list--image-right .feature-list__item,
	.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.feature-list__image,
	.feature-list--image-right .feature-list__image,
	.feature-list--zigzag .feature-list__item:nth-child(even) .feature-list__image,
	.feature-list--zigzag.feature-list--image-right .feature-list__item .feature-list__image,
	.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) .feature-list__image {
		order: 0 !important;
		max-width: 16rem;
	}

	.feature-list__text,
	.feature-list--image-right .feature-list__text,
	.feature-list--zigzag .feature-list__item:nth-child(even) .feature-list__text,
	.feature-list--zigzag.feature-list--image-right .feature-list__item .feature-list__text,
	.feature-list--zigzag.feature-list--image-right .feature-list__item:nth-child(even) .feature-list__text {
		order: 0 !important;
	}
}