/**
 * Стили, которых нет в исходной вёрстке.
 *
 * Держим их отдельно от assets/css/*.css вёрстки: так обновление макета
 * не затирает доработки, а доработки видно одним файлом.
 */

/* ------------------------------------------------------- карточки услуг */

/*
 * Кнопка в карточке услуги — это span, открывающий попап, а не button
 * и не ссылка. cursor в вёрстке задан только для button и .checkbox-label,
 * поэтому указателя у неё не было.
 */
.service-item__btn {
	cursor: pointer;
}

/* ---------------------------------------------------- плитки в сетке adv */

/*
 * Пропорции плиткам не задаём: вёрстка держала их на aspect-ratio
 * (437/171, а с 560px — 336/139), и текст, который длиннее макетного,
 * упирался в фиксированную высоту. Высота считается по содержимому.
 *
 * Правило вне медиазапроса и идёт последним — снимает обе величины сразу.
 */
.grid-slider__adv .grid-item {
	aspect-ratio: auto;
}

/* ------------------------------------------------------ страница товара */

/*
 * Мобильная вёрстка (max-width: 560px в product.css) кладёт .prop-item
 * в колонку: название и значение идут друг под другом. Пунктир, который
 * на десктопе соединял их по горизонтали, тянуться больше не к чему —
 * он превращается в лишнюю черту под названием.
 */
@media (max-width: 560px) {
	.prop-item__name::after {
		display: none;
	}

	/*
	 * Плашка в сетке на мобильных и так узкая, а вёрстка режет текст до
	 * 120px — строки рвутся по одному слову. Отдаём всю ширину плашки.
	 *
	 * .grid-slider__prod — это ключевые показатели товара. Без него правило
	 * задело бы такую же сетку в категориях, где своя ширина (167px).
	 */
	.grid-slider__prod .grid-inner__adv .grid-item__text {
		max-width: 100%;
	}

	/* Вместо 48px из вёрстки. */
	.grid-slider__prod .grid-item__value {
		font-size: 44px;
	}
}

/* ----------------------------------------------------- шапка категории */

/*
 * На мобильных .hero-row раскладывается в колонку с gap: 38px. В категориях
 * правой колонки может не быть — пустой мы её не выводим, — и вместе с ней
 * пропадает отступ под шапкой. Переносим те же 38px в саму колонку: они
 * на месте и когда правая часть есть, и когда её нет.
 *
 * Селектор с .hero__category, а не голый .hero-row: на главной правая
 * колонка есть всегда, и обнулённый gap склеил бы её с левой.
 */
@media (max-width: 560px) {
	.hero__category .hero-row {
		gap: 0;
	}

	.category__hero-l {
		padding-bottom: 38px;
	}
}

/* -------------------------------------------------- описание категории */

/*
 * Описание в шапке категории заполняется редактором с разметкой, а базовые
 * стили сбрасывают списки: ul обнулён по отступам, li — без маркера. Внутри
 * этого блока возвращаем их, маркер рисуем сами, чтобы задать цвет и размер.
 */
/*
 * Первый элемент не должен отодвигать блок от заголовка — но списка это
 * не касается: у него свой отступ, и правило :first-child (0,2,0) весомее,
 * чем .hero__text ul (0,1,1), поэтому оно его затирало.
 */
.hero__text > *:first-child:not(ul):not(ol) {
	margin-top: 0;
}

.hero__text > *:last-child {
	margin-bottom: 0;
}

.hero__text p {
	margin: 0 0 10px;
}

.hero__text ul,
.hero__text ol {
	/* Отступ сверху больше нижнего: список отделяется от абзаца над ним.
	   С margin-bottom абзаца он схлопывается, поэтому берётся эти 24px. */
	margin: 24px 0 12px;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero__text li {
	position: relative;
	padding-left: 18px;
}

.hero__text ul li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #FFD400;
}

/* Нумерованный список: счётчик вместо кружка. */
.hero__text ol {
	counter-reset: hero-list;
}

.hero__text ol li {
	counter-increment: hero-list;
	padding-left: 24px;
}

.hero__text ol li::before {
	content: counter(hero-list) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
}

/* ---------------------------------------------------------- страница 404 */

/*
 * Своей вёрстки у 404 нет, она собрана из готовых блоков. На остальных
 * страницах отступ сверху даёт .breadcrumbs__wrapper (margin: 50px 0 40px),
 * а здесь крошек нет — заголовок прилипал к шапке. Компенсируем той же
 * величиной, чтобы ритм совпадал.
 */
.blog--404 {
	padding-top: 90px;
}

@media (max-width: 560px) {
	.blog--404 {
		/* Крошки на мобильных ужимаются до margin: 20px 0. */
		padding-top: 40px;
	}
}

/* ------------------------------------------------ выбранная точка продаж */

/*
 * Состояния выбранной карточки в вёрстке нет, хотя cursor: pointer и
 * transition у неё уже заданы. Подсвечиваем рамкой того же цвета, каким
 * базовые стили отмечают поле в фокусе.
 */
.partners-card.is-active {
	border-color: #222222;
}

/* ------------------------------------------------------------ видео */

/*
 * Ролик открывается в окне поверх страницы. Разметка та же, что у попапа
 * обратной связи, но белая подложка и отступы в 53px тут не нужны — кадр
 * должен занимать окно целиком.
 */
.popup-video .popup-inner {
	padding: 0;
	background-color: transparent;
	width: min(1040px, 92vw);
	max-width: 100%;
}

.popup-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	background-color: #222222;
}

.popup-video__frame iframe,
.popup-video__frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Крестик выносим за пределы кадра, иначе он ляжет поверх плеера. */
.popup-video .popup__close {
	top: -42px;
	right: 0;
	/* В вёрстке он полупрозрачный на белом фоне окна, здесь фон тёмный. */
	opacity: 0.85;
}

.popup-video .popup__close:hover {
	opacity: 1;
}

.popup-video .popup__close svg path {
	fill: #FFFFFF;
}

@media (max-width: 767px) {
	.popup-video .popup__close {
		top: -36px;
	}
}

/* -------------------------------------------------- фильтр рубрик блога */

/*
 * Активный таб не должен менять цвет на наведении.
 *
 * В вёрстке .blog__tags .blog__tag:hover красит текст в --tag-color, и этот
 * селектор весомее, чем .blog__tag.active с белым текстом. На активном табе
 * заливка тоже --tag-color, поэтому надпись сливается с фоном и исчезает.
 */
.blog__tags .blog__tag.active:hover {
	color: #fff;
}

/* ------------------------------------------------ уведомления форм */

/*
 * Сообщение после отправки. В вёрстке его нет вовсе, поэтому собрано из
 * её же величин: скругление как у textarea (18px), красный #FF383C от
 * состояния ошибки, жёлтый #FFD400 от кнопок.
 */
.form__message {
	margin-top: 14px;
	padding: 13px 16px;
	border-radius: 18px;
	border: 1px solid transparent;
	font-size: 14px;
	line-height: 1.35;
	transition: 0.3s;
}

/* Слот присутствует всегда, JS только меняет текст — пустой схлопываем. */
.form__message:empty {
	display: none;
}

.form__message.is-success {
	color: #222222;
	background-color: rgba(255, 212, 0, 0.18);
	border-color: #FFD400;
}

.form__message.is-error {
	color: #FF383C;
	background-color: rgba(255, 56, 60, 0.08);
	border-color: rgba(255, 56, 60, 0.5);
}

/* В подвале и в блоке партнёрства форма стоит на тёмной подложке (#222222) —
   там нужен контраст посветлее. */
.footer-form .form__message.is-success,
.partner-r .form__message.is-success {
	color: #FFFFFF;
	background-color: rgba(255, 212, 0, 0.16);
}

@media (max-width: 767px) {
	.form__message {
		padding: 10px 13px;
		font-size: 12px;
		border-radius: 12px;
	}
}

/* ------------------------------------------------------- ошибки полей */

/*
 * Подпись под полем. Вёрстка уже описывает состояние .fg._error — красную
 * рамку, текст и иконку; сюда добавляется только сам текст ошибки, в том же
 * красном #FF383C и тем же кеглем, что и .fg__text над полем.
 *
 * .fg — это flex-колонка с gap 4px, поэтому отступ сверху берётся от неё.
 */
.fg__error {
	font-size: 12px;
	line-height: 1.3;
	color: #FF383C;
	/* Совпадает с padding-left у .input — текст ошибки под текстом поля. */
	padding-left: 13px;
	transition: 0.3s;
}

/*
 * Слот ошибки в разметке есть всегда, JS только меняет текст. Пустой span
 * обязан схлопываться, иначе gap колонки даёт лишние 4px под каждым полем.
 */
.fg__error:empty {
	display: none;
}

/*
 * Согласие лежит в .form-bottom с gap 24px — под чекбоксом это слишком
 * много воздуха, поджимаем до 8px.
 */
.form-bottom .fg__error {
	margin-top: -16px;
	padding-left: 0;
}

/*
 * Для .input состояние ошибки описано в вёрстке, для textarea — нет,
 * хотя поле «Компания и регион» тоже проверяется.
 */
.fg._error textarea {
	border-color: #FF383C;
	color: #FF383C;
}

@media (max-width: 767px) {
	.fg__error {
		font-size: 9px;
		/* Под уменьшенный padding-left у .input на мобильных. */
		padding-left: 11px;
	}

	.form-bottom .fg__error {
		padding-left: 0;
	}
}