/* Systical — Project Hero (single project) */

.sys-ph {
	--ph-accent: #9afd0d;
	--ph-max: 1240px;
	--ph-radius: 20px;
	--ph-ratio: 16 / 9;
	--ph-rule: #242424;
	--ph-label: #8f8f8f;
	--ph-value: #fff;
	display: block;
	padding: 170px 40px 70px;
	background-color: #070707;
}

.sys-ph__inner {
	max-width: var(--ph-max);
	margin: 0 auto;
}

.sys-ph__eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 8px 16px;
	border: 1px solid var(--ph-rule);
	border-radius: 999px;
	color: var(--ph-accent);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sys-ph__title {
	max-width: 18ch;
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #fff;
}

.sys-ph__visit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 13px 24px;
	border: 1px solid var(--ph-rule);
	border-radius: 999px;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 220ms ease,
		border-color 220ms ease,
		color 220ms ease;
}

.sys-ph__visit:hover,
.sys-ph__visit:focus-visible {
	background-color: var(--ph-accent);
	border-color: var(--ph-accent);
	color: #070707;
}

.sys-ph__visit svg {
	width: 16px;
	height: 16px;
}

/* ---------- facts ---------- */

/* auto-fit rather than a fixed column count: a project with three facts fills
   the row, one with six wraps onto a second, and neither needs a setting. */
.sys-ph__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 28px 32px;
	margin-top: 48px;
	padding: 32px 0;
	border-top: 1px solid var(--ph-rule);
	border-bottom: 1px solid var(--ph-rule);
}

.sys-ph__fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.sys-ph__fact-label {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ph-label);
}

.sys-ph__fact-value {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ph-value);
	overflow-wrap: break-word;
}

.sys-ph__fact-value a {
	color: inherit;
	text-decoration: none;
}

.sys-ph__fact-value a:hover {
	color: var(--ph-accent);
}

.sys-ph__stack {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Two classes deep: Elementor ships `.elementor img { height: auto }` at
   (0,1,1), which would beat a single-class rule and collapse the square. */
.sys-ph .sys-ph__stack-icon {
	display: block;
	width: 34px;
	height: 34px;
	padding: 5px;
	border: 1px solid var(--ph-rule);
	border-radius: 9px;
	object-fit: contain;
	background-color: #101010;
}

/* ---------- media ---------- */

.sys-ph__media {
	aspect-ratio: var(--ph-ratio);
	margin: 48px 0 0;
	overflow: hidden;
	border-radius: var(--ph-radius);
	background-color: #111;
}

/* `max-height` is restated because Hello Elementor caps `.wp-post-image` at
   500px — a theme default that has nothing to do with this layout. */
.sys-ph .sys-ph__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.sys-ph__title {
		max-width: none;
	}

	.sys-ph__facts {
		gap: 22px 24px;
		margin-top: 34px;
		padding: 26px 0;
	}
}

@media (max-width: 767px) {
	.sys-ph {
		padding: 126px 18px 40px;
	}

	.sys-ph__eyebrow {
		margin-bottom: 14px;
		padding: 7px 14px;
		font-size: 12px;
	}

	.sys-ph__title {
		font-size: clamp(28px, 8vw, 38px);
	}

	.sys-ph__visit {
		margin-top: 18px;
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Two columns rather than auto-fit: at 354px wide a 170px minimum would
	   force a single column and make the block very tall. */
	.sys-ph__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sys-ph__fact-value {
		font-size: 15px;
	}

	.sys-ph__media {
		margin-top: 30px;
		border-radius: 14px;
	}

	.sys-ph .sys-ph__stack-icon {
		width: 30px;
		height: 30px;
	}
}