/**
 * WORKS homepage benefits.
 *
 * Owns the dark navy benefits band, heading,
 * four benefit cards, icon placeholders and
 * responsive layout.
 */

/* Main section background. */

.works-benefits {
	position: relative;
	overflow: hidden;
	color: var(--works-white);
	background: linear-gradient(
		110deg,
		var(--works-navy) 0%,
		#0d3266 55%,
		var(--works-blue-deep) 100%
	);
}

/* Section heading with orange divider lines. */

.works-benefits-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

.works-benefits .works-centered-title {
	margin: 0;
	color: var(--works-white);
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	line-height: 1.2;
}

.works-benefits-heading-line {
	width: 75px;
	height: 2px;
	flex: 0 0 75px;
	background: var(--works-orange);
}

/* Four-column benefit layout. */

.works-benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}

.works-benefit-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	padding: 0 1.5rem;
	text-align: center;
	border-right: 1px solid rgb(255 255 255 / 30%);
}

.works-benefit-card:last-child {
	border-right: 0;
}

/* Blank icon placeholders for manual replacement. */

.works-benefit-icon-placeholder {
	display: grid;
	width: 58px;
	height: 58px;
	flex: 0 0 58px;
	place-items: center;
	margin-bottom: 1.2rem;
	border: 1px dashed rgb(255 255 255 / 65%);
	border-radius: 12px;
	background: rgb(255 255 255 / 8%);
}

.works-benefit-icon-inner {
	display: block;
	width: 26px;
	height: 26px;
	border: 1px dashed rgb(255 255 255 / 45%);
	border-radius: 6px;
}

/* Benefit titles. */

.works-benefit-card h3 {
	margin: 0 0 0.65rem;
	color: var(--works-white);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
}

/* Benefit descriptions. */

.works-benefit-card p {
	max-width: 230px;
	margin: 0;
	color: #d5e1ef;
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Tablet layout. */

@media (max-width: 900px) {
	.works-benefit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 0;
	}

	.works-benefit-card:nth-child(2) {
		border-right: 0;
	}

	.works-benefit-card:nth-child(3),
	.works-benefit-card:nth-child(4) {
		padding-top: 0.5rem;
	}
}

/* Mobile layout. */

@media (max-width: 600px) {
	.works-benefits-heading {
		gap: 0.6rem;
		margin-bottom: 2.2rem;
	}

	.works-benefits-heading-line {
		width: 25px;
		flex-basis: 25px;
	}

	.works-benefits .works-centered-title {
		font-size: 1.35rem;
	}

	.works-benefit-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.works-benefit-card {
		padding: 0 1rem 1.5rem;
		border-right: 0;
		border-bottom: 1px solid rgb(255 255 255 / 25%);
	}

	.works-benefit-card:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.works-benefit-icon-placeholder {
		margin-bottom: 0.9rem;
	}
}