/**
 * Portfolio Gallery — grid / masonry layouts.
 * Carousel styles: assets/css/portfolio-gallery-carousel.css
 */

.portfolio-gallery {
	--portfolio-gallery-gap: 1.25rem;
	--portfolio-gallery-cols: 3;
	--portfolio-gallery-placeholder: #d0d0d0;
	/* Landscape reference cell (width / height). Keep unitless — used only in width calcs. */
	--portfolio-gallery-cell-ratio: 1.5;
	/* Max landscape cell width; overridden by --size-* classes or inline style. */
	--portfolio-gallery-item-max: 640px; /* medium */
	/*
	 * Pack at most `cols` cells of item-max (plus gaps). Wider viewports center the pack
	 * instead of stretching empty slot space between images.
	 */
	--portfolio-gallery-row-max: min(
		100%,
		calc(
			var(--portfolio-gallery-cols) * var(--portfolio-gallery-item-max)
			+ (var(--portfolio-gallery-cols) - 1) * var(--portfolio-gallery-gap)
		)
	);
	/* Landscape cell width: Image size tope, or share of the available row. */
	--portfolio-gallery-col-width: min(
		var(--portfolio-gallery-item-max),
		calc(
			(100% - (var(--portfolio-gallery-cols) - 1) * var(--portfolio-gallery-gap))
			/ var(--portfolio-gallery-cols)
		)
	);
	width: 100%;
	box-sizing: border-box;
	background-color: var(--portfolio-gallery-bg, transparent);
}

.portfolio-gallery--size-full {
	--portfolio-gallery-item-max: 100%;
}

.portfolio-gallery--size-large {
	--portfolio-gallery-item-max: 900px;
}

.portfolio-gallery--size-medium {
	--portfolio-gallery-item-max: 640px;
}

.portfolio-gallery--size-small {
	--portfolio-gallery-item-max: 400px;
}

/* Custom width comes from inline --portfolio-gallery-item-max on the wrapper. */
.portfolio-gallery--size-custom {
	--portfolio-gallery-item-max: 640px;
}

.portfolio-gallery--cols-1 {
	--portfolio-gallery-cols: 1;
}

.portfolio-gallery--cols-2 {
	--portfolio-gallery-cols: 2;
}

.portfolio-gallery--cols-3 {
	--portfolio-gallery-cols: 3;
}

.portfolio-gallery--cols-4 {
	--portfolio-gallery-cols: 4;
}

.portfolio-gallery__grid {
	width: 100%;
}

/* Grid: pack cells to Image size; center the row when the viewport is wider. */
.portfolio-gallery--grid .portfolio-gallery__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--portfolio-gallery-gap);
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: var(--portfolio-gallery-row-max);
	margin-inline: auto;
	box-sizing: border-box;
}

.portfolio-gallery--grid .portfolio-gallery__item {
	margin: 0;
	flex: 0 0 var(--portfolio-gallery-col-width);
	width: var(--portfolio-gallery-col-width);
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.portfolio-gallery--grid .portfolio-gallery__item--portrait,
.portfolio-gallery--grid .portfolio-gallery__item--square {
	/*
	 * Same height as landscape cells, width = height * imgRatio.
	 * width = colWidth * imgRatio / cellRatio
	 */
	flex-basis: calc(
		var(--portfolio-gallery-col-width) * var(--portfolio-gallery-img-ratio, 0.66)
		/ var(--portfolio-gallery-cell-ratio)
	);
	width: calc(
		var(--portfolio-gallery-col-width) * var(--portfolio-gallery-img-ratio, 0.66)
		/ var(--portfolio-gallery-cell-ratio)
	);
}

.portfolio-gallery--grid .portfolio-gallery__figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	background: #fff;
}

.portfolio-gallery--grid .portfolio-gallery__excerpt {
	width: 100%;
	max-width: 100%;
}

.portfolio-gallery--grid .portfolio-gallery__item--landscape .portfolio-gallery__figure {
	aspect-ratio: var(--portfolio-gallery-cell-ratio);
}

.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__figure,
.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__figure {
	aspect-ratio: var(--portfolio-gallery-img-ratio, 0.66);
}

/* Shrink-wraps the photo so overlay/title sit on the image, not the cell. */
.portfolio-gallery--grid .portfolio-gallery__media {
	position: relative;
	display: block;
	line-height: 0;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}

.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__media,
.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__media {
	width: 100%;
	height: 100%;
}

.portfolio-gallery--grid .portfolio-gallery__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__image,
.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-gallery--grid .portfolio-gallery__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: var(--portfolio-gallery-cell-ratio);
	background: var(--portfolio-gallery-placeholder);
}

.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__placeholder,
.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__placeholder {
	height: 100%;
	aspect-ratio: auto;
}

/* Masonry: column-count matches Images per row; pack to Image size like grid. */
.portfolio-gallery--masonry .portfolio-gallery__grid {
	column-count: var(--portfolio-gallery-cols);
	column-gap: var(--portfolio-gallery-gap);
	width: 100%;
	max-width: var(--portfolio-gallery-row-max);
	margin-inline: auto;
}

.portfolio-gallery--masonry .portfolio-gallery__item {
	break-inside: avoid;
	page-break-inside: avoid;
	width: 100%;
	margin: 0 0 var(--portfolio-gallery-gap);
}

.portfolio-gallery--masonry .portfolio-gallery__media {
	position: relative;
	display: block;
	line-height: 0;
}

.portfolio-gallery--masonry .portfolio-gallery__image {
	display: block;
	width: 100%;
	height: auto;
}

.portfolio-gallery--masonry .portfolio-gallery__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--portfolio-gallery-placeholder);
}

.portfolio-gallery__item {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.portfolio-gallery__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.portfolio-gallery__figure {
	position: relative;
	margin: 0;
	padding: 0;
}

.portfolio-gallery__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	max-width: calc(100% - 1.5rem);
	pointer-events: none;
}

.portfolio-gallery__title,
.portfolio-gallery__architect {
	display: inline-block;
	margin: 0;
	padding: 0.45rem 0.85rem;
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #111;
	border-radius: 999px;
	box-sizing: border-box;
	max-width: 100%;
}

.portfolio-gallery__excerpt {
	display: block;
	margin-top: 0.75rem;
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: inherit;
	opacity: 0.82;
	text-wrap: pretty;
}

/* Desktop: caption on the photo (hover / focus). */
@media (hover: hover) {
	.portfolio-gallery__caption {
		position: absolute;
		left: 0.75rem;
		bottom: 0.75rem;
		z-index: 2;
	}

	.portfolio-gallery__title {
		position: relative;
		z-index: 2;
		opacity: 0;
		transition: opacity 0.22s ease;
	}

	.portfolio-gallery__architect {
		position: relative;
		z-index: 1;
		opacity: 0;
		/* Start ~halfway under the title pill, then slide out to the right. */
		transform: translate3d(calc(-50% - 2.5rem), 0, 0);
		transition:
			opacity 0.32s ease-out,
			transform 0.78s cubic-bezier(0.2, 1.55, 0.32, 1);
		transition-delay: 0s, 0s;
	}

	.portfolio-gallery__item:hover .portfolio-gallery__title,
	.portfolio-gallery__item:focus-visible .portfolio-gallery__title {
		opacity: 1;
	}

	.portfolio-gallery__item:hover .portfolio-gallery__architect,
	.portfolio-gallery__item:focus-visible .portfolio-gallery__architect {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition-delay: 125ms, 125ms;
	}
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.portfolio-gallery__architect {
		transform: translate3d(calc(-50% - 1rem), 0, 0);
		transition:
			opacity 0.2s ease,
			transform 0.4s ease-out;
		transition-delay: 0s, 0s;
	}

	.portfolio-gallery__item:hover .portfolio-gallery__architect,
	.portfolio-gallery__item:focus-visible .portfolio-gallery__architect {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition-delay: 125ms, 125ms;
	}
}

/* Mobile / touch: title pill always visible on the image; one column. */
@media (max-width: 600px) {
	.portfolio-gallery {
		--portfolio-gallery-cols: 1;
		--portfolio-gallery-gap: 1rem;
		--portfolio-gallery-item-max: 100%;
	}

	.portfolio-gallery--grid .portfolio-gallery__item,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait,
	.portfolio-gallery--grid .portfolio-gallery__item--square {
		flex-basis: 100%;
		width: 100%;
	}

	.portfolio-gallery--grid .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--landscape .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__excerpt,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__excerpt,
	.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__excerpt {
		width: 100%;
	}

	.portfolio-gallery--grid .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--landscape .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__figure,
	.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__figure {
		display: block;
		aspect-ratio: auto;
	}

	.portfolio-gallery--grid .portfolio-gallery__media,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__media,
	.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__media {
		width: 100%;
		height: auto;
		max-height: none;
	}

	.portfolio-gallery--grid .portfolio-gallery__image,
	.portfolio-gallery--grid .portfolio-gallery__item--portrait .portfolio-gallery__image,
	.portfolio-gallery--grid .portfolio-gallery__item--square .portfolio-gallery__image {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: unset;
	}

	.portfolio-gallery__caption {
		position: absolute;
		left: 0.75rem;
		bottom: 0.75rem;
		z-index: 2;
		opacity: 1;
	}

	.portfolio-gallery__title,
	.portfolio-gallery__architect {
		opacity: 1;
		transform: none;
		animation: none;
	}
}