/**
 * Cypros Power — Capabilities / engineering rail.
 *
 * @package Cypros_Core
 */

.cy-capabilities {
	position: relative;
	overflow: hidden;
	padding-top: var(--cy-layout-section-space);
	padding-bottom: var(--cy-layout-section-space);
	background: #f6f6f4;
	border-bottom: 1px solid var(--cypros-color-border);
	scroll-margin-top: 6rem;
}

.cy-capabilities::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(17, 17, 17, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 17, 17, 0.022) 1px, transparent 1px);
	background-size: 4.5rem 4.5rem;
	content: "";
	pointer-events: none;
}

.cy-capabilities__circuit-field {
	position: absolute;
	top: 6rem;
	right: -2rem;
	width: min(34rem, 42vw);
	height: 12rem;
	border-top: 1px solid rgba(17, 17, 17, 0.22);
	border-left: 1px solid rgba(17, 17, 17, 0.22);
	pointer-events: none;
}

.cy-capabilities__circuit-field::before,
.cy-capabilities__circuit-field::after {
	position: absolute;
	width: 0.45rem;
	height: 0.45rem;
	background: var(--cypros-yellow);
	content: "";
}
.cy-capabilities__circuit-field::before { top: -0.24rem; left: -0.24rem; }
.cy-capabilities__circuit-field::after { bottom: -0.24rem; right: 28%; }

.cy-capabilities .cy-container { position: relative; z-index: 1; }

.cy-capabilities__rail {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(2.4rem, 3.5vw, 3.8rem);
	padding: 1rem 0;
	border-top: 1px solid var(--cypros-black);
	border-bottom: 1px solid rgba(17, 17, 17, 0.18);
	color: var(--cypros-black);
	font-size: 0.61rem;
	font-weight: var(--cypros-font-weight-black);
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.cy-capabilities__rail i {
	position: relative;
	height: 1px;
	background: rgba(17, 17, 17, 0.28);
}

.cy-capabilities__rail i::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.42rem;
	height: 0.42rem;
	background: var(--cypros-yellow);
	transform: translateY(-50%);
	content: "";
}

.cy-capabilities__content { margin-top: 0; }

.cy-capabilities .cy-feature-list { border-top: 0; }

.cy-capabilities .cy-feature-list__item {
	position: relative;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	padding: 1.55rem 0;
}

.cy-capabilities .cy-feature-list__item::before {
	position: absolute;
	top: 50%;
	left: 1.2rem;
	width: 0.38rem;
	height: 0.38rem;
	background: #f6f6f4;
	border: 1px solid var(--cypros-yellow-dark);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	content: "";
}

.cy-capabilities .cy-feature-list__item:hover::before,
.cy-capabilities .cy-feature-list__item:focus-visible::before { background: var(--cypros-yellow); }

.cy-capabilities .cy-feature-list__number { color: var(--cypros-yellow-dark); }

@media (max-width: 68rem) {
	.cy-capabilities { scroll-margin-top: 5.5rem; }
	.cy-capabilities__circuit-field { width: 24rem; opacity: 0.55; }
}

@media (max-width: 48rem) {
	.cy-capabilities { scroll-margin-top: 5rem; }
	.cy-capabilities__rail { grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
	.cy-capabilities__rail i { display: none; }
	.cy-capabilities .cy-feature-list__item { padding: 1.3rem 0; }
	.cy-capabilities .cy-feature-list__item::before { display: none; }
	.cy-capabilities__circuit-field { right: -16rem; }
}