/*
 * "64+ attributes. One API call" - house card beside a five-row attribute list.
 *
 * Measured off the 1440px frame: 1280 container, a narrower image card beside a
 * wider list column, 24px gutter.
 */

.attr {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.attr__grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--space-24);
	align-items: stretch;
}

/* --- House card ----------------------------------------------------------- */

.attr-card {
	position: relative;
	min-height: 560px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	isolation: isolate;
}

.attr-card__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim at the top so the white heading reads over the render. */
.attr-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(30 26 54 / 42%) 0%, transparent 42%);
}

.attr-card__heading {
	margin: 0;
	padding: var(--space-32);
	color: var(--color-text-inverse);
}

.attr-card__heading em {
	font-style: italic;
	color: var(--color-primary);
}

/* --- List ----------------------------------------------------------------- */

.attr__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.attr-row {
	display: grid;
	grid-template-columns: auto minmax(9rem, 12rem) 1fr;
	align-items: center;
	gap: var(--space-20);
	flex: 1;
	padding: var(--space-20) var(--space-24);
	border-radius: var(--radius-md);
	background: var(--color-bg-warm);
}

.attr-row__icon {
	width: 24px;
	height: 24px;
}

.attr-row__label {
	font-family: var(--font-display);
	font-size: var(--text-h6);
	font-weight: 600;
	color: var(--color-text-heading);
}

.attr-row__text {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.attr__grid {
		grid-template-columns: 1fr;
	}

	.attr-card {
		min-height: 380px;
	}
}

/* The button only exists for the mobile layout. */
.attr__more {
	display: none;
}

@media (max-width: 620px) {
	/* Mobile drops the render and the two-column rule: one line per row, the
	   description underneath, and the emphasis stays black. */
	/* The heading stays, the render behind it does not - so the card loses its
	   chrome and the copy flips to dark on the page background. */
	.attr-card {
		min-height: 0;
		border-radius: 0;
		overflow: visible;
	}

	.attr-card__photo,
	.attr-card::before {
		display: none;
	}

	.attr-card__heading {
		padding: 0 0 var(--space-24);
		color: var(--color-text-primary);
	}

	.attr-card__heading em {
		font-style: normal;
		color: inherit;
	}

	.attr-card__heading br {
		display: none;
	}

	.attr-row {
		grid-template-columns: auto 1fr;
		row-gap: var(--space-8);
		padding: var(--space-20);
		border-radius: var(--radius-md);
		background: var(--color-bg-warm);
	}

	.attr-row__text {
		grid-column: 1 / -1;
	}

	/* Only the first three rows show until the reader asks for the rest. */
	.attr__list:not(.is-open) .attr-row:nth-child(n + 4) {
		display: none;
	}

	.attr__more {
		display: block;
		width: 100%;
		margin-top: var(--space-12);
		padding: var(--space-20);
		border: 0;
		border-radius: var(--radius-md);
		background: var(--color-bg-warm);
		font-family: var(--font-body);
		font-size: var(--text-body);
		font-weight: 500;
		color: var(--color-text-primary);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}
}