/* =========================================================
   HANSEN LANDSCAPE PORTFOLIO
   This file is intentionally separate from site.css.
   ========================================================= */


/* =========================================================
   PORTFOLIO TYPOGRAPHY
   ========================================================= */

/*
 * Portfolio headings use Georgia to match the major headings
 * throughout the Hansen Landscape website.
 *
 * Supporting text, filters, labels, and album controls inherit
 * the Arial body font from site.css.
 */

.portfolio-photo-hero__overlay h1,
.portfolio-intro h2,
.portfolio-showcase h2,
.portfolio-project__caption h3,
.portfolio-cta h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.portfolio-intro h2,
.portfolio-showcase h2,
.portfolio-cta h2 {
	margin: 0;
	color: var(--green-950);
	font-size: clamp(2.3rem, 4.5vw, 4.5rem);
	line-height: 1.02;
}

.portfolio-project__caption h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.025em;
}


/* =========================================================
   PHOTO HERO
   ========================================================= */

.portfolio-photo-hero {
	position: relative;
	min-height: clamp(390px, 62vw, 760px);
	overflow: hidden;
	background: var(--green-900);
}

.portfolio-photo-hero > img {
	display: block;
	width: 100%;
	height: clamp(390px, 62vw, 760px);
	object-fit: cover;
	object-position: center;
}

.portfolio-photo-hero::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(
			to top,
			rgba(12, 39, 27, 0.76),
			rgba(12, 39, 27, 0.04) 65%
		);
	pointer-events: none;
}

.portfolio-photo-hero__overlay {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	padding: clamp(2rem, 6vw, 5rem) 24px;
	color: var(--white);
}

.portfolio-photo-hero__overlay h1 {
	max-width: 780px;
	margin: 0;
	color: var(--white);
	font-size: clamp(2.75rem, 7vw, 6.5rem);
	line-height: 0.92;
	text-shadow: 0 3px 22px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.portfolio-intro {
	background: var(--cream);
}

.portfolio-intro__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(300px, 0.72fr);
	gap: clamp(2rem, 7vw, 7rem);
	align-items: start;
}

.portfolio-intro__grid h2 {
	max-width: 780px;
}

.portfolio-intro__grid > div:last-child {
	max-width: 650px;
}

.portfolio-intro__grid > div:last-child p {
	margin-bottom: 22px;
}


/* =========================================================
   PORTFOLIO SHOWCASE
   ========================================================= */

.portfolio-showcase {
	overflow: hidden;
	background: #f2f0e8;
}

.portfolio-showcase__heading {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(260px, 0.5fr);
	gap: 2rem;
	align-items: end;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.portfolio-showcase__heading h2 {
	max-width: 850px;
	margin-bottom: 0;
}

.portfolio-showcase__heading > p {
	max-width: 430px;
	margin: 0;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.portfolio-filters {
	display: flex;
	gap: 0.65rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);

	/* Room for buttons to rise on hover */
	padding-top: 8px;
	padding-bottom: 0.5rem;

	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color:
		rgba(23, 69, 47, 0.35)
		transparent;
	-webkit-overflow-scrolling: touch;
}

.portfolio-filter {
	flex: 0 0 auto;
	border: 1px solid rgba(19, 64, 43, 0.3);
	border-radius: 999px;
	padding: 0.72rem 1.15rem;
	background: transparent;
	color: var(--green-800);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		color 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}

.portfolio-filter:hover {
	border-color: var(--green-800);
	transform: translateY(-2px);
}

.portfolio-filter.is-active {
	border-color: var(--green-800);
	background: var(--green-800);
	color: var(--white);
}

.portfolio-filter:focus-visible,
.portfolio-album__button:focus-visible,
.portfolio-album:focus-visible {
	outline: 3px solid #d5a528;
	outline-offset: 3px;
}


/* =========================================================
   NO-JAVASCRIPT FALLBACK GRID
   ========================================================= */

/*
 * Without JavaScript, all projects remain visible in a
 * responsive two-column grid.
 */

.portfolio-album__stage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.portfolio-project {
	min-width: 0;
}

.portfolio-project__figure {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 20px 50px rgba(15, 48, 33, 0.12);
}

.portfolio-project__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	background: #d9ded8;
}

.portfolio-project[data-category="designs"]
	.portfolio-project__figure img {
	object-fit: contain;
	background: var(--white);
}

.portfolio-project__caption {
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.portfolio-project__category {
	margin: 0 0 0.55rem;
	color: var(--green-700);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.portfolio-project__caption h3 {
	margin: 0 0 0.75rem;
	color: var(--green-950);
	font-size: clamp(1.55rem, 3vw, 2.4rem);
	line-height: 1.05;
}

.portfolio-project__caption > p:last-child {
	max-width: 680px;
	margin-bottom: 0;
}

.portfolio-album__controls,
.portfolio-album__status {
	display: none;
}


/* =========================================================
   JAVASCRIPT-ENHANCED ALBUM
   ========================================================= */

.portfolio-enhanced .portfolio-album {
	position: relative;
	max-width: 1180px;
	margin-inline: auto;
}

.portfolio-enhanced .portfolio-album__stage {
	position: relative;
	display: block;
	isolation: isolate;
	min-height: 400px;
}

.portfolio-enhanced .portfolio-album__stage::before,
.portfolio-enhanced .portfolio-album__stage::after {
	position: absolute;
	inset: 1.25rem 2rem;
	z-index: -2;
	content: "";
	border-radius: 3px;
	background: #dfe5dc;
	box-shadow: 0 18px 45px rgba(14, 45, 31, 0.12);
	transform: rotate(-1.4deg);
}

.portfolio-enhanced .portfolio-album__stage::after {
	z-index: -1;
	background: var(--white);
	transform: rotate(1deg);
}

.portfolio-enhanced .portfolio-project {
	display: none;
}

.portfolio-enhanced .portfolio-project.is-active {
	display: block;
	animation:
		portfolio-card-in
		520ms
		cubic-bezier(0.2, 0.8, 0.2, 1)
		both;
}

.portfolio-enhanced .portfolio-project.is-leaving-left {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	pointer-events: none;
	animation:
		portfolio-card-left
		360ms
		ease
		both;
}

.portfolio-enhanced .portfolio-project.is-leaving-right {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	pointer-events: none;
	animation:
		portfolio-card-right
		360ms
		ease
		both;
}

.portfolio-enhanced .portfolio-project__figure {
	display: grid;
	grid-template-columns:
		minmax(0, 1.55fr)
		minmax(280px, 0.65fr);
	min-height: clamp(500px, 63vw, 730px);
	border-radius: 3px;
}

.portfolio-enhanced .portfolio-project__figure img {
	height: 100%;
	min-height: 500px;
	aspect-ratio: auto;
}

.portfolio-enhanced .portfolio-project__caption {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.6rem, 5vw, 4rem);
	background: var(--white);
}

.portfolio-enhanced .portfolio-project__caption h3 {
	max-width: 13ch;
}

.portfolio-enhanced .portfolio-project__caption > p:last-child {
	font-size: 1rem;
	line-height: 1.65;
}


/* =========================================================
   ALBUM STATUS
   ========================================================= */

.portfolio-enhanced .portfolio-album__status {
	display: block;
	margin-bottom: 0.85rem;
	color: #426150;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: right;
	text-transform: uppercase;
}


/* =========================================================
   ALBUM CONTROLS
   ========================================================= */

.portfolio-enhanced .portfolio-album__controls {
	display: grid;
	grid-template-columns:
		auto
		minmax(90px, 1fr)
		auto;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	margin-top: 2rem;
}

.portfolio-album__button {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	border: 0;
	padding: 0.7rem 0;
	background: transparent;
	color: var(--green-800);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.portfolio-album__button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.portfolio-album__button span {
	display: grid;
	width: 2rem;
	height: 2rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	place-items: center;
	transition:
		color 180ms ease,
		background-color 180ms ease,
		transform 180ms ease;
}

.portfolio-album__button:not(:disabled):hover span {
	background: var(--green-800);
	color: var(--white);
}

.portfolio-album__button--previous:not(:disabled):hover span {
	transform: translateX(-3px);
}

.portfolio-album__button--next:not(:disabled):hover span {
	transform: translateX(3px);
}


/* =========================================================
   ALBUM PROGRESS
   ========================================================= */

.portfolio-album__progress {
	height: 3px;
	overflow: hidden;
	background: rgba(23, 69, 47, 0.18);
}

.portfolio-album__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--green-700);
	transition: width 360ms ease;
}


/* =========================================================
   PORTFOLIO CALL TO ACTION
   ========================================================= */

.portfolio-cta {
	background: var(--sand);
}

.portfolio-cta__inner {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	gap: 3rem;
	align-items: center;
}

.portfolio-cta__inner > div:first-child {
	max-width: 780px;
}

.portfolio-cta h2 {
	max-width: 16ch;
}

.portfolio-cta__inner p:not(.section-eyebrow) {
	max-width: 650px;
	margin: 22px 0 0;
	font-size: 1.08rem;
}

.portfolio-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}


/* =========================================================
   ALBUM MOTION
   ========================================================= */

@keyframes portfolio-card-in {
	from {
		opacity: 0;
		transform:
			translateY(20px)
			rotate(0.35deg)
			scale(0.985);
	}

	to {
		opacity: 1;
		transform:
			translateY(0)
			rotate(0)
			scale(1);
	}
}

@keyframes portfolio-card-left {
	from {
		opacity: 1;
		transform:
			translateX(0)
			rotate(0);
	}

	to {
		opacity: 0;
		transform:
			translateX(-16%)
			rotate(-2deg);
	}
}

@keyframes portfolio-card-right {
	from {
		opacity: 1;
		transform:
			translateX(0)
			rotate(0);
	}

	to {
		opacity: 0;
		transform:
			translateX(16%)
			rotate(2deg);
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {
	.portfolio-intro__grid,
	.portfolio-showcase__heading {
		grid-template-columns: 1fr;
	}

	.portfolio-intro__grid {
		gap: 35px;
	}

	.portfolio-showcase__heading {
		align-items: start;
	}

	.portfolio-enhanced .portfolio-project__figure {
		grid-template-columns: 1fr;
	}

	.portfolio-enhanced .portfolio-project__figure img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.portfolio-enhanced
		.portfolio-project[data-category="designs"]
		.portfolio-project__figure img {
		aspect-ratio: 4 / 3;
	}

	.portfolio-enhanced .portfolio-project__caption {
		min-height: 230px;
	}

	.portfolio-enhanced .portfolio-project__caption h3 {
		max-width: 18ch;
	}

	.portfolio-cta__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}


/* =========================================================
   PHONE
   ========================================================= */

@media screen and (max-width: 620px) {
	.portfolio-photo-hero {
		min-height: 440px;
	}

	.portfolio-photo-hero > img {
		height: 440px;
	}

	.portfolio-photo-hero__overlay {
		padding-right: 20px;
		padding-left: 20px;
	}

	.portfolio-photo-hero__overlay h1 {
		font-size: clamp(3rem, 15vw, 5rem);
	}

	.portfolio-filters {
		margin-right: -20px;
		padding-top: 8px;
		padding-right: 20px;
	}

	.portfolio-album__stage {
		grid-template-columns: 1fr;
	}

	.portfolio-enhanced .portfolio-album__stage::before,
	.portfolio-enhanced .portfolio-album__stage::after {
		inset: 0.75rem;
	}

	.portfolio-enhanced .portfolio-project__figure img {
		aspect-ratio: 4 / 3;
	}

	.portfolio-enhanced
		.portfolio-project[data-category="designs"]
		.portfolio-project__figure img {
		aspect-ratio: 4 / 3;
	}

	.portfolio-enhanced .portfolio-project__caption {
		min-height: 250px;
		padding: 1.6rem;
	}

	.portfolio-enhanced .portfolio-project__caption h3 {
		max-width: none;
	}

	.portfolio-enhanced .portfolio-album__controls {
		grid-template-columns: 1fr 1fr;
	}

	.portfolio-album__progress {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.portfolio-album__button--next {
		justify-self: end;
	}

	.portfolio-album__status {
		text-align: left;
	}

	.portfolio-cta__actions {
		width: 100%;
	}

	.portfolio-cta__actions .button {
		width: 100%;
	}
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 390px) {
	.portfolio-filter {
		padding: 0.65rem 0.9rem;
		font-size: 0.82rem;
	}

	.portfolio-album__button {
		font-size: 0.88rem;
	}

	.portfolio-album__button span {
		width: 1.85rem;
		height: 1.85rem;
	}

	.portfolio-enhanced .portfolio-project__caption {
		min-height: 270px;
		padding: 1.35rem;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.portfolio-project,
	.portfolio-filter,
	.portfolio-album__button span,
	.portfolio-album__progress span {
		scroll-behavior: auto;
		transition: none !important;
		animation: none !important;
	}

	.portfolio-filter:hover,
	.portfolio-album__button:hover span {
		transform: none;
	}
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
	.portfolio-photo-hero,
	.portfolio-filters,
	.portfolio-album__controls,
	.portfolio-album__status,
	.portfolio-cta {
		display: none !important;
	}

	.portfolio-showcase {
		overflow: visible;
		background: var(--white);
	}

	.portfolio-enhanced .portfolio-album {
		max-width: none;
	}

	.portfolio-enhanced .portfolio-album__stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.portfolio-enhanced .portfolio-album__stage::before,
	.portfolio-enhanced .portfolio-album__stage::after {
		display: none;
	}

	.portfolio-enhanced .portfolio-project,
	.portfolio-enhanced .portfolio-project.is-active {
		position: static;
		display: block;
		animation: none;
	}

	.portfolio-enhanced .portfolio-project__figure {
		display: block;
		min-height: 0;
		border: 1px solid #cccccc;
		box-shadow: none;
	}

	.portfolio-enhanced .portfolio-project__figure img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.portfolio-enhanced .portfolio-project__caption {
		min-height: 0;
		padding: 18px;
	}
}