/* =========================================================================
 * Feature List 001 — Homes, Photo Beside Facts
 *
 * A white band. Each item is the block's own two-column grid, weighted
 * 1.35 : 1 here (core's grid has no unequal tracks); every second item is
 * mirrored. A fading hairline sits halfway between two items.
 * ========================================================================= */

.feature-list-001 {
	background: var(--color-surface);
}

/* The head: eyebrow and title on the left, a small note on the right. */
.feature-list-001__head.feature-list-001__head {
	align-items: flex-end;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.feature-list-001__head h2 {
	margin: var(--space-sm) 0 0;
}

.feature-list-001__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* The rows. */
.feature-list-001 .feature-list-001__item {
	position: relative;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	column-gap: 7%;
	align-items: center;
	margin: var(--space-lg) 0 0;
}

.feature-list-001 .feature-list-001__item + .feature-list-001__item {
	margin-top: var(--space-xl);
}

/* The hairline between two homes, halfway down the gap. */
.feature-list-001 .feature-list-001__item + .feature-list-001__item::before {
	content: "";
	position: absolute;
	top: calc(var(--space-xl) / -2);
	left: 0;
	right: 0;
	height: 1px;
	background: var(--fade-rule);
	pointer-events: none;
}

/* Every second home: photo on the right. Counted among the homes only
   (`of`), so the section head before them does not shift the count. */
.feature-list-001 .feature-list-001__item:nth-child(even of .feature-list-001__item) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.feature-list-001 .feature-list-001__item:nth-child(even of .feature-list-001__item) .feature-list-001__media {
	order: 2;
}

/* The photo, in a rounded frame that zooms slightly on hover. */
.feature-list-001__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.feature-list-001__media .wp-block-image {
	margin: 0;
}

.feature-list-001__media img {
	display: block;
	width: 100%;
	transition: transform 1.2s;
}

.feature-list-001__media:hover img {
	transform: scale(1.035);
}

/* The glass tag in the photo's corner. Doubled class: the editor makes every
   block position:relative (AGENTS.md). */
.feature-list-001__tag.feature-list-001__tag {
	position: absolute;
	top: calc(var(--space-sm) + var(--space-xs));
	left: calc(var(--space-sm) + var(--space-xs));
	z-index: 1;
	margin: 0;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--color-on-dark) 28%, transparent);
	box-shadow:
		0 2px 8px color-mix(in srgb, var(--color-primary-dark) 5%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--color-on-dark) 40%, transparent);
	-webkit-backdrop-filter: blur(4px) saturate(1.08);
	backdrop-filter: blur(4px) saturate(1.08);
	color: var(--color-primary-dark);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.13em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* The words beside it. */
.feature-list-001__info > * {
	margin-block: 0;
}

.feature-list-001__number {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.feature-list-001__info h3 {
	margin-block: var(--space-md) var(--space-sm);
}

.feature-list-001__info .rating {
	margin-bottom: var(--space-md);
}

.feature-list-001__info .is-muted {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
}

.feature-list-001__actions.feature-list-001__actions {
	gap: var(--space-xs) var(--space-sm);
	margin-top: var(--space-md);
}

@media (max-width: 48rem) {
	.feature-list-001__note {
		display: none;
	}
}

@media (max-width: 40rem) {
	.feature-list-001 .feature-list-001__item,
	.feature-list-001 .feature-list-001__item:nth-child(even of .feature-list-001__item) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-md);
	}

	.feature-list-001 .feature-list-001__item:nth-child(even of .feature-list-001__item) .feature-list-001__media {
		order: 0;
	}

	/* Two buttons side by side when they fit, else each on its own row. */
	.feature-list-001__actions .wp-block-button {
		flex: 1 1 auto;
	}

	.feature-list-001__actions .wp-block-button__link.wp-block-button__link {
		font-size: var(--wp--preset--font-size--xs);
	}

	.feature-list-001__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}