/* ==========================================================================
   Landing — универсальные блоки
   Префикс lp- (landing page). Блоки не завязаны на контент и переиспользуемы.
   ========================================================================== */

.lp {
   --lp-blue: #3e3cbb;       /* фирменный синий (= dark) */
   --lp-blue-dark: #3e3cbb;  /* тёмный оттенок фирменного */
   --lp-blue-deep: #302f91;  /* глубокий (фон hero) */
   --lp-blue-light: #ededfd; /* светлый фон-тинт */
   --lp-accent: #716fee;     /* акцент (светлее базового) */
   --lp-text: #1d1d1d;
   --lp-text-muted: #5a5a5a;
   --lp-gray-bg: #f0f0f0;
   --lp-gray-line: #d8d8d8;
   --lp-danger: #d64545;
   --lp-pink: #f8d7da;
   --lp-radius: 10px;
   --lp-radius-lg: 18px;
   --lp-gap: 24px;
   --lp-maxw: 1240px;
}

.lp {
   color: var(--lp-text);
   font-size: 16px;
   line-height: 1.5;
}

.lp *,
.lp *::before,
.lp *::after {
   box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Изображения — нейтрализация глобального правила
   В шаблоне есть глобальный стиль:
       section.content img { display:block; max-width:100%; margin:20px auto }
   Его специфичность (0,1,2) выше одиночных классов лендинга и сбивала вёрстку
   именно из-за margin:20px auto (лишние 20px по вертикали, auto-поля внутри flex).
   Удвоенный .lp поднимает специфичность до (0,2,1) и обнуляет ТОЛЬКО margin —
   display/max-width намеренно не трогаем, чтобы не перебить компонентные
   ограничения (напр. .lp-qr img { max-width:130px }). Нужные отступы возвращаем
   точечно ниже с приоритетом (0,3,x).
   -------------------------------------------------------------------------- */
.lp.lp img {
   margin: 0;
}

.lp.lp .lp-qr img     { margin: 0 auto 8px; } /* центрирование QR + зазор до подписи */
.lp.lp .lp-note__icon { margin: 0 auto; }     /* центрирование иконки в блоке «Важно» */
.lp.lp .lp-hero__logo { margin-top: auto; }   /* логотип прижат к низу hero-карточки */

.lp__container {
   max-width: var(--lp-maxw);
   margin: 0 auto;
   padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Секция — базовая обёртка
   -------------------------------------------------------------------------- */
.lp-section {
   padding: 56px 0;
   position: relative;
}

.lp-section--tight { padding: 36px 0; }
.lp-section--gray { background: #f7f9fb; }
.lp-section--blue { background: var(--lp-blue-deep); color: #fff; }

/* --------------------------------------------------------------------------
   Заголовок секции с иконкой
   -------------------------------------------------------------------------- */
.lp-heading {
   display: flex;
   align-items: center;
   gap: 16px;
   margin: 0 0 28px;
}

/* Иконка kiosk.png у ВСЕХ заголовков lp-heading — через ::before, без правки разметки.
   aspect-ratio 125/135 = пропорции файла; height чуть больше шрифта заголовка;
   -6px снизу — оптическая подгонка базовой линии. */
.lp-heading::before {
   content: "";
   flex: 0 0 auto;
   height: clamp(26px, 3vw, 40px);
   aspect-ratio: 125 / 135;
   margin-bottom: -6px;
   background: url("/templates/tse/img/lp/kiosk.png") center / contain no-repeat;
}

.lp-heading__text {
   margin: 0;
   font-size: clamp(22px, 2.6vw, 34px);
   font-weight: 400;
   line-height: 1.2;
   text-transform: uppercase;
   letter-spacing: .2px;
}

.lp-heading__text b,
.lp-heading__text strong,
.lp-heading__accent {
   color: var(--lp-blue);
   font-weight: 400;
}

/* Бейдж этапа слева от заголовка */
.lp-heading__badge {
   flex: 0 0 auto;
   background: var(--lp-blue-dark);
   color: #fff;
   font-weight: 700;
   font-size: 17px;
   padding: 12px 22px;
   border-radius: 4px;
   text-transform: uppercase;
   letter-spacing: .5px;
}

/* --------------------------------------------------------------------------
   Hero — титульный экран
   -------------------------------------------------------------------------- */
.lp-hero {
   background: var(--lp-blue-dark);
   padding: 20px;
   position: relative;
   overflow: hidden;
}

.lp-hero::after {
   content: '';
   position: absolute;
   right: -8%;
   bottom: -30%;
   width: 46%;
   padding-top: 46%;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,.05));
   pointer-events: none;
}

.lp-hero__card {
   position: relative;
   z-index: 1;
   background: #fff;
   border-radius: var(--lp-radius-lg);
   padding: clamp(32px, 6vw, 90px);
   max-width: 78%;
   min-height: 60vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.lp-hero__title {
   margin: 0;
   color: var(--lp-blue);
   /* −10% от clamp(22px, 3.2vw, 40px) */
   font-size: clamp(19.8px, 2.88vw, 36px);
   font-weight: 400;
   line-height: 1.28;
   text-transform: uppercase;
}

.lp-hero__logo {
   margin-top: auto;
   padding-top: 48px;
   width: 190px;
   height: auto;
}

/* --------------------------------------------------------------------------
   Карточка-цитата (документ + текст закона)
   -------------------------------------------------------------------------- */
.lp-quote {
   display: flex;
   gap: 26px;
   align-items: flex-start;
}

.lp-quote__icon {
   flex: 0 0 auto;
   width: 96px;
   height: auto;
   opacity: .85;
}

/* Модификатор: слева — изображение-документ почти во всю высоту блока цитаты.
   Обёртка __aside тянется через align-items:stretch (у div растягивание надёжнее,
   чем у img), а картинка внутри занимает height:100% с сохранением пропорций. */
.lp-quote--doc {
   align-items: stretch;
}

.lp-quote__aside {
   flex: 0 0 auto;
   display: flex;
   align-items: flex-start;
}

/* (0,3,0) — перебиваем глобальный max-width:100% и держим высоту по блоку */
.lp.lp .lp-quote__doc {
   height: 100%;
   width: auto;
   object-fit: contain;
   object-position: top center;
}

.lp-quote__body p {
   margin: 0 0 10px;
}

.lp-quote__source {
   color: var(--lp-text-muted);
   font-size: 14px;
}

/* --------------------------------------------------------------------------
   Разделительная линия
   -------------------------------------------------------------------------- */
.lp-divider {
   height: 4px;
   background: var(--lp-blue);
   border: 0;
   margin: 40px 0;
}

/* --------------------------------------------------------------------------
   Двухколоночная раскладка «текст + картинка»
   -------------------------------------------------------------------------- */
.lp-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center;
}

.lp-split--wide-left { grid-template-columns: 1.4fr 1fr; }
.lp-split--wide-right { grid-template-columns: 1fr 1.4fr; }

.lp-split__media img {
   width: 100%;
   height: auto;
   display: block;
}

/* --------------------------------------------------------------------------
   Списки — маркеры (буллеты и нумерация) отдаём теме сайта.
   Кастомные квадратные буллеты и counter убраны: <ul class="lp-list"> и
   <ol class="lp-list lp-list--numbered"> используют нативные маркеры темы.
   Оставляем только межстрочный ритм пунктов.
   -------------------------------------------------------------------------- */
.lp-list li {
   margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Сетка карточек
   -------------------------------------------------------------------------- */
.lp-grid {
   display: grid;
   gap: var(--lp-gap);
}

.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Карточка-факт (крупная цифра + подпись)
   -------------------------------------------------------------------------- */
.lp-fact {
   background: var(--lp-gray-bg);
   border-radius: var(--lp-radius);
   padding: 28px 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

.lp-fact__value {
   color: var(--lp-blue);
   font-size: 64px;
   font-weight: 300;
   line-height: 1;
   margin-bottom: 18px;
}

.lp-fact__value small {
   font-size: 24px;
   font-weight: 400;
}

.lp-fact__media {
   height: 76px;
   margin-bottom: 18px;
   display: flex;
   align-items: center;
}

.lp-fact__media img {
   max-height: 100%;
   width: auto;
}

.lp-fact__text {
   font-size: 14px !important; /* !important — тема сайта перебивает размер */
   line-height: 1.45;
   color: var(--lp-text);
}

/* --------------------------------------------------------------------------
   Плашка нормативного акта (угловой бейдж)
   -------------------------------------------------------------------------- */
.lp-tag {
   display: inline-block;
   background: var(--lp-blue-dark);
   color: #fff;
   font-weight: 700;
   font-size: 18px;
   padding: 10px 20px;
   border-radius: 4px;
}

.lp-tag--corner {
   position: absolute;
   top: 0;
   right: 20px;
}

/* Строка-раскладка: контент слева, элемент (напр. тег акта) прижат вправо */
.lp-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
}

.lp-between > .lp-tag { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Панель: синяя и серая (нормативное регулирование)
   -------------------------------------------------------------------------- */
.lp-panel {
   border-radius: var(--lp-radius-lg);
   padding: 40px 36px;
   height: 100%;
   display: flex;
   align-items: center;
}

.lp-panel--blue {
   background: var(--lp-blue);
   color: #fff;
   text-align: center;
}

.lp-panel--gray {
   background: var(--lp-gray-bg);
}

.lp-panel p { margin: 0 0 10px; }
.lp-panel p:last-child { margin-bottom: 0; }

/* Стрелка между панелями */
.lp-panel-arrow {
   position: relative;
}

.lp-panel-arrow::before {
   content: '';
   position: absolute;
   left: -26px;
   top: 50%;
   transform: translateY(-50%);
   border-style: solid;
   border-width: 26px 0 26px 22px;
   border-color: transparent transparent transparent var(--lp-blue);
}

/* --------------------------------------------------------------------------
   Блок «Важно» — метка + контент
   -------------------------------------------------------------------------- */
.lp-note {
   display: grid;
   grid-template-columns: 190px 1fr;
   gap: 28px;
   align-items: start;
   margin-bottom: 36px;
}

.lp-note__side {
   text-align: center;
}

.lp-note__label {
   display: inline-block;
   background: var(--lp-blue);
   color: #fff;
   font-weight: 700;
   font-size: 20px;
   padding: 12px 26px;
   border-radius: 6px;
   margin-bottom: 16px;
}

.lp-note__icon {
   display: block;
   margin: 0 auto;
   max-width: 130px;
   height: auto;
}

.lp-note__body ol {
   margin: 0;
   padding-left: 20px;
}

.lp-note__body li {
   margin-bottom: 16px;
}

.lp-note__body li:last-child { margin-bottom: 0; }

.lp-date {
   color: var(--lp-accent);
   font-weight: 700;
}

/* --------------------------------------------------------------------------
   Схема-процесс (цепочка шагов со стрелками)
   -------------------------------------------------------------------------- */
.lp-flow {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.lp-flow__step {
   flex: 1 1 150px;
   min-width: 140px;
   border: 2px solid var(--lp-blue);
   border-radius: var(--lp-radius);
   padding: 22px 16px;
   text-align: center;
   font-weight: 700;
   background: #fff;
}

.lp-flow__step--plain {
   border: 0;
   background: none;
   font-weight: 700;
}

.lp-flow__step--muted {
   border: 0;
   background: var(--lp-gray-bg);
}

.lp-flow__step--solid {
   border: 0;
   background: var(--lp-blue);
   color: #fff;
}

.lp-flow__step small {
   display: block;
   font-weight: 400;
   font-size: 13px;
   color: var(--lp-text-muted);
}

.lp-flow__step--solid small { color: rgba(255,255,255,.85); }

.lp-flow__arrow {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   min-width: 92px;
   text-align: center;
   font-size: 12px;
   line-height: 1.25;
   color: var(--lp-text-muted);
}

.lp-flow__arrow::after {
   content: '';
   display: block;
   width: 100%;
   height: 2px;
   background: #b9b9b9;
   position: relative;
}

.lp-flow__arrow span { display: block; }

/* Модификатор: компактная схема — короче стрелки, меньше шрифт и паддинги,
   чтобы длинная цепочка влезала на десктопе в один экран по ширине. */
.lp-flow--compact { gap: 4px; }

.lp-flow--compact .lp-flow__step {
   flex: 1 1 120px;
   min-width: 104px;
   padding: 12px 10px;
   font-size: 13px;
}

.lp-flow--compact .lp-flow__arrow {
   min-width: 40px;
   font-size: 11px;
}

/* --------------------------------------------------------------------------
   Галерея примеров (фото + подпись)
   -------------------------------------------------------------------------- */
.lp-cards {
   display: grid;
   gap: 20px;
}

.lp-card {
   display: flex;
   flex-direction: column;
}

.lp-card__media {
   border-radius: 6px;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background: var(--lp-gray-bg);
}

.lp-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.lp-card__caption {
   margin-top: 12px;
   font-size: 13px !important; /* !important — тема сайта перебивает размер */
   line-height: 1.4;
   text-align: center;
   color: var(--lp-text);
}

/* Карточка-заглушка с логотипом акта */
.lp-card--placeholder {
   background: var(--lp-gray-bg);
   border-radius: var(--lp-radius);
   align-items: center;
   justify-content: center;
   padding: 24px;
   text-align: center;
}

/* --------------------------------------------------------------------------
   Контакты
   -------------------------------------------------------------------------- */
.lp-contacts__list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.lp-contacts__item {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 26px;
}

.lp-contacts__ico {
   flex: 0 0 auto;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--lp-blue-dark);
}

.lp-contacts__ico svg {
   width: 100%;
   height: 100%;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.6;
}

.lp-contacts__label {
   font-size: 15px;
   color: var(--lp-text);
}

.lp-contacts__value {
   display: block;
   font-size: 19px;
   font-weight: 700;
   color: var(--lp-blue);
   text-decoration: none;
}

.lp-contacts__value:hover { text-decoration: underline; }

/* QR-блок */
.lp-qr {
   text-align: center;
}

.lp-qr img {
   width: 100%;
   max-width: 130px;
   height: auto;
   display: block;
   margin: 0 auto 8px;
}

.lp-qr__caption {
   font-size: 14px;
   line-height: 1.35;
}

.lp-qr__caption a {
   color: var(--lp-blue);
   word-break: break-all;
   font-size: 11px;
}

/* --------------------------------------------------------------------------
   Ссылка-документ
   -------------------------------------------------------------------------- */
.lp-doclink {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   background: #fff;
   border-left: 4px solid var(--lp-blue);
   padding: 18px 22px;
}

/* ВРЕМЕННО СКРЫТО — уточняется у заказчика, нужен ли блок lp-doclink.
   Чтобы вернуть — удалить это правило. */
.lp-doclink {
   display: none !important;
}

.lp-doclink__icon {
   flex: 0 0 auto;
   width: 78px;
   height: auto;
}

.lp-doclink a {
   color: var(--lp-blue);
   word-break: break-word;
}

/* --------------------------------------------------------------------------
   Вспомогательные утилиты
   -------------------------------------------------------------------------- */
.lp-mb-0 { margin-bottom: 0 !important; }
.lp-mb-sm { margin-bottom: 12px !important; }
.lp-mb-md { margin-bottom: 24px !important; }
.lp-mt-md { margin-top: 24px !important; }
.lp-text-blue { color: var(--lp-blue); }
.lp-text-center { text-align: center; }
.lp-text-sm { font-size: 14px; }
.lp-strong-blue { color: var(--lp-blue); font-weight: 700; }

.lp-subhead {
   font-size: clamp(19px, 2vw, 26px);
   font-weight: 400;
   margin: 0 0 20px;
   text-transform: uppercase;
}

.lp-subhead--blue { color: var(--lp-blue); }

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
   .lp-grid--4 { grid-template-columns: repeat(2, 1fr); }
   .lp-grid--3 { grid-template-columns: repeat(2, 1fr); }
   .lp-hero__card { max-width: 100%; }
   .lp-split,
   .lp-split--wide-left,
   .lp-split--wide-right { grid-template-columns: 1fr; }
   .lp-panel-arrow::before { display: none; }
   .lp-flow__arrow { min-width: 70px; }
}

@media (max-width: 640px) {
   .lp-section { padding: 40px 0; }
   .lp-grid--2,
   .lp-grid--3,
   .lp-grid--4 { grid-template-columns: 1fr; }
   .lp-note { grid-template-columns: 1fr; }
   .lp-note__side { display: flex; align-items: center; gap: 16px; text-align: left; }
   .lp-note__label { margin-bottom: 0; }
   .lp.lp .lp-note__icon { max-width: 80px; margin: 0; }
   .lp-quote { flex-direction: column; gap: 16px; }
   .lp-quote__icon { width: 70px; }
   /* в колонке документ не тянем на всю высоту, показываем сверху компактно */
   .lp-quote--doc { align-items: center; }
   .lp.lp .lp-quote__doc { height: auto; max-height: 220px; }
   .lp-heading { flex-wrap: wrap; gap: 12px; }
   .lp-flow { flex-direction: column; align-items: stretch; }
   .lp-flow__arrow {
      width: 100%;
      min-width: 0;
      padding: 6px 0;
   }
   .lp-flow__arrow::after {
      width: 2px;
      height: 22px;
      margin: 0 auto;
   }
   .lp-fact__value { font-size: 52px; }
}