/* Systical — Projects Tabs */

.sys-pt {
	--pt-accent: #9afd0d;
	--pt-max: 1320px;
	--pt-h: 660px;
	--pt-left: 44%;
	--pt-gap: 18px;
	--pt-radius: 22px;
	--pt-stack: 30px;
	--pt-scrim: 0.85;
	--pt-zoom: 1.04;

	--pt-tab-fg: #0b0b0b;
	--pt-tab-bg: rgba(255, 255, 255, 0);
	--pt-tab-bd: #0b0b0b;
	--pt-tab-fg-on: #0b0b0b;
	--pt-tab-bg-on: #9afd0d;

	--pt-badge-size: 132px;
	--pt-badge-bg: #9afd0d;
	--pt-badge-fg: #0b0b0b;
	--pt-badge-speed: 260ms;

	position: relative;
	padding: 100px 0 110px;
	background: #fff;
}

.sys-pt__inner {
	max-width: var(--pt-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- heading ---------- */

.sys-pt__head {
	margin-bottom: 44px;
	text-align: center;
}

.sys-pt__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 8px 16px;
	border-radius: 40px;
	background: #1a1a1a;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.sys-pt__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pt-accent);
}

.sys-pt__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(32.5px, 4.2vw, 57.5px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0b0b0b;
}

/* ---------- tabs ---------- */

.sys-pt__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: safe center;
	gap: 12px;
	margin-bottom: 48px;
}

.sys-pt__tab {
	padding: 12px 26px;
	border: 1px solid var(--pt-tab-bd);
	border-radius: 40px;
	background: var(--pt-tab-bg);
	color: var(--pt-tab-fg);
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Background and colour are restated, not just the border: Hello Elementor's
   reset styles `button:hover` pink, and that beats the plain `.sys-pt__tab`
   base rule for any property this one leaves unset. `:focus` is in for the
   same reason. */
.sys-pt__tab:hover,
.sys-pt__tab:focus {
	border-color: var(--pt-tab-bg-hover, var(--pt-tab-bg-on));
	background-color: var(--pt-tab-bg-hover, var(--pt-tab-bg-on));
	color: var(--pt-tab-fg-hover, var(--pt-tab-fg-on));
}

.sys-pt__tab.is-active {
	border-color: var(--pt-tab-bg-on);
	background: var(--pt-tab-bg-on);
	color: var(--pt-tab-fg-on);
}

.sys-pt__tab:focus-visible {
	outline: 2px solid var(--pt-accent);
	outline-offset: 3px;
}

/* ---------- panels ---------- */

.sys-pt__panel[hidden] {
	display: none;
}

.sys-pt__panel.is-entering .sys-pt__grid {
	animation: sys-pt-in 0.34s ease both;
}

@keyframes sys-pt-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- mosaic ----------
   The card count drives the areas. Four is the full layout: a tall card down
   the left, a wide one across the top right and two beneath it. Fewer cards
   drop areas rather than leaving gaps. */

.sys-pt__grid {
	display: grid;
	gap: var(--pt-gap);
	height: var(--pt-h);
}

.sys-pt__grid.is-4 {
	grid-template-columns: var(--pt-left) 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"a b b"
		"a c d";
}

.sys-pt__grid.is-3 {
	grid-template-columns: var(--pt-left) 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"a b"
		"a c";
}

.sys-pt__grid.is-2 {
	grid-template-columns: var(--pt-left) 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "a b";
}

/* A lone card would be a 660px-tall slab at full width, so it drops to a
   fraction of the mosaic height — 50% lands it on the same row height as the
   top-right card in the four-up. */
.sys-pt__grid.is-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "a";
	height: calc(var(--pt-h) * var(--pt-single-h, 0.5));
}

/* A lone project can either fill the row or hold the tall card's width — a
   full-bleed single card scales its image up hard. */
.sys-pt__grid.is-1.is-narrow {
	grid-template-columns: var(--pt-left);
	justify-content: center;
}

.sys-pt__card:nth-child(1) { grid-area: a; }
.sys-pt__card:nth-child(2) { grid-area: b; }
.sys-pt__card:nth-child(3) { grid-area: c; }
.sys-pt__card:nth-child(4) { grid-area: d; }

/* ---------- card ---------- */

.sys-pt__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--pt-radius);
	background: #111;
	text-decoration: none;
	isolation: isolate;
}

/* Qualified past `.elementor img { height: auto; max-width: 100% }`, which
   otherwise wins on specificity and leaves the image short of the card. */
.sys-pt img.sys-pt__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-pt__card:hover .sys-pt__media {
	transform: scale(var(--pt-zoom));
}

.sys-pt__scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 68%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--pt-scrim)) 0%,
		rgba(0, 0, 0, calc(var(--pt-scrim) * 0.72)) 38%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

.sys-pt__info {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 0 26px 24px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	pointer-events: none;
}

.sys-pt__stack {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.sys-pt img.sys-pt__stack-icon {
	display: block;
	width: var(--pt-stack);
	height: var(--pt-stack);
	border-radius: calc(var(--pt-stack) * 0.24);
	object-fit: cover;
}

.sys-pt__name {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	transition: color 200ms ease;
}

/* The whole card is the link, so the name responds to a hover anywhere on it
   rather than only over the text itself.

   Four classes deep for the same reason as the work grid: the resting colour
   comes from an Elementor control, whose generated selector is (0,3,0). */
.sys-pt .sys-pt__grid .sys-pt__card:hover .sys-pt__name,
.sys-pt .sys-pt__grid .sys-pt__card:focus-visible .sys-pt__name {
	color: var(--pt-accent);
}

.sys-pt__desc {
	display: block;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* The tall left card carries the layout, so it gets a little more presence. */
.sys-pt__grid.is-4 .sys-pt__card:nth-child(1) .sys-pt__name,
.sys-pt__grid.is-3 .sys-pt__card:nth-child(1) .sys-pt__name {
	font-size: 24px;
}

/* ---------- hover badge ---------- */

.sys-pt__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Cursor tracking writes pixel coordinates instead, so the offset has to come
   from the badge's own box rather than from `left`/`top`. */
.sys-pt--follow .sys-pt__badge {
	top: 0;
	left: 0;
	transform: translate3d(calc(var(--bx, 50%) - 50%), calc(var(--by, 50%) - 50%), 0);
	transition: transform 0.13s ease-out;
}

.sys-pt--follow .sys-pt__card:not(:hover) .sys-pt__badge {
	transition: none;
}

.sys-pt__badge-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: var(--pt-badge-size);
	height: var(--pt-badge-size);
	padding: 10px;
	border-radius: 50%;
	background: var(--pt-badge-bg);
	color: var(--pt-badge-fg);
	text-align: center;
	opacity: 0;
	transform: scale(0.35);
	transition: transform var(--pt-badge-speed) cubic-bezier(0.34, 1.42, 0.64, 1),
		opacity calc(var(--pt-badge-speed) * 0.6) ease;
}

.sys-pt__card:hover .sys-pt__badge-in,
.sys-pt__card:focus-visible .sys-pt__badge-in {
	opacity: 1;
	transform: scale(1);
}

.sys-pt__badge-arrow {
	width: calc(var(--pt-badge-size) * 0.22);
	height: calc(var(--pt-badge-size) * 0.22);
	flex: 0 0 auto;
}

.sys-pt__badge-label {
	display: block;
	max-width: 100%;
	font-family: Inter, system-ui, sans-serif;
	font-size: calc(var(--pt-badge-size) * 0.098);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* ---------- editor placeholder ---------- */

.sys-pt--empty {
	padding: 60px 24px;
	color: #aaa;
	text-align: center;
	font-family: Inter, system-ui, sans-serif;
}

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

@media (max-width: 1024px) {
	.sys-pt {
		--pt-h: 560px;
		--pt-badge-size: 108px;
	}

	/* The tall-left mosaic needs width to work — below this the right-hand
	   cards squeeze to a couple of hundred pixels, so the layout evens out
	   into halves instead. */
	.sys-pt__grid.is-4 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"a b"
			"c d";
	}

	.sys-pt__grid.is-3 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"a a"
			"b c";
	}

	.sys-pt__grid.is-2 {
		grid-template-columns: 1fr 1fr;
	}

	.sys-pt__grid.is-1.is-narrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.sys-pt__name {
		font-size: 18px;
	}

	.sys-pt__grid.is-4 .sys-pt__card:nth-child(1) .sys-pt__name,
	.sys-pt__grid.is-3 .sys-pt__card:nth-child(1) .sys-pt__name {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.sys-pt {
		padding: 70px 0 76px;
	}

	.sys-pt__inner {
		padding: 0 18px;
	}

	/* The strip scrolls sideways rather than stacking; `safe center` above
	   keeps the first tab reachable once it overflows. */
	.sys-pt__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 28px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.sys-pt__tabs::-webkit-scrollbar {
		display: none;
	}

	.sys-pt__tab {
		padding: 10px 20px;
		font-size: 14px;
	}

	/* One column, each card its own height — the mosaic needs width to read. */
	.sys-pt__grid,
	.sys-pt__grid.is-1,
	.sys-pt__grid.is-2,
	.sys-pt__grid.is-3,
	.sys-pt__grid.is-4 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
		height: auto;
		gap: 14px;
	}

	.sys-pt__card,
	.sys-pt__card:nth-child(1),
	.sys-pt__card:nth-child(2),
	.sys-pt__card:nth-child(3),
	.sys-pt__card:nth-child(4) {
		grid-area: auto;
		min-height: 320px;
	}

	.sys-pt__grid.is-4 .sys-pt__card:nth-child(1) .sys-pt__name,
	.sys-pt__grid.is-3 .sys-pt__card:nth-child(1) .sys-pt__name {
		font-size: 19px;
	}

	.sys-pt__info {
		padding: 0 18px 18px;
	}

	/* Nothing hovers on a touch screen — the badge would only ever flash. */
	.sys-pt__badge {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-pt__media,
	.sys-pt__badge,
	.sys-pt__badge-in {
		transition: none;
	}

	.sys-pt__card:hover .sys-pt__media {
		transform: none;
	}

	.sys-pt__panel.is-entering .sys-pt__grid {
		animation: none;
	}
}