/* ============================================================
   Раскладка: секции, колонки, сетки
   ============================================================ */
.section {
  padding-block: 40px;
}

.section--tight {
  padding-block: 20px;
}

/* Заголовочные секции (только h2) — 1:1 с оригиналом (Elementor default section padding 10px) */
.section--heading {
  padding-block: 10px;
}

.section--soft {
  background-color: var(--color-bg-soft);
}

.section--warm {
  background-color: var(--color-bg-warm);
}

.section--brand {
  background-color: var(--color-brand);
}

.section__inner + .section__inner {
  margin-top: var(--widget-gap);
}

/* Небольшой отступ над мобильной кнопкой-разделом («Читать все…»): кнопка видна
   только на ≤1024, поэтому и отступ — только там (на десктопе обёртка пустая). */
@media (max-width: 1024px) {
  .section__inner--mob {
    margin-top: var(--widget-gap);
  }
}

/* Флекс-раскладки */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--widget-gap);
}

.row--center {
  align-items: center;
}

.row--between {
  justify-content: space-between;
  align-items: center;
}

.row--start {
  align-items: flex-start;
}

.col {
  flex: 1 1 0;
  min-width: 0;
}

.col--half {
  flex: 0 0 calc(50% - var(--widget-gap) / 2);
}

/* Асимметричная раскладка 34% / 66% (публикации, новости, видео) */
.col--narrow {
  flex: 0 0 calc(34% - var(--widget-gap) * 0.34);
  max-width: calc(34% - var(--widget-gap) * 0.34);
}

.col--narrow img {
  border-radius: var(--radius-card);
}

.col--wide {
  flex: 0 0 calc(66% - var(--widget-gap) * 0.66);
  max-width: calc(66% - var(--widget-gap) * 0.66);
  min-width: 0;
}

.col--third {
  flex: 0 0 calc(33.333% - var(--widget-gap) / 3 * 2);
}

.col--quarter {
  flex: 0 0 calc(25% - var(--widget-gap) / 4 * 3);
}

/* Сетки */
.grid {
  display: grid;
  gap: var(--widget-gap);
}

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

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

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

.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Обёртка произвольного контента страницы.
   Верхний отступ (`--page-pad`) — единый для всех страниц и брейкпоинтов (эталон — «Энергетика»).
   Раньше у /press/, /news/, /video/ были модификаторы `--gap`/`--gap-xl` (100/120px),
   из-за чего отступ главного заголовка расходился — убраны.
   Горизонтальный отступ главного заголовка тоже единый: страницы с `.page-title` используют
   широкий контейнер (`.container--wide`, боковой отступ 10px) — как в оригинале, где все
   такие страницы были во всю ширину с одинаковым отступом. */
.page-content {
  padding-block: var(--page-pad);
}

/* --- Одинаковый отступ от последнего блока контента до подвала (все страницы) --- */
#main {
  padding-bottom: var(--page-bottom-gap);
}

/* Последний блок страницы не добавляет собственных нижних отступов:
   расстояние до подвала задаётся только через `--page-bottom-gap`. */
#main > :last-child,
#main > :last-child > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Гасим «хвостовые» нижние margin'ы вложенных элементов (p / ul / h*) в последнем блоке. */
#main > :last-child *:last-child {
  margin-bottom: 0;
}

/* Трек карусели в последнем блоке: без нижнего padding (иначе +10px к отступу до подвала). */
#main > :last-child .carousel__track {
  padding-bottom: 0;
}

/* --- Одинаковые интервалы между смысловыми блоками (Главная, «Управление наличностью») ---
   Требование: интервалы между блоками одинаковы и равны отступу до подвала
   (`--page-bottom-gap`). Смысловой блок = группа секций (заголовок + контент + CTA),
   которые визуально читаются как один блок. Разметка — классами на секциях:
     `.blk`      — начало блока: общий интервал сверху, равный отступу до подвала;
     `.blk-cont` — продолжение блока: внутренний интервал `--blk-inline-gap`;
     `.blk-sub`  — подблок внутри блока: у него есть собственный подзаголовок, поэтому
                   он отделён заметнее абзацев, но слабее блоков (`--blk-subgap`);
     `.blk-flat` — снять только нижний padding (первый/особый блок: его padding
                   не должен добавляться к интервалу до следующего блока).
   Вертикальный padding секций-блоков обнуляется, поэтому видимый интервал = margin
   (margin'ы соседних секций схлопываются, берётся больший — им и является отступ блока). */
.main--blocks > .blk,
.main--blocks > .blk-cont,
.main--blocks > .blk-sub {
  padding-block: 0;
}

.main--blocks > .blk {
  margin-top: var(--page-bottom-gap);
}

.main--blocks > .blk-cont {
  margin-top: var(--blk-inline-gap);
}

.main--blocks > .blk-sub {
  margin-top: var(--blk-subgap);
}

.main--blocks > .blk-flat {
  padding-bottom: 0;
}

/* Хвостовые нижние margin'ы внутри блока не схлопываются (флекс/грид),
   поэтому добавлялись бы к интервалу между блоками. Снимаем их у последних
   элементов любого уровня — видимый интервал становится ровно `--page-bottom-gap`. */
.main--blocks > .blk *:last-child,
.main--blocks > .blk-cont *:last-child,
.main--blocks > .blk-sub *:last-child,
.main--blocks > .blk-flat *:last-child {
  margin-bottom: 0;
}

/* Последний элемент блока, который не является `:last-child` из-за скрытых
   (`only-mob`/`d-none`) элементов, помечается классом `.blk-last`. */
.main--blocks .blk-last {
  margin-bottom: 0;
}

/* Нижний padding трека карусели не должен добавляться к интервалу до след. блока. */
.main--blocks > .blk .carousel__track,
.main--blocks > .blk-cont .carousel__track,
.main--blocks > .blk-sub .carousel__track,
.main--blocks > .blk-flat .carousel__track {
  padding-bottom: 0;
}

/* --- Межсекционные отступы (margin-top секций, 1:1 с post-*.css оригинала) --- */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }

/* Зазор между соседними единицами контента (виджетами) = 20px на ВСЕХ брейкпоинтах —
   дефолтный зазор виджетов Elementor. В отличие от `.mt-20` не переопределяется на mobile. */
.mt-widget { margin-top: var(--widget-gap); }

@media (max-width: 767px) {
  .mt-10 { margin-top: 10px; }
  .mt-20 { margin-top: 10px; }
  .mt-30 { margin-top: 30px; }
  .mt-40 { margin-top: 40px; }
  .mt-60 { margin-top: 60px; }
  .mt-70 { margin-top: 60px; }
  .mt-80 { margin-top: 80px; }
  .mt-90 { margin-top: 60px; }
  .mt-100 { margin-top: 80px; }
  .mt-120 { margin-top: 80px; }
}

/* --- Секция «Свидетельство» (bankomat): колонки 50/15/20/15 --- */
.row--cert {
  display: grid;
  grid-template-columns: 50% 15% 20% 15%;
  align-items: start;
}

.row--cert img {
  max-width: 100%;
}

/* Ссылка-обёртка картинки свидетельства + hover-анимация `grow`.
   1:1 с оригиналом (Elementor):
     .elementor-animation-grow { transition-duration: .3s; transition-property: transform }
     :hover/:focus/:active { transform: scale(1.1) }
   Курсор `pointer` — потому что клик открывает превью (lightbox). */
.cert-media {
  display: block;
  cursor: pointer;
}

.cert-media img {
  transition: transform 0.3s;
}

.cert-media:hover img,
.cert-media:focus-visible img {
  transform: scale(1.1);
}

/* Зазор «текст → кнопка». В оригинале кнопка стоит на 20px ниже текстового виджета
   (виджетный зазор Elementor), но у нас нижний margin последнего абзаца сбрасывался
   правилом `.blk *:last-child` → зазор был 0. Требование заказчика — больше. */
.row--cert .btn {
  margin-top: var(--widget-gap);
}

/* Картинка свидетельства поднята вверх — как в оригинале: её верх ≈ верх заголовка
   блока (+15px), а не «низ заголовка + 30px». Подъём = −(высота заголовка + 15px);
   высота одной строки .section-title--md — 50px (desktop) / 41px (tablet).
   Отрицательный margin (а не transform) — чтобы укорачивался и сам блок, как в оригинале. */
.cert-media {
  margin-top: -65px;
}

@media (max-width: 1024px) {
  .cert-media {
    margin-top: -56px;
  }
}

/* Mobile: элементы становятся колонкой (текст → кнопка → картинка) — зазор
   «кнопка → картинка» больше (требование заказчика); подъём отключается. */
@media (max-width: 767px) {
  .cert-media {
    margin-top: var(--widget-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-media img {
    transition: none;
  }

  .cert-media:hover img,
  .cert-media:focus-visible img {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .row--cert {
    grid-template-columns: 50% 10% 30% 10%;
  }
}

@media (max-width: 767px) {
  .row--cert {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: 24px;
  }

  .row {
    flex-direction: column;
  }

  .col,
  .col--half,
  .col--narrow,
  .col--wide,
  .col--third,
  .col--quarter {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: 1fr;
  }
}