/**
 * Homepage "Projects & Specialized Services" band.
 *
 * Rendered inside the "Our Services" band, right after its bottom hairline,
 * on the same navy background. The desktop stage is full-bleed (mirroring
 * the original design file): the card track spans the whole section width
 * while a side rail floats over its left part, and projects.js writes
 * `--x`, `--w` and `--s` on each card so the active card sits centre-right,
 * the previous cards sweep across to the left (peeking from the left edge,
 * behind the rail) and the rest stack towards the right. On touch and
 * narrow screens the rail becomes an in-flow, centred block and the card
 * positions recalculate to keep the selected card centred.
 *
 * Palette follows the brand (--sfm-green / --sfm-navy / --sfm-font-sans).
 *
 * @package Standards_FM
 */

.prj {
	position: relative;
	padding: 44px 0 80px;
	color: #fff;
	border-top: 0;
	overflow: hidden;
}

.prj-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: center / cover no-repeat;
	pointer-events: none;
}

.prj-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 13, 55, 1) 0%,
		rgba(0, 13, 55, 0.9) 42%,
		rgba(20, 49, 106, 0.82) 74%,
		rgba(28, 62, 128, 0.74) 100%
	);
}

/* When the projects band finishes the services section, it owns the bottom
   padding, so drop the empty navy strip the section would otherwise add. */
.svc-section:has(> .prj) {
	padding-bottom: 0;
}

.prj *,
.prj *::before,
.prj *::after {
	box-sizing: border-box;
}

.prj-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header --------------------------------------------------------------- */

.prj-head {
	margin: 0 auto 42px;
	text-align: center;
	max-width: 720px;
}

.prj-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px;
	font-family: var(--sfm-font-sans);
	font-size: 34px;
	font-weight: var(--sfm-weight-bold);
	letter-spacing: 0.3px;
	color: #fff;
}

.prj-title::before,
.prj-title::after {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--sfm-green);
	flex: none;
}

.prj-desc {
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.72);
	font-size: 17px;
	line-height: 1.6;
	font-weight: var(--sfm-weight-medium);
}

/* Full-bleed stage ----------------------------------------------------- */

.prj-stage {
	position: relative;
	z-index: 1;
}

/* Side rail floats over the stage, aligned to the 1200px content gutter */
.prj-rail {
	position: absolute;
	z-index: 2;
	top: 0;
	left: calc((100% - 1200px) / 2 + 40px);
	width: 353px;
}

.prj-intro {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.86);
}

/* Mirrors the "Explore All Services" button exactly — no shadow, hover
   keeps the white text and shows the same outer ring. */
.prj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 353px;
	height: 60px;
	padding: 0 32px;

	background: var(--sfm-green);
	color: #fff;

	border: 0;
	border-radius: 999px;

	font-family: var(--sfm-font-sans);
	font-size: var(--sfm-text-lg);
	font-weight: var(--sfm-weight-medium);
	text-decoration: none;

	position: relative;
	transition: all 0.25s ease;
}

/* Outer ring — appears on hover/focus, like the services button. */
.prj-btn::after {
	content: "";
	position: absolute;
	inset: -9px;
	border: 1px solid #b9c5dc;
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.97);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
	pointer-events: none;
}

.prj-btn:hover::after,
.prj-btn:focus-visible::after {
	opacity: 1;
	transform: scale(1);
}

.prj-btn:hover,
.prj-btn:focus-visible {
	color: #fff;
	outline: none;
}

/* Mobile-only CTA sits under the strip; hidden on wide screens */
.prj-btn--mobile {
	display: none;
}

.prj-cta {
	display: none;
}

.prj-nav {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

.prj-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.prj-arrow:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.prj-arrow:focus-visible {
	outline: 2px solid var(--sfm-green);
	outline-offset: 2px;
}

.prj-arrow svg {
	width: 18px;
	height: 18px;
}

.prj-arrow[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

/* Card track + cards --------------------------------------------------- */

.prj-track {
	position: relative;
	height: 500px;
}

.prj-card {
	position: absolute;
	left: 0;
	top: 50%;
	width: 340px;
	padding: 12px 12px 18px;
	background: #fff;
	color: #001357;
	border-radius: 14px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
	transform: translate(var(--x, 0px), -50%) scale(var(--s, 1));
	transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1),
		box-shadow 0.35s ease;
	cursor: pointer;
}

.prj-card.is-active {
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.prj-card:focus-visible {
	outline: 3px solid var(--sfm-green);
	outline-offset: 3px;
}

.prj-media {
	margin: 0;
	height: 252px;
	border-radius: 10px;
	background: linear-gradient(135deg, #2b3b7b 0%, #0b1a4f 100%) center / cover no-repeat;
}

.prj-card-title {
	margin: 18px 12px 0;
	font-family: var(--sfm-font-sans);
	font-size: 21px;
	font-weight: var(--sfm-weight-bold);
	line-height: 1.35;
}

.prj-card-desc {
	margin: 10px 12px 0;
	font-size: var(--sfm-text-sm);
	line-height: 1.6;
	color: #6b7191;
}

/* Narrow / touch: stack the rail above the same positioned card carousel. */

@media (max-width: 1180px), (pointer: coarse) {

	.prj {
		padding: 52px 0 60px;
	}
	.prj-head {
		margin: 0 auto 34px;
	}

	.prj-desc {
		padding-inline: clamp(12px, 3vw, 24px);
	}

	.prj-rail {
		position: static;
		width: 100%;
		max-width: 560px;
		margin: 0 auto 26px;
		text-align: center;
	}

	.prj-intro {
		margin: 0 auto 22px;
		padding-inline: clamp(24px, 7vw, 40px);
	}

	.prj-btn--desktop {
		display: none;
	}

	.prj-cta {
		display: block;
		margin-top: 26px;
		text-align: center;
	}

	.prj-btn--mobile {
		display: inline-flex;
		min-width: 0;
		width: 90%;
		max-width: 90%;
		font-size: var(--sfm-text-base);
	}

	.prj-nav {
		justify-content: center;
		gap: 14px;
		margin-top: 22px;
	}

	.prj-track {
		height: 440px;
	}

	/* Narrower cards keep the active card within the viewport. */
	.prj-card {
		width: clamp(240px, 72vw, 310px);
	}

	.prj-media {
		height: 185px;
	}
}

/* Section titles share the services sizing on every screen. */
@media (max-width: 820px) {
	.prj-title {
		font-size: 22px;
		gap: 10px;
		margin-bottom: 16px;
	}

	.prj-title::before,
	.prj-title::after {
		width: 9px;
		height: 9px;
	}
}

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