/**
 * WORKS homepage features.
 *
 * Owns the six-card feature layout, blank icon areas,
 * card styling, and responsive behavior.
 */

.works-features {
	padding-top: 0;
	background: var(--works-white);
}

.works-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

/* Individual feature card. */

.works-feature-card {
	display: grid;
	min-width: 0;
	min-height: 132px;
	grid-template-columns: 62px minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	padding: 1.2rem;
	border: 1px solid var(--works-light-gray);
	border-radius: 12px;
	background: var(--works-white);
	box-shadow: 0 5px 18px rgb(11 31 59 / 4%);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.works-feature-card:hover {
	border-color: var(--works-light-blue);
	box-shadow: 0 8px 22px rgb(11 31 59 / 8%);
	transform: translateY(-2px);
}

/* Empty icon placeholder.
   Replace later with approved Media Library images. */

.works-feature-icon-placeholder {
	display: block;
	width: 54px;
	height: 54px;
	border: 2px dashed var(--works-cool-gray);
	border-radius: 10px;
	background: var(--works-ice);
}

/* Feature content. */

.works-feature-content {
	min-width: 0;
}

.works-feature-card h3 {
	margin: 0 0 0.45rem;
	color: var(--works-navy);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
}

.works-feature-card p {
	margin: 0;
	color: var(--works-muted);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* Tablet layout. */

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

	.works-feature-card {
		min-height: 125px;
	}
}

/* Mobile layout. */

@media (max-width: 700px) {
	.works-feature-grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.works-feature-card {
		min-height: 110px;
		padding: 1rem;
	}

	.works-feature-card h3 {
		font-size: 1rem;
	}

	.works-feature-card p {
		font-size: 0.84rem;
	}
}

/* Small mobile screens. */

@media (max-width: 380px) {
	.works-feature-card {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 0.8rem;
	}

	.works-feature-icon-placeholder {
		width: 44px;
		height: 44px;
	}
}

/* Respect reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {
	.works-feature-card {
		transition: none;
	}

	.works-feature-card:hover {
		transform: none;
	}
}