/**
 * Capabilities — docs/sections/CAPABILITIES.md.
 * Copy, photo, button and the capability list live in Elementor (the list in the GO Browser Card
 * widget). Shared components from go-base.css: .go-intro header, .go-photo-panel, .go-glass,
 * scroll-linked H2. Breakpoint: 1000 px (no 640 px changes).
 */

.e-con.go-caps {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	overflow-x: clip;
}

/* ---------- B. Split row ---------- */

.e-con.go-caps__split {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* Left: Ink photo panel (shared .go-photo-panel) with a deeper overlay. */
.e-con.go-caps__panel {
	--go-photo-overlay: linear-gradient(to top, rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .55) 45%, rgba(17, 17, 17, .15) 100%);
	--padding-top: clamp(32px, 4vw, 56px);
	--padding-bottom: clamp(32px, 4vw, 56px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	--gap: 32px;
	--row-gap: 32px;
}

.go-caps__title .elementor-heading-title {
	max-width: 10em;
	text-wrap: balance;
}

/* Right: lavender wash + glass frame + browser card (GO Browser Card widget) */

.e-con > .elementor-widget-go-browser {
	border-left: 1px solid var(--go-line);
}

.go-browser {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	min-height: 484px;
	padding: 40px clamp(16px, 4vw, 64px) 0;
	overflow: clip;
	isolation: isolate;
}

.go-browser::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--go-lavender);
	opacity: .45;
	-webkit-mask-image: radial-gradient(90% 80% at 50% 100%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 85%);
	mask-image: radial-gradient(90% 80% at 50% 100%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 85%);
}

.go-browser__frame {
	display: flex;
	align-self: stretch;
	width: 100%;
	max-width: 620px;
}

.go-browser__glass {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.go-browser__card {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* Window bar (decorative) */

.go-browser__bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--go-line);
	border-radius: 18px 18px 0 0;
	background: #fafaf9;
}

.go-browser__dots {
	display: flex;
	gap: 6px;
}

.go-browser__dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e2e2df;
}

.go-browser__url {
	display: flex;
	align-items: center;
	justify-self: center;
	gap: 8px;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	padding: 7px 14px;
	border: 1px solid var(--go-line);
	border-radius: 999px;
	background: var(--go-white);
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 12px;
	line-height: 1.3;
}

.go-browser__tile {
	display: block;
	flex: none;
}

.go-browser__url-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.go-browser__spacer {
	width: 46px;
}

/* Capability rows */

.go-browser__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-browser__row {
	--go-row-accent: var(--go-mint);
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 7px 24px;
	border-bottom: 1px solid #ededea;
	background: var(--go-white);
	cursor: default;
	transition: background-color .3s ease;
}

.go-browser__row:last-child {
	border-bottom: 0;
}

.go-browser__row--lavender {
	--go-row-accent: var(--go-lavender);
}

.go-browser__row--lime {
	--go-row-accent: var(--go-lime);
}

/* 28 px tile with the go "dot" icon: 2 × 2 grid of 6 px cells (2 px gap), Ink on the diagonal. */
.go-browser__icon {
	--go-tile-bg: var(--go-row-accent);
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background:
		linear-gradient(var(--go-ink) 0 0) 7px 7px / 6px 6px no-repeat,
		linear-gradient(var(--go-ink) 0 0) 15px 15px / 6px 6px no-repeat,
		var(--go-tile-bg);
	transition: background-color .3s ease;
}

.go-browser__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Wraps instead of the design's ellipsis: at 360 px four names would otherwise be cut off. */
.go-browser__name {
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

/* #555555 at rest (decided: the design's #9A9A96 fails contrast), Ink on hover. */
.go-browser__roles {
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 11px;
	line-height: 1.5;
	text-wrap: balance;
	transition: color .3s ease;
}

.go-browser__sq {
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--go-row-accent);
	transition: background-color .3s ease;
}

.go-browser__row:hover {
	background: var(--go-row-accent);
}

.go-browser__row:hover .go-browser__icon {
	--go-tile-bg: var(--go-white);
}

.go-browser__row:hover .go-browser__roles {
	color: var(--go-ink);
}

.go-browser__row:hover .go-browser__sq {
	background: var(--go-ink);
}

/* ---------- Below 1000 px ---------- */

@media (max-width: 999.98px) {
	/* Keep the photo readable when the panel stacks (decided addition to the design). */
	.e-con.go-caps__panel {
		--min-height: clamp(280px, 60vw, 400px);
	}

	.e-con > .elementor-widget-go-browser {
		border-left: 0;
		border-top: 1px solid var(--go-line);
	}
}

/* ---------- Below 640 px ---------- */

/*
 * Roles can only break after a "·", so the longest one ("Engineering Management", about 145 px)
 * must fit on a line: tighter rows give the text about 165 px at 360 px (24 px padding gives ~120).
 */
@media (max-width: 639.98px) {
	.go-browser__row {
		gap: 12px;
		padding-inline: 16px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.go-browser__row,
	.go-browser__icon,
	.go-browser__roles,
	.go-browser__sq {
		transition: none;
	}
}