/**
 * Projects landing — premium portfolio.
 *
 * Loaded only on the project post-type archive (see hifocus_projects_assets in
 * functions.php). Every rule is scoped under .projects-page, so no other
 * surface is affected. Structural classes (.container, .btn*) come from
 * main.css and are reused as-is.
 */

.projects-page {
	--pj-navy: #050b1f;
	--pj-navy-2: #081026;
	--pj-card: #0b1635;
	--pj-card-2: #0d1a3f;
	--pj-line: rgba(120, 170, 255, 0.16);
	--pj-cyan: #22d3ee;
	--pj-cyan-soft: #67e8f9;
	--pj-blue: #1666e8;
	--pj-text: #e8eefc;
	--pj-muted: rgba(206, 220, 245, 0.62);
	--pj-grad: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	--pj-radius: 20px;
	--pj-ease: cubic-bezier(0.22, 1, 0.36, 1);

	background-color: var(--pj-navy);
	color: var(--pj-text);
}

.projects-page * {
	box-sizing: border-box;
}

/* ---------- Section rhythm ---------- */

.pj-section {
	position: relative;
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.pj-section--alt {
	background-color: var(--pj-navy-2);
}

.pj-head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.pj-eyebrow {
	margin: 0 0 0.6rem;
	color: var(--pj-cyan);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pj-h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #fff;
}

.pj-lead {
	margin: 0.9rem auto 0;
	max-width: 60ch;
	color: var(--pj-muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

/* ---------- Hero ---------- */

.pj-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.pj-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 60% at 18% 0%, rgba(22, 102, 232, 0.32) 0%, transparent 66%),
		radial-gradient(55% 55% at 90% 100%, rgba(34, 211, 238, 0.2) 0%, transparent 66%),
		linear-gradient(180deg, var(--pj-navy) 0%, var(--pj-navy-2) 100%);
}

.pj-hero__title {
	max-width: 20ch;
	margin: 0.4rem auto 0;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #fff;
}

.pj-hero__lead {
	max-width: 62ch;
	margin: 1.2rem auto 0;
	color: var(--pj-muted);
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.7;
}

.pj-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.8rem 0 0;
	padding: 0;
	list-style: none;
}

.pj-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.28);
	background-color: rgba(34, 211, 238, 0.07);
	color: #dbeafe;
	font-size: 0.82rem;
	font-weight: 600;
}

.pj-badge svg {
	width: 15px;
	height: 15px;
	color: var(--pj-cyan);
}

.pj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 2.1rem;
}

/* ---------- Shared glass card w/ gradient border ---------- */

.pj-cat,
.pj-project,
.pj-stack__col {
	/* padding-box fill + border-box gradient = a true gradient hairline. */
	background:
		linear-gradient(var(--pj-card), var(--pj-card)) padding-box,
		linear-gradient(135deg, rgba(34, 211, 238, 0.45), rgba(22, 102, 232, 0.22) 55%, rgba(120, 170, 255, 0.08)) border-box;
	border: 1px solid transparent;
	border-radius: var(--pj-radius);
	transition: transform 0.35s var(--pj-ease), box-shadow 0.35s var(--pj-ease),
		background 0.35s var(--pj-ease);
}

.pj-cat:hover,
.pj-project:hover,
.pj-stack__col:hover {
	transform: translateY(-6px);
	background:
		linear-gradient(var(--pj-card-2), var(--pj-card-2)) padding-box,
		linear-gradient(135deg, var(--pj-cyan), var(--pj-blue) 70%, rgba(120, 170, 255, 0.2)) border-box;
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5);
}

/* ---------- Category cards ---------- */

/*
 * Flex + fixed calc widths, not auto-fit: this keeps every card the same width
 * AND lets justify-content centre an incomplete final row (5 cards => 3 + 2
 * centred), instead of auto-fit's left-aligned orphan. --g is the gap; children
 * inherit it for the width maths. Per-row equal height comes from align-items:
 * stretch (the flex default).
 */
.pj-cat-grid {
	--g: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--g);
}

.pj-cat {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 2 * var(--g)) / 3);
	max-width: calc((100% - 2 * var(--g)) / 3);
	padding: 1.8rem;
}

.pj-cat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 1.1rem;
	border-radius: 16px;
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--pj-cyan);
	transition: background-image 0.3s var(--pj-ease), color 0.3s var(--pj-ease);
}

.pj-cat:hover .pj-cat__icon {
	background-image: var(--pj-grad);
	color: #fff;
}

.pj-cat__icon svg {
	width: 29px;
	height: 29px;
}

.pj-cat__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

.pj-cat__desc {
	margin: 0.55rem 0 0;
	color: var(--pj-muted);
	font-size: 0.94rem;
	line-height: 1.65;
}

/* ---------- Featured project cards ---------- */

/*
 * CSS Grid, not centred flex: three equal 1fr columns keep the case-study cards
 * the same width with even gutters, and the tracks stay aligned so an incomplete
 * last row sits under columns 1–2 rather than floating off-centre.
 *
 * grid-auto-rows: 1fr makes every implicit row an equal fraction, so all rows —
 * and therefore every card — take the height of the tallest card in the grid.
 * align-items: stretch then fills each cell, the card's flex column pins the
 * button to the bottom, and technology, result and actions line up across the
 * whole grid. Shorter cards carry a little intentional whitespace; that reads as
 * a premium, uniform enterprise portfolio rather than ragged card heights.
 */
.pj-grid {
	--g: clamp(1.2rem, 2.5vw, 1.8rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: var(--g);
}

/*
 * Seven projects over three columns leave one alone on the last row, sitting
 * under the left-hand card. Span it across the tracks, cap it at one track
 * width and let the auto margins centre it.
 *
 * The guard is a quantity query, not a hard-coded 7: :nth-child(3n + 1) as the
 * last child matches any count with exactly one left over (7, 10, 13). Adding
 * an eighth project makes the last row hold two and the rule stops applying,
 * with nothing to remember to undo.
 *
 * grid-auto-rows: 1fr above is why this stays a grid rather than becoming a
 * centred flex row: it keeps every row the same height.
 */
.pj-grid:has(> :nth-child(3n + 1):last-child) > :last-child {
	grid-column: 1 / -1;
	/* width:100% restores the stretch that margin-inline:auto removes, so the
	   centred card is exactly one track wide rather than shrink-wrapping. */
	width: 100%;
	max-width: calc((100% - 2 * var(--g)) / 3);
	margin-inline: auto;
}

.pj-project {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.pj-project__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(34, 211, 238, 0.22) 0%, transparent 55%),
		linear-gradient(150deg, #0b1a3d 0%, #0a1230 100%);
}

.pj-project__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pj-ease);
}

.pj-project:hover .pj-project__img {
	transform: scale(1.05);
}

.pj-project__glyph {
	display: inline-flex;
	color: rgba(34, 211, 238, 0.55);
}

.pj-project__glyph svg {
	width: 58px;
	height: 58px;
}

.pj-project__cat {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	background-image: var(--pj-grad);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pj-project__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.6rem;
}

/*
 * Two zones so the bottom group lines up across every card in a row: the top
 * (industry, title, challenge, solution) grows to absorb the height difference,
 * and the footer (technology, result, button) is pinned to the card bottom.
 */
.pj-project__top {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.pj-project__foot {
	margin-top: auto;
}

.pj-project__industry {
	margin: 0;
	color: var(--pj-cyan-soft);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pj-project__title {
	margin: 0.4rem 0 0;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.pj-block {
	margin-top: 1.1rem;
}

.pj-block__label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--pj-muted);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pj-block p {
	margin: 0;
	color: rgba(230, 238, 252, 0.82);
	font-size: 0.92rem;
	line-height: 1.6;
}

.pj-block ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pj-block li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: rgba(230, 238, 252, 0.82);
	font-size: 0.9rem;
	line-height: 1.5;
}

.pj-block li svg {
	width: 15px;
	height: 15px;
	margin-top: 0.15rem;
	flex-shrink: 0;
	color: var(--pj-cyan);
}

.pj-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pj-tags li {
	display: block;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.28);
	background-color: rgba(34, 211, 238, 0.08);
	color: var(--pj-cyan-soft);
	font-size: 0.72rem;
	font-weight: 600;
}

.pj-result {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 1.2rem;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	border: 1px solid rgba(34, 211, 238, 0.24);
	background-color: rgba(34, 211, 238, 0.07);
}

.pj-result svg {
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	flex-shrink: 0;
	color: var(--pj-cyan);
}

.pj-result strong {
	display: block;
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pj-result span {
	color: rgba(230, 238, 252, 0.85);
	font-size: 0.92rem;
	line-height: 1.55;
}

.pj-project__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* Bottom alignment now comes from .pj-project__foot; this just spaces it. */
	padding-top: 1.2rem;
	color: var(--pj-cyan);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.pj-project__link svg {
	width: 17px;
	height: 17px;
	transition: transform 0.3s var(--pj-ease);
}

.pj-project:hover .pj-project__link svg {
	transform: translateX(4px);
}

/* ---------- Industries ---------- */

/* 5 per row on desktop => 10 industries render as a balanced 5 + 5. */
.pj-ind-grid {
	--g: clamp(0.8rem, 1.6vw, 1.2rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--g);
}

.pj-ind {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 calc((100% - 4 * var(--g)) / 5);
	max-width: calc((100% - 4 * var(--g)) / 5);
	gap: 0.75rem;
	padding: 1.5rem 1rem;
	border-radius: 16px;
	border: 1px solid var(--pj-line);
	background-color: var(--pj-card);
	text-align: center;
	transition: transform 0.35s var(--pj-ease), border-color 0.3s var(--pj-ease),
		background-color 0.3s var(--pj-ease);
}

.pj-ind:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, 0.5);
	background-color: var(--pj-card-2);
}

.pj-ind__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--pj-cyan);
	transition: background-image 0.3s var(--pj-ease), color 0.3s var(--pj-ease);
}

.pj-ind:hover .pj-ind__icon {
	background-image: var(--pj-grad);
	color: #fff;
}

.pj-ind__icon svg {
	width: 24px;
	height: 24px;
}

.pj-ind__name {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}

/* ---------- Technology stack ---------- */

/*
 * Three columns fixed, not auto-fit: at 260px minimum the tracks dropped to
 * two around 900px and stranded the third column alone underneath. Three
 * items, three columns, one row - then straight to one.
 */
.pj-stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

.pj-stack__col {
	padding: 1.8rem;
}

.pj-stack__title {
	margin: 0 0 1.1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--pj-line);
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
}

.pj-stack__title span {
	background-image: var(--pj-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pj-stack__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pj-stack__list li {
	padding: 0.45rem 0.85rem;
	border-radius: 10px;
	border: 1px solid var(--pj-line);
	background-color: rgba(255, 255, 255, 0.03);
	color: rgba(230, 238, 252, 0.88);
	font-size: 0.86rem;
	font-weight: 600;
	transition: border-color 0.25s var(--pj-ease), color 0.25s var(--pj-ease);
}

.pj-stack__list li:hover {
	border-color: rgba(34, 211, 238, 0.5);
	color: #fff;
}

/* ---------- CTA ---------- */

.pj-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	border-radius: clamp(20px, 3vw, 32px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	background:
		radial-gradient(80% 130% at 50% 0%, rgba(0, 123, 255, 0.24) 0%, transparent 70%),
		var(--pj-card);
	text-align: center;
}

.pj-cta__glow {
	position: absolute;
	inset: auto 0 -55% 0;
	height: 100%;
	z-index: -1;
	background: radial-gradient(50% 100% at 50% 100%, rgba(34, 211, 238, 0.28) 0%, transparent 70%);
	pointer-events: none;
}

.pj-cta__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.pj-cta__lead {
	margin: 0.9rem auto 0;
	max-width: 56ch;
	color: var(--pj-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.pj-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 1.9rem;
}

/* ---------- Motion + responsive ---------- */

@media (prefers-reduced-motion: reduce) {
	.projects-page .pj-cat:hover,
	.projects-page .pj-project:hover,
	.projects-page .pj-stack__col:hover,
	.projects-page .pj-ind:hover {
		transform: none;
	}

	.projects-page .pj-project:hover .pj-project__img {
		transform: none;
	}
}

/* Tablet: categories drop to 2 columns, featured to 2, industries to 3. */
@media (max-width: 980px) {
	.pj-cat {
		flex-basis: calc((100% - var(--g)) / 2);
		max-width: calc((100% - var(--g)) / 2);
	}

	.pj-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Two columns: the three-column guard no longer describes this grid... */
	.pj-grid:has(> :nth-child(3n + 1):last-child) > :last-child {
		grid-column: auto;
		width: auto;
		max-width: none;
		margin-inline: 0;
	}

	/* ...an odd count is what leaves one over across two tracks. */
	.pj-grid:has(> :nth-child(odd):last-child) > :last-child {
		grid-column: 1 / -1;
		width: 100%;
		max-width: calc((100% - var(--g)) / 2);
		margin-inline: auto;
	}

	.pj-ind {
		flex-basis: calc((100% - 2 * var(--g)) / 3);
		max-width: calc((100% - 2 * var(--g)) / 3);
	}
}

/* Mobile: categories + featured single column, industries 2 across. */
@media (max-width: 620px) {
	.pj-cat {
		flex-basis: 100%;
		max-width: 100%;
	}

	.pj-grid {
		grid-template-columns: 1fr;
	}

	/* Single column: nothing is ever left over. */
	.pj-grid:has(> :nth-child(odd):last-child) > :last-child {
		grid-column: auto;
		width: auto;
		max-width: none;
		margin-inline: 0;
	}

	.pj-stack {
		grid-template-columns: 1fr;
	}

	.pj-ind {
		flex-basis: calc((100% - var(--g)) / 2);
		max-width: calc((100% - var(--g)) / 2);
	}

	.pj-hero__actions,
	.pj-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
}