/* Повторно используемые элементы: кнопки, иконки, мета-строки. */

/*
 * Заливку не навязываем: соцсети приходят из Figma с фирменным красным внутри,
 * а интерфейсные иконки нарисованы обводкой по currentColor. Правило
 * `fill: currentColor` перекрывало бы презентационный атрибут `fill="none"`
 * и превращало обводочные иконки в сплошные пятна.
 */
.icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

/* Кнопка «Читать далее» и её родственники. Размеры из макета: 147 × 35. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 35px;
	padding: 0 16px;
	border-radius: 17.5px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--hover-t),
		color var(--hover-t),
		border-color var(--hover-t);
}

.btn .icon {
	width: 16px;
	height: 16px;
}

/*
 * «Читать далее» — белая кнопка с чёрным текстом и иконкой: она лежит на
 * фотографии героя и на ховере карточки, где светлое пятно читается лучше
 * тёмного.
 */
.btn--outline {
	color: var(--c-black);
	background: var(--c-white);
	border: 1px solid var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline:hover {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: var(--c-white);
	}
}

/*
 * Широкие кнопки («Все книги», «Читать все комментарии») остаются тёмными —
 * они не лежат на фотографии и работают как обычная кнопка раздела.
 */
.btn--outline.btn--wide {
	color: var(--c-white);
	background: var(--c-black);
	border-color: rgba(255, 255, 255, 0.28);
}

/* Сплошная тёмная кнопка — «Подписаться», «Все книги». */
.btn--solid {
	color: var(--c-white);
	background: var(--c-black);
	border: 1px solid var(--c-black);
}

@media (hover: hover) and (pointer: fine) {
	.btn--solid:hover {
		background: var(--c-accent);
		border-color: var(--c-accent);
	}
}

/* Мета-строка: иконка плюс значение. */
.meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-sm);
}

.icon--sm {
	width: 16px;
	height: 16px;
}

/*
 * Широкая кнопка под секциями — «Подписаться на наш телеграм», «Все книги».
 * Макетные 71 в высоту рисовались под контейнер 1450; при 900 такая пилюля
 * занимала треть ширины секции и перетягивала на себя внимание. Уменьшена
 * примерно на треть.
 */
.btn--wide {
	min-height: 48px;
	padding: 0 28px;
	border-radius: 24px;
	font-size: 15px;
}

.btn--wide .icon {
	width: 16px;
	height: 16px;
}

/*
 * Заголовок секции — тот же стиль, что и H1: Spectral Medium 58 (токен
 * макета text-serif4xlarge). Прежние 64 были выведены из ширины текстовых
 * рамок макета, но рамки там шире набора, так что оценка завышала кегль.
 * Проверено замером на холсте Pixso: высота капители «T» в «Наш Telegram»
 * 38.7 при 291% — это ровно 58.
 */
.section-title {
	font-family: var(--font-serif);
	font-weight: 500;
	/*
	 * 38. Кегль один на всю десктопную раскладку: ступень «48 на широком
	 * экране, 44 на узком» была тем скачком, из-за которого при подтягивании
	 * окна весь блок под заголовком уезжал вверх. Сначала стало 42 по просьбе
	 * клиента, а дальше кегль идёт за контейнером: 38 при 850, 40 при 900.
	 * Дальше 36 — макетные 58, пересчитанные в долю контейнера (900 / 1450).
	 * Ровно то же правило, по которому пересчитан заголовок слайдера.
	 * Итог — 32: последний шаг клиент назначил числом, а не пропорцией.
	 */
	font-size: 32px;
	line-height: 1;
	text-align: center;
	color: var(--c-text);
}

.section-title .accent {
	color: var(--c-accent);
	font-style: italic;
}

.section-title--invert {
	color: var(--c-text-invert);
}

/*
 * Обрезка по горизонтали: ленты выходят за контейнер вправо, и если браузер
 * посчитает vw чуть щедрее — например, не поддержит scrollbar-gutter, — лишние
 * пиксели должны пропасть, а не превратиться в прокрутку всей страницы. clip,
 * а не hidden: hidden сделал бы секцию блоком прокрутки.
 */
.section {
	padding-top: 71.87px;
	overflow-x: clip;
}

/*
 * Отступы пересчитаны под кегль 58 по базовой линии: в макете строка
 * заголовка стоит так, что базовая линия «Наш Telegram» приходится на
 * 1367.87, а следующий блок — на 1428.16. При строке 58 это даёт верх
 * рамки 1321.87 и нижний отступ 48.29.
 */
.section > .section-title {
	margin-bottom: 48.29px;
}

.section__cta {
	display: flex;
	justify-content: center;
	margin-top: 46px;
}

/* ---------- Лента карточек ---------- */

/*
 * Карточки в лентах не растягиваются по ширине окна: у них макетный размер,
 * и сколько влезло — столько видно, остальные уходят за правый край. Так
 * ни карточка, ни картинка внутри не меняют пропорций вообще: узкое окно
 * показывает меньше карточек, а не более узкие.
 */
.rail {
	position: relative;
}

/*
 * Полоса прокрутки спрятана, но сама прокрутка настоящая: ленту можно
 * листать стрелками, тачпадом и пальцем. Проверено, что вертикальное колесо
 * над лентой достаётся странице, а не уезжает вбок.
 */
.rail__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/*
	 * Лента дотягивается до правого края окна, а не обрывается по краю
	 * контейнера: обрезанная карточка у края и есть приглашение листать.
	 * Место под полосу прокрутки зарезервировано у html (scrollbar-gutter),
	 * и vw это учитывает — вычитать её отдельно не нужно.
	 *
	 * Деление на --zoom оставлено на случай возврата масштаба страницы: под
	 * zoom браузер считает vw от неуменьшенного окна, и без поправки лента не
	 * доезжает до края ровно во столько раз, во сколько уменьшена страница.
	 * Сейчас масштаба нет, переменная не задана и работает запасная единица.
	 */
	margin-right: calc(50% - 50vw / var(--zoom, 1));
	padding-right: calc(50vw / var(--zoom, 1) - 50%);
}

.rail__track::-webkit-scrollbar {
	display: none;
}

/*
 * Широкая лента: не во всю ширину окна, а в широкий контейнер. Дальше 1920
 * растягивать нечего — макет нарисован под эту ширину, и на большом мониторе
 * плитки просто вставали бы шире, чем задумано.
 */
.rail--full {
	max-width: var(--rail-full-w, var(--container-wide));
	margin-inline: auto;
}

.rail--full .rail__track {
	margin-right: 0;
	padding-right: 0;
}

.rail__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/*
 * Стрелки висят по краям контейнера, поверх ленты. Скрипт прячет их, когда
 * листать нечего, и гасит ту, в чью сторону лента уже доехала.
 */
.rail__arrow {
	position: absolute;
	top: var(--rail-arrow-top, 50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-black);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transform: translateY(-50%);
	transition: opacity var(--hover-t), background-color var(--hover-t), color var(--hover-t);
}

/*
 * Стрелки выходят за контейнер ровно на его горизонтальное поле: на пиксель
 * дальше — и на узком окне кнопка вылезала бы за край страницы, добавляя
 * горизонтальную прокрутку.
 */
.rail__arrow--prev {
	left: calc(-1 * var(--container-pad));
}

.rail__arrow--next {
	right: calc(-1 * var(--container-pad));
}

/* Лента во всю ширину: выходить некуда, стрелки заходят внутрь. */
.rail--full .rail__arrow--prev {
	left: var(--container-pad);
}

.rail--full .rail__arrow--next {
	right: var(--container-pad);
}

.rail__arrow[hidden] {
	display: none;
}

.rail__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.rail__arrow:not(:disabled):hover {
		background: var(--c-accent);
		color: var(--c-white);
		border-color: var(--c-accent);
	}
}

/* Стрелка нарисована рамками — отдельный ассет для неё не нужен. */
.rail__arrow-glyph {
	width: 10px;
	height: 10px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateX(-3px) rotate(45deg);
}

.rail__arrow--prev .rail__arrow-glyph {
	transform: translateX(3px) rotate(-135deg);
}