/**
 * Production Gallery — «Where AJ1 is built» страницы «О нас».
 *
 * Значения из макета Figma: desktop узел 10300:2678, mobile узел 10300:4848.
 * Таблица значений — в _workflow/tasks/step-about-production-gallery.md.
 *
 * @package AJ1MOTO.COM
 */

.production-gallery {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-grey-93);
}

.production-gallery__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* Заголовочный ряд: слева надзаголовок+H2, справа абзац (по нижней кромке). */
.production-gallery__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-40);
}

.production-gallery__head-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-20);
}

.production-gallery__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.production-gallery__title {
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-dark);
}

.production-gallery__lead {
	max-width: calc(360 / var(--vw-base) * 100vw);
	font-size: var(--fs-16);
	color: var(--color-grey-31);
}

/*
 * Сетка десктоп: 3 колонки, ряды по 240 (резиново). Первое фото (-large) —
 * 2×2 в левом-верхнем углу; остальные пять раскладываются авто-потоком по
 * оставшимся ячейкам (порядок DOM совпадает с макетом).
 */
.production-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: calc(240 / var(--vw-base) * 100vw);
	gap: var(--space-16);
}

.production-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-14);
}

.production-gallery__item.-large {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

/* Кнопка-обёртка фото: заполняет ячейку, курсор-указатель, без рамок. */
.production-gallery__open {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

/*
 * Фото: заполняет обёртку (object-fit cover). Наведение — плавный зум внутри
 * обёртки: обёртка фиксирована (overflow: hidden на .item), фото увеличивается.
 */
.production-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--transition-base);
}

.production-gallery__open:hover .production-gallery__img,
.production-gallery__open:focus-visible .production-gallery__img {
	transform: scale(1.06);
}

/*
 * Лайтбокс: полноэкранный оверлей со слайдером (оригинальный размер фото).
 * Скрыт по умолчанию; открытие — класс -open (js/production-gallery.js).
 * Значения — не из макета (в макете лайтбокса нет): типовой оверлей.
 */
.production-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--color-black-90);
}

.production-gallery-lightbox.-open {
	display: flex;
}

.production-gallery-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--space-40);
}

.production-gallery-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--radius-8);
}

/* Кнопки управления: закрытие и стрелки навигации. */
.production-gallery-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(56 / var(--vw-base) * 100vw);
	height: calc(56 / var(--vw-base) * 100vw);
	border: 0;
	border-radius: 50%;
	color: var(--color-white);
	background: var(--color-white-10);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.production-gallery-lightbox__btn:hover,
.production-gallery-lightbox__btn:focus-visible {
	background: var(--color-accent);
}

.production-gallery-lightbox__btn svg {
	width: calc(24 / var(--vw-base) * 100vw);
	height: calc(24 / var(--vw-base) * 100vw);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.production-gallery-lightbox__close {
	top: var(--space-30);
	right: var(--space-30);
}

.production-gallery-lightbox__prev {
	left: var(--space-30);
}

.production-gallery-lightbox__next {
	right: var(--space-30);
}

@media (max-width: 767px) {
	.production-gallery {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.production-gallery__inner {
		gap: var(--space-30);
	}

	/* Заголовок в столбик: надзаголовок → H2 → абзац (макет узел 10300:4849). */
	.production-gallery__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-15);
	}

	.production-gallery__head-text {
		gap: var(--space-15);
	}

	.production-gallery__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.production-gallery__title {
		font-size: var(--fs-30);
		white-space: normal;
	}

	.production-gallery__lead {
		max-width: none;
		font-size: var(--fs-15);
	}

	/* Сетка 2×3 равных ячеек: ряды по 94, gap 10, скругление 12 (узел 10300:4855). */
	.production-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: calc(94 / var(--vw-base) * 100vw);
		gap: var(--space-10);
	}

	.production-gallery__item {
		border-radius: var(--radius-12);
	}

	/* Мобильный: крупное фото не выделяется — обычная ячейка. */
	.production-gallery__item.-large {
		grid-column: auto;
		grid-row: auto;
	}

	.production-gallery-lightbox__stage {
		padding: var(--space-20);
	}

	.production-gallery-lightbox__btn {
		width: calc(44 / var(--vw-base) * 100vw);
		height: calc(44 / var(--vw-base) * 100vw);
	}

	.production-gallery-lightbox__btn svg {
		width: calc(20 / var(--vw-base) * 100vw);
		height: calc(20 / var(--vw-base) * 100vw);
	}

	.production-gallery-lightbox__close {
		top: var(--space-20);
		right: var(--space-20);
	}

	.production-gallery-lightbox__prev {
		left: var(--space-10);
	}

	.production-gallery-lightbox__next {
		right: var(--space-10);
	}
}