/*
Theme Name: LegalCoin
Theme URI: https://legal-coin.ru
Author: LegalCoin
Description: Блочная тема сайта legal-coin.ru — рейтинг легальных криптобирж. Тёмная схема с бирюзовым акцентом.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legalcoin
Tags: full-site-editing, blog, one-column, custom-colors, custom-menu
*/

/* Макет тёмный (08.09.2026). Схему объявляем явно, чтобы системные элементы
   — <select>, скроллбары, автозаполнение — приходили тёмными, а не светлыми
   заплатками на тёмной странице.

   Именно `only dark`, а не `dark`: слово `only` заодно отключает встроенную
   перекраску Chrome на Android («Тёмная тема для сайтов»). Она пыталась
   инвертировать уже тёмный макет и уводила его обратно в светлое. */
:root {
	color-scheme: only dark;
}

/* Imported HTML is not always wrapped in core/image blocks. Keep raw source
   figures inside the article column even when an upstream image declares a
   1920px intrinsic width. The importer removes duplicate lead covers, while
   this remains a safety net for legitimate illustrations in the body. */
.wp-block-post-content figure,
.lc-article__body figure {
	max-width: 100%;
}

.wp-block-post-content img,
.lc-article__body img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Карточка — основной строительный элемент главной

   В макете каждый смысловой блок это отдельная карточка, приподнятая над фоном
   страницы. На тёмной схеме (08.09.2026) разница между canvas (#0a0d0f) и
   поверхностью (#111518) намеренно небольшая — держат её рамка и тень, а не
   контраст заливок: на тёмном фоне заметный перепад яркости между карточкой и
   фоном читается как подсветка, а не как слой.
   ========================================================================== */

.lc-card {
	position: relative;
	/* Высоту НЕ задаём. `align-self: stretch` растягивает элемент только когда
	   его размер по поперечной оси равен `auto` — с `height: 100%` растягивание
	   молча отключается, и карточка обрезается по своему содержимому. Именно
	   поэтому правые блоки рядов были короче левых. */
	height: auto;
	padding: var(--wp--preset--spacing--40, 2rem);
	border: var(--wp--custom--card-border, 1px solid rgba(255, 255, 255, 0.07));
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	background: var(--wp--preset--color--surface, #111518);
	box-shadow: var(--wp--custom--card-shadow, 0 18px 40px -28px rgba(0, 0, 0, 0.85));
}

/* Колонка-карточка должна тянуться до высоты соседа, а её содержимое —
   оставаться прижатым к верху, а не растягиваться по вертикали. */
.wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.lc-card {
	align-self: stretch;
}

/* Заголовок секции: заметный, но компактный — иначе страница читается
   как статья, а не как портал. */
.lc-card > .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--20, 0.75rem);
	font-size: 1.25rem;
	line-height: 1.2;
}

.lc-card > .wp-block-heading + p {
	margin-top: 0;
}

/* ==========================================================================
   Ряд 2 — «Последние новости»: главная новость и лента внутри одной карточки
   ========================================================================== */

/* Главная новость: картинка слева, текст справа (в макете они рядом,
   а не друг под другом — из-за стопки блок и разъезжался по высоте). */
.lc-lead .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	list-style: none;
	margin: 0;
}

.lc-lead .wp-block-post-featured-image {
	margin: 0;
}

/* Картинка главной новости — широкий горизонтальный кадр фиксированной
   пропорции. Раньше она тянулась на всю высоту карточки (`height: 100%`),
   становилась почти квадратной и вытягивала новость вниз. */
.lc-lead .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border-radius: 0.75rem;
}

.lc-lead .wp-block-post-title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.lc-lead .wp-block-post-excerpt {
	margin: 0;
}

.lc-lead .wp-block-post-excerpt__excerpt {
	font-size: 0.875rem;
	line-height: 1.45;
}

/* «Читать далее» — не элемент button в терминах theme.json, поэтому отступы
   кнопки к нему не применяются: текст упирался в скругление и выглядел
   обрезанным. Задаём их здесь. */
.lc-lead .wp-block-read-more {
	width: fit-content;
	padding: 0.55rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
}

/* Вертикальный разделитель между главной новостью и лентой — как в макете. */
@media (min-width: 782px) {
	.lc-news-split > .wp-block-column + .wp-block-column {
		padding-left: var(--wp--preset--spacing--30, 1.25rem);
		border-left: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	}
}

/* Строка списка новостей: миниатюра + текст, одинаковая сетка у всех. */
.lc-newsline .wp-block-post-template > li {
	list-style: none;
	margin: 0;
}

.lc-newsline .wp-block-post-template > li:last-child .wp-block-group {
	border-bottom: 0 !important;
}

/* Миниатюра — жёсткий размер. Внутри flex-строки обёртка картинки сжималась
   заданной шириной 48px до 21px (замер 10.08), кадр превращался в полоску. */
.lc-newsline .wp-block-post-featured-image,
.lc-feed .wp-block-post-featured-image {
	flex: 0 0 auto;
}

.lc-newsline .wp-block-post-featured-image img {
	object-fit: cover;
	border-radius: 0.75rem;
}

.lc-newsline .wp-block-post-title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.35;
}

/* ==========================================================================
   «Лучшие подборки» — строки-кнопки вместо маркированного списка
   ========================================================================== */

/* Карточка подборок ниже соседней по содержимому, поэтому снизу оставался
   пустой хвост. Раскладываем строки по всей высоте карточки, вместо того
   чтобы копить пустоту внизу. */
.lc-collections-card {
	display: flex;
	flex-direction: column;
}

.lc-collections-card > .wp-block-heading {
	flex: 0 0 auto;
}

.lc-collections {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	justify-content: space-between;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-collections__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 0.25rem;
	color: var(--wp--preset--color--ink-900, #f5f8f8);
	font-size: 0.9375rem;
	/* 600 читалось блёкло рядом с жирными заголовками секций. */
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.lc-collections__item:last-child {
	border-bottom: 0;
}

.lc-collections__item:hover {
	color: var(--wp--preset--color--brand-600, #8df3e2);
}

.lc-collections__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--brand-500, #5eead4);
}

.lc-collections__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lc-collections__label {
	flex: 1 1 auto;
	min-width: 0;
}

.lc-collections__arrow {
	flex: 0 0 auto;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 1.125rem;
	line-height: 1;
}

.lc-collections__item:hover .lc-collections__arrow {
	color: var(--wp--preset--color--brand-500, #5eead4);
}

/* ==========================================================================
   Ряд 3 — реклама | лента | реклама

   Раньше боковые колонки стояли жёсткими 300px, а слот держал min-height 600px:
   реклама визуально перевешивала ленту, а лента зажималась в узкую полосу.
   Пропорции берём с макета: главное — центр.
   ========================================================================== */

@media (min-width: 1280px) {
	/* Ряд собран одним grid: каждый элемент занимает свою колонку, наложений
	   быть не может по определению. Высоту строки задаёт центральная лента
	   своим содержимым, боковые колонки тянутся до неё через align-items. */
	.lc-feed-row {
		display: grid !important;
		grid-template-columns: 21% minmax(0, 1fr) 21%;
		/* Явное значение, а не токен: между колонками должна читаться чистая
		   полоса фона, и она не должна зависеть от шкалы отступов. */
		gap: 20px;
		align-items: stretch;
	}

	/* Тень центральной карточки (размытие 40px) перекрывала зазор и ложилась
	   на край рекламного блока — глазом это читалось как наложение, хотя
	   координаты не пересекаются. В этом ряду тень не нужна. */
	.lc-feed-row .lc-card {
		box-shadow: none;
	}

	/* Ширины колонок в этом ряду считает grid — снимаем флексовые ограничения,
	   которые core проставляет колонкам. */
	.lc-feed-row > .wp-block-column {
		flex-basis: auto !important;
		max-width: none;
		min-width: 0;
	}

	/* Рекламная колонка — контейнер, слот внутри забирает всю её высоту.
	   Высота приходит от строки grid, а не от собственных пикселей баннера. */
	.lc-feed-row > .wp-block-column:first-child,
	.lc-feed-row > .wp-block-column:last-child {
		display: flex;
		flex-direction: column;
	}

	.lc-feed-row .lc-ad {
		flex: 1 1 auto;
	}

}

/* Места под рекламу остаются на своих местах и держат ширину колонок —
   прячется только пунктирная заглушка «Реклама / 300 × 600». Придёт реальный
   баннер — снять этот класс с ряда в паттерне главной, и заглушка вернётся. */
.lc-feed-row--bez-zaglushek .lc-ad {
	border-color: transparent;
	background: transparent;
}

.lc-feed-row--bez-zaglushek .lc-ad > * {
	visibility: hidden;
}

/* Ниже xl рекламу не показываем — тогда и колонки под неё не должны занимать
   место: сам слот прятался, а пустые колонки продолжали делить ряд натрое и
   зажимали ленту в треть ширины. */
@media (max-width: 1279px) {
	.lc-feed-row > .wp-block-column:first-child,
	.lc-feed-row > .wp-block-column:last-child {
		display: none;
	}
}

/* Строка ленты: миниатюры одного размера, ровные разделители. */
.lc-feed .wp-block-post-template > li {
	list-style: none;
	margin: 0;
}

.lc-feed .wp-block-post-template > li:last-child .wp-block-group {
	border-bottom: 0 !important;
}

.lc-feed .wp-block-post-featured-image img {
	object-fit: cover;
	border-radius: 0.75rem;
}

.lc-feed .wp-block-post-title {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.lc-feed .wp-block-post-excerpt {
	margin: 0.25rem 0 0;
}

.lc-feed .wp-block-post-excerpt__excerpt {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

.lc-feed .wp-block-post-date {
	margin: 0.25rem 0 0;
}

/* ========================================================================== 
   Новостная одиночная страница — семантическая обвязка
   ========================================================================== */

.lc-news-single-main {
	min-width: 0;
}

.lc-breadcrumbs {
	margin: 0 0 var(--wp--preset--spacing--20, 0.75rem);
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.8125rem;
}

.lc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-breadcrumbs li:not(:last-child)::after {
	margin-left: 0.45rem;
	content: "→";
	color: var(--wp--preset--color--ink-300, #232a2e);
}

.lc-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.lc-breadcrumbs a:hover {
	color: var(--wp--preset--color--brand-600, #8df3e2);
}

.lc-news-single > .wp-block-post-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20, 0.75rem);
	font-size: clamp(2rem, 1.55rem + 1.6vw, 3rem);
	line-height: 1.08;
}

.lc-news-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1rem;
	margin-bottom: var(--wp--preset--spacing--30, 1.25rem);
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.lc-news-meta__item {
	white-space: nowrap;
}

.lc-news-meta__label {
	font-weight: 700;
	color: var(--wp--preset--color--ink-900, #f5f8f8);
}

.lc-news-meta a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand-300, #2b7f72);
	text-underline-offset: 0.15em;
}

.lc-news-single__featured {
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
}

.lc-news-single__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	border-radius: 1rem;
	object-fit: cover;
}

.lc-news-single__body {
	min-width: 0;
}

.lc-news-single__body > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.lc-news-single .lc-disclaimer {
	margin-top: var(--wp--preset--spacing--40, 2rem);
	padding-top: var(--wp--preset--spacing--20, 0.75rem);
	border-top: 1px solid var(--wp--preset--color--ink-300, #232a2e);
}

@media (max-width: 600px) {
	.lc-news-single {
		padding: var(--wp--preset--spacing--20, 0.75rem) !important;
	}

	.lc-news-meta {
		gap: 0.35rem 0.75rem;
	}

	.lc-news-meta__item {
		white-space: normal;
	}
}

/* ==========================================================================
   Плитки новостей
   ========================================================================== */

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

/* ==========================================================================
   Сетка плиток
   ========================================================================== */

.lc-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Высоту рядов не задаём: плитки в одном ряду и так растягиваются до
	   самой высокой. Общий `1fr` равнял ВСЕ ряды между собой — и одна широкая
	   плитка вытягивала за собой всю ленту. */
}

.lc-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: var(--wp--custom--card-border, 1px solid rgba(255, 255, 255, 0.07));
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	background: var(--wp--preset--color--surface, #111518);
	box-shadow: var(--wp--custom--card-shadow, 0 18px 40px -28px rgba(0, 0, 0, 0.85));
}

.lc-news-card__media {
	/* Картинку кладём внутрь абсолютом: `aspect-ratio` сам по себе уступает
	   содержимому, и у материалов с другой пропорцией исходника (например 4:3
	   вместо 16:9) коробка вырастала выше соседних — плитки в ряду разъезжались. */
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--canvas, #0a0d0f);
}

.lc-news-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Заглушка вместо картинки: у части материалов её нет и у источника,
   а дыра в ряду ломает сетку. */
.lc-news-card__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Заглушка не должна спорить с настоящими обложками: на тёмной странице
	   яркая бирюза во всю плитку читается как ошибка, а не как «нет фото». */
	background: linear-gradient(135deg, #143a35, #0c2321);
	color: var(--wp--preset--color--brand-500, #5eead4);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lc-news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--30, 1.25rem);
}

.lc-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.lc-news-card__title a:hover {
	color: var(--wp--preset--color--brand-600, #8df3e2);
}

.lc-news-card__date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

.lc-news-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	/* Заголовок и анонс режем по строкам, иначе длинный заголовок сдвигает
	   анонс и дату, и соседние плитки перестают совпадать. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.3em);
}

/* Кликается вся плитка, а не только заголовок: ссылка растягивается
   невидимым слоем на всю карточку. */
.lc-news-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.lc-news-card__excerpt {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-500, #8e9599);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 781px) {
	.lc-news-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 0;
	}

	.lc-news-card__title {
		min-height: 0;
		-webkit-line-clamp: 3;
	}

	/* Плитки превращаются в строки: миниатюра слева, заголовок справа. */
	.lc-news-card {
		flex-direction: row;
		gap: 0.75rem;
		align-items: center;
		padding: 0.875rem 0;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--ink-300, #232a2e);
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.lc-news-card__media {
		flex: 0 0 96px;
		width: 96px;
		aspect-ratio: 4 / 3;
		border-radius: 0.75rem;
		overflow: hidden;
	}

	.lc-news-card__body {
		padding: 0;
	}

	/* Анонс в строке превращает список в простыню — на телефоне он лишний. */
	.lc-news-card__excerpt {
		display: none;
	}

}

/* Широкая плитка: ломает ритм ровной сетки — картинка слева, текст справа. */
.lc-news-card--wide {
	grid-column: 1 / -1;
	flex-direction: row;
}

.lc-news-card--wide .lc-news-card__media {
	/* Ширину фиксируем долей, высоту берём от карточки: с `aspect-ratio`
	   растянутая по вертикали картинка тянула за собой и ширину. */
	flex: 0 0 42%;
	width: 42%;
	aspect-ratio: auto;
	align-self: stretch;
	min-height: 220px;
}

.lc-news-card--wide .lc-news-card__body {
	justify-content: center;
	padding: var(--wp--preset--spacing--40, 2rem);
}

.lc-news-card--wide .lc-news-card__title {
	font-size: 1.375rem;
	min-height: 0;
	-webkit-line-clamp: 2;
}

.lc-news-card--wide .lc-news-card__excerpt {
	font-size: 0.9375rem;
	-webkit-line-clamp: 3;
}

@media (max-width: 781px) {
	.lc-news-card--wide {
		flex-direction: row;
	}

	.lc-news-card--wide .lc-news-card__media {
		flex: 0 0 96px;
	}

	.lc-news-card--wide .lc-news-card__body {
		padding: 0;
	}

	.lc-news-card--wide .lc-news-card__title {
		font-size: 1rem;
	}
}

/* Дисклеймер под материалом: заметен, но не спорит с текстом новости. */
.lc-disclaimer {
	margin-top: var(--wp--preset--spacing--40, 2rem);
	padding-top: var(--wp--preset--spacing--20, 0.75rem);
	border-top: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	line-height: 1.5;
}

/* ==========================================================================
   Шапка: меню и поиск

   Ядро WordPress держит два жёстко зашитых белых фона внутри блока навигации:
   у раскрытого меню-оверлея (гамбургер, ниже 600px) и у выпадающего подменю.
   Оба под селектором `.wp-block-navigation:not(.has-background)`, то есть
   срабатывают именно тогда, когда цвет навигации не задан явно, — на тёмной
   странице меню открывалось белым листом.

   Оверлею цвета заданы атрибутами блока в parts/header.html: так их видит и
   редактор. Здесь остаётся подменю — выпадающих списков в меню пока нет, но
   правило ядра ждёт первого же пункта с детьми.
   ========================================================================== */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface, #111518);
	border: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--ink-900, #f5f8f8);
}

/* Тот же тёмный фон, но уже не через атрибуты блока, а прямо по классу
   раскрытого меню. Атрибуты живут в разметке: посетителю со страницей из
   кэша браузера приезжает старый HTML без них, и меню у него остаётся белым,
   пока страница не перечитается. Правило ниже приходит вместе с таблицей
   стилей и от разметки не зависит. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--canvas, #0a0d0f) !important;
	color: var(--wp--preset--color--ink-900, #f5f8f8) !important;
}

/* Поле поиска.

   Своего фона у него не было вообще — цвет приходил от браузера по
   `color-scheme`. В Safari этого мало: `input[type="search"]` рисуется
   системным виджетом (`-webkit-appearance: searchfield`) и остаётся светлым
   даже на тёмной схеме. В шапке поле разворачивается по нажатию на лупу и
   на узком экране занимает почти всю строку — получалась белая полоса ровно
   там, где меню. Снимаем системную отрисовку и задаём цвета сами. */
.wp-block-search__input {
	-webkit-appearance: none;
	appearance: none;
	padding: 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	background-color: var(--wp--preset--color--ink-100, #161b1f);
	color: var(--wp--preset--color--ink-900, #f5f8f8);
	font: inherit;
}

/* Safari дорисовывает внутри поля свою кнопку очистки и лупу — они системные
   и на тёмном фоне видны как светлые артефакты. */
.wp-block-search__input::-webkit-search-decoration,
.wp-block-search__input::-webkit-search-cancel-button,
.wp-block-search__input::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--ink-500, #8e9599);
	/* Firefox приглушает подсказку своим opacity поверх цвета. */
	opacity: 1;
}

.wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-500, #5eead4);
	outline-offset: 1px;
}

/* Пока поле свёрнуто, ядро схлопывает его в нулевую ширину. Рамка и фон при
   этом остаются видимой точкой рядом с лупой — убираем их вместе с шириной. */
.wp-block-search__searchfield-hidden .wp-block-search__input {
	border-color: transparent;
	background-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Страница «О проекте».

   Всё оформление замкнуто на `.lc-about` и живёт только на этой странице:
   ни один селектор ниже не работает там, где этого класса нет.

   Заголовки идут во всю ширину, содержимое под ними — тоже. Пустого поля
   справа не остаётся: каждый раздел раскладывается по ширине сам, своим
   способом. Плитки — сеткой, парные абзацы — в две колонки, одиночный
   длинный абзац — газетными колонками, короткий — плашкой во всю ширину.
   На телефоне все сетки схлопываются в одну колонку.
   ========================================================================== */

/* Заголовок приходит из шаблона страницы, а не из содержимого, поэтому
   дотянуться до него можно только от соседа. `:has()` ограничивает правило
   той единственной страницей, где лежит `.lc-about`: сам шаблон править
   нельзя, он общий для всех страниц сайта. */
.wp-block-group:has(.lc-about) > .wp-block-post-title {
	/* `!important` здесь не украшение: ядро центрует детей
	   «constrained»-раскладки правилом
	   `.is-layout-constrained > :where(...) { margin-left: auto !important }`,
	   и без такого же веса поле не перебить. */
	/* Ширину не режем: заголовок страницы идёт во всю ширину, как и заголовки
	   разделов — иначе он единственный на странице стоит узкой колонкой. */
	max-width: none;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 0.6em;
	font-size: clamp(1.4rem, 1rem + 2.2vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
}

@media (max-width: 599px) {
	.wp-block-group:has(.lc-about) > .wp-block-post-title {
		max-width: none;
		/* Кегль подобран под самое длинное слово заголовка: на 390px
		   «пользователей» упиралось в правый край и разрывалось на
		   «пользователе / й». Переносы внутри слова запрещаем явно, чтобы
		   это не вернулось на ещё более узком экране. */
		font-size: 1.4rem;
		line-height: 1.18;
		letter-spacing: -0.01em;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

.lc-about {
	--lc-hairline: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	--lc-gutter: 48px;
	--lc-gap: 16px;
	--lc-pad: 20px;
	font-size: 1.0625rem;
	line-height: 1.7;
	/* Слова не рвём: пусть лучше строка кончится раньше, чем «пользователе»
	   на одной строке и «й» на другой. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Последняя строка абзаца не должна состоять из одного слова: «…так и в» —
   перенос — «минус.» читается как обрыв. `pretty` просит браузер подтянуть
   на последнюю строку соседнее слово. Значение новое: браузеры, которые его
   не знают, просто переносят как раньше — хуже не станет. */
.lc-about p,
.lc-about li {
	text-wrap: pretty;
}

/* Заголовки разбиваются на строки поровну, а не «длинная строка и хвост». */
.wp-block-group:has(.lc-about) > .wp-block-post-title,
.lc-about h2,
.lc-about h3 {
	text-wrap: balance;
}

/* Ссылки внутри страницы. Обычная ссылка в теме темнее основного текста —
   на странице, которая целиком состоит из отсылок к разделам, такая ссылка
   не читается как ссылка. Здесь она акцентная и с подчёркиванием. */
.lc-about a {
	color: var(--wp--preset--color--brand-600, #8df3e2);
	text-decoration: none;
	border-bottom: 1px solid rgba(141, 243, 226, 0.35);
}

.lc-about a:hover {
	border-bottom-color: currentColor;
}

/* --- Первый экран ---------------------------------------------------------- */

.lc-about__lead {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

/* Главный принцип. Ради этого утверждения страницу и открывают, поэтому оно
   вынуто из потока: акцентная полоса слева, своя подложка. */
.lc-about__principle {
	margin: 24px 0 0;
	padding: 20px 24px;
	border-left: 3px solid var(--wp--preset--color--brand-500, #5eead4);
	border-radius: 0 14px 14px 0;
	background: var(--wp--preset--color--ink-100, #161b1f);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.lc-about__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--brand-500, #5eead4);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Разделы --------------------------------------------------------------- */

.lc-about__sec {
	margin-top: 3.6em;
}

.lc-about__sec > h2 {
	margin: 0 0 1em;
	font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lc-about__sec > p {
	margin: 0 0 1em;
}

.lc-about__sec > p:last-child {
	margin-bottom: 0;
}

/* Парные абзацы — рядом, а не друг под другом узкой лентой. */
.lc-about__two {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-gap) var(--lc-gutter);
	/* Колонки начинаются от одной линии, а не растягиваются по высоте:
	   абзацы разной длины иначе разъезжаются межстрочным. */
	align-items: start;
}

.lc-about__two > p {
	margin: 0;
}

/* Газетные колонки (`columns`) здесь не используются намеренно: они режут
   абзац по месту, где кончилась высота колонки, и фраза обрывалась посреди
   слова, а продолжение уезжало вправо. Текст в две колонки ставим только
   тогда, когда в каждой лежит законченный абзац. */

/* Короткий раздел — плашкой во всю ширину: три строки, набранные в колонку,
   выглядят обрывком. */
.lc-about__callout {
	margin: 0;
	padding: var(--lc-pad) calc(var(--lc-pad) + 4px);
	border: var(--lc-hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--ink-100, #161b1f);
}

/* --- Плитки «Что вы найдёте» ---------------------------------------------- */

.lc-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-gap);
	margin: 0;
}

.lc-about__tile {
	padding: var(--lc-pad);
	border: var(--lc-hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--ink-100, #161b1f);
}

/* Номер плитки — не украшение, а порядок чтения: на сетке взгляд иначе идёт
   по столбцам. Цифры табличные, чтобы «01» и «04» стояли одинаково. */
.lc-about__num {
	display: block;
	margin-bottom: 10px;
	color: var(--wp--preset--color--brand-500, #5eead4);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.lc-about__tile h3 {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.lc-about__tile p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

/* --- Из чего складывается оценка ------------------------------------------ */

.lc-about__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-gap);
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.lc-about__step {
	margin: 0;
	padding: var(--lc-pad);
	border: var(--lc-hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--ink-100, #161b1f);
}

.lc-about__step-num {
	display: block;
	margin-bottom: 10px;
	color: var(--wp--preset--color--brand-500, #5eead4);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.lc-about__step p {
	margin: 0;
	line-height: 1.6;
}

.lc-about__step p + p {
	margin-top: 8px;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.9375rem;
}

/* --- Чего мы не делаем ----------------------------------------------------- */

.lc-about__nots {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-about__nots li {
	margin: 0;
	padding: var(--lc-pad);
	border: var(--lc-hairline);
	border-radius: 16px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Крестик приглушённый, а не красный: это границы проекта, а не ошибки. */
.lc-about__nots li::before {
	content: "✕";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-bottom: 12px;
	border: var(--lc-hairline);
	border-radius: 50%;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.6875rem;
	line-height: 1;
}

/* --- Частые вопросы -------------------------------------------------------- */

/* Вопросы идут одним столбцом во всю ширину, а не парами: вопросы разной
   длины, и в двух колонках соседи по строке вставали разной высоты. */
.lc-about__faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-gap);
}

.lc-about__q {
	border: var(--lc-hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--ink-100, #161b1f);
	overflow: hidden;
}

.lc-about__q summary {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: var(--lc-pad);
	cursor: pointer;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
}

.lc-about__q summary::-webkit-details-marker {
	display: none;
}

/* Знак раскрытия отдельным элементом, а не ::after: у ::after на flex-строке
   он прижимался к тексту вопроса, а не к правому краю. */
.lc-about__sign {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand-500, #5eead4);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.lc-about__q[open] .lc-about__sign::before {
	content: "–";
}

.lc-about__q:not([open]) .lc-about__sign::before {
	content: "+";
}

.lc-about__q p {
	margin: 0;
	padding: 0 var(--lc-pad) var(--lc-pad);
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Правовая сноска ------------------------------------------------------- */

/* Сноска отделена размером и цветом, а не линией. */
.lc-about__legal {
	margin: 3.6em 0 0;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* --- Ширина экрана: чем шире, тем больше колонок --------------------------- */

@media (min-width: 700px) {
	.lc-about__grid,
	.lc-about__nots,
	.lc-about__steps,
	.lc-about__two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-about__hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--lc-gutter);
		align-items: start;
	}

	.lc-about__hero .lc-about__principle {
		margin-top: 0;
	}

}

/* ==========================================================================
   Подвал
   ========================================================================== */

/* Списки в подвале — это навигация, а не перечисление: маркеры и отступ
   браузера сдвигали ссылки вправо относительно заголовка колонки. */
.lc-footer__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding-left: 0;
	display: grid;
	gap: 0.5rem;
}

.lc-footer__list li {
	margin: 0;
}

.lc-footer__list a {
	text-decoration: none;
	color: inherit;
}

.lc-footer__list a:hover,
.lc-footer__list a:focus {
	color: var(--wp--preset--color--brand-600, #8df3e2);
}

.lc-footer .wp-block-heading {
	margin: 0;
}

/* ==========================================================================
   Мобильная раскладка
   ========================================================================== */

@media (max-width: 781px) {
	.lc-card {
		padding: var(--wp--preset--spacing--30, 1.25rem);
	}

	.lc-lead .wp-block-post-featured-image img {
		max-width: none;
	}
}

/* Подводка раздела «Обучение»: крупнее обычного абзаца — с присланного
   референса взята только эта идея, цвет остаётся наш светлый. */
.lc-edu-lead {
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-500, #8e9599);
	max-width: 46ch;
}

/* ==========================================================================
   Длинное чтение: уроки и статьи.

   Обычный абзац темы рассчитан на карточки и короткие подписи — на тексте в
   шесть тысяч знаков он сливается в простыню. Здесь отдельная типографика:
   уже колонка, крупнее кегль, больше межстрочного и воздуха вокруг
   заголовков. Меру задаёт длина строки: 62–68 символов читаются глазом без
   усилия, дальше строка «теряется» на возврате.
   ========================================================================== */

.lc-longread {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.lc-longread > p {
	margin: 0 0 1.15em;
	max-width: 64ch;
}

/* Первый абзац — подводка: крупнее и серее, чтобы отделить вход в текст. */
.lc-longread > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

.lc-longread h2 {
	margin: 2.2em 0 0.6em;
	padding-top: 1.1em;
	border-top: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.lc-longread h3 {
	margin: 1.8em 0 0.5em;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.lc-longread ul,
.lc-longread ol {
	margin: 0 0 1.3em;
	padding-left: 1.4em;
	max-width: 64ch;
}

.lc-longread li {
	margin-bottom: 0.5em;
}

.lc-longread li::marker {
	color: var(--wp--preset--color--brand-600, #8df3e2);
}

/* Технические обозначения (адреса, стандарты) — плашкой: в сплошном тексте
   они иначе теряются, а именно их и ищут глазами. */
.lc-longread code {
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink-100, #161b1f);
	font-size: 0.9375em;
}

/* Врезка: правило, которое нужно унести с собой. Не «важно!» ради красоты —
   ставится там, где иначе читатель пролистает главное. */
.lc-note {
	margin: 1.6em 0;
	padding: 16px 20px;
	border-left: 3px solid var(--wp--preset--color--brand-600, #8df3e2);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--ink-100, #161b1f);
	max-width: 64ch;
}

.lc-note p {
	margin: 0;
	max-width: none;
}

.lc-note p + p {
	margin-top: 6px;
}

.lc-note__label {
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--brand-600, #8df3e2);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Оглавление длинного материала. */
.lc-toc {
	margin: 0 0 28px;
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	border-radius: 16px;
}

.lc-toc__label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-toc__list {
	margin: 0;
	padding-left: 1.1em;
}

.lc-toc__list li {
	margin-bottom: 4px;
}

.lc-toc__list a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lc-toc__list a:hover {
	color: var(--wp--preset--color--brand-600, #8df3e2);
	border-bottom-color: currentColor;
}

/* Якорь не должен уезжать под шапку при переходе из оглавления. */
.lc-longread h2[id] {
	scroll-margin-top: 24px;
}

/* --- Приёмы подачи, как в хороших финансовых объяснялках ------------------ */

/* «Коротко» вверху: ответ на вопрос до того, как читатель начнёт читать.
   Кто спешит — уходит с ответом, кто остался — читает разбор. */
.lc-tldr {
	margin: 0 0 28px;
	padding: 18px 22px;
	border-radius: 16px;
	background: var(--wp--preset--color--ink-100, #161b1f);
}

.lc-tldr__label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--brand-600, #8df3e2);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-tldr ul {
	margin: 0;
	padding-left: 1.2em;
	max-width: none;
}

.lc-tldr li {
	margin-bottom: 4px;
}

/* «Проверьте себя»: вопрос виден всегда, ответ раскрывается. Проверка себя
   работает лучше перечитывания — ради этого блок и нужен. */
.lc-check {
	margin: 1.6em 0;
	padding: 14px 18px;
	border: 1px dashed var(--wp--preset--color--ink-300, #232a2e);
	border-radius: 14px;
	max-width: 64ch;
}

.lc-check summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.lc-check summary::-webkit-details-marker {
	display: none;
}

.lc-check summary::before {
	content: "?";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-600, #8df3e2);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	vertical-align: 1px;
}

.lc-check p {
	margin: 10px 0 0;
	color: var(--wp--preset--color--ink-500, #8e9599);
}

/* «Главное» в конце — карточкой, а не очередным списком в потоке. */
.lc-summary {
	margin: 2em 0 0;
	padding: 20px 22px;
	border: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #111518);
}

.lc-summary h2 {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 1.1875rem;
}

.lc-summary ul {
	margin: 0;
	padding-left: 1.2em;
	max-width: none;
}

/* Схемы внутри материала.

   Рисуем инлайновым SVG, а не картинкой: схема остаётся резкой на любом
   экране, весит килобайты, читается поиском и не требует загрузки в
   медиатеку. Подпись обязательна — схема без подписи заставляет
   догадываться. */
.lc-figure {
	margin: 1.8em 0;
	max-width: 100%;
}

.lc-figure svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--ink-300, #232a2e);
	border-radius: 16px;
	background: var(--wp--preset--color--canvas, #0a0d0f);
	padding: 10px 4px;
	box-sizing: border-box;
}

.lc-figure figcaption {
	margin-top: 8px;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* На узком экране горизонтальная схема нечитаема — даём ей прокрутку внутри
   своей рамки, а не сжимаем подписи до нечитаемого кегля. */
@media (max-width: 599px) {
	.lc-figure {
		overflow-x: auto;
	}

	.lc-figure svg {
		width: 640px;
		max-width: none;
	}
}

/* Подпись к чужому изображению в подвале материала: своё фото подписывать
   незачем, а чужое без автора и лицензии ставить нельзя. */
.lc-lesson-foot__photo {
	margin: 14px 0 0;
	color: var(--wp--preset--color--ink-500, #8e9599);
	font-size: 0.8125rem;
}

/* Фотография внутри материала: в отличие от схемы, ей не нужны рамка и
   подложка — она сама себе плоскость. Скругление то же, что у карточек. */
.lc-figure--photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 599px) {
	.lc-figure--photo {
		overflow: visible;
	}

	.lc-figure--photo img {
		width: 100%;
	}
}

/* ==========================================================================
   Первый экран раздела «Обучение».

   Тёмная бирюзовая заливка во всю ширину: раздел должен читаться как
   отдельный мир внутри сайта. Сама бирюза остаётся на кнопке и заголовке —
   залитый акцентом экран на тёмной странице слепит и спорит с фотографией.
   ========================================================================== */

.lc-edu-hero {
	margin-bottom: var(--wp--preset--spacing--40, 32px);
	padding: 48px 40px 44px;
	border-radius: 1.5rem;
	/* Картинка снята под этот блок: слева ровный фон под текст, предметы
	   справа. Градиент остаётся снизу — он держит цвет, пока грузится файл
	   и на очень узких экранах, где картинку приходится обрезать. */
	background-color: #0c2321;
	/* Плёнка тянется до правого края, а не сходит на нет: фотография снята под
	   светлый оранжевый блок и без затемнения выбивается пятном на тёмной
	   странице. */
	background-image: linear-gradient(90deg, rgba(7, 20, 19, 0.96) 0%, rgba(7, 20, 19, 0.82) 38%, rgba(7, 20, 19, 0.42) 100%), url('https://legal-coin.ru/wp-content/uploads/2026/08/hero_education.jpg');
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	border: 1px solid rgba(94, 234, 212, 0.18);
	color: #fff;
	min-height: 320px;
}

/* Внутри блочной темы группа с «ограниченной» раскладкой центрует детей по
   ширине контента — из-за этого подводка уезжала на середину блока. Внутри
   первого экрана раскладка своя, поэтому ограничения снимаем явно. */
.lc-edu-hero > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.lc-edu-hero__title {
	margin: 0 0 12px;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
}

.lc-edu-hero__text {
	margin: 0 0 24px;
	max-width: 44ch;
	font-size: 1.125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.lc-edu-hero__buttons {
	gap: 12px;
}

/* Первая кнопка бирюзовая, вторая — контурная: две одинаково яркие кнопки
   заставляют выбирать, а выбор здесь очевидный. */
.lc-edu-hero__btn .wp-block-button__link {
	border-radius: 999px;
	padding: 14px 28px;
	background: var(--wp--preset--color--brand-500, #5eead4);
	color: var(--wp--preset--color--canvas, #0a0d0f);
	font-weight: 700;
}

.lc-edu-hero__btn--ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

.lc-edu-hero__btn .wp-block-button__link:hover {
	filter: brightness(1.08);
}

.lc-edu-hero__btn--ghost .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, 0.85);
	color: var(--wp--preset--color--brand-500, #5eead4);
	filter: none;
}

@media (max-width: 599px) {
	.lc-edu-hero {
		padding: 32px 24px 28px;
	}
}

/* ==========================================================================
   Телефон с макетом экрана.

   Фотография настоящая, а надписи на экране — наши: генератор рисует
   несуществующие буквы, и на макете кошелька это сразу видно. Координаты
   экрана взяты с самой фотографии, размеры внутри — в единицах ширины
   контейнера, поэтому макет держится при любом размере картинки.

   Экран остаётся светлым и после перехода сайта в тёмную схему: это снимок
   реального телефона со светлым интерфейсом кошелька, и тёмная вставка в нём
   читалась бы как дыра в фотографии. Бирюзу берём насыщенную (#0f766e) —
   акцентная #5eead4 рассчитана на тёмный фон и на белом не читается.
   ========================================================================== */

.lc-phone {
	container-type: inline-size;
	position: relative;
	margin: 1.8em 0;
}

.lc-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.lc-phone__screen {
	position: absolute;
	left: 42.28%;
	top: 19.02%;
	width: 15.31%;
	height: 60.26%;
	display: flex;
	flex-direction: column;
	gap: 0.5cqw;
	padding: 1cqw 0.9cqw;
	box-sizing: border-box;
	font-size: 1.08cqw;
	line-height: 1.3;
	color: #1d1a17;
	overflow: hidden;
}

.lc-phone__head {
	font-weight: 700;
	font-size: 1.2cqw;
	margin-bottom: 0.35cqw;
}

.lc-phone__row {
	background: #f6f3f1;
	border-radius: 0.6cqw;
	padding: 0.55cqw 0.7cqw;
}

.lc-phone__row--fee {
	background: #e8fbf7;
	box-shadow: inset 0 0 0 0.12cqw #0f766e;
}

.lc-phone__label {
	display: block;
	color: #6b6663;
	font-size: 0.86cqw;
}

.lc-phone__value {
	display: block;
	font-weight: 600;
}

.lc-phone__row--fee .lc-phone__value {
	color: #0f766e;
}

.lc-phone__btn {
	margin-top: auto;
	background: #0f766e;
	color: #fff;
	text-align: center;
	border-radius: 999px;
	padding: 0.6cqw;
	font-weight: 700;
}

/* На узком экране надписи внутри телефона превращаются в нечитаемую крошку —
   там показываем только фотографию, а разбор остаётся в тексте урока. */
@media (max-width: 599px) {
	.lc-phone__screen {
		display: none;
	}
}