/**
 * Home product features section styles — Figma node 2617:3942.
 */

.gh-features {
	/* Full-bleed out of the .site-content (max 1120px) wrapper. */
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: #faf8f4;
	padding: 120px 160px;
}

.gh-features__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 144px;
}

.gh-feature {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.gh-feature__text {
	flex-shrink: 0;
	width: 352px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.gh-feature__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gh-feature__title {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	color: var(--gh-text-primary);
}

.gh-feature__desc {
	margin: 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-secondary);
}

.gh-feature__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gh-feature__list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-secondary);
}

.gh-feature__icon {
	flex-shrink: 0;
	color: #ADADAD;
}

.gh-feature__preview {
	flex: 1 1 auto;
	min-width: 0;
}

.gh-feature__preview img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Laptop / small desktop (1024–1439px): tighter 80px sides + reduced vertical. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.gh-features {
		padding: 96px 40px;
	}
}

@media (max-width: 1023px) {
	.gh-features {
		padding: 64px 24px;
	}

	.gh-features__inner {
		gap: 72px;
	}

	.gh-feature {
		flex-direction: column;
		gap: 24px;
	}

	.gh-feature__text {
		width: 100%;
	}
}

/* Mobile — Figma node 3173:13082: each feature stacks title -> description ->
   image -> list with a uniform 32px rhythm; 64px between features; 64px/16px
   section padding (section is full-bleed 100vw, so no .site-content gutter). */
@media (max-width: 768px) {
	.gh-features {
		padding: 64px 16px;
	}

	.gh-features__inner {
		gap: 64px;
	}

	/* Intentionally widens the ≤1024px gap (24px) back to the Figma 32px. */
	.gh-feature {
		gap: 32px;
	}

	/* Flatten the text wrapper so head, image and list become siblings of
	   .gh-feature and can be reordered head -> image -> list per Figma. Any new
	   child added to .gh-feature__text needs its own `order` value here. */
	.gh-feature__text {
		display: contents;
	}

	.gh-feature__head {
		order: 1;
	}

	.gh-feature__preview {
		order: 2;
	}

	.gh-feature__list {
		order: 3;
	}

	/* Figma rows are 32px tall (4px inset around the 24px line), tighter than the
	   desktop 12px padding. */
	.gh-feature__list-item {
		padding: 4px 0;
	}
}