/*
 * Talent Rocks — базовые стили, общие для всех блоков talentrocks/*.
 * Перенесено из legacy/src/ru/style.scss (кнопки, поля, модалки, контейнеры)
 * и legacy/src/ru/styles/mixins.scss (переменные и миксины).
 */

:root {
	--tr-font-body: 'Montserrat', sans-serif;
	--tr-font-ui: 'Manrope', sans-serif;
	--tr-topbar-height: 70px;
	--tr-container-width: 1160px;

	--tr-white: #ffffff;
	--tr-white-60: rgba(255, 255, 255, 0.6);
	--tr-green: #50db94;
	--tr-green-dark: #00ae65;
	--tr-black: #000000;
	--tr-dark: #1d232a;
	--tr-purple: #4700bb;
	--tr-violet: #670dce;
	--tr-grey: #747474;
	--tr-text: #303030;

	--tr-gradient-green: linear-gradient(106.1deg, #00ae65 0.21%, #82d200 33.37%, #a1dd40 66.56%, #40c28c 100%);
	--tr-gradient-orange: linear-gradient(106.1deg, #ffc000 0.21%, #e54300 33.37%, #eb7240 67.01%, #ffd040 100%);
	--tr-gradient-red: linear-gradient(92.34deg, #ff511e 0.14%, #ff29ae 50%, #ff511e);
	--tr-gradient-white: linear-gradient(106.1deg, rgba(255, 255, 255, 0.1) 0.21%, rgba(255, 255, 255, 0.1) 33.37%, rgba(255, 255, 255, 0.2) 67.01%, rgba(255, 255, 255, 0.2) 100%);
	--tr-gradient-grey: linear-gradient(106.1deg, rgba(224, 224, 224, 0.4) 0.21%, rgba(224, 224, 224, 0.4) 33.37%, rgba(224, 224, 224, 0.8) 67.01%, rgba(224, 224, 224, 0.8) 100%);
}

/* Блокировка прокрутки страницы (открытое мобильное меню / модалка) */
body.tr-scroll-lock {
	overflow: hidden;
}

/* Рамка фокуса — только при навигации с клавиатуры (в теме есть общий :focus) */
.tr-component :focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Контейнеры ---------- */
/*
 * Части шаблона идут встык: WordPress по умолчанию ставит между шапкой, контентом и подвалом
 * отступ blockGap (1.2rem) правилом :where(.wp-site-blocks) > *. В legacy секции и подвал
 * следуют друг за другом без зазора, а шапка наложена на контент.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.section-container,
.adaptation-container,
.solutions-container {
	max-width: var(--tr-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.adaptation-container {
	max-width: 1280px;
}

.solutions-container {
	max-width: 1200px;
}

@media only screen and (max-width: 1279px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 1080px;
	}
}

@media only screen and (max-width: 1024px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 904px;
	}
}

@media only screen and (max-width: 932px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 812px;
	}
}

@media only screen and (max-width: 853px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 722px;
	}
}

@media only screen and (max-width: 768px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 708px;
	}
}

@media only screen and (max-width: 667px) {
	.section-container,
	.solutions-container,
	.adaptation-container {
		max-width: 540px;
	}
}

/* ---------- Типографика внутри компонентов ---------- */
.tr-component,
.tr-component * {
	box-sizing: border-box;
}

.tr-component ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

/*
 * Базовый размер шрифта компонентов как у body на лендинге (16px): тема ставит body 22px
 * (theme.json, размер «large»), и всё без явного font-size наследовало бы его.
 * Блоки плагина делают то же самое для .tr-block.
 */
.tr-component {
	font-size: 16px;
	/* modern-css-reset (body) на лендинге: влияет на кернинг и переносы строк */
	text-rendering: optimizeSpeed;
	/* Тема задаёт трекинг -0.1px и text-wrap: pretty — в блоках нужен вид лендинга */
	letter-spacing: normal;
}

.tr-component :is(h1, h2, h3, h4, h5, h6, p, blockquote, figcaption) {
	letter-spacing: normal;
	text-wrap: wrap;
}

.tr-component a:not(.button) {
	text-decoration: none;
	color: inherit;
}

.tr-component a.button {
	text-decoration: none;
}

.tr-component p {
	font-weight: 600;
	margin: 0;
}

.tr-component p.normal {
	font-weight: 400;
}

.tr-component .grey {
	color: var(--tr-grey);
}

/* ---------- Кнопки ---------- */
:is(a, button, span, div).button {
	font-family: var(--tr-font-ui);
	position: relative;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	padding: 16px 32px;
	color: #ffffff;
	outline: none;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	transition: linear 250ms;
	background-size: 300% 300%;
}

:is(a, button, span, div).button:hover {
	background-position: 100% 100%;
	color: #ffffff;
}

:is(a, button, span, div).button--white {
	background-image: var(--tr-gradient-white);
}

:is(a, button, span, div).button--whiteFull {
	background-color: #ffffff;
	color: #303030;
}

:is(a, button, span, div).button--whiteFull:hover {
	color: #303030;
}

:is(a, button, span, div).button--green {
	background-image: var(--tr-gradient-green);
}

:is(a, button, span, div).button--green:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

:is(a, button, span, div).button--green:disabled:hover {
	background-position: 0 0;
}

:is(a, button, span, div).button--green-transparent {
	color: #00a75c;
}

:is(a, button, span, div).button--green-transparent:hover {
	opacity: 0.7;
	color: #00a75c;
}

:is(a, button, span, div).button--templates-default {
	background-color: #ffffff;
	color: #08003b;
}

:is(a, button, span, div).button--templates-default:hover {
	opacity: 0.9;
	color: #08003b;
}

:is(a, button, span, div).button--red {
	background-image: var(--tr-gradient-red);
}

:is(a, button, span, div).button--orange {
	background-image: var(--tr-gradient-orange);
}

:is(a, button, span, div).button--violet {
	background: var(--tr-violet);
	border-radius: 12px;
	padding: 15px 24px;
}

:is(a, button, span, div).button--violet:hover {
	opacity: 0.9;
}

:is(a, button, span, div).button--black-border {
	color: #1e1e1e;
	border-radius: 12px;
	padding: 15px 24px;
}

:is(a, button, span, div).button--black-border::before {
	content: '';
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	border: 2px solid #000000;
	border-radius: 12px;
}

:is(a, button, span, div).button--black-border:hover {
	background-color: #000000;
	color: #ffffff;
}

:is(a, button, span, div).button--grey {
	color: var(--tr-grey);
	background-image: var(--tr-gradient-grey);
}

:is(a, button, span, div).button--grey:hover {
	color: var(--tr-grey);
}

:is(a, button, span, div).button--grey.open {
	background: rgba(224, 224, 224, 0.4);
}

:is(a, button, span, div).button--grey svg {
	fill: #181818;
}

:is(a, button, span, div).button--darkGrey {
	background: #0000000a;
	color: #171924;
	border-radius: 12px;
	padding: 15px 24px;
}

:is(a, button, span, div).button--darkGrey:hover {
	background: #f2f4f5;
	color: #171924;
}

:is(a, button, span, div).button--border {
	border: 1px solid #e0e0e0;
	color: inherit;
}

:is(a, button, span, div).button--border:hover {
	background-color: #e0e0e0;
	color: #1d232a;
}

:is(a, button, span, div).button::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../images/icons/button_spinner.svg') 50% 50% transparent no-repeat;
	background-size: auto 55px;
	z-index: -5;
	opacity: 0;
	transition: opacity linear 250ms;
}

:is(a, button, span, div).button--loading {
	color: transparent !important;
}

:is(a, button, span, div).button--loading::after {
	z-index: 5;
	opacity: 1;
}

:is(a, button, span, div).button--more-pg {
	padding: 18px 46px;
}

@media only screen and (max-width: 667px) {
	:is(a, button, span, div).button {
		font-size: 14px;
	}
}

/* ---------- Поля форм ---------- */
.input,
.textarea {
	position: relative;
	width: 100%;
	border-radius: 10px;
	height: 56px;
	border: 1px solid transparent;
	transition: 0.2s all;
}

.textarea {
	padding-top: 16px;
	height: 104px;
}

.input input,
.textarea textarea {
	padding-left: 16px;
	padding-right: 16px;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	background-color: transparent;
	font-family: inherit;
	font-size: 16px;
	box-shadow: none;
}

.textarea textarea {
	resize: none;
}

.input input:focus,
.textarea textarea:focus {
	outline: none;
	box-shadow: none;
}

.input .input-message,
.textarea .input-message {
	display: none;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	background-color: white;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
	padding: 12px 20px;
	right: 0;
	top: 70px;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 10;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	font-size: 14px;
	font-weight: 600;
	color: #181818;
}

.input .input-message::after,
.textarea .input-message::after {
	display: block;
	position: absolute;
	top: -10px;
	right: 10px;
	content: '';
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 18px solid white;
}

.input.error:hover .input-message,
.textarea.error:hover .input-message {
	opacity: 1;
	visibility: visible;
}

.input.error .input-message,
.textarea.error .input-message {
	animation-name: tr-fade-in;
	animation-iteration-count: 2;
	animation-direction: alternate;
	animation-duration: 1s;
	display: block;
}

.input.light,
.textarea.light {
	background-color: rgba(116, 116, 116, 0.1);
}

.input.light:focus-within,
.textarea.light:focus-within {
	border-color: var(--tr-purple);
}

.input.light input,
.textarea.light textarea {
	color: #181818;
}

.input.light input::placeholder,
.textarea.light textarea::placeholder {
	color: rgba(24, 24, 24, 0.5);
}

.input.light.error,
.textarea.light.error {
	background-color: rgba(255, 0, 77, 0.1);
	border-color: #ff004d;
	display: flex;
	align-items: center;
}

.input.light.error input,
.textarea.light.error textarea {
	color: rgba(255, 0, 77, 0.5);
	-webkit-text-fill-color: rgba(255, 0, 77, 0.5);
}

.input.light.error::after,
.textarea.light.error::after {
	content: url('../images/icons/ic24_alert_red.svg');
	position: absolute;
	right: 16px;
	height: 24px;
	width: 24px;
}

.input.dark,
.textarea.dark {
	background-color: rgba(255, 255, 255, 0.1);
}

.input.dark:focus-within,
.textarea.dark:focus-within {
	border-color: var(--tr-white);
}

.input.dark input,
.textarea.dark textarea {
	color: var(--tr-white);
}

.input.dark input::placeholder,
.textarea.dark textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.input.dark.error,
.textarea.dark.error {
	background-color: rgba(255, 0, 77, 0.2);
	border-color: #ffffff;
	display: flex;
	align-items: center;
}

.input.dark.error::after,
.textarea.dark.error::after {
	content: url('../images/icons/ic24_alert.svg');
	position: absolute;
	right: 16px;
	height: 24px;
	width: 24px;
}

.checkboxes {
	margin-top: 16px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.checkbox {
	display: flex;
	align-items: flex-start;
	font-weight: 400;
	color: inherit;
	cursor: pointer;
}

.checkbox input[type='checkbox'] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 8px 0 0;
	accent-color: var(--tr-green);
}

.checkbox span {
	font-size: 14px;
	line-height: 1.4;
}

.checkbox span a {
	color: var(--tr-green);
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.checkbox span a:hover {
	opacity: 0.8;
}

/* ---------- Модальные окна ---------- */
.modal-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	visibility: hidden;
	z-index: 1000;
	transition: background-color 0.4s ease;
	font-family: var(--tr-font-body);
}

.modal-wrapper .modal-container {
	text-align: center;
	max-width: 480px;
	width: calc(100% - 32px);
	position: fixed;
	padding: 48px 40px;
	background: var(--tr-white);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -35%) scale(0.85);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
	max-height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	color: #181818;
}

.modal-wrapper .modal-container__title {
	margin-bottom: 20px;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.25;
}

.modal-wrapper .modal-container p {
	margin-bottom: 32px;
}

.modal-wrapper .modal-container .button {
	width: 160px;
}

.modal-wrapper .modal-container--xl {
	max-width: 800px;
	width: 70%;
}

.modal-wrapper .modal-container--xxl {
	max-width: 980px;
	width: 90%;
}

.modal-wrapper.visible .modal-container {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.modal-wrapper .modal-close {
	position: absolute;
	cursor: pointer;
	margin-right: 20px;
	margin-top: 20px;
	top: 0;
	right: 0;
	color: #8692a7;
	transition: color 0.15s ease-in-out;
	line-height: 0;
}

.modal-wrapper .modal-close:hover {
	color: #677186;
}

@media only screen and (max-width: 932px) {
	.modal-wrapper .modal-container--xxl {
		width: 70%;
		max-width: 800px;
	}
}

@media only screen and (max-width: 768px) {
	.modal-wrapper .modal-container,
	.modal-wrapper .modal-container--xl,
	.modal-wrapper .modal-container--xxl {
		max-width: 100%;
		width: 100%;
		border-radius: 16px 16px 0 0;
		top: auto;
		bottom: 0;
		transform: translate(-50%, 15%) scale(0.95);
	}

	.modal-wrapper.visible .modal-container {
		transform: translate(-50%, 0) scale(1);
	}

	.modal-wrapper .modal-container--xxl {
		padding: 48px 16px 24px;
	}
}

@media only screen and (max-width: 1024px) {
	.modal-wrapper .modal-container__title {
		font-size: 20px;
	}
}

/* ---------- Стрелки ---------- */
.arrow {
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' width='12' height='7' viewBox='0 0 12 7' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976315 0.683417 -0.0976316 0.292893 0.292893C-0.0976305 0.683417 -0.0976306 1.31658 0.292893 1.70711L5.29289 6.70711C5.68342 7.09763 6.31658 7.09763 6.70711 6.70711L11.7071 1.70711C12.0976 1.31658 12.0976 0.683418 11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L6 4.58579L1.70711 0.292893Z' /%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	width: 15px;
	height: 15px;
	display: inline-block;
}

.arrow--purple {
	filter: hue-rotate(300deg) saturate(0.64);
	-webkit-filter: hue-rotate(263deg) saturate(0.64);
}

.arrow--white {
	-webkit-filter: grayscale(100%) brightness(5);
	filter: grayscale(100%) brightness(5);
}

@keyframes tr-fade-in {
	0% {
		visibility: hidden;
		opacity: 0;
	}

	100% {
		opacity: 1;
		visibility: visible;
	}
}

/* Заглушки скрытых блоков в редакторе */
.tr-editor-placeholder {
	border: 1px dashed #949494;
	border-radius: 8px;
	padding: 16px 20px;
	background: #f8f8f8;
	color: #1e1e1e;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

.tr-editor-placeholder__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.tr-editor-placeholder__title svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.tr-editor-placeholder__hint {
	color: #757575;
}

.tr-editor-placeholder__list {
	margin: 8px 0 0;
	padding-left: 18px;
	color: #3c434a;
}

/* ---------- Вертикальный ритм страницы ----------
   Расстояние между блоками задаёт страница, а не сами блоки: контейнер контента —
   колонка с gap. Блоки не несут собственных внешних вертикальных отступов
   (см. src/shared/style.scss плагина), поэтому новую страницу можно собрать
   из любых блоков и отступы будут одинаковыми. */
:root {
	--tr-section-gap: 100px;
}

@media only screen and (max-width: 667px) {
	:root {
		--tr-section-gap: 60px;
	}
}

.wp-site-blocks main > .wp-block-post-content,
.wp-site-blocks main > .entry-content {
	display: flex;
	flex-direction: column;
	gap: var(--tr-section-gap);
	/* Тот же шаг перед подвалом. */
	margin-bottom: var(--tr-section-gap);
}

/* Блок «Телефон и WhatsApp» (contacts), если он последний на странице, стоит вплотную к подвалу —
   как на лендинге: фиолетовая полоса переходит прямо в подвал. Скрытый маскот (.mascot-ai) идёт
   в разметке после него, но места не занимает, поэтому не считается. Если после контактов есть
   другой блок (SEO-текст на mobile-training), шаг перед подвалом остаётся. */
.wp-site-blocks main > .wp-block-post-content:has(> .wp-block-talentrocks-contacts:nth-last-child(1 of :not(.mascot-ai))),
.wp-site-blocks main > .entry-content:has(> .wp-block-talentrocks-contacts:nth-last-child(1 of :not(.mascot-ai))) {
	margin-bottom: 0;
}

/* Страницы кейсов: секции несут собственные отступы (как в legacy case-*.html), поэтому страничный
   шаг между ними не нужен — ни между блоками, ни перед подвалом. */
.tr-case-page .wp-site-blocks main > .wp-block-post-content,
.tr-case-page .wp-site-blocks main > .entry-content {
	--tr-section-gap: 0px;
}

/* Бегущие строки логотипов и слайдеры («Проекты», «Решения», «Кейсы») выезжают за края
   секции — на лендинге их обрезает main.main_page с overflow: hidden, иначе страница
   прокручивается вбок. Берём `clip`, а не `hidden`: он не делает из main контейнер
   прокрутки, поэтому «липкий» фильтр на странице кейсов продолжает работать. */
.wp-site-blocks main {
	overflow-x: clip;
}

/* Блок с классом `tr-block--overlap` (плашка try-free) съедает свой шаг сверху и встаёт
   серединой на границу секций — само правило живёт в стилях блоков (src/shared/style.scss
   плагина), рядом со сбросом внешних отступов, иначе сброс оказывается сильнее. */

/* ---------- Страница 404 (templates/404.html) ----------
   Макет Figma: «404» — web 1440, tablet 837, mobile 360. Блок занимает первый экран под шапкой,
   иллюстрация и облака — SVG из assets/images. Облака между 1440 и 837 сдвигаются линейно
   (позиции из макета в обеих точках), ниже 668px — своя раскладка из мобильного макета. */
.tr-404 {
	padding-top: 136px;
	overflow: hidden;
	background: #ffffff;
}

.tr-404__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 624px;
	padding: 0 20px;
}

.tr-404__cloud {
	position: absolute;
	background: no-repeat center / contain;
	pointer-events: none;
}

.tr-404__cloud--top {
	width: 165.33px;
	height: 88.02px;
	top: 16px;
	right: calc(44.28% - 322.9px);
	background-image: url(../images/404-cloud-a.svg);
}

.tr-404__cloud--left {
	width: 174.46px;
	height: 79.92px;
	top: 154px;
	left: calc(55.72% - 558.4px);
	background-image: url(../images/404-cloud-b.svg);
}

.tr-404__cloud--bottom {
	width: 174.41px;
	height: 79.89px;
	top: 412px;
	right: calc(44.28% - 447px);
	background-image: url(../images/404-cloud-b.svg);
}

.tr-404__icon {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 240px;
	height: 240px;
	background: url(../images/404-fail.svg) no-repeat center / contain;
}

.tr-404__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 600px;
}

.tr-404__text-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: center;
}

.tr-404 .tr-404__title {
	margin: 0;
	font-family: var(--tr-font-ui);
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	color: #303030;
}

.tr-404 .tr-404__text {
	margin: 0;
	font-family: var(--tr-font-ui);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #747474;
}

.tr-404__buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.tr-404 .tr-404__button {
	box-sizing: border-box;
	width: 246px;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 16px;
	line-height: 24px;
}

.tr-404 .tr-404__button--secondary,
.tr-404 .tr-404__button--secondary:hover {
	background: #f5f6f7;
	color: #303030;
}

.tr-404 .tr-404__button--secondary:hover {
	background: #eeeff0;
}

.tr-404 .tr-404__button--primary,
.tr-404 .tr-404__button--primary:hover {
	background: var(--tr-violet, #670dce);
	color: #ffffff;
}

.tr-404 .tr-404__button--primary:hover {
	opacity: 0.9;
}

/* Планшет (макет 837): блок ниже, раскладка та же */
@media only screen and (max-width: 1024px) {
	.tr-404 {
		padding-top: 132px;
	}

	.tr-404__hero {
		height: 508px;
	}
}

/* Телефон (макет 360): иконка меньше, кнопки на всю ширину, главная кнопка первой */
@media only screen and (max-width: 667px) {
	.tr-404 {
		padding-top: 100px;
		padding-bottom: 32px;
	}

	.tr-404__hero {
		height: 624px;
	}

	.tr-404__icon {
		width: 200px;
		height: 200px;
	}

	.tr-404 .tr-404__title {
		font-size: 24px;
		line-height: 32px;
	}

	.tr-404 .tr-404__text {
		font-size: 14px;
		line-height: 20px;
	}

	.tr-404__buttons {
		flex-direction: column-reverse;
		align-self: stretch;
	}

	.tr-404 .tr-404__button {
		width: 100%;
	}

	.tr-404__cloud--top {
		width: 174.46px;
		height: 79.92px;
		top: 14px;
		right: -49.46px;
		background-image: url(../images/404-cloud-b.svg);
	}

	.tr-404__cloud--left {
		top: 232px;
		left: -125px;
	}

	.tr-404__cloud--bottom {
		width: 165.33px;
		height: 88.02px;
		top: auto;
		bottom: -30.02px;
		right: -49.33px;
		background-image: url(../images/404-cloud-a.svg);
	}
}

/* ---------- Запасной шаблон списка (templates/index.html: архивы, поиск) ---------- */
.tr-index {
	padding: 160px 20px var(--tr-section-gap, 100px);
}