/**
 * Архив портфолио, страница категории и одиночный проект: панель фильтра,
 * карточки, журнальная раскладка галереи, мета проекта, навигация между
 * проектами, пагинация, полноэкранный просмотр (lightbox).
 */

.ls-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-2xs);
	padding-bottom: var(--ls-space-lg);
}

.ls-filter-bar .ls-tag.is-active {
	border-color: var(--ls-color-accent);
	color: var(--ls-color-accent);
}

#lumen-portfolio-grid {
	padding-bottom: var(--ls-space-2xl);
	transition: opacity var(--ls-dur-base) var(--ls-ease);
}

#lumen-portfolio-grid.is-loading { opacity: 0.4; }

/* Одиночный проект. Настоящая height (не только max-height) обязательна —
   иначе object-fit не активируется для источников, у которых природное
   соотношение сторон и так укладывается в лимит (квадратные, портретные
   фото), и обложка рендерится в свой натуральный рост вместо баннера. */
.ls-project-cover img {
	width: 100%;
	height: min(92vh, 900px);
	object-fit: cover;
}

.ls-project-head {
	max-width: 42rem;
	padding-block: var(--ls-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-sm);
	align-items: flex-start;
}

.ls-project-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-lg);
	margin-top: var(--ls-space-sm);
}

.ls-project-meta dt {
	font-size: var(--ls-fs-small);
	color: var(--ls-color-muted);
}

.ls-project-meta dd {
	margin: 0;
	font-family: var(--ls-font-display);
}

.ls-project-body {
	max-width: 42rem;
	margin-inline: auto;
	padding-block: var(--ls-space-lg);
	font-size: var(--ls-fs-lead);
}

.ls-project-body p + p { margin-top: var(--ls-space-md); }

.ls-project-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-lg);
	padding-block: var(--ls-space-lg);
}

.ls-gallery-block--full img { width: 100%; height: auto; }

.ls-gallery-block--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ls-space-md);
}

.ls-gallery-block--pair img { width: 100%; height: auto; }

.ls-gallery-block--single {
	max-width: 60%;
	margin-inline: auto;
}

.ls-gallery-block--single img { width: 100%; height: auto; }

@media (max-width: 700px) {
	.ls-gallery-block--pair { grid-template-columns: 1fr; }
	.ls-gallery-block--single { max-width: 100%; }
}

.ls-project-equipment {
	max-width: 42rem;
	padding-block: var(--ls-space-lg);
	border-top: 1px solid var(--ls-color-line);
}

.ls-project-equipment ul {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-2xs);
	margin-top: var(--ls-space-sm);
}

.ls-project-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ls-space-md);
	padding-block: var(--ls-space-xl);
	border-top: 1px solid var(--ls-color-line);
}

.ls-project-nav__link { display: flex; flex-direction: column; gap: var(--ls-space-2xs); }
.ls-project-nav__link--next { text-align: right; align-items: flex-end; }
.ls-project-nav__title { font-family: var(--ls-font-display); font-size: var(--ls-fs-h3); }

@media (max-width: 700px) {
	.ls-project-nav { grid-template-columns: 1fr; }
	.ls-project-nav__link--next { text-align: left; align-items: flex-start; }
}

/* Lightbox */
.ls-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(10, 9, 8, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ls-lightbox[hidden] { display: none; }

.ls-lightbox__image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
}

.ls-lightbox__close,
.ls-lightbox__prev,
.ls-lightbox__next {
	position: absolute;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	padding: var(--ls-space-sm);
}

.ls-lightbox__close { top: var(--ls-space-md); right: var(--ls-space-md); }
.ls-lightbox__prev { left: var(--ls-space-md); top: 50%; transform: translateY(-50%); }
.ls-lightbox__next { right: var(--ls-space-md); top: 50%; transform: translateY(-50%); }

body.has-lightbox-open { overflow: hidden; }