/**
 * Страница /certificates — обращение и карточки сертификатов (пакет site-certificates, фаза 3 §3.3).
 *
 * Цвета — из бренда, как на «Музыке» (songs.css): фирменный градиент #8115ff → #ff2ad0 → #ff8f2a, тёмные оттенки
 * theme.css (#000, #0a0a0a), белый текст с прозрачностью. Новой палитры нет. Градиент — у контура заголовка страницы, узкой
 * полоски обращения (фаза 8, Р-20, Р-23), названий сертификатов (фаза 10, Р-26) и обводки «Хочу!» при наведении и фокусе
 * (фаза 11, Р-27): цена — белая, «Хочу!» — графитовая с белым текстом, значок — тёмное «стекло» (фаза 9, Р-25).
 *
 * Плавная прокрутка (ScrollSmoother 3.10.4) не следит за размером содержимого: высоту страницы она берёт из
 * #smooth-content только на ScrollTrigger.refresh(). Поэтому:
 *   - картинка — в рамке 3 : 2 (Р-12): ленивая загрузка высоту карточки не меняет;
 *   - раскрытие «Условий» — пересчёт в certificates.js.
 *
 * Раскладка (фаза 8, Р-21): до 767 — одна колонка, «Хочу!» во всю ширину; ≥ 768 — строки: картинка слева (40 %), текст
 * справа, «Условия» — под строкой во всю ширину карточки, одной колонкой. Обращение и список — на всю ширину сетки сайта
 * (контейнер страницы, как у шапки: левые края с заголовком на одной линии, Р-24); длина строки текста внутри — до 72ch.
 */

.certificates-page {
	--cert-card-bg: #0a0a0a;
}

/* hidden у блока условий сильнее display */
.cert-card__conditions[hidden] {
	display: none !important;
}

.certificates-page .cert-section button:focus-visible,
.certificates-page .cert-section a:focus-visible {
	outline: 2px solid #ff2ad0;
	outline-offset: 3px;
}

/*
 * Ссылка в фокусе после щелчка мышью (не клавиатуры) — без рамки: иначе тема (a:focus { outline: thin dotted }) обводит
 * «Хочу!» белым пунктиром, когда гость вернулся из новой вкладки, — до щелчка в другом месте (post11 Minor-1). Клавиатура —
 * розовая рамка правила выше. Только ссылки: у кнопок раздела пунктира темы нет.
 */
.certificates-page .cert-section a:focus:not(:focus-visible) {
	outline: none;
}

/*
 * ---------- Нижний край фото шапки растворяется в фон страницы (фаза 8, Р-22) ----------
 * Фото шапки (theme.css: img.sk__parallax-element-3, z-index −1) выше контейнера на 30 % и при прокрутке сдвигается
 * параллаксом ScrollSmoother; обрезает его контейнер (overflow: hidden) — его нижний край и был резкой чертой. Затемнение
 * привязано к контейнеру, а не к фото, поэтому стоит на месте при любом сдвиге фото. z-index −1 и место после фото в
 * разметке: поверх фото, но под заголовком и кнопкой. Цвет — фон страницы (.dark-shade-1-bg, #000). То же — в songs.css.
 */
.certificates-page .sk__news-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: 120px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.9) 82%, #000 100%);
	pointer-events: none;
}

@media all and (min-width: 768px) {
	.certificates-page .sk__news-header::after {
		height: 160px;
	}
}

/* ---------- Раздел, обращение и пустое состояние ---------- */

.cert-section {
	padding-bottom: 96px;
}

/*
 * Обращение (Д-6, фаза 8 Р-20): тёмная карточка, серая рамка как у карточек сертификатов, слева — полоска фирменного
 * градиента 3 px сверху вниз. Полоска — фоном на месте левой рамки (её ширина 0): фон обрезается скруглением блока, поэтому
 * левые углы полоски скруглены вместе с карточкой, без псевдоэлемента и overflow. Отступ текста от краёв — прежний
 * (24 px по бокам, 22 px сверху и снизу: раньше рамка 2 px + отступ).
 */
.cert-intro {
	margin: 0 0 32px;
	padding: 21px 23px 21px 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left-width: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #8115ff 0%, #ff2ad0 50%, #ff8f2a 100%) left top / 3px 100% no-repeat border-box,
		var(--cert-card-bg);
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/*
 * Абзацы текстов сайта (режим block; других блочных тегов siteText не даёт) — размер и цвет контейнера, а не общие правила p
 * из theme.css. Длина строки — до 72ch (Р-24): блоки на всю ширину сетки, строки не растягиваются на ~1300 px.
 */
.cert-intro p,
.cert-card__description p,
.cert-card__conditions p {
	max-width: 72ch;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.cert-intro p {
	margin: 0 0 0.75em;
}

.cert-intro p:last-child {
	margin-bottom: 0;
}

.cert-intro strong {
	color: #fff;
	font-weight: 700;
}

.cert-empty {
	margin: 0;
	padding: 24px 0 96px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
}

/* ---------- Список и карточка ---------- */

.cert-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.cert-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	background: var(--cert-card-bg);
	overflow: hidden;
	line-height: 1.5;
}

/* Рамка картинки 3 : 2: фото заполняет её, края обрезаются (Р-12) */
.cert-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: #000;
	overflow: hidden;
}

.cert-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Нет картинки — логотип Cheers на тёмном (как обложка песни без картинки) */
.cert-card__media--logo .cert-card__image {
	object-fit: contain;
	padding: 18% 24%;
	opacity: 0.85;
}

/*
 * Значок (Р-15, вид — Р-25): нейтральное тёмное «стекло» в правом верхнем углу картинки — полупрозрачный чёрный круг с
 * размытием фото под ним и тонкой светлой обводкой (в тон рамкам кнопок страницы), глиф набора сайта (icomoon) ~50 %
 * диаметра, мягкая тень. Глиф светло-серый #b3b3b3 (фаза 12, Р-28): белый спорил с названием; читается и на тёмном «стекле»,
 * и на светлом фото. 56 px, на ≥ 768 — 72 px (обводка — внутри размера). Тот же вид — `.cert-badge` в админке
 * (admin-vue SiteCertificateBadge.vue); меняются вместе.
 */
.cert-card__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	color: #b3b3b3;
	font-size: 28px;
	line-height: 1;
	pointer-events: none;
}

.cert-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 18px 16px 20px;
}

/*
 * Название (Р-26) — текст с фирменным градиентом. Градиент — у строчного `.cert-card__title-text` внутри заголовка, а не у самого
 * заголовка: тот — блок во всю ширину колонки, и у короткого названия был бы виден только фиолетовый, а у двухстрочного не было бы
 * оранжевого. У строчного элемента фон идёт по ширине текста; `box-decoration-break: clone` даёт каждой строке свой полный
 * переход от фиолетового к оранжевому — как у однострочного названия (при `slice` градиент растягивался бы на все строки подряд, и
 * у названия в 4–6 строк на узком телефоне каждая строка вышла бы почти одного цвета). Без `background-clip: text` — белый (цвет
 * заголовка). Приглушение скрытой карточки — `opacity` тела, действует и на градиент.
 */
.cert-card__title {
	margin: 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.cert-card__title-text {
		background: linear-gradient(90deg, #8115ff, #ff2ad0, #ff8f2a);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}

	/* Выделение мышью: у прозрачной заливки выделенное не прочесть — белый текст на фиолетовом */
	.cert-card__title-text::selection {
		background: #8115ff;
		color: #fff;
		-webkit-text-fill-color: #fff;
	}
}

/* Высокая контрастность Windows: системный цвет текста, без фона */
@media (forced-colors: active) {
	.cert-card__title-text {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

/* Цена (Р-8) — крупно; белая, без градиента (фаза 8, Р-23) */
.cert-card__price {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	overflow-wrap: anywhere;
}

.cert-card__description,
.cert-card__conditions {
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.cert-card__description p,
.cert-card__conditions p {
	margin: 0 0 0.75em;
}

.cert-card__description p:last-child,
.cert-card__conditions p:last-child {
	margin-bottom: 0;
}

.cert-card__description strong,
.cert-card__conditions strong {
	color: #fff;
}

.cert-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/*
 * «Хочу!» — главная кнопка карточки, высота ≥ 44 px. На телефоне (фаза 13, Р-29) — в одну строку с «Условиями»: «Хочу!»
 * забирает свободное место, «Условия» — по ширине текста. Одинокая кнопка любой из двух — во всю ширину. Если обе не помещаются
 * (длинная надпись кнопки из админки, другой шрифт) — «Условия» переносится второй строкой тоже во всю ширину, не маленькой
 * кнопкой слева. Всё это — отношением flex-grow: у «Хочу!» 1000, у «Условий» 1 (правило ниже): в общей строке «Условиям»
 * достаётся 1/1001 свободного места (доли пикселя), в строке одна — всё место. Основа обеих — ширина текста (auto): строка
 * переносится, только когда надписи не помещаются целиком, текст не обрезается. Графитовая заливка, белый жирный текст, тонкая
 * светлая обводка, как у «Условий» (фаза 11, Р-27): от прозрачной «Условия» отличается заливкой, не цветом. Заливка #262626 —
 * светлее фона карточки (#0a0a0a), читается как кнопка; белый текст на ней — ~15 : 1. Цвет текста — отдельным правилом ниже,
 * во всех состояниях ссылки.
 */
.cert-card__want {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1000 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 24px;
	background: #262626;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/*
 * Белый текст «Хочу!» во всех состояниях ссылки (фаза 9, цвет — фаза 11). theme.css и сам красит ссылки белым в a:visited,
 * a:hover, a:focus, a:active — специфичность 0,1,1 выше, чем у .cert-card__want (0,1,0). Правило сильнее темы (0,2,1 / 0,3,1,
 * без !important) оставлено страховкой: цвет кнопки не зависит от будущих правок темы.
 */
.certificates-page a.cert-card__want,
.certificates-page a.cert-card__want:link,
.certificates-page a.cert-card__want:visited,
.certificates-page a.cert-card__want:hover,
.certificates-page a.cert-card__want:focus,
.certificates-page a.cert-card__want:focus-visible,
.certificates-page a.cert-card__want:active {
	color: #fff;
}

/*
 * Наведение и фокус — обводка фирменным градиентом: рамка прозрачная, заливка (чуть светлее, #2e2e2e) — фоном по padding-box,
 * градиент — фоном по border-box, виден в рамке 1 px; скругление обрезает оба слоя. Фокус клавиатуры — ещё и розовая рамка
 * общего правила раздела (выше): одной смены обводки мало.
 */
.cert-card__want:focus-visible {
	border-color: transparent;
	background: linear-gradient(#2e2e2e, #2e2e2e) padding-box,
		linear-gradient(90deg, #8115ff, #ff2ad0, #ff8f2a) border-box;
}

/* Наведение — только там, где оно есть: на телефоне после касания кнопка не залипает с градиентной обводкой */
@media (hover: hover) {
	.cert-card__want:hover {
		border-color: transparent;
		background: linear-gradient(#2e2e2e, #2e2e2e) padding-box,
			linear-gradient(90deg, #8115ff, #ff2ad0, #ff8f2a) border-box;
	}
}

.cert-card__want:active {
	transform: scale(0.97);
}

/* Нижняя «Свернуть условия» (в конце блока условий) — того же вида, что верхняя */
.cert-card__conditions-toggle,
.cert-card__conditions-collapse {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 22px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.cert-card__conditions-toggle:hover,
.cert-card__conditions-collapse:hover {
	border-color: rgba(255, 42, 208, 0.8);
}

/* Телефон (фаза 13): верхняя «Условия» растёт, только когда стоит в строке одна (см. комментарий к «Хочу!»); на ≥ 768 — 0 */
.cert-card__conditions-toggle {
	flex-grow: 1;
}

/*
 * Условия — после тела карточки (не внутри): на телефоне — с отступами тела и прежним расстоянием до кнопок (12 px до черты:
 * отступ тела снизу 20 px − 8 px).
 */
.cert-card__conditions {
	margin: -8px 16px 0;
	padding: 12px 0 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cert-card__conditions-collapse {
	margin-top: 4px;
}

/* Скрытая карточка в предпросмотре (Р-13): приглушённый вид и пометка «Гости не видят» */
.cert-card--hidden {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.35);
}

.cert-card--hidden .cert-card__image,
.cert-card--hidden .cert-card__badge {
	filter: grayscale(1) brightness(0.55);
}

.cert-card--hidden .cert-card__body,
.cert-card--hidden .cert-card__conditions {
	opacity: 0.7;
}

.cert-card__hidden-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * ---------- ≥ 768: строки (фаза 8, Р-21) ----------
 * Карточка — сетка: картинка слева (40 %, рамка 3 : 2), тело справа; «Условия» — второй строкой во всю ширину карточки.
 * Обращение и список своей ширины не задают: занимают контейнер страницы (.container.sk__supercontainer, как у шапки) —
 * левые края с заголовком «Сертификаты» и «Что это?» на одной линии (Р-24).
 */

@media all and (min-width: 768px) {
	.cert-card {
		display: grid;
		grid-template-columns: 40% minmax(0, 1fr);
		align-items: start;
	}

	.cert-card__media {
		grid-column: 1;
		grid-row: 1;
	}

	.cert-card__body {
		grid-column: 2;
		grid-row: 1;
		padding: 20px 24px 22px;
	}

	.cert-card__conditions {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 0;
		padding: 16px 24px 22px;
	}

	.cert-card__badge {
		width: 72px;
		height: 72px;
		font-size: 36px;
	}

	.cert-card__title {
		font-size: 24px;
	}

	.cert-card__want {
		flex: 0 1 auto;
		min-width: 160px;
	}

	/* Компьютер — без изменений фазы 13: «Условия» по ширине текста и в одиночку */
	.cert-card__conditions-toggle {
		flex-grow: 0;
	}

	.cert-card__price {
		font-size: 32px;
	}
}

/*
 * ≥ 992: отступы шире. Условия — одной колонкой во всю ширину карточки (Р-21, Р-24; две колонки сняты ревью post8):
 * длину строки держит max-width: 72ch у абзацев, нижняя «Свернуть условия» — под текстом.
 */
@media all and (min-width: 992px) {
	.cert-card__body {
		padding: 24px 32px 26px;
	}

	.cert-card__conditions {
		padding: 20px 32px 26px;
	}
}

/*
 * Кнопка «наверх» (как на «Музыке», songs.css). ≤ 767 полоса-обёртка .sk__back-to-top-wrap — на всю ширину (40 px,
 * position: fixed, z-index 999): невидимая полоса не должна перехватывать касания «Хочу!» у нижнего края экрана.
 */
.certificates-page .sk__back-to-top-wrap {
	pointer-events: none;
}

.certificates-page a.sk__back-to-top {
	pointer-events: auto;
}

/* Пока кнопка не видна (theme.js ставит sk__backtotop-visible после прокрутки), касания она не ловит */
.certificates-page .sk__back-to-top-wrap:not(.sk__backtotop-visible) a.sk__back-to-top {
	pointer-events: none;
}

/*
 * ≤ 767 видимая стрелка (theme.css: 32 × 32 по центру низа) закрывала надпись «Хочу!», когда кнопка во всю ширину стоит
 * у нижнего края, и перехватывала касание по её центру (post3-B Medium-1). Здесь — в правый угол: закрепление и вид — по
 * образцу body.menu-page a.sk__back-to-top в theme.css (там стрелка по центру, потому что справа стеклянные кнопки меню;
 * здесь их нет). z-index — внутри обёртки (999), --z-fab на этой странице не задан.
 */
@media all and (max-width: 767px) {
	.certificates-page a.sk__back-to-top {
		position: fixed;
		z-index: 1;
		left: auto;
		right: 16px;
		bottom: 20px;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		width: 46px;
		height: 46px;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 50%;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		-webkit-box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
	}

	.certificates-page span.sk__back-to-top {
		width: 16px;
		height: 16px;
		top: 18px;
		left: 14px;
		border-top-color: rgba(255, 255, 255, 0.85);
		border-right-color: rgba(255, 255, 255, 0.85);
	}

	.certificates-page a.sk__back-to-top:hover span.sk__back-to-top {
		border-top-color: #ffffff;
		border-right-color: #ffffff;
	}
}