/**
 * WORKS shared components.
 *
 * Reusable buttons and section heading styles used
 * throughout the homepage.
 */

/* Shared vertical spacing for homepage sections. */
.works-section-pad {
	padding-block: var(--works-section-space);
}

/* Shared centered heading style for sections. */
.works-centered-title {
	margin: 0 0 2.6rem;
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-align: center;
}

/* Shared orange call-to-action button. */
.works-button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.72rem 1.3rem;
	border: 0;
	border-radius: 999px;
	color: var(--works-white);
	background: var(--works-orange);
	box-shadow: 0 8px 20px rgb(245 124 0 / 18%);
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.18s, background 0.18s;
}

.works-button:hover {
	transform: translateY(-2px);
	background: var(--works-bold-orange);
}

/* Smaller button for the site header. */
.works-button-small {
	min-height: 42px;
	padding: 0.55rem 1rem;
	font-size: 0.88rem;
}

/* Navy variation for the bottom call-to-action. */
.works-button-navy {
	background: var(--works-navy);
	box-shadow: none;
}

.works-button-navy:hover {
	background: var(--works-blue-deep);
}