/* Hero-баннеры (Figma-экспорт Влада, 10.07).
   Композиция баннера: слева пусто под текст, справа 3D-объект.
   Подключается точечно на страницах с data-баннером; общий styles.css не трогаем.

   Использование на странице:
     <link rel="stylesheet" href="../core/css/banners.css">
     <section class="hero svc-hero has-banner" data-banner="seo">

   Баннер рисуется псевдоэлементом .wrap::after — разметку страниц не трогаем.

   ВАЖНО: пути к картинкам задаются ЗДЕСЬ, а не в style="" на странице.
   url() внутри CSS-переменной, объявленной в inline-style, браузер резолвит
   относительно файла стилей, а не документа — путь уезжал в /core/css/images/
   и картинка не грузилась. Объявляем переменные в этом файле: пути считаются
   от core/css/ и работают одинаково локально и на проде. */

.svc-hero.has-banner[data-banner] .wrap { position: relative; }

/* ── Карта баннеров: id страницы -> файлы ── */
.svc-hero[data-banner="seo"]            { --mm-banner: url(../../images/banners/seo.webp);            --mm-banner-m: url(../../images/banners/seo-m.webp) }
.svc-hero[data-banner="geo"]            { --mm-banner: url(../../images/banners/geo.webp);            --mm-banner-m: url(../../images/banners/geo-m.webp) }
.svc-hero[data-banner="context"]        { --mm-banner: url(../../images/banners/context.webp);        --mm-banner-m: url(../../images/banners/context-m.webp) }
.svc-hero[data-banner="sites"]          { --mm-banner: url(../../images/banners/sites.webp);          --mm-banner-m: url(../../images/banners/sites-m.webp) }
.svc-hero[data-banner="bitrix24"]       { --mm-banner: url(../../images/banners/bitrix24.webp);       --mm-banner-m: url(../../images/banners/bitrix24-m.webp) }
.svc-hero[data-banner="smm"]            { --mm-banner: url(../../images/banners/smm.webp);            --mm-banner-m: url(../../images/banners/smm-m.webp) }
.svc-hero[data-banner="serm"]           { --mm-banner: url(../../images/banners/serm.webp);           --mm-banner-m: url(../../images/banners/serm-m.webp) }
.svc-hero[data-banner="audit"]          { --mm-banner: url(../../images/banners/audit.webp);          --mm-banner-m: url(../../images/banners/audit-m.webp) }
.svc-hero[data-banner="proizvodstvo"]   { --mm-banner: url(../../images/banners/proizvodstvo.webp);   --mm-banner-m: url(../../images/banners/proizvodstvo-m.webp) }
.svc-hero[data-banner="dealers"]        { --mm-banner: url(../../images/banners/dealers.webp);        --mm-banner-m: url(../../images/banners/dealers-m.webp) }
.svc-hero[data-banner="stroymaterialy"] { --mm-banner: url(../../images/banners/stroymaterialy.webp); --mm-banner-m: url(../../images/banners/stroymaterialy-m.webp) }
/* Баннеры Нины 16.07 (чёрно-золотые 3D) */
.svc-hero[data-banner="uslugi"]         { --mm-banner: url(../../images/banners/uslugi.webp);         --mm-banner-m: url(../../images/banners/uslugi-m.webp) }
.svc-hero[data-banner="vakansii"]       { --mm-banner: url(../../images/banners/vakansii.webp);       --mm-banner-m: url(../../images/banners/vakansii-m.webp) }
.svc-hero[data-banner="index"]          { --mm-banner: url(../../images/banners/index.webp);          --mm-banner-m: url(../../images/banners/index-m.webp) }
.svc-hero[data-banner="metal"]          { --mm-banner: url(../../images/banners/metal.webp);          --mm-banner-m: url(../../images/banners/metal-m.webp) }
.svc-hero[data-banner="cases"]          { --mm-banner: url(../../images/banners/cases.webp);          --mm-banner-m: url(../../images/banners/cases-m.webp) }
.svc-hero[data-banner="case"]           { --mm-banner: url(../../images/banners/case.webp);           --mm-banner-m: url(../../images/banners/case-m.webp) }
.svc-hero[data-banner="blog"]           { --mm-banner: url(../../images/banners/blog.webp);           --mm-banner-m: url(../../images/banners/blog-m.webp) }
.svc-hero[data-banner="about"]          { --mm-banner: url(../../images/banners/about.webp);          --mm-banner-m: url(../../images/banners/about-m.webp) }
.svc-hero[data-banner="contacts"]       { --mm-banner: url(../../images/banners/contacts.webp);       --mm-banner-m: url(../../images/banners/contacts-m.webp) }
.svc-hero[data-banner="prices"]         { --mm-banner: url(../../images/banners/prices.webp);         --mm-banner-m: url(../../images/banners/prices-m.webp) }
.svc-hero[data-banner="reviews"]        { --mm-banner: url(../../images/banners/reviews.webp);        --mm-banner-m: url(../../images/banners/reviews-m.webp) }

/* ── Десктоп: текст слева, объект справа ──
   Абсолютное позиционирование, а не grid: отрицательные номера строк
   (grid-row: 1 / -2) резолвятся по ЯВНОЙ сетке, а строки тут неявные —
   элемент схлопывался в ноль и баннер не рисовался. */
@media (min-width: 960px) {
  /* текст не заезжает под объект */
  .svc-hero.has-banner[data-banner] .wrap > .eyebrow,
  .svc-hero.has-banner[data-banner] .wrap > h1,
  .svc-hero.has-banner[data-banner] .wrap > .hero-sub,
  .svc-hero.has-banner[data-banner] .wrap > .cta,
  .svc-hero.has-banner[data-banner] .wrap > .hero-def {
    max-width: min(60ch, 54%);
  }

  .svc-hero.has-banner[data-banner] .wrap::after {
    content: "";
    display: block;   /* ds-ui.css гасит угловые тики .hero .wrap::after — возвращаем */
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: min(74%, 460px);
    border: 0;         /* обнуляем бордюр углового тика из styles.css */
    background-image: var(--mm-banner);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    /* белый фон баннера гасим наложением: сетка страницы проступает,
       объект и жёлтый акцент остаются — шва от прямоугольника нет */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
  }

  /* преимущества — поверх баннера, на всю ширину */
  .svc-hero.has-banner[data-banner] .wrap > .svc-benefits {
    position: relative;
    z-index: 1;
    margin-top: clamp(24px, 3vw, 40px);
  }
}

/* ── Мобильный: текст, под ним вертикальный кроп, затем преимущества ── */
@media (max-width: 959px) {
  .svc-hero.has-banner[data-banner] .wrap { display: flex; flex-direction: column; }
  .svc-hero.has-banner[data-banner] .wrap > * { order: 0; }

  .svc-hero.has-banner[data-banner] .wrap::after {
    content: "";
    display: block;
    /* styles.css задаёт угловому тику position:absolute — возвращаем в поток флекса */
    position: static;
    order: 1;
    width: 100%;
    height: auto;   /* styles.css задаёт тику height:18px — иначе aspect-ratio игнорируется */
    border: 0;      /* обнуляем бордюр углового тика */
    aspect-ratio: 4 / 5;
    max-height: 48vh;
    margin: 18px 0 2px;
    background-image: var(--mm-banner-m);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .svc-hero.has-banner[data-banner] .wrap > .svc-benefits { order: 2; }
}

/* Совсем узкие экраны — баннер лишний вес и шум */
@media (max-width: 420px) {
  .svc-hero.has-banner[data-banner] .wrap::after { display: none; }
}

/* ── Контакты: объект был мелкий и «съехал» вверх (пустая левая половина 16:9
   съедала бокс). Кропим к объекту (cover+right), центрируем по вертикали к тексту,
   делаем крупнее — «аккуратная картинка справа» (правка Алёны). Только контакты. */
@media (min-width: 960px) {
  .svc-hero[data-banner="contacts"] .wrap {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .svc-hero[data-banner="contacts"] .wrap::after {
    top: 50%;
    transform: translateY(-50%);
    width: 48%;
    height: 340px;
    background-size: contain;
    background-position: center right;
  }
}