/* feature-card-grid.css — Feature card grid component
 *
 * HTML: .feature-card-grid > .container >
 *   .feature-card-grid__heading (h2, optional)
 *   .feature-card-grid__list >
 *     .feature-card-grid__item > .feature-card-grid__text
 *
 * Used on community single pages for feature/amenity listings.
 * Renders features as a multi-column grid of cards.
 */

/* ─── Section wrapper ───────────────────────────────────── */

.feature-card-grid {
	padding: var(--space-xl) 0;
}

/* ─── Heading ───────────────────────────────────────────── */

.feature-card-grid__heading {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
}

/* On dark backgrounds (community page green sections) */
.bg-green .feature-card-grid__heading,
.bg-green-dark .feature-card-grid__heading {
	color: var(--white);
}

/* ─── Grid ──────────────────────────────────────────────── */

.feature-card-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5px; /* gap via background on parent creates cell borders */
	background-color: var(--cream-dark);
	list-style: none;
}

/* ─── Item ──────────────────────────────────────────────── */

.feature-card-grid__item {
	background-color: var(--white);
	padding: 1.25rem 1.5rem;
}

.feature-card-grid__text {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--charcoal);
	line-height: 1.5;
}

/* Dark background variant */
.bg-green .feature-card-grid__item {
	background-color: var(--green);
}

.bg-green .feature-card-grid__text {
	color: rgba(247, 247, 245, 0.85);
}

/* ─── Responsive ────────────────────────────────────────── */

@media ( max-width: 1024px ) {

	.feature-card-grid__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 640px ) {

	.feature-card-grid {
		padding: var(--space-lg) 0;
	}

	.feature-card-grid__list {
		grid-template-columns: 1fr;
	}
}