/**
 * Клуб: блок платного доступа и страница подписки.
 *
 * Не минифицировано намеренно — собирать SCSS в проекте нечем,
 * а править этот файл придётся руками.
 *
 * Префикс club-, потому что общие имена вроде .paywall или .account
 * рискуют совпасть с классами темы Knife.
 *
 * Значения — из UI-kit (mu-plugins/pech-design/tokens.css).
 */

/*
 * Ширина.
 *
 * Тема задаёт каждому прямому потомку `.entry-content` ширину 40rem —
 * это её колонка для текста. Блок платного доступа живёт в той же колонке,
 * поэтому ширину не перебиваем, только выравниваем поля.
 */

/*
 * Обрыв текста.
 *
 * Текст затухает в фон страницы, и сразу под ним встаёт карточка подписки:
 * по затуханию видно, что статья продолжается, а не кончилась на полуслове.
 *
 * Затухание — псевдоэлемент над блоком, а не обёртка вокруг отрывка: тема
 * центрирует в колонку 40rem только прямых потомков `.entry-content`, и
 * обёртка вытащила бы абзацы отрывка из этой колонки.
 *
 * Поля — `auto` по бокам, как у абзацев. Раньше здесь стояло
 * `margin: 32px 0 0`, и нулевые боковые поля снимали центрирование темы:
 * карточка прилипала к левому краю, а текст стоял на 130 px правее.
 */
.entry-content > .club-paywall,
.club-paywall {
	position: relative;

	margin: var(--pz-2) auto 0;
	padding: 0;
	border: 0;
}

.club-paywall::before {
	content: "";

	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;

	height: 10rem;

	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--pz-surface) 85%);
	pointer-events: none;
}

.club-paywall__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pz-3);

	padding: 34px 36px;

	background-color: var(--pz-surface-cream);
	border: solid 1px #ece8dc;
	border-radius: var(--pz-r-lg);
}

.club-paywall__lock {
	width: var(--pz-8);
	height: var(--pz-8);

	background-color: var(--pz-accent);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.club-paywall__title,
.entry-content .club-paywall__title {
	margin: var(--pz-2) 0 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-h3);
	font-weight: var(--pz-w-bold);
	line-height: 1.2;
	letter-spacing: var(--pz-h3-ls);
	color: var(--pz-ink);
}

.club-paywall__text {
	max-width: 480px;
	margin: 0;

	font-family: var(--pz-font-text);
	font-size: var(--pz-text-sm);
	line-height: var(--pz-text-sm-lh);
	color: var(--pz-ink-second);
	text-wrap: pretty;
}

.club-paywall__text p:last-child {
	margin-bottom: 0;
}

/* Внутри карточки расстояния задаёт `gap`; отступы абзацев темы
   прибавлялись к нему и растягивали карточку. То же — у общего блока
   кнопок входа (pech-login): его собственный отступ рассчитан на места
   без `gap`. */
.entry-content .club-paywall p,
.club-paywall .pech-login-buttons {
	margin: 0;
}

/*
 * Цена — одной строкой и одним начертанием: «100 ₽ за месяц». Раньше сумма
 * была крупной и тёмной, а «за месяц» — мелким серым хвостом, и строка
 * читалась как два разных сообщения. В ките это одна фраза.
 */
.club-paywall__price {
	margin: 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-h4);
	font-weight: var(--pz-w-bold);
	color: var(--pz-ink);
}

.club-paywall__price strong {
	font-weight: inherit;
}

.club-paywall__actions {
	display: flex;
	flex-wrap: wrap;
	/* Подсказка под кнопкой VK ID не должна вытягивать соседнюю кнопку. */
	align-items: flex-start;
	gap: var(--pz-2);

	width: 100%;
	margin: var(--pz-2) 0 0;
}

.club-paywall__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pz-2);

	min-height: var(--pz-h-btn);
	padding: 0 22px;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-sm);
	font-weight: var(--pz-w-medium);
	line-height: 1;
	color: var(--pz-ink-on-accent);
	text-decoration: none;

	background-color: var(--pz-accent);
	border: none;
	border-radius: var(--pz-r-md);
	cursor: pointer;

	transition: background-color var(--pz-dur) var(--pz-ease);
}

.club-paywall__button:hover:not([disabled]) {
	background-color: var(--pz-accent-hover);
	color: var(--pz-ink-on-accent);
}

.club-paywall__button:active:not([disabled]) {
	background-color: var(--pz-accent-active);
}

/*
 * Выключенная кнопка.
 *
 * Не гасим прозрачностью: приглушённая кнопка читается как «сломалось».
 * Низкий контраст здесь и есть сигнал «нельзя» — и он допустим ровно
 * потому, что рядом всегда стоит объясняющий текст (.club-paywall__disabled),
 * который контраст проходит. Одним цветом мы ничего не сообщаем.
 */
.club-paywall__button[disabled] {
	background-color: #eceff4;
	color: var(--pz-ink-disabled);
	cursor: default;
	pointer-events: none;
}

/*
 * Кнопки входа (VK ID, Яндекс, почта) — общие на весь сайт: разметка
 * pech_login_buttons(), стили — mu-plugins/pech-login/login.css.
 */

.club-paywall__note,
.club-paywall__disabled {
	margin: 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-xs);
	line-height: 1.5;
	color: var(--pz-ink-meta);
}

.club-paywall__note + .club-paywall__note,
.entry-content .club-paywall .club-paywall__note + .club-paywall__note {
	margin-top: calc(-1 * var(--pz-2));
}

/*
 * Согласие на автопродление: флажок и текст одной строкой-абзацем
 * под ценой, до кнопки. Мелко, как пояснение, но контраст — как у текста:
 * это условия оплаты, а не сноска.
 */
.club-paywall__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--pz-2);

	margin: var(--pz-2) 0 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-xs);
	line-height: 1.5;
	color: var(--pz-ink-second);
	text-align: left;
	cursor: pointer;
}

.club-paywall__consent input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--pz-accent);
}

.club-paywall__error {
	margin: var(--pz-3) 0 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-meta);
	line-height: 1.45;
	color: var(--pz-error-line);
}

/* ============================================================
   Страница «Моя подписка»
   ============================================================ */

.club-account__title,
.entry-content .club-account__title {
	margin: 0 0 var(--pz-5);

	font-family: var(--pz-font-ui);
	font-size: var(--pz-h2);
	font-weight: var(--pz-w-bold);
	line-height: var(--pz-h2-lh);
	letter-spacing: var(--pz-h2-ls);
	color: var(--pz-ink);
}

.club-account__status {
	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-lg);
	color: var(--pz-ink);
}

.club-account__status--active strong {
	color: var(--pz-accent);
}

.club-account__note {
	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-xs);
	line-height: 1.5;
	color: var(--pz-ink-second);
}

/* «Автопродление отключено» — подтверждение действия, плашкой успеха. */
.club-account__note--done {
	padding: var(--pz-2) var(--pz-3);

	font-weight: var(--pz-w-medium);
	color: var(--pz-ok-ink);
	background: var(--pz-ok-bg);
	border-radius: var(--pz-r-sm);
}

.club-account__actions {
	margin: var(--pz-4) 0 0;
}

.club-account__link {
	padding: 0;

	font-family: var(--pz-font-ui);
	font-size: var(--pz-ui-xs);
	color: var(--pz-ink-second);
	text-decoration: underline;

	background: none;
	border: 0;
	cursor: pointer;
}

.club-account__link:hover {
	color: var(--pz-accent);
}

@media screen and (max-width: 767px) {
	.club-paywall::before {
		height: 7rem;
	}

	.club-paywall__box {
		padding: var(--pz-pad-card);
	}

	.club-paywall__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.club-paywall__button {
		flex: none;
		width: 100%;
	}
}

/* Тихая кнопка рядом с выключенной: «Написать нам», когда оплата ещё
   не настроена. Не главная — чтобы не спорить с кнопкой оплаты, которая
   здесь главная по смыслу, даже будучи выключенной. */