/* ==========================================================================
   Мобильная версия баннера

   Файл подключается после main.css, поэтому правила с тем же
   специфичным селектором перекрывают базовые стили баннера.
   Классы banner--m-* соответствуют полям banner_mobile_* в панели.
   ========================================================================== */

/* Скрываем мобильный баннер на широких экранах. */
.banner--mobile {
  display: none;
}

/* На телефоне показываем мобильный баннер вместо десктопного.
   Точка перелома 767px — та же, что у видимости блоков (responsive.css),
   иначе на ширине 768px правила сайта и баннера противоречат друг другу. */
@media (max-width: 767px) {
  .banner--desktop-off {
    display: none;
  }
  .banner--mobile {
    display: block;
  }
}

/* --- Базовые значения для мобильного варианта -------------------------- */
.banner--mobile {
  --banner-image-width: 34%;
  --banner-padding: 26px 30px;
  --banner-padding-y: 26px;
  --banner-height: 0px;
  --banner-media-max-height: none;
}

/* --- Внутренние отступы ----------------------------------------------- */
.banner--mobile.banner--m-padding-none { --banner-padding: 0; --banner-padding-y: 0px; }
.banner--mobile.banner--m-padding-sm { --banner-padding: 16px 22px; --banner-padding-y: 16px; }
.banner--mobile.banner--m-padding-md { --banner-padding: 26px 30px; --banner-padding-y: 26px; }
.banner--mobile.banner--m-padding-lg { --banner-padding: 40px 46px; --banner-padding-y: 40px; }

/* --- Высота ------------------------------------------------------------ */
.banner--mobile.banner--m-height-auto { --banner-height: 0px; --banner-media-max-height: none; }
.banner--mobile.banner--m-height-sm { --banner-height: 280px; --banner-media-max-height: calc(280px - 2 * var(--banner-padding-y)); }
.banner--mobile.banner--m-height-md { --banner-height: 400px; --banner-media-max-height: calc(400px - 2 * var(--banner-padding-y)); }
.banner--mobile.banner--m-height-lg { --banner-height: 520px; --banner-media-max-height: calc(520px - 2 * var(--banner-padding-y)); }
.banner--mobile.banner--m-height-screen { --banner-height: 70vh; --banner-media-max-height: calc(70vh - 2 * var(--banner-padding-y)); }
.banner--mobile.banner--m-layout-background.banner--m-height-auto { --banner-height: 360px; }

/* На телефоне текст не обрезается: фиксированная высота — только минимум. */
.banner--mobile .banner__slide {
  height: auto;
  min-height: var(--banner-height);
  overflow: visible;
}
.banner--mobile.banner--m-custom-height .banner__slide {
  height: var(--banner-m-height);
  overflow: hidden;
}

/* --- Положение изображения --------------------------------------------- */
.banner--mobile.banner--m-layout-image-right .banner__grid { flex-direction: row-reverse; }
.banner--mobile.banner--m-layout-image-left .banner__grid { flex-direction: row; }
.banner--mobile.banner--m-layout-image-top .banner__grid {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.banner--mobile.banner--m-layout-image-top .banner__media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.banner--mobile.banner--m-layout-image-none .banner__media { display: none; }
.banner--mobile.banner--m-no-image .banner__media { display: none; }

/* --- Ширина и пропорции изображения ------------------------------------ */
.banner--mobile.banner--m-image-width-sm { --banner-image-width: 26%; }
.banner--mobile.banner--m-image-width-md { --banner-image-width: 34%; }
.banner--mobile.banner--m-image-width-lg { --banner-image-width: 44%; }
.banner--mobile.banner--m-image-width-xl { --banner-image-width: 52%; }

.banner--mobile.banner--m-image-ratio-auto .banner__media { max-height: 340px; }
.banner--mobile.banner--m-image-ratio-auto .banner__media img {
  height: auto;
  max-height: 340px;
  object-fit: contain;
}
.banner--mobile.banner--m-image-ratio-16-9 .banner__media { aspect-ratio: 16 / 9; }
.banner--mobile.banner--m-image-ratio-4-3 .banner__media { aspect-ratio: 4 / 3; }
.banner--mobile.banner--m-image-ratio-1-1 .banner__media { aspect-ratio: 1 / 1; }
.banner--mobile.banner--m-image-ratio-3-4 .banner__media { aspect-ratio: 3 / 4; }
.banner--mobile.banner--m-image-ratio-21-9 .banner__media { aspect-ratio: 21 / 9; }

.banner--mobile.banner--m-image-shape-rect .banner__media { border-radius: 0; }
.banner--mobile.banner--m-image-shape-rounded .banner__media { border-radius: var(--radius-lg); }
.banner--mobile.banner--m-image-shape-circle .banner__media {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.banner--mobile.banner--m-image-fit-cover { --banner-image-fit: cover; }
.banner--mobile.banner--m-image-fit-contain { --banner-image-fit: contain; }
.banner--mobile.banner--m-image-position-center { --banner-image-position: center; }
.banner--mobile.banner--m-image-position-top { --banner-image-position: top; }
.banner--mobile.banner--m-image-position-bottom { --banner-image-position: bottom; }
.banner--mobile.banner--m-image-position-left { --banner-image-position: left; }
.banner--mobile.banner--m-image-position-right { --banner-image-position: right; }

/* --- Выравнивание ------------------------------------------------------- */
.banner--mobile.banner--m-align-center .banner__content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.banner--mobile.banner--m-align-left .banner__content { text-align: left; }
.banner--mobile.banner--m-align-right .banner__content {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
.banner--mobile.banner--m-align-center .banner__button { justify-content: center; }
.banner--mobile.banner--m-align-left .banner__button { justify-content: flex-start; }
.banner--mobile.banner--m-align-right .banner__button { justify-content: flex-end; }

.banner--mobile.banner--m-valign-start .banner__grid { align-items: flex-start; }
.banner--mobile.banner--m-valign-center .banner__grid { align-items: center; }
.banner--mobile.banner--m-valign-end .banner__grid { align-items: flex-end; }
.banner--mobile.banner--m-layout-image-top .banner__grid { align-items: stretch; }

/* --- Фон и затемнение ---------------------------------------------------- */
.banner--mobile.banner--m-bg-soft .banner__wrap {
  background: linear-gradient(135deg, rgba(198, 255, 61, 0.055), rgba(255, 255, 255, 0.015));
}
.banner--mobile.banner--m-bg-solid .banner__wrap { background: var(--surface); }
.banner--mobile.banner--m-bg-none .banner__wrap { background: transparent; }

.banner--mobile.banner--m-layout-background .banner__slide {
  min-height: var(--banner-height, 360px);
  align-items: center;
}
.banner--mobile.banner--m-layout-background .banner__grid {
  position: static;
  z-index: auto;
  min-height: 0;
}
.banner--mobile.banner--m-layout-background .banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
  align-self: stretch;
  border-radius: 0;
}
.banner--mobile.banner--m-layout-background .banner__media img {
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.banner--mobile.banner--m-layout-background .banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 10, 13, 0.92) 0%, rgba(7, 10, 13, 0.6) 55%, rgba(7, 10, 13, 0.25) 100%);
}
.banner--mobile.banner--m-layout-background .banner__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.banner--mobile.banner--m-overlay-none .banner__media::after { opacity: 0; }
.banner--mobile.banner--m-overlay-soft .banner__media::after { opacity: 0.88; }
.banner--mobile.banner--m-overlay-strong .banner__media::after { opacity: 1; }

/* --- Кнопки ------------------------------------------------------------- */
.banner--mobile.banner--m-button-accent .banner__button .btn {
  background: var(--button-bg, var(--accent));
  color: var(--button-text, #0b1005);
}
.banner--mobile.banner--m-button-ghost .banner__button .btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.banner--mobile.banner--m-button-outline .banner__button .btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.banner--mobile.banner--m-button-none .banner__link {
  color: var(--accent);
  text-decoration: underline;
  font-size: 13px;
}

/* --- На всю ширину ------------------------------------------------------ */
.banner--mobile.banner--m-full .banner__wrap {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.banner--mobile.banner--m-full .banner__slide {
  padding-inline: max(20px, calc((100vw - var(--container)) / 2));
}

/* --- Адаптивные правки базовых правил ------------------------------------ */
@media (max-width: 767px) {
  .banner--mobile .banner__grid { gap: 22px; }
  .banner--mobile .banner__media { align-self: center; }
  .banner--mobile .banner__content { max-width: none; }
  .banner--mobile .banner__arrow { display: none; }
}

/* --- Точные размеры, заданные произвольно -------------------------------- */
/* Правила идут последними, чтобы перекрывать предустановленные значения
   (например, пропорции 16-9 не должны побеждать заданные вручную 4-3). */
.banner--mobile.banner--m-custom-height { --banner-height: var(--banner-m-height); }
.banner--mobile.banner--m-custom-width .banner__wrap {
  width: var(--banner-m-width);
  max-width: var(--banner-m-width);
}
.banner--mobile.banner--m-custom-ratio .banner__media { aspect-ratio: var(--banner-m-ratio); }