@import url("partials/header.css");
@import url("partials/footer.css");
@import url("sections/projects-contact.css");
@import url("sections/projects-page.css");
@import url("sections/project-detail.css");
@import url("sections/practice.css");

/* ============================================
   REMAINING STYLES
   ============================================ */

/* ============================================
   HOME HERO
   ============================================ */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh; /* mobile-safe viewport height */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--color-bg);
	z-index: 0; /* create stacking context for negative z-index layers */
}

/* Mobile: slightly shorter hero so a sliver of content below is visible = clear scroll affordance */
@media (max-width: 828px) {
	.hero {
		min-height: 88vh;
		min-height: 88svh;
	}
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/hero/02.JPG");
	background-size: cover;
	background-position: center calc(50% + var(--hero-parallax-offset, 0px));
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 26, 26, 0.15), rgba(26, 26, 26, 0.35));
	z-index: -1;
	pointer-events: none;
	mix-blend-mode: multiply;
}

.hero__bg {
	display: none;
}

.hero__content {
	position: relative;
	text-align: center;
	padding: 0 var(--space-lg);
}

.hero__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 350;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1;
	color: #ffffff;
	letter-spacing: 0.4em;
	text-align: center;
	font-variant-caps: small-caps;
	mix-blend-mode: difference;
}

.hero__line {
	display: block;
}

.hero__line:first-child {
	transform: translateX(-0.9em);
}

.hero__line--offset {
	transform: translateX(2em);
}

/* ============================================
   HOME STATEMENT BANNER
   ============================================ */
.home-statement {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(130% 150% at 0% 0%, rgba(102, 137, 161, 0.22) 0%, rgba(26, 26, 26, 0) 52%),
		radial-gradient(130% 140% at 100% 100%, rgba(200, 152, 90, 0.16) 0%, rgba(26, 26, 26, 0) 56%),
		linear-gradient(155deg, #171717 0%, #202225 48%, #141414 100%);
	border-radius: 14px;
	border: 1px solid rgba(245, 245, 240, 0.16);
	margin: clamp(28px, 4vw, 52px) var(--space-gutter);
	min-height: clamp(180px, 24vw, 260px);
	display: grid;
	place-items: center;
	text-align: center;
	padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 56px);
	box-sizing: border-box;
	box-shadow:
		0 22px 42px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(245, 245, 240, 0.09),
		inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.home-statement::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			-35deg,
			rgba(245, 245, 240, 0.04) 0,
			rgba(245, 245, 240, 0.04) 1px,
			transparent 1px,
			transparent 14px
		);
	opacity: 0.42;
	pointer-events: none;
	z-index: 0;
}

.home-statement::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 12px;
	border: 1px solid rgba(245, 245, 240, 0.08);
	pointer-events: none;
	z-index: 0;
}

.home-statement__text {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading);
	font-size: clamp(1.55rem, 3.3vw, 2.85rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--color-white);
	margin: 0;
	line-height: 1.25;
	max-width: 24ch;
	text-wrap: balance;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */
.hero__scroll-indicator {
	position: absolute;
	bottom: 36px;
	left: 50%;
	translate: -50% 0;
	width: 1px;
	height: 52px;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.hero__scroll-indicator::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
	.hero__scroll-indicator::after {
		content: "";
		position: absolute;
		top: -60%;
		left: 0;
		width: 100%;
		height: 60%;
		background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
		animation: hero-scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes hero-scroll-pulse {
		to { top: 100%; }
	}
}

/* ============================================
   SCROLL-REVEAL
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
	.reveal-ready {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.75s ease, transform 0.75s ease;
	}

	.reveal-ready.is-revealed {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   PAGE ENTRANCE CURTAIN
   ============================================ */
#onloadContent {
	position: fixed;
	inset: 0;
	background-color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.4s ease;
	z-index: 9999;
	pointer-events: none;
}

#onloadContent.fade-out {
	opacity: 0;
}

#curtainName {
	font-family: var(--font-heading);
	font-weight: 200;
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-dark);
	opacity: 0;
	animation: curtain-name-in 0.35s ease 0.05s forwards;
}

@keyframes curtain-name-in {
	to { opacity: 1; }
}

/* ============================================
   PROJECT / BLOG GRIDS
   ============================================ */
#grid1,
#grid2 {
	margin-bottom: 2%;
	padding: 0 var(--space-gutter);
	display: grid;
	grid-gap: 0.8rem;
}

#grid1 {
	grid-template-columns: repeat(2, 1fr);
}

#grid2 {
	grid-template-columns: repeat(3, 1fr);
}

.image-overlay {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.image-overlay img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: filter 0.2s ease-in-out;
	filter: grayscale(40%);
}

.image-overlay:hover img {
	filter: grayscale(80%) brightness(80%);
}

.overlay-text {
	font-family: var(--font-body);
	position: absolute;
	bottom: 0.2rem;
	left: 0.2rem;
	padding: 0.2rem;
	font-size: 1.1rem;
	color: var(--color-text-white);
	pointer-events: none;
	backdrop-filter: blur(8px);
	background-color: var(--color-bg-overlay);
	border-radius: var(--border-radius-sm);
	z-index: 1;
}

/* ============================================
   CONTACT
   ============================================ */
#form-container {
	display: flex;
	max-width: 700px;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto var(--space-lg);
	padding: 0;
	box-sizing: border-box;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--border-radius-md);
	overflow: hidden;
}

.contactContainerHeader {
	width: 100%;
	padding: 6px var(--space-lg);
	background-color: var(--color-dark);
	box-sizing: border-box;
	border-bottom: var(--border-width) solid var(--color-border);
}

.contactContainerHeader h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--color-white);
}

.contactForm {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: var(--space-sm) var(--space-lg) var(--space-md);
	box-sizing: border-box;
	background-color: var(--color-bg);
}

/* Cognito form: tight vertical spacing */
.contactForm .cog-form,
.contactForm .cognito {
	width: 100% !important;
}
.contactForm .cog-form > *,
.contactForm .cog-body > *,
.contactForm .cog-page > *,
.contactForm [class*="cog-field"],
.contactForm [class*="cog-row"] {
	margin-top: 0 !important;
	margin-bottom: 0.4rem !important;
}
.contactForm .cog-form > *:last-child,
.contactForm .cog-form [class*="cog-buttons"] {
	margin-bottom: 0 !important;
}
.contactForm input,
.contactForm select,
.contactForm textarea,
#form-container .cog-form input,
#form-container .cog-form select,
#form-container .cog-form textarea {
	padding: 5px 8px !important;
	font-size: var(--font-size-sm) !important;
	font-family: var(--font-body) !important;
	border: 1px solid var(--color-border-light) !important;
	border-radius: var(--border-radius-sm) !important;
	background-color: var(--color-bg) !important;
	color: var(--color-text) !important;
	box-sizing: border-box !important;
	line-height: 1.35 !important;
}
.contactForm input:focus,
.contactForm textarea:focus,
.contactForm select:focus,
#form-container .cog-form input:focus,
#form-container .cog-form textarea:focus,
#form-container .cog-form select:focus {
	outline: none;
	border-color: var(--color-border) !important;
}
.contactForm label,
#form-container .cog-form label {
	font-size: var(--font-size-sm) !important;
	font-family: var(--font-body) !important;
	color: var(--color-text) !important;
	margin-bottom: 2px !important;
}

/* Cognito form: black button, low profile */
#form-container .cog-button--primary,
.contactForm .cog-button--primary {
	background-color: var(--color-dark) !important;
	color: var(--color-white) !important;
	border: 1px solid var(--color-dark) !important;
	border-radius: var(--border-radius-sm) !important;
	font-family: var(--font-heading) !important;
	font-weight: 300 !important;
	font-size: var(--font-size-sm) !important;
	min-height: 34px !important;
	padding: 5px 14px !important;
	transition: opacity 0.2s ease, border-color 0.2s ease !important;
}
#form-container .cog-button--primary:hover,
.contactForm .cog-button--primary:hover {
	background-color: var(--color-dark) !important;
	color: var(--color-white) !important;
	opacity: 0.85 !important;
}

.cog-form,
:root:root:root:root:root .cog-form,
.cognito {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--color-bg) !important;
}

.cog-body,
.cog-page,
.cog-form__container,
.cog-form__content,
:root:root:root:root:root .cog-body,
:root:root:root:root:root .cog-page,
:root:root:root:root:root .cog-form__container,
:root:root:root:root:root .cog-form__content {
	background-color: var(--color-bg) !important;
}

.cog-form input,
.cog-form select,
.cog-form textarea,
:root:root:root:root:root .cog-form input,
:root:root:root:root:root .cog-form select,
:root:root:root:root:root .cog-form textarea {
	background-color: var(--color-bg) !important;
}

.cog-abuse,
:root:root:root:root:root .cog-abuse,
.cog-branding--minimal,
.cog-branding--minimal *,
:root:root:root:root:root .cog-branding--minimal,
:root:root:root:root:root .cog-branding--minimal * {
	display: none !important;
}

#contact-info .contactContainerHeader {
	padding: 6px var(--space-lg);
}

#contact-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: var(--space-lg) auto;
	box-sizing: border-box;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--border-radius-md);
	max-width: 700px;
	overflow: hidden;
}

.contact-item {
	display: flex;
	align-items: center;
	margin: 4px var(--space-lg);
	font-size: var(--font-size-sm);
}
.contact-item:first-of-type {
	margin-top: var(--space-sm);
}
.contact-item:last-of-type {
	margin-bottom: var(--space-sm);
}

.contact-item label {
	margin-right: var(--space-sm);
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--color-text);
	min-width: 3.5em;
}

.contact-item a {
	border-bottom: var(--border-width) solid var(--color-dark);
}

/* ============================================
   BLOG / POST LAYOUT
   ============================================ */
.post-content {
	margin: 1% var(--space-gutter) 0;
	align-self: stretch;
}

.post-title {
	font-size: var(--font-size-xxl);
	font-weight: normal;
}

.post-title #post-name {
	font-size: var(--font-size-xxl);
	font-weight: normal;
	white-space: nowrap;
	padding-right: var(--space-lg);
}

.post-subtitle {
	font-size: var(--font-size-lg);
	margin-top: -1rem;
	font-weight: normal;
	color: var(--color-text-secondary);
}

.post-wrapper {
	display: flex;
	width: 100%;
}

.post-LeftContainer {
	font-size: 1rem;
	flex-basis: 33.33%;
	padding-right: 10px;
}

.post-LeftContainer h1 {
	margin-block-start: 0.5em;
}

.post-RightContainer {
	font-size: 1rem;
	text-align: justify;
	font-weight: normal;
	flex-basis: 66.67%;
	min-height: 300px;
}

/* Featured Image */
#feturedImgContainer {
	max-height: 66.67vh;
	/* Avoid 100vw (includes scrollbar width -> tiny horizontal scroll on Windows) */
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

#feturedImgContainer img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Masonry Gallery */
#masonry {
	clear: both;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
	column-count: 3;
	column-gap: 4px;
}

#masonryItem img {
	width: 100%;
}

.masonry .mItem {
	display: inline-block;
	margin-bottom: 1px;
	width: 100%;
}

/* Collapsible Sections */
.collapsible {
	width: 100%;
	margin-bottom: 5rem;
}

.collapsibleTitle {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: normal;
	font-size: var(--font-size-base);
	background-color: var(--color-bg-gray-light);
	border-radius: var(--border-radius-md);
	border: var(--border-width) solid var(--color-border-light);
	margin-bottom: var(--space-xs);
	padding-left: var(--space-xs);
}

.collapsibleContent {
	display: none;
	margin-bottom: 10px;
}

.collapsibleContent.show {
	display: block;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
	#masonry {
		column-count: 2;
	}
}

@media (max-width: 768px) {
	#grid1,
	#grid2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	#masonry {
		column-count: 1;
	}

	.post-wrapper {
		flex-wrap: wrap;
	}

	.post-LeftContainer,
	.post-RightContainer {
		flex-basis: 100%;
	}

	.post-LeftContainer {
		padding-right: 0;
	}
}