/* Feature list */

.feature-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
}

.feature-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list--1 { grid-template-columns: minmax(0, 560px); }

.feature {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--tint);
	border: 1px solid transparent;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.blk--tint .feature {
	background: var(--surface);
}

.blk--dark .feature {
	background: var(--ink-2);
	border-color: var(--line-dark);
}

.feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.feature__icon {
	background: var(--leaf);
	color: var(--on-leaf);
}

.blk--dark .feature__icon {
	background: var(--leaf);
	color: var(--ink);
}

.feature__title {
	font-size: 1.1875rem;
	margin-bottom: 6px;
}

.feature__text {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--muted);
}

/* Split layout: photograph beside a stacked list. */
.features-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.features-split__media {
	position: relative;
	padding: 0 0 24px 24px;
}

.features-split__media::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 62%;
	height: 62%;
	border-radius: var(--radius-lg);
	background: var(--leaf);
}

.features-split__frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--ink);
}

.features-split__frame img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.feature-list--split {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.feature-list--split .feature {
	flex-direction: row;
	align-items: flex-start;
	padding: 18px 20px;
	background: transparent;
	border-color: var(--line);
}

.feature-list--split .feature:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--leaf);
}

.feature-list--split .feature__icon {
	width: 44px;
	height: 44px;
}

.feature-list--split .feature__icon svg {
	width: 22px;
	height: 22px;
}

.blk-features__cta {
	margin-top: 32px;
}

.blk-features--grid .blk-features__cta {
	justify-content: center;
}

@media (max-width: 1100px) {
	.feature-list,
	.feature-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.features-split { grid-template-columns: minmax(0, 1fr); }
	.features-split__frame img { aspect-ratio: 16 / 10; }
}

@media (max-width: 639px) {
	.feature-list,
	.feature-list--4,
	.feature-list--2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.feature { padding: 22px; }
}