/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Capabilities Grid
   ═════════════════════════════════════════════════════════════════
   3×2 card grid section. Markup lives in
   /template-parts/components/caps-grid.php. Originally extracted from
   the product-opening cascade so other pages can reuse it with their
   own content.
   ───────────────────────────────────────────────────────────────── */

.po-caps { background: var(--cream); }
.po-caps-head { max-width: 1280px; margin-bottom: clamp(48px, 5vw, 80px); }
.po-caps-head .display { text-transform: uppercase; }
.po-caps-head .display .hl-line { display: inline; }
.po-caps-head .display .it-tail { display: inline; }

.po-caps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.2vw, 32px);
}
.po-cap {
	--shimmer-pos: 120%;

	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(28px, 2.8vw, 44px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.2vw, 18px);
	position: relative;
	overflow: hidden;

	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

.po-cap::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

.po-cap:hover {
	border-color: var(--accent, var(--green));
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0,0,0,.08);
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.po-cap {
		transition: border-color 0.25s ease, transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
	}
	.po-cap::after { display: none; }
}
.po-cap-num {
	font-family: var(--f-sans);
	font-size: var(--fs-card-num);
	font-weight: 600;
	color: var(--orange);
	letter-spacing: .02em;
	line-height: 1;
}
.po-cap-num::after {
	content: ' /';
}
.po-cap-title {
	font-family: var(--f-sans);
	font-size: var(--fs-card-title);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0;
}
.po-cap-title sup {
	font-size: .55em;
	vertical-align: super;
	line-height: 1;
	margin-left: 1px;
}
.po-cap-body {
	font-size: var(--fs-body-sm);
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 1024px) { .po-caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .po-caps-grid { grid-template-columns: 1fr; } }