@charset "UTF-8";

#page-header.project-banner-header {
	position: relative;
	overflow: hidden;
	background-color: #050505;
	min-height: 100vh;
}

#page-header.project-banner-header .project-hero-banner {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 1;
}

#page-header.project-banner-header .project-hero-banner::after {
	content: "";
	position: absolute;
	inset: 0;
		background:
		linear-gradient(180deg, rgba(5, 5, 5, 0.00) 0%, rgba(5, 5, 5, 0.03) 28%, rgba(5, 5, 5, 0.42) 100%);
	pointer-events: none;
}

#page-header.project-banner-header .project-hero-stripe {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
		background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 40%, rgba(0, 0, 0, 0.36) 100%),
		linear-gradient(140deg, var(--hero-stripe-accent, rgba(255, 255, 255, 0.06)) 0%, rgba(5, 5, 5, 0.02) 100%),
		var(--hero-stripe-image, none);
	transition:
		flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.4s ease;
}

#page-header.project-banner-header .project-hero-stripe::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.03) 42%, rgba(0, 0, 0, 0.16) 100%);
	transition: background-color 0.35s ease, opacity 0.35s ease;
}

#page-header.project-banner-header .project-hero-stripe + .project-hero-stripe {
	border-left: none;
}

#page-header.project-banner-header .project-hero-stripe + .project-hero-stripe::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(158, 158, 158, 0.5);
	z-index: 3;
	pointer-events: none;
}

#page-header.project-banner-header .project-hero-stripe:nth-child(1) {
	background-color: #d46643;
}

#page-header.project-banner-header .project-hero-stripe:nth-child(2) {
	background-color: #d9b57a;
}

#page-header.project-banner-header .project-hero-stripe:nth-child(3) {
	background-color: #4b6a89;
}

#page-header.project-banner-header .project-hero-stripe:nth-child(4) {
	background-color: #2f7d64;
}

#page-header.project-banner-header .project-hero-stripe:nth-child(5) {
	background-color: #5a4d78;
}

#page-header.project-banner-header .project-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 320px;
	text-align: center;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.4s ease;
}

#page-header.project-banner-header .project-hero-stripe .project-hero-content a {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

#page-header.project-banner-header .project-hero-mobile-nav {
	display: none;
}

#page-header.project-banner-header:hover .project-hero-stripe {
	flex-grow: 0.82;
	filter: saturate(1.0) brightness(0.98);
}

#page-header.project-banner-header:hover .project-hero-stripe::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.22) 100%);
}

#page-header.project-banner-header .project-hero-stripe:hover {
	flex-grow: 1.9;
	filter: saturate(1.08) brightness(1.03);
	transform: translateZ(0);
}

#page-header.project-banner-header:hover .project-hero-stripe .project-hero-content {
	opacity: 0;
	visibility: hidden;
	transform: scale(1.03);
}

#page-header.project-banner-header .project-hero-stripe:hover .project-hero-content {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

#page-header.project-banner-header .project-hero-stripe:hover::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.12) 100%);
}

#page-header.project-banner-header .apo-striped-photo-title {
	font-size: clamp(40px, 4.4vw, 60px);
	line-height: 1.02;
}

#page-header.project-banner-header .apo-striped-photo-title:not(:last-child) {
	margin-bottom: 24px;
}

#page-header.project-banner-header .apo-striped-photo-categories {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 12px;
}

#page-header.project-banner-header .apo-striped-photo-categories > li {
	display: block;
}

#page-header.project-banner-header .apo-striped-photo-categories::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 0 auto 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
}

#page-header.project-banner-header .apo-striped-photo-meta {
	font-size: clamp(13px, 1vw, 16px);
	letter-spacing: 0.18em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
}

.project-grid-section {
	padding-top: clamp(44px, 6vw, 84px);
}

@media (max-width: 1024px) {
	#page-header.project-banner-header {
		min-height: 88vh;
	}

	#page-header.project-banner-header:hover .project-hero-stripe,
	#page-header.project-banner-header .project-hero-stripe:hover {
		flex-grow: 1;
		filter: none;
	}
}

@media (max-width: 767px) {
	#page-header.project-banner-header {
		min-height: 78svh;
	}

	#page-header.project-banner-header .project-hero-banner {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#page-header.project-banner-header .project-hero-banner::-webkit-scrollbar {
		display: none;
	}

	#page-header.project-banner-header .project-hero-stripe {
		flex: 0 0 100%;
		min-width: 100%;
		min-height: 100%;
		align-items: flex-end;
		justify-content: flex-start;
		padding: 34px 22px 34px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		border-left: none;
	}

	#page-header.project-banner-header .project-hero-stripe + .project-hero-stripe::after {
		display: none;
	}

	#page-header.project-banner-header .project-hero-content,
	#page-header.project-banner-header:hover .project-hero-stripe .project-hero-content,
	#page-header.project-banner-header .project-hero-stripe:hover .project-hero-content {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	#page-header.project-banner-header .project-hero-content {
		max-width: 260px;
		text-align: left;
	}

	#page-header.project-banner-header .apo-striped-photo-categories,
	#page-header.project-banner-header .apo-striped-photo-categories > li,
	#page-header.project-banner-header .apo-striped-photo-categories a,
	#page-header.project-banner-header .apo-striped-photo-meta {
		text-align: left;
		justify-content: flex-start;
	}

	#page-header.project-banner-header .apo-striped-photo-categories {
		padding-left: 0;
	}

	#page-header.project-banner-header .apo-striped-photo-categories::before {
		margin-left: 0;
		margin-right: 0;
	}

	#page-header.project-banner-header .project-hero-mobile-nav {
		position: absolute;
		right: 18px;
		bottom: 20px;
		z-index: 4;
		display: flex;
		gap: 10px;
	}

	#page-header.project-banner-header .project-hero-mobile-btn {
		position: relative;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 999px;
		background: rgba(9, 9, 9, 0.18);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: #fff;
	}

	#page-header.project-banner-header .project-hero-mobile-btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 9px;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#page-header.project-banner-header .project-hero-mobile-prev::before {
		transform: translate(-36%, -50%) rotate(-135deg);
	}

	#page-header.project-banner-header .project-hero-mobile-next::before {
		transform: translate(-62%, -50%) rotate(45deg);
	}

	#page-header.project-banner-header .apo-striped-photo-title {
		font-size: clamp(34px, 11vw, 52px);
		line-height: 0.94;
		margin-bottom: 12px !important;
	}

	#page-header.project-banner-header .apo-striped-photo-categories {
		margin-bottom: 10px;
		font-size: 12px;
		letter-spacing: 0.14em;
	}

	#page-header.project-banner-header .apo-striped-photo-meta {
		font-size: 13px;
		letter-spacing: 0.16em;
	}
}