/*
 * Длинный SEO-текст — спойлер с затуханием.
 *
 * Работает на двух блоках, каждый подключается своим OCMOD и только на своих
 * страницах: html-модуль внизу главной (zoomagazin_home_seo) и описание
 * категории (zoomagazin_category_desc). Правила ниже написаны от класса
 * .zm-seo, который вешает скрипт, поэтому от места применения не зависят.
 *
 * Разметку строит zm-seo-spoiler.js поверх готового содержимого:
 *
 *     .zm-seo
 *       ├── h1                     ← вынесен наружу, никогда не обрезается
 *       │                            (есть только на главной)
 *       ├── .zm-seo__body          ← обрезается по max-height, снизу градиент
 *       └── .zm-seo__toggle        ← кнопка
 *
 * ПОЧЕМУ max-height, А НЕ display:none. Скрытый через display:none текст Google
 * при индексации обесценивает. На главной под обрезкой лежит единственный
 * <h1> сайта, у категорий — единственный текст страницы, который вообще может
 * ранжироваться: карточки товаров текстом не считаются. Обрезка по высоте
 * оставляет текст полноценным узлом в DOM — он виден краулеру и доступен
 * скринридеру.
 *
 * ПОЧЕМУ ГРАДИЕНТ ИДЁТ ОТ rgba(217,217,217,0), А НЕ ОТ transparent. У темы две
 * палитры (.light-theme / .dark-theme), фон обеих — var(--up-body-bg). Ключевое
 * слово transparent в градиенте разворачивается в rgba(0,0,0,0) и в светлой
 * теме даёт серую муть на переходе. Нейтральный серый с нулевой альфой такого
 * не даёт ни в одной из тем — ровно этим приёмом тема гасит свои собственные
 * градиенты (stylesheet.css:2677, tabs.css:145).
 */

.zm-seo {
	position: relative;
	margin-top: 30px;

	/*
	 * Снизу блок вплотную подходит к футеру. Пока переключатель был кнопкой,
	 * зазор давал её собственный padding; у текстовой ссылки его нет,
	 * и отступ приходится держать здесь.
	 */
	padding-bottom: 12px;

	/*
	 * Высота свёрнутого текста и высота затухания.
	 * Десктоп: ~200px — это примерно первый подзаголовок и начало абзаца,
	 * видно, что блок содержательный, но низ страницы не распухает.
	 */
	--zm-seo-collapsed: 200px;
	--zm-seo-fade: 90px;
}

/*
 * <h1> вынесен из-под обрезки намеренно: заголовок главной обязан читаться
 * целиком, а не выцветать в градиенте — особенно на мобиле, где свёрнутая
 * высота меньше. В описании категории <h1> нет (его рисует тема снаружи),
 * поэтому правило там просто ни к чему не применяется.
 *
 * Размер задан явно. Тема не стилизует h1 вовсе (в stylesheet.css у h1 только
 * цвет и отступы), браузер даёт 2em = 32px — как заголовок страницы. Для блока
 * в подвале это слишком громко, он начинает спорить с настоящим контентом.
 */
.zm-seo > h1 {
	font-size: 26px;
	line-height: 1.25;
	margin-bottom: 16px;
}

.zm-seo__body {
	position: relative;
	overflow: hidden;
	max-height: var(--zm-seo-collapsed);
	transition: max-height 0.45s ease;
}

/*
 * Развёрнутое состояние. max-height: none не анимируется, поэтому переход
 * в обе стороны JS проигрывает через инлайновое значение в пикселях и снимает
 * его по окончании — иначе текст, доросший после разворота (шрифт подгрузился,
 * окно сузилось), обрезался бы по зафиксированной высоте.
 */
.zm-seo.is-open .zm-seo__body {
	max-height: none;
}

.zm-seo:not(.is-open) .zm-seo__body::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--zm-seo-fade);
	background: linear-gradient(to bottom, rgba(217, 217, 217, 0) 0%, var(--up-body-bg) 100%);
	/* Иначе градиент перехватывал бы выделение и клики по последней строке. */
	pointer-events: none;
}

/*
 * Переключатель — текстовая ссылка с пунктиром, а не кнопка.
 * Кнопка с рамкой и заливкой тянула на себя внимание наравне с товарными
 * блоками выше, хотя это служебный элемент подвала.
 *
 * Остаётся <button>: элемент управления, а не переход по адресу. Поэтому
 * все кнопочные умолчания браузера снимаются здесь руками — рамка, фон,
 * padding и шрифт (у button шрифт НЕ наследуется, без font: inherit он
 * съезжает на системный).
 */
.zm-seo__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--up-color-link);
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.2s ease;
}

/*
 * Пунктир на отдельном элементе, а не border-bottom у кнопки: иначе линия
 * тянулась бы и под шевроном, подчёркивая иконку вместе с текстом.
 */
.zm-seo__toggle [data-zm-seo-label] {
	border-bottom: 1px dashed currentColor;
	/* Отрывает пунктир от букв — вплотную он читается как подчёркивание опечатки. */
	padding-bottom: 1px;
}

.zm-seo__toggle:hover,
.zm-seo__toggle:focus {
	color: var(--up-color-link-hover);
}

.zm-seo__toggle:hover [data-zm-seo-label] {
	border-bottom-style: solid;
}

/* Тема глушит обводку фокуса у кнопок глобально — возвращаем её для клавиатуры. */
.zm-seo__toggle:focus-visible {
	outline: 2px solid var(--up-color-link);
	outline-offset: 3px;
}

.zm-seo__toggle .fa {
	font-size: 12px;
	transition: transform 0.25s ease;
}

.zm-seo.is-open .zm-seo__toggle .fa {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	.zm-seo {
		/*
		 * На мобиле сворачиваем плотнее: остаётся заголовок и три-четыре
		 * строки текста. Блок целиком не прячем — это стоило бы <h1> главной
		 * в mobile-first индексации.
		 */
		--zm-seo-collapsed: 110px;
		--zm-seo-fade: 70px;

		margin-top: 20px;
	}

	.zm-seo > h1 {
		font-size: 20px;
		margin-bottom: 12px;
	}

	/*
	 * Ссылку на мобиле не растягиваем и не центрируем: во всю ширину
	 * имело смысл только пока это была кнопка с рамкой. Текстовая ссылка
	 * так превратилась бы в строку с пунктиром через весь экран.
	 * Только зона нажатия — пальцем в 20px строку не попасть.
	 */
	.zm-seo__toggle {
		padding-top: 6px;
		padding-bottom: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zm-seo__body,
	.zm-seo__toggle,
	.zm-seo__toggle .fa {
		transition: none;
	}
}