/* 1. Общие контейнеры и типографика */
.lzp-article-detail {
	margin: 0 auto;
	color: var(--lzp-dark-gray);
	line-height: 1.7;
}
.lzp-article-detail iframe {
	margin: 20px 0;
	width: 100%;
	background-color: var(--lzp-dark-gray);
	box-shadow: var(--lzp-shadow);
	border-radius: var(--lzp-border-radius);
}

.lzp-header-info {
	display: flex;
	gap: 15px;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--lzp-light-gray);
}

/* 2. Теги и мета-данные */
.lzp-tags-container, .lzp-meta, .lzp-meta-item {
	display: flex;
	align-items: center;
}

.lzp-tags-container { flex-wrap: wrap; gap: 10px; }
.lzp-meta { gap: 15px; }
.lzp-meta-item { gap: 6px; }

.lzp-tag-link {
	font-size: 0.85rem;
	color: var(--lzp-primary-blue);
	background: rgba(40, 163, 213, 0.08);
	padding: 4px 12px;
	border-radius: 20px;
	text-decoration: none;
	transition: var(--lzp-transition);
	font-weight: 500;
}

.lzp-tag-link:hover {
	background: var(--lzp-primary-blue);
	color: #fff;
	box-shadow: var(--lzp-shadow);
}

/* 3. Оглавление */
.lzp-toc {
	background: var(--lzp-light-beige);
	padding: 20px;
	border-radius: var(--lzp-border-radius);
	margin: 30px 0;
	border: 1px solid var(--lzp-light-gray);
}

.lzp-toc-title { font-weight: bold; color: var(--lzp-primary-blue); margin-bottom: 10px; }
.lzp-toc-list { list-style: none; padding: 0; margin: 0; }
.lzp-toc-list li { margin: 8px 0; }
.lzp-toc-list a { color: var(--lzp-dark-gray); text-decoration: none; transition: var(--lzp-transition); }
.lzp-toc-list a:hover { color: var(--lzp-primary-blue); }

/* 4. Контент статьи */
.lzp-content h2 {
	color: var(--lzp-primary-blue);
	margin: 40px 0 20px;
	scroll-margin-top: 50px;
}

.lzp-content p { margin-bottom: 1.5rem; }

.lzp-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--lzp-border-radius);
	margin: 20px 0;
}

.lzp-content blockquote {
	background: var(--lzp-light-beige);
	border-left: 4px solid var(--lzp-primary-green);
	padding: 20px 30px;
	margin: 30px 0;
	font-style: italic;
}

/* Списки в тексте (без классов) */
.lzp-content ul:not([class]), .lzp-content ol:not([class]) { margin: 20px 0 !important; }
.lzp-content ul:not([class]) { list-style: none !important; padding-left: 20px !important; }
.lzp-content ul:not([class]) li { position: relative !important; padding-left: 25px !important; margin-bottom: 12px !important; line-height: 1.6 !important; }
.lzp-content ul:not([class]) li::before {
	content: "•" !important; color: var(--lzp-primary-green) !important; font-weight: bold !important;
	position: absolute !important; left: 0 !important; font-size: 1.2rem !important; top: 2px !important;
}
.lzp-content ol:not([class]) { padding-left: 25px !important; color: var(--lzp-dark-gray) !important; }
.lzp-content ol:not([class]) li { margin-bottom: 12px !important; padding-left: 10px !important; }

/* 5. Автор и CTA */
.lzp-author-minimal {
	margin-top: 30px; padding-top: 25px;
	border-top: 1px solid var(--lzp-light-gray); color: var(--lzp-dark-gray);
}
.lzp-author-label { font-size: 0.85rem; color: var(--lzp-medium-gray); text-transform: uppercase; margin-bottom: 8px; }
.lzp-author-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.lzp-author-descr { font-size: 0.95rem; color: var(--lzp-medium-gray); line-height: 1.4; }

.lzp-cta-simple {
	margin-top: 40px; padding: 35px;
	background-color: var(--lzp-light-beige); border-radius: var(--lzp-border-radius);
	display: flex; align-items: center; justify-content: space-between; gap: 25px;
}
.lzp-cta-simple_short a.lzp-btn-wide {
	line-height: 42px!important;
}
.lzp-cta-simple_short .lzp-cta-title {
	margin: 0!important;
}
.lzp-cta-title { margin: 0 0 10px 0 !important; font-size: 1.5rem !important; color: var(--lzp-dark-gray) !important; }
.lzp-cta-sub { margin: 0; color: var(--lzp-medium-gray); }
.lzp-btn-wide {
	transition: var(--lzp-transition);
	padding: 0 30px !important; height: 45px; line-height: 45px; display: inline-block;
}
.lzp-btn-wide.btn-primary {
	margin-bottom: 0px!important;
}
.lzp-btn-wide:hover,
.lzp-btn-wide.btn-primary:hover {
	background-color: var(--lzp-primary-green-hover) !important;
	box-shadow: var(--lzp-shadow);
}
.lzp-cta-phone { margin-top: 12px; font-size: 0.9rem; text-align: center; }
.lzp-cta-phone a { color: var(--lzp-primary-blue); font-weight: bold; text-decoration: none; }

/* 6. Галерея */
/* 6. Галерея (Десктоп: 3 в ряд) */
.lzp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 20px 0;
}

.lzp-gallery-item {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--lzp-light-gray);
	overflow: hidden;
	border-radius: var(--lzp-border-radius) !important;
}

.lzp-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
	margin: 0;
}

/* Скрываем лишние фото на десктопе (начиная с 4-го) */
.lzp-desktop-hidden {
	display: none !important;
}

.lzp-gallery-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* Чтобы клик пролетал сквозь маску на ссылку */
}

.lzp-gallery-overlay span {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}

/* 7. Адаптивность */
.lzp-mobile-only { display: none !important; }
.lzp-desktop-only { display: flex !important; }

@media (max-width: 991px) {
	.lzp-article-detail { padding: 0 15px; }
}

@media (max-width: 768px) {
	.lzp-cta-simple { flex-direction: column; text-align: center; padding: 25px; }
}

@media (max-width: 565px) {
	.lzp-gallery-grid {
		display: flex !important; /* Вместо грида используем флекс для скролла */
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		gap: 10px !important;
		padding: 0 20px 15px 20px !important;
		margin-left: -20px !important;
		margin-right: -20px !important;
		-webkit-overflow-scrolling: touch;
	}

	/* Прячем полосу прокрутки */
	.lzp-gallery-grid::-webkit-scrollbar { display: none; }

	.lzp-gallery-item {
		flex: 0 0 80% !important; /* Фото занимает 80% ширины экрана */
		scroll-snap-align: center !important;
		display: block !important; /* Показываем ВСЕ фото на мобилке */
	}

	/* Убираем маску "+n" на мобилке, так как там всё доступно скроллом */
	.lzp-gallery-overlay {
		display: none !important;
	}

	.lzp-desktop-hidden {
		display: block !important; /* Отменяем скрытие для мобилок */
	}
}