/*
 * LANDING V2 — ТЕКСТ О ПОДХОДЕ (SEO).
 * Макет: output/design/landing-v2/all-screens/13-seo-text.png.
 *
 * Самый тихий блок страницы: вводная и раскрываемый подробный текст. Ни рамок,
 * ни чертёжных меток — здесь работает только слово,
 * и любая графика отвлекала бы от него.
 */

.lp .lp-seo-text__inner {
	display: grid;
	gap: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
}

/* Красная черта во всю ширину — граница раздела, а не украшение строки. */
.lp .lp-seo-text__rule {
	display: block;
	height: 1px;
	background-color: var(--lp-crimson);
}

/*
 * Колонки разделены вертикальной линией — она же граница правой колонки.
 * На узком экране колонки складываются, и линия уходит вместе с ними:
 * чёрточка над абзацем не значит ничего.
 */
.lp .lp-seo-text__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3.5vw, 5.5rem);
	align-items: start;
}

.lp .lp-seo-text__main {
	display: grid;
	justify-items: start;
	gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem);
}

.lp .lp-seo-text__eyebrow {
	margin: 0;
}

.lp .lp-seo-text__title {
	max-width: none;
	margin: 0;
	font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
	line-height: 0.94;
	text-transform: uppercase;
	text-wrap: initial;
}

.lp .lp-seo-text__title-line {
	display: block;
}

.lp .lp-seo-text__text {
	margin: 0;
	max-width: 34rem;
	color: var(--lp-ink-muted);
}

.lp .lp-seo-text__aside {
	display: grid;
	justify-items: start;
	gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-seo-text__aside-text {
	max-width: 32rem;
	margin: 0;
	color: var(--lp-ink-muted);
}

.lp .lp-seo-text__details {
	align-self: end;
}

.lp .lp-seo-text__toggle {
	list-style: none;
	cursor: pointer;
	color: var(--lp-crimson);
	background-color: transparent;
	border-color: var(--lp-crimson);
}

.lp .lp-seo-text__toggle::-webkit-details-marker {
	display: none;
}

.lp .lp-seo-text__toggle:hover,
.lp .lp-seo-text__toggle:focus-visible {
	color: var(--lp-ink);
	background-color: var(--lp-burgundy);
	border-color: var(--lp-burgundy);
}

.lp .lp-seo-text__toggle-less {
	display: none;
}

.lp .lp-seo-text__details[open] .lp-seo-text__toggle-more {
	display: none;
}

.lp .lp-seo-text__details[open] .lp-seo-text__toggle-less {
	display: inline;
}

@media (max-width: 61.25em) {

	.lp .lp-seo-text__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp .lp-seo-text__details {
		align-self: start;
	}
}