/**
 * Homepage "Capabilities" (precision / materials / customization / quality)
 * section styles. Treated as a technical spec sheet: stacked rows rather
 * than a card grid, to stay visually distinct from Sections 2 and 3.
 */

.u3ds-capabilities {
	position: relative;
	background-color: var(--wp--preset--color--bg-secondary);
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--4-xl);
	padding-bottom: var(--wp--preset--spacing--4-xl);
	border-top: 1px solid var(--wp--preset--color--border);
}

.u3ds-capabilities__header {
	max-width: 640px;
	margin: 0 0 var(--wp--preset--spacing--3-xl);
}

.u3ds-capabilities__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 var(--wp--preset--spacing--l);
}

.u3ds-capabilities__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.u3ds-capabilities__headline {
	margin: 0;
}

.u3ds-capabilities__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
	gap: var(--wp--preset--spacing--3-xl);
	align-items: start;
}

.u3ds-capabilities__visual {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--surface);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--bg-primary);
}

.u3ds-capabilities__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

/* Technical "targeting frame" corner brackets — CSS-only, activated by
   :has() when any spec row is hovered/focused, so no JS is needed and the
   effect degrades to simply never appearing in browsers without :has()
   support (the image itself is unaffected either way). */
.u3ds-capabilities__visual::after {
	content: "";
	position: absolute;
	inset: 14px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) top left / 18px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) top left / 2px 18px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) top right / 18px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) top right / 2px 18px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) bottom left / 18px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) bottom left / 2px 18px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) bottom right / 18px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) bottom right / 2px 18px no-repeat;
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

.u3ds-capabilities__layout:has(.u3ds-capabilities__row:focus-within) .u3ds-capabilities__visual::after {
	opacity: 1;
}

.u3ds-capabilities__layout:has(.u3ds-capabilities__row:focus-within) .u3ds-capabilities__visual img {
	transform: scale(1.015);
}

@media (hover: hover) and (pointer: fine) {
	.u3ds-capabilities__layout:has(.u3ds-capabilities__row:hover) .u3ds-capabilities__visual::after {
		opacity: 1;
	}

	.u3ds-capabilities__layout:has(.u3ds-capabilities__row:hover) .u3ds-capabilities__visual img {
		transform: scale(1.015);
	}
}

.u3ds-capabilities__sheet {
	border-top: 1px solid var(--wp--preset--color--border);
}

.u3ds-capabilities__row {
	display: grid;
	grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: baseline;
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--l);
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-left: 2px solid transparent;
	padding-left: var(--wp--preset--spacing--l);
	transition: border-left-color 200ms ease, background-color 200ms ease;
}

.u3ds-capabilities__row:hover,
.u3ds-capabilities__row:focus-within {
	border-left-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface-elevated);
}

.u3ds-capabilities__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.u3ds-capabilities__desc {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--text-secondary) 88%, var(--wp--preset--color--text-primary) 12%);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	max-width: 56ch;
}

@media (max-width: 781px) {
	.u3ds-capabilities {
		padding-top: var(--wp--preset--spacing--3-xl);
		padding-bottom: var(--wp--preset--spacing--3-xl);
	}

	/* Desktop's 64px (--spacing--3-xl) header-to-layout gap was never
	   reduced for mobile, so it carried over unchanged and reads as an
	   accidental dead zone on a narrow screen. Halving it keeps clear
	   separation without the desktop-sized void. */
	.u3ds-capabilities__header {
		margin-bottom: var(--wp--preset--spacing--xl);
	}

	.u3ds-capabilities__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--s);
		padding-left: var(--wp--preset--spacing--m);
	}

	.u3ds-capabilities__layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
	}

	/* The lattice-vase-and-flowers photo is a 4:5 portrait. A 16:10
	   landscape box here was mismatched enough that object-fit: contain
	   had to shrink the image to a small fraction of the box's width to
	   preserve its own proportions, leaving large empty margins on both
	   sides. Matching the box to the photo's actual ~4:5 ratio (same
	   value already used on desktop) removes almost all of that
	   letterboxing — contain still guarantees zero cropping either way. */
	.u3ds-capabilities__visual {
		aspect-ratio: 4 / 5;
	}

	.u3ds-capabilities__visual img {
		object-fit: contain;
	}

	.u3ds-capabilities__desc {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.7;
	}

	.u3ds-capabilities__label {
		margin-bottom: var(--wp--preset--spacing--2-xs);
	}
}

@media (prefers-reduced-motion: reduce) {
	.u3ds-capabilities__row,
	.u3ds-capabilities__visual img,
	.u3ds-capabilities__visual::after {
		transition: none;
	}
}