/*
 * Hades Construction — projects grid on /projects/.
 *
 * An even mosaic: uniform 4:3 crops so every row lines up, consistent
 * gutters between tiles, and the project name always readable rather than
 * hidden until hover.
 */

.hxp {
	--hxp-bg: #111;
	--hxp-alt: #0f1114;
	--hxp-card: #161819;
	--hxp-line: #232629;
	--hxp-blue: #5bb8e8;
	--hxp-mid: #999;
	--hxp-white: #fff;
	--hxp-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--hxp-body: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	display: block;
	background: var(--hxp-bg);
	font-family: var(--hxp-body);
	padding: 64px 0 0;
}

.hxp *,
.hxp *::before,
.hxp *::after {
	box-sizing: border-box;
}

/* ---------- Intro ---------- */

.hxp .hxp-heading {
	font-family: var(--hxp-display);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--hxp-white);
	text-transform: none;
	letter-spacing: 0.2px;
	margin: 0 auto 14px;
	padding: 0 24px;
	max-width: 1080px;
	text-align: center;
}

.hxp .hxp-intro {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--hxp-mid);
	margin: 0 auto 34px;
	padding: 0 24px;
	max-width: 720px;
	text-align: center;
}

/* ---------- Sector filter ---------- */

.hxp .hxp-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0 24px 34px;
}

.hxp .hxp-chip {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--hxp-line);
	border-radius: 2px;
	color: var(--hxp-mid);
	font-family: var(--hxp-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 11px 20px;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.hxp .hxp-chip:hover,
.hxp .hxp-chip:focus-visible {
	color: var(--hxp-white);
	border-color: var(--hxp-blue);
}

.hxp .hxp-chip.is-active {
	background: var(--hxp-blue);
	border-color: var(--hxp-blue);
	color: #0d0f11;
}

/* ---------- Mosaic ---------- */

.hxp .hxp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0 14px 14px;
}

.hxp .hxp-item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.hxp .hxp-item[hidden] {
	display: none;
}

.hxp .hxp-tile {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--hxp-card);
	text-decoration: none;
	border: 0;
	border-radius: 3px;
}

.hxp .hxp-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--hxp-card);
	border-radius: 3px;
	transform: scale(1.001);
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hxp .hxp-img--empty {
	background: linear-gradient(135deg, #161819 0%, #1c1f22 100%);
}

.hxp .hxp-tile:hover .hxp-img,
.hxp .hxp-tile:focus-visible .hxp-img {
	transform: scale(1.06);
}

/* Caption — matches the project tiles on the home page: the whole tile
   darkens on hover and the project name fades in, centred, in the theme
   blue with wide tracking. The sector label stays in the markup so it is
   still part of the link's accessible name, but is not painted on screen. */

.hxp .hxp-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #111;
	opacity: 0;
	transition: opacity 200ms linear;
}

.hxp .hxp-tile:hover .hxp-mask,
.hxp .hxp-tile:focus-visible .hxp-mask {
	opacity: 0.9;
}

.hxp .hxp-meta {
	position: absolute;
	left: 0;
	width: 100%;
	top: 55%;
	z-index: 2;
	display: block;
	padding: 0 18px;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease, top 0.3s ease;
}

.hxp .hxp-tile:hover .hxp-meta,
.hxp .hxp-tile:focus-visible .hxp-meta {
	opacity: 1;
	top: 50%;
	margin-top: -6px;
}

.hxp .hxp-name {
	display: block;
	font-family: 'Open Sans', 'Outfit', Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #3079a6;
	text-transform: uppercase;
	letter-spacing: 5px;
}

/* Kept for the link's accessible name and anchor text, not shown on screen. */
.hxp .hxp-cat {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hxp .hxp-empty {
	text-align: center;
	color: var(--hxp-mid);
	font-size: 15px;
	padding: 60px 24px;
	margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1400px) {

	.hxp .hxp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {

	.hxp {
		padding-top: 44px;
	}

	.hxp .hxp-heading {
		font-size: 25px;
	}

	.hxp .hxp-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 0 10px 10px;
	}

	.hxp .hxp-name {
		font-size: 12px;
		letter-spacing: 3.5px;
	}
}

@media (max-width: 560px) {

	.hxp .hxp-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0 12px 12px;
	}

	.hxp .hxp-img {
		aspect-ratio: 3 / 2;
	}

	.hxp .hxp-name {
		font-size: 13px;
		letter-spacing: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hxp .hxp-img,
	.hxp .hxp-meta {
		transition: none;
	}

	.hxp .hxp-tile:hover .hxp-img {
		transform: none;
	}
}