/**
 * Section: Model Blocks — раскрывающиеся блоки страницы модели (ТЗ V4, п. 5.2).
 *
 * Аккордеон целиком из faq.css (п. 5.2: компонент страницы Shipping & Payment).
 * Здесь — только содержимое блока: списки в тексте (как в legal-content.css)
 * и фото. Правки 19.10, п. 5b (фрагмент 06-model-blocks-layout.html): при
 * тексте и фото первое фото справа от текста, остальные — сеткой ниже;
 * лента со стрелками убрана. Фото открываются в лайтбоксе (model-gallery.css).
 */

.model-blocks__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

/* Текст слева, первое фото справа, сетка остальных — во всю ширину ниже. */
.model-blocks__body.-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(400 / var(--vw-base) * 100vw);
	grid-template-areas:
		"text lead"
		"photos photos";
	column-gap: calc(40 / var(--vw-base) * 100vw);
	row-gap: var(--space-20);
	align-items: start;
}

.model-blocks__body.-lead .model-blocks__text {
	grid-area: text;
}

.model-blocks__body.-lead .model-blocks__gallery {
	grid-area: photos;
}

.model-blocks__text p + p,
.model-blocks__text p + ul,
.model-blocks__text ul + p {
	margin-top: var(--space-12);
}

.model-blocks__text ul,
.model-blocks__text ol {
	padding-left: var(--space-24);
}

.model-blocks__text ul {
	list-style: disc;
}

.model-blocks__text ol {
	list-style: decimal;
}

.model-blocks__text li + li {
	margin-top: var(--space-8);
}

.model-blocks__text li::marker {
	color: var(--color-accent);
}

.model-blocks__text strong {
	color: var(--color-dark);
}

/* ===== Фото ===== */

.model-blocks__link {
	display: block;
	border-radius: var(--radius-12);
	overflow: hidden;
	cursor: zoom-in;
}

.model-blocks__lead-link {
	grid-area: lead;
}

/* Первое фото — рендер компонента на белом фоне (заказчик заменит). */
.model-blocks__lead {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--color-white);
	transition: transform var(--transition-base);
}

.model-blocks__photos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-10);
}

.model-blocks__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.model-blocks__link:hover .model-blocks__lead,
.model-blocks__link:hover .model-blocks__photo {
	transform: scale(1.03);
}

@media (max-width: 767px) {
	.model-blocks__body {
		gap: var(--space-15);
	}

	/* Мобильный: фото над текстом, остальные — сеткой в две колонки. */
	.model-blocks__body.-lead {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"lead"
			"text"
			"photos";
		row-gap: var(--space-15);
	}

	.model-blocks__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}