/**
 * ZL Longread renderer supplement
 * Profile: zl-longread@1.1.1
 *
 * Тимчасове доповнення до чинного базового стилю до об'єднання renderer у v2.0.0.
 * Закриває дві прогалини чинного стилю:
 *
 * 1. Чотири класи використовуються у статті про Golden Leo, але в стилях їх
 *    немає, тому блоки малюються голими: .zl-risk-grid, .zl-risk-card,
 *    .zl-checklist, .zl-related. Плюс службова обгортка .zl-lightbox-collection.
 *
 * 2. Контракт дозволяє дев'ять розкладок, а реалізовано три. Тут додано ті,
 *    яких бракує: зважені пари, вертикальний стек, контактний аркуш і
 *    горизонтальний ряд із прокруткою.
 *
 * Файл підключається ПІСЛЯ базового стилю.
 * Версія 1.1.1 не робить вигляд, що supplement уже є самодостатнім renderer.
 * Повне злиття, усунення дублювань і перенесення всіх кольорів у CSS variables
 * заплановано для renderer profile v2.0.0 після живого прогону матеріалу.
 */

/* ------------------------------------------------ картки механізмів впливу */

.zl-longread .zl-risk-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	max-width: 1120px;
	margin: 34px auto 40px;
}

.zl-longread .zl-risk-card {
	padding: 18px 20px;
	border: 1px solid var(--zl-line);
	border-top: 3px solid var(--zl-accent);
	border-radius: 4px;
	background: #fbfcfb;
}

.zl-longread .zl-risk-card h3 {
	margin: 0 0 8px;
	color: var(--zl-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 650;
	line-height: 1.25;
}

.zl-longread .zl-risk-card p {
	margin: 0;
	color: #34403a;
	font-size: 15px;
	line-height: 1.55;
}

/* ------------------------------------------------------- перелік до з'ясування */

.zl-longread .zl-checklist {
	max-width: 780px;
	margin: 30px auto;
	padding: 20px 24px;
	border: 1px solid var(--zl-line);
	border-left: 4px solid var(--zl-accent);
	border-radius: 4px;
	background: var(--zl-soft);
}

.zl-longread .zl-checklist > strong {
	display: block;
	margin: 0 0 12px;
	color: var(--zl-ink);
	font-size: 15px;
	letter-spacing: 0.01em;
}

.zl-longread .zl-checklist ul {
	margin: 0;
	padding-left: 1.15em;
	list-style: none;
}

.zl-longread .zl-checklist li {
	position: relative;
	margin: 0 0 0.65em;
	color: #34403a;
	font-size: 15px;
	line-height: 1.55;
}

.zl-longread .zl-checklist li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: -1.05em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zl-accent);
}

.zl-longread .zl-checklist li:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------- пов'язані матеріали */

.zl-longread .zl-related {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 18px 0 8px;
}

.zl-longread .zl-related a {
	display: block;
	padding: 15px 17px;
	border: 1px solid var(--zl-line);
	border-radius: 4px;
	background: var(--zl-paper);
	text-decoration: none;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.zl-longread .zl-related a:hover,
.zl-longread .zl-related a:focus-visible {
	border-color: var(--zl-accent);
	background: #fbfcfb;
}

.zl-longread .zl-related strong {
	display: block;
	margin: 0 0 5px;
	color: var(--zl-accent);
	font-size: 15px;
	line-height: 1.3;
}

.zl-longread .zl-related span {
	display: block;
	color: var(--zl-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------- legacy: службова обгортка старого CSS :target lightbox */

.zl-longread .zl-lightbox-collection {
	display: contents;
}

/* Новий v1.1.1 markup не генерує цю колекцію; правило лишено для старих статей. */

/* --------------------------------------------------------- зважені пари */

.zl-longread .zl-pair-2-1,
.zl-longread .zl-pair-1-2 {
	display: grid;
	gap: 16px;
	align-items: start;
	max-width: 1120px;
	margin: 38px auto 44px;
}

.zl-longread .zl-pair-2-1 {
	grid-template-columns: 2fr 1fr;
}

.zl-longread .zl-pair-1-2 {
	grid-template-columns: 1fr 2fr;
}

/* ------------------------------------------------------ вертикальний стек */

.zl-longread .zl-stack {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	max-width: 920px;
	margin: 38px auto 44px;
}

/* --------------------------------------------------------- контактний аркуш */

.zl-longread .zl-contact-sheet {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1120px;
	margin: 34px auto 40px;
}

.zl-longread .zl-contact-sheet img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #eef1ef;
}

.zl-longread .zl-contact-sheet .zl-frame-label {
	font-size: 11px;
}

/* ------------------------------- горизонтальний ряд із прокруткою (карусель) */

/**
 * Свідомо без автопрокрутки.
 *
 * CSS-прокрутка не має автоматичної SEO-переваги над JavaScript-каруселлю.
 * Вимога індексації інша: кадри, підписи й посилання вже присутні в
 * остаточному DOM і не залежать від взаємодії або пізнього клієнтського
 * вставлення. Прокрутка працює пальцем, колесом і клавіатурою через
 * фокусовані посилання.
 */
.zl-longread .zl-scroll-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 42%);
	gap: 14px;
	max-width: 1120px;
	margin: 34px auto 40px;
	padding-bottom: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.zl-longread .zl-scroll-row .zl-frame {
	scroll-snap-align: start;
}

.zl-longread .zl-scroll-row img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #eef1ef;
}


/* --------------------------- доступність і доказові кадри в компактних сітках */

.zl-longread .zl-scroll-row {
	scrollbar-gutter: stable;
}

.zl-longread .zl-scroll-row .zl-zoom:focus-visible,
.zl-longread .zl-contact-sheet .zl-zoom:focus-visible {
	outline: 3px solid var(--zl-accent);
	outline-offset: 3px;
}

.zl-longread .zl-contact-sheet .zl-contain img,
.zl-longread .zl-scroll-row .zl-contain img {
	object-fit: contain;
}

/*
 * Прямий href на оригінал є обов'язковим fallback.
 * Site-level viewer може перехопити [data-zl-lightbox], але стаття не залежить
 * від нього і не створює дублікати <img> для CSS :target.
 */
.zl-longread a[data-zl-lightbox] {
	touch-action: manipulation;
}

/* ------------------------------------------------------------- мобільні */

@media (max-width: 900px) {
	.zl-longread .zl-contact-sheet {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.zl-longread .zl-risk-grid,
	.zl-longread .zl-related {
		grid-template-columns: 1fr;
	}

	.zl-longread .zl-pair-2-1,
	.zl-longread .zl-pair-1-2 {
		grid-template-columns: 1fr;
		margin: 30px 0 36px;
	}

	.zl-longread .zl-stack {
		margin: 30px 0 36px;
	}

	.zl-longread .zl-contact-sheet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 26px 0 32px;
	}

	.zl-longread .zl-scroll-row {
		grid-auto-columns: minmax(240px, 78vw);
		margin: 26px 0 32px;
	}

	.zl-longread .zl-checklist {
		padding: 17px 18px;
	}
}

/* --------------------------------------------------------------- друк */

@media print {
	.zl-longread .zl-lightbox {
		display: none !important;
	}

	.zl-longread .zl-zoom::after {
		display: none;
	}

	.zl-longread .zl-scroll-row {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
	}
}