/**
 * VMP Portfolio Display
 *
 * Two layouts share one markup structure:
 *   masonry - CSS columns, photographs keep their natural aspect ratio
 *   grid    - even rows, images cropped to a common aspect ratio
 *
 * Breakpoints match the sizes attribute in vmp_portfolio_sizes_attr():
 * 1 column below 600px, 2 up to 1024px, --vmp-columns above.
 */

.vmp-gallery {
	--vmp-columns: 3;
	--vmp-gap: 16px;
	margin: 0 0 2rem;
}

.vmp-gallery__item {
	margin: 0;
}

.vmp-gallery__link {
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.vmp-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

.vmp-gallery__caption {
	margin-top: 6px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #555;
}

/* ---------------------------------------------------------- Meta line -- */

.vmp-meta {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #555;
}

.vmp-meta__sep {
	opacity: 0.6;
}

/* ------------------------------------------------------------- Masonry -- */

.vmp-gallery--masonry {
	columns: 1;
	column-gap: var(--vmp-gap);
}

.vmp-gallery--masonry .vmp-gallery__item {
	/* Stops a photograph being split across two columns. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: var(--vmp-gap);
}

@media (min-width: 600px) {
	.vmp-gallery--masonry {
		columns: 2;
	}
}

@media (min-width: 1025px) {
	.vmp-gallery--masonry {
		columns: var(--vmp-columns);
	}
}

/* ---------------------------------------------------------------- Grid -- */

.vmp-gallery--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vmp-gap);
}

.vmp-gallery--grid .vmp-gallery__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 600px) {
	.vmp-gallery--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.vmp-gallery--grid {
		grid-template-columns: repeat(var(--vmp-columns), 1fr);
	}
}

/* --------------------------------------------------------- Interaction -- */

@media (prefers-reduced-motion: no-preference) {
	.vmp-gallery__img {
		transition: opacity 0.2s ease-in-out;
	}

	.vmp-gallery__link:hover .vmp-gallery__img {
		opacity: 0.88;
	}
}

.vmp-gallery__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------- Breadcrumb -- */

.vmp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8C8378;
}

.vmp-crumbs a {
	color: #6E6A65;
	text-decoration: none;
}

.vmp-crumbs a:hover {
	color: #8A7B5C;
}

.vmp-crumbs__sep,
.vmp-crumbs__and {
	color: #C9C3BA;
}

/* -------------------------------------------------------- Description -- */

.vmp-description {
	max-width: 62ch;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: #4A4744;
}

.vmp-description p {
	margin: 0 0 1em;
}

.vmp-description p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------ Single view without template -- */
/*
 * Portfolio items render through the theme's singular template (Elementor
 * cannot target this post type), so the theme's page title and content
 * link styles apply. Bring them in line with the design.
 */

/* Match the site's boxed containers (1780px, 48px gutters). Hello caps
   .site-main at 800/1140px via body:not([class*=elementor-page-]) .site-main,
   so the selector needs body + element to outrank it. */
body.single-portfolio main.site-main {
	width: 100%;
	max-width: 1780px;
	margin-inline: auto;
	padding: 56px 48px 88px;
}

.single-portfolio .page-header .entry-title {
	margin: 0 0 18px;
	font-family: Aboreto, serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: .01em;
	color: #121110;
}

.single-portfolio .vmp-crumbs {
	margin-bottom: 14px;
}

.single-portfolio .vmp-meta {
	margin-bottom: 22px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8C8378;
}

.single-portfolio .vmp-description {
	margin-bottom: 44px;
}

/* Same gutter as the collection grids. */
.single-portfolio .vmp-gallery {
	--vmp-gap: 24px;
}

@media (max-width: 767px) {
	body.single-portfolio main.site-main {
		padding: 32px 20px 56px;
	}

	.single-portfolio .page-header .entry-title {
		font-size: 30px;
	}

	.single-portfolio .vmp-description {
		font-size: 15px;
		margin-bottom: 32px;
	}
}