/* ==========================================================================
   ЭТрН — стили страницы

   Назначение: собственные стили страницы «Электронные транспортные
   накладные (ЭТрН)». Файл подключён только в etrn.html, последним среди
   таблиц стилей; на интеграции подключается условно, только на этой странице.

   Создан: 2026-09-09 (задача 1.2 — каркас страницы)

   Правило: здесь живут стили только этой страницы. Глобальных переопределений
   нет: правила, меняющего вид существующих страниц сайта, в этом файле быть не
   может. Компонент вёрстки либо берётся как есть, либо адаптируется копией под
   новым классом. Новые CSS-переменные не заводятся, значения существующих в :root
   не меняются.

   Вёрстка desktop-first: адаптив добавляется медиазапросами max-width на
   брейкпоинтах из css/media.css (1439, 1199, 991, 767, 575), новые точки не вводятся.

   Правила добавляются по мере сборки блоков в задачах 1.3—1.N.
   ========================================================================== */


/* ==========================================================================
   БЛОК 1. Главный блок (герой) — задача 1.3

   Разметка блока — существующий компонент .main_block вёрстки в варианте
   main_inscribed_image, взятый как есть с mashinochitaemaya_doverennost.html:317.
   Собственных правил ему не задаём.

   Цена в первом экране — штатная разметка сайта <div class="h4 price">
   (mashinochitaemaya_doverennost.html:326 и ещё четыре страницы). Оформление
   даёт существующий класс .h4 (style.css:247); собственного правила у .price
   в этом контексте нет и нам не требуется.

   Список выгод — обычный <ul> внутри .text (как rutokeny.html:321), оформляется
   штатными ul:not([class]) (style.css:149) и .main_text .text ul li (style.css:1187).

   Своего правила у блока нет. Заглушка иллюстрации, обобщённая в задаче 1.4 до
   общего класса .etrn_ph (прежний .etrn_hero_ph не используется), задачей 1.12
   заменена существующим файлом img/markirovka_pod_klyuch/app.svg — 290x367.
   Ниже 1200 иллюстрация героя не показывается вовсе: .main_image { display: none }
   (media.css:264). Это поведение сайта, одинаковое на всех страницах с героем.
   ========================================================================== */


/* ==========================================================================
   БЛОК 3. Кому нужен ЭТрН — задача 1.4

   Правил у блока нет ни одного, и это результат, а не упущение.

   Карточка — существующий компонент .offer_item, взятый как есть с
   markirovka_pod_klyuch.html:592 (image full_image → name → text → btn_row).
   Сетка — .offer_block > .offer_row.row с колонками, как на ochety_mvd.html:542;
   набор классов колонки col-12 col-md-6 col-lg-4 — приём самого сайта
   (otchetnost.html:372).

   Контекст .offer_row меняет три правила по сравнению со слайдером образца, и
   меняет их сама вёрстка, без нашего участия: .offer_row .offer_item
   (style.css:2067, padding-bottom 50px), .offer_row .offer_item .image
   (style.css:2094, aspect-ratio 1.3 вместо 1.06) и .offer_row .offer_item .image img
   (style.css:2108). После задачи 1.12 в слоте стоит img, поэтому третье правило
   к нам относится и участвует наравне с .offer_item .image.full_image img
   (style.css:2103): обе (0,3,1), выигрывает более поздняя.

   Своего правила у блока нет. В трёх слотах лежат существующие файлы
   img/markirovka_pod_klyuch/offer/item-1..3.svg — задача 1.12.
   ========================================================================== */


/* ==========================================================================
   БЛОК 4. Что вы получаете с ЭТрН — задача 1.5

   Правил у блока нет ни одного — как и у блока 3.

   Компонент взят как есть с otchetnost.html:362: advantages_block >
   advantages_row row > col-12 col-md-6 col-lg-4 > advantages_item > image + name.
   Прототип (etrn-prototip.html:245-275) скопировал эту структуру дословно, включая
   набор классов колонки, поэтому расходиться тут нечему.

   Слот иконки .advantages_item .image (style.css:2669) — flex: 0 0 54px; width: 54px,
   высоты нет: её задаёт содержимое. Ниже 768 сама вёрстка сужает слот до 40px
   (media.css:1064) и меняет карточку — gap 15px, padding 20px, border-radius 10px
   (media.css:993). Своего правила у блока нет: задача 1.12 заменила заглушки девятью
   существующими иконками, а её модификатор .etrn_ph_icon удалён.
   ========================================================================== */

/* ==========================================================================
   БЛОК 5. Тарифы — задача 1.6

   Карточка — существующий компонент .offer_item, взятый как есть с
   otchetnost.html:609 (image tarif → text → btn_row). Правил под сам компонент
   (.offer_item, .image.tarif, .name, .subname, .price, .pluses, .btn_row) нет
   ни одного: в контексте слайдера вёрстка оформляет его сама.

   Слайдер получил СВОЙ класс .etrn_tarif_slider вместо штатного .offer_slider.
   Причина: main.js:302 инициализирует .offer_slider стрелками, скроллбаром и
   прокруткой по одному слайду, а с заказчиком согласованы точки и прокрутка по
   две. main.js не правится, поэтому два слайдера развязаны классом.

   Плата за смену класса — правила, которые вёрстка давала слайдеру и его
   слайдам, перестают действовать и переносятся сюда. Их ЧЕТЫРЕ, а не три:
   три в style.css и одно в media.css. Каждое ниже названо исходной строкой.
   ========================================================================== */

/* Перенос 1 из 4 — style.css:1979 (.offer_slider .swiper-slide).
   Слайд тянется по высоте ряда, а не по своему содержимому: без этого
   .offer_item { height: 100% } не от чего считать, и карточки в группе
   разъезжаются по высоте. */
.etrn_tarif_slider .swiper-slide {
	height: auto;
}

/* Перенос 2 из 4 — style.css:2036 (.offer_slider, .offer_slider_sitebar).
   Запас снизу, который вёрстка даёт слайдеру, и компенсирующий отрицательный
   отступ. Переносится ради совпадения геометрии с образцом. */
.etrn_tarif_slider {
	padding: 0 0 120px;
	margin: 0 0 -120px;
}

/* Перенос 3 из 4 — style.css:2062 (.offer_slider .offer_item).
   Карточка занимает высоту слайда целиком — так шесть карточек в видимой
   группе получают одинаковую высоту. */
.etrn_tarif_slider .offer_item {
	height: 100%;
	margin: 0;
}

/* ==========================================================================
   Выделенная карточка тарифа — единственное новое оформление блока

   Приёма визуального выделения одной карточки в вёрстке нет вовсе (факт 8
   задачи 1.1): карточки различаются только цветом фона. Прототип выделял среднюю
   рамкой и бейджем (etrn-prototip.html:54-63); классы с префиксом etrn_ — в вёрстке
   сайта они не встречаются и задеть чужую страницу не могут.

   Выделение держится на ОДНОМ БЕЙДЖЕ. Рамка прототипа убрана по рендеру. Тень
   взамен неё не заводится: существующее значение сайта 0 4px 29px rgba(0,0,0,0.05)
   на карточке практически не читается, а новых значений не вводим.

   Цвета взяты существующими токенами: фон бейджа — var(--color-blue), текст бейджа —
   var(--color-white). Новых переменных не заводим.

   Фон карточки не переопределяется. У прототипа featured-карточка светло-серая
   (#e6e9ec) на фоне соседей #eef0f2 — но это не цвет, а отношение «на шаг темнее
   соседей» внутри его временной серой палитры (etrn-prototip.html:38-42). В боевой
   палитре шага от базового #ffefce (style.css:2048) среди токенов нет. Карточка несёт
   штатный модификатор .blue наравне с остальными — цвета в блоке идут циклом из трёх, —
   а выделяет её бейдж, а не собственный фон.

   position: relative не задаётся — .offer_item позиционирован сам (style.css:2042),
   бейджу этого достаточно.

   Собственных правил у .etrn_tarif_featured не осталось: после удаления рамки класс
   участвует только как предок в двух селекторах ниже. С разметки он при этом НЕ
   снимается — класс несёт смысл «эта карточка выделена» и нужен на интеграции.
   ========================================================================== */

/* Бейдж прижат к верхнему краю карточки и центрирован по ней.
   white-space: nowrap — из прототипа: бейдж не переносится по строкам. */
.etrn_tarif_featured .etrn_tarif_badge {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	padding: 7px 18px;
	border-radius: 20px;
	white-space: nowrap;
	background: var(--color-blue);
	color: var(--color-white);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
}

/* Освобождает место под бейдж: без этого он ложится на .name, которое
   начинается на 30px от верха карточки (padding .offer_item .image,
   style.css:2076). Переопределяется только верхний отступ слота. */
.etrn_tarif_featured .image.tarif {
	padding-top: 56px;
}

/* ==========================================================================
   Адаптив блока 5
   ========================================================================== */

@media (max-width: 767px) {
	/* Перенос 4 из 4 — media.css:932 (.offer_slider внутри max-width: 767px).
	   Ниже 768 вёрстка гасит запас снизу вместе с компенсирующим отступом.
	   Без переноса под нашим слайдером осталась бы невидимая зона 120px,
	   которой у образца на этих ширинах нет. */
	.etrn_tarif_slider {
		padding: 0;
		margin: 0;
	}
}

/* ==========================================================================
   БЛОК 8. Польза для всех участников перевозок — задача 1.9

   Правил у блока нет ни одного — как у блоков 3 и 4.

   Компонент взят как есть с mashinochitaemaya_doverennost.html:346-365:
   content_block > h2 > function_row row > col-12 col-md-6 col-lg-4 >
   function_item > div.image.check_image + div.text (div.name + div.desc).
   Набор классов колонки тот же, что в блоках 3 и 4.

   Первым был собран border_row (markirovka_pod_klyuch.html:747-767) — он подходил
   по структуре, но отклонён по оформлению: рамки не вписались в дизайн страницы.
   Решение принято по рендерам трёх вариантов. Собственного правила ширины нет ни
   у .border_row, ни у .function_row — оба берут ширину из сетки, поэтому смена
   компонента правил за собой не потянула.

   Оформление целиком даёт вёрстка: .function_item — position: relative,
   height: 100%, padding-top 70px (style.css:1752), ниже 768 — 47px
   (media.css:886). Плашка .function_item .text — фон #f8f8f8, скругление 15px,
   padding 50px 27px 40px (style.css:1840), ниже 768 — 35px 20px и скругление 10px
   (media.css:898).

   Круг с галочкой файла не требует и заглушки не несёт: .function_item .image —
   98x98, position: absolute, border-radius 100% (style.css:1760), ниже 768 —
   70x70 (media.css:889); .image.check_image даёт полупрозрачную заливку
   (style.css:1791), ::before — внутренний круг 66x66 с градиентом (style.css:1794),
   ::after — галочка 35x35 из data-URI (style.css:1807). Div остаётся пустым,
   сетевых запросов блок не делает.
   ========================================================================== */

/* ==========================================================================
   БЛОК 9. Работает с контрагентами на любом операторе — задача 1.10

   Правил у блока нет ни одного — как у блоков 3, 4 и 8.

   Компонент взят как есть с elektronnyj_dokumentooborot.html:474-492:
   content_block > purple_block > image_row > (div.info с h2, абзацем, ul и
   btn_row) + div.image.image_medium. Образец выбран потому, что у него тот же
   сюжет — роуминг с операторами ЭДО, — и оттуда же берётся иллюстрация.
   Второй образец, markirovka_pod_klyuch.html:730-744, дал устройство btn_row
   внутри .info.

   h2 у этого блока лежит ВНУТРИ .info, а не над purple_block, как в остальных
   блоках страницы. Так у обоих образцов; своего правила это не требует.

   Оформление целиком даёт вёрстка: .purple_block — padding 60px 35px 60px 70px,
   фон #655ddb, color: white (style.css:2933), ниже 768 — padding 40px 20px
   (media.css:1004). .image_row — flex, space-between, gap 60px (style.css:2955),
   ниже 1200 — flex-wrap: wrap (media.css:326) и justify-content: center
   (media.css:402). Слот .image_row .image.image_medium — flex: 0 0 455px,
   padding 20px 50px (style.css:2974), ниже 768 разворачивается в
   calc(100% - 40px) (media.css:1019). У .info собственного правила в этом
   контексте нет вовсе: .light_block .image_row .info (style.css:3020) на
   purple_block не распространяется.

   Список операторов — обычный ul без класса, как у образца: точку рисует
   ul:not([class]) li::before цветом currentColor (style.css:171), то есть белым
   по наследованию от .purple_block.

   Инлайновый style="justify-content:flex-start" на btn_row
   (etrn-prototip.html:512) НЕ перенесён: .purple_block .btn_row уже несёт
   justify-content: flex-start и margin-top: 40px (style.css:2360). Подтверждено
   замером на одиннадцати ширинах — см. 1.10_blok9.md, проверка 4.

   Иллюстрация — существующий файл img/elektronnyj_dokumentooborot/rouming.svg
   тем же путём, что у образца. Заглушки .etrn_ph в блоке нет: файл уже лежит в
   вёрстке, и подменять его временным прямоугольником нечем и незачем.
   Слот на узких ширинах не гаснет — display: none у .image_row .image нет ни в
   одном медиазапросе, в отличие от .form_row .image блока 6.
   ========================================================================== */

/* ==========================================================================
   БЛОКИ 10а и 10б. Наши преимущества и достижения — задача 1.11

   Правил у блоков нет ни одного — как у блоков 3, 4, 8 и 9. Оба блока лежат в
   ОДНОМ content_block под общим h2: так в прототипе (etrn-prototip.html:522-595)
   и так у образца (markirovka_pod_klyuch.html:953-1035). Якорей два, они оба
   остались: 10а над блоком, 10б внутри — маркером перед accordeon_row.

   БЛОК 10а — function_row row > col-12 col-md-6 col-lg-4 > function_item, взят
   как есть с markirovka_pod_klyuch.html:955-980. Это ТОТ ЖЕ компонент, что в
   блоке 8, в другом штатном варианте: там div.image.check_image, здесь div.count.
   Вариант различает сама вёрстка селектором .function_item:has(.count)
   (style.css:1817, padding 30px вместо 70px), а не наша разметка. Каталог блоков
   это подтверждает: docs/site_audit.md:260 — тип function_item с полем
   type_icon: check / icon / count.

   Оформление 10а целиком даёт вёрстка: .function_item — position: relative,
   height: 100%, padding-top 70px (style.css:1752), для варианта с .count — 30px
   (style.css:1817). Ниже 768 media.css:886 задаёт .function_item padding 47px, но
   до варианта с .count не достаёт: специфичность :has() (0,2,0) выше (0,1,0),
   поэтому там остаётся 30px — подтверждено замером на одиннадцати ширинах.
   Цифра .function_item .count — position: absolute, font-size 55px, градиентная
   заливка текста через background-clip: text (style.css:1819); правил под неё в
   media.css нет, 55px на всех ширинах. Плашка .function_item .text — фон #f8f8f8,
   скругление 15px, padding 50px 27px 40px (style.css:1840), ниже 768 — 35px 20px
   и скругление 10px (media.css:898).

   БЛОК 10б — accordeon_row row > col-12 > accordeon_item > accordeon_item_top,
   взят как есть с markirovka_pod_klyuch.html:981-1034.

   Аккордеон СТАТИЧЕН, и это не упрощение, а выбор компонента. Под одним именем в
   вёрстке живут два разных компонента:
     .accordeon_block — раскрывающийся, единственный на сайте (ochety_mvd.html:347):
       data-single на корне, data-index и aria-expanded на элементе,
       .accordeon_item_panel с ответом, стрелка-шеврон .accordeon_item_top::after
       (style.css:3427) с поворотом при aria-expanded="true" (style.css:3448);
       обслуживается js/main.js:143.
     .accordeon_row — статическая сетка карточек (markirovka_pod_klyuch.html:981):
       без data-*, без aria-expanded, без панели; стрелка погашена правилом
       .accordeon_row .accordeon_item_top::after { content: none } (style.css:3452);
       селектора .accordeon_row в js/main.js нет вовсе.
   Прототип использует accordeon_row, то есть статику. Поэтому раскрывающегося
   поведения мы не делаем, скрипта не пишем и js/etrn.js в задаче не трогаем.

   Оформление 10б целиком даёт вёрстка: .accordeon_item — padding 0 40px, рамка
   var(--color-stroke), скругление 15px, фон белый (style.css:3417), ниже 768 —
   padding 0 20px и скругление 10px (media.css:1109). .accordeon_item_top — flex,
   align-items: center, gap 30px, padding 30px 0 (style.css:3423), ниже 768 — gap
   20px и padding 20px 0 (media.css:1113). .accordeon_item_top .name — flex 0 0
   330px (style.css:3463), ниже 1200 — 100% с переносом .text (media.css:377, 380).

   Слот иконки .accordeon_item_top .image (style.css:3455) — flex: 0 0 54px;
   width: 54px, высоты нет; ниже 768 — 40px (media.css:1117). Это ТЕ ЖЕ значения и
   тот же механизм, что у .advantages_item .image блока 4 (style.css:2669,
   media.css:1064), поэтому слот вёл себя так же, как в блоке 4, и заглушка стояла
   та же. Задача 1.12 подставила в него настоящие иконки образца
   img/markirovka_pod_klyuch/accordeon/icon-1..4.svg (все четыре 54x54) — те самые,
   с габаритом которых совпал замер заглушки на одиннадцати ширинах.

   Курсор над статической карточкой. .accordeon_item_top:hover { cursor: pointer }
   (style.css:3429) задано без учёта варианта, поэтому над карточкой, которая не
   раскрывается, курсор всё равно "рука". Это дефект вёрстки САЙТА, а не нашей
   страницы: он затрагивает Маркировку, Переход на ЭДО и Кадровый ЭДО одинаково.
   Локальная правка здесь сделала бы нашу страницу единственной, где поведение
   иное; чинится одной строкой в общем стиле, но это правка общего файла и
   отдельное решение. Не правим — см. 1.11_bloki10.md.
   ========================================================================== */



/* ==========================================================================
   БЛОК 11. Видимость чекбокса согласия на синем фоне — задача 1.15

   ЕДИНСТВЕННОЕ за этап сознательное расхождение с эталоном вёрстки. До сих пор
   дефекты вёрстки повторялись — курсор-«рука» над статическим .accordeon_row
   (style.css:3429, разбор в 1.11_bloki10.md), — потому что они косметические.
   Здесь другой случай: невидим УПРАВЛЯЮЩИЙ ЭЛЕМЕНТ ФОРМЫ.

   Дефект найден в задаче 1.14, разбор в 1.14_bloki11_12_13.md §8: внутри
   .blue_block чекбокс нарисован цветом фона, на котором стоит.
     фон .blue_block      var(--color-blue) = #0c94ff     style.css:2340
     кольцо, border       1px solid var(--color-blue)     style.css:425
     точка, background    var(--color-blue)               style.css:444
   Контраст 1:1 в ОБОИХ состояниях. Посетитель видит только текст «Даю своё
   согласие…», не понимает, что согласие нужно отметить, и упирается в форму,
   которая не отправляется.

   Правка — двумя существующими токенами, новых цветов не заводим.
   Переопределяется только border-color: толщина и стиль рамки остаются от
   style.css:425.

   Правило живёт в контексте .blue_block и НИГДЕ БОЛЬШЕ. На странице три
   label.checkbox: блок 6 внутри .light_block (фон var(--color-blue-light) —
   чекбокс там виден), блок 11 внутри .blue_block и модалка #feedbackModal
   (фон #ecf5fb, modal.css:43). Правило достаёт ровно один из трёх —
   подтверждено замером на одиннадцати ширинах.

   Специфичность: наши (0,2,4) против (0,1,3) у style.css:419 и :433; плюс
   etrn.css подключён последним (etrn.html:19). !important не нужен.

   На интеграции правило переезжает в стиль темы под тем же селектором и чинит
   все ДЕСЯТЬ страниц, где .checkbox стоит внутри .blue_block, — становясь
   сквозной правкой рядом с четырьмя из tech-task-dev.md §6.
   ========================================================================== */
.blue_block label.checkbox input + span::before {
	border-color: var(--color-white);
}
.blue_block label.checkbox input + span::after {
	background-color: var(--color-white);
}

/* Выделение в текстах страницы — как p b темы: редактор меняет b на strong. */
p strong {
	font-weight: 600;
}