/* ============================================================================
   HE-TASK17 — блок «Или напишите в любом мессенджере» (главная и /services/):
   наш фон вместо стокового фото + три кнопки-мессенджера.
   Hermes / frontend, 18.10.2026.

   Блок самодостаточный: удаляется целиком вместе со <link> на него в header.php,
   после чего блок вернётся к прежнему виду. Макет — /opt/data/content/designer/foto_ofisa/.

   Фон — наши 3D-визуализации офиса (чужих картинок нет):
     /upload/images/ofis_fon_kvadrat.jpg — десктоп (>= 993px) и телефон (<= 767.98px)
     /upload/images/ofis_fon_polosa.jpg  — планшет (768–992px), широкая низкая полоса
   Одновременно грузится ровно один файл: правила разведены медиазапросами,
   на каждой ширине активен только один background-image.
   ============================================================================ */

/* --- фон блока (в style.css заменён старый /upload/images/img-feedback.jpg) --- */
.feddback-rightblock {
    background-image: url('/upload/images/ofis_fon_kvadrat.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

/* тень под текстом блока: добирает читаемость на светлых пятнах кадра.
   Скоуплено на блок: класс .main-callback__header есть и в подвале (h3),
   тень подвала не касается. */
.feddback-rightblock .main-callback__header,
.feddback-rightblock .main-callback__description {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .50), 0 2px 14px rgba(0, 0, 0, .45);
}

/* --- три кнопки-мессенджера (было: одна кнопка «Группа ВК», flex: 0 0 200px) --- */
.form__button-block {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form__button-block .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;
    height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    /* цвет иконок MAX/Telegram (SVG наследуют currentColor) = цвет подписи кнопки
       (.form__button-text{color:rgb(56,103,83)}). Раньше стоял #0000ee — это браузерный
       синий ссылки из макета, на живом сайте иконки стали бы серыми от Bootstrap.
       Контраст к фону .btn-white (#fff) = 6.5:1 (замер — spec_izmeneniy.md, §17б.2). */
    color: rgb(56, 103, 83);
}

/* 24px вместо 1.8rem из style.css (.btn svg) + сбить .btn svg:first-child{margin-left:-4px} */
.form__button-block .btn svg,
.form__button-block .btn img {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin-left: 0;
}

/* --- планшет 768–992px: блок — широкая низкая полоса --- */
@media (max-width: 992px) {
    .feddback-rightblock {
        background-image: url('/upload/images/ofis_fon_polosa.jpg');
    }
}

/* --- телефон <= 767.98px: тот же квадратный кадр + мягкая шторка под текст --- */
@media (max-width: 767.98px) {
    .feddback-rightblock {
        padding: 40px 24px 44px;
        background-image:
            linear-gradient(180deg, rgba(18, 32, 26, .80) 0%, rgba(18, 32, 26, .58) 58%, rgba(18, 32, 26, .30) 100%),
            url('/upload/images/ofis_fon_kvadrat.jpg');
    }

    .form__button-block {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .form__button-block .btn {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        height: 48px;
    }
}

/* --- узкие десктопные ширины 992–1199.98px (контейнер Bootstrap lg = 960px) ---
   Здесь блок получается узким и высоким: замер 1024 → 434×803, 1100 → 478×803.
   Два дефекта, найденные задачей 17б (см. spec_izmeneniy.md, §17б.3):
   1) кадр ofis_fon_kvadrat.jpg при background-size:cover и позиции 50% 50%
      срезает логотип по правому краю (на 1024 правый край знака = правый край блока).
      Сдвигаем окно кадра вправо (77% 50%) — знак входит целиком с запасом >90px.
   2) три кнопки в одну строку не влезают: текст «Группа ВК»/«Telegram» вылезал
      за пилюлю на 12/5 px (scrollWidth > clientWidth). Разрешаем перенос:
      кнопки по ширине контента, ложатся 2+1.
   На 1200+ и ≤991.98px правила не действуют (там одна строка / столбик). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .feddback-rightblock {
        background-image: url('/upload/images/ofis_fon_kvadrat.jpg');
        background-position: 77% 50%;
    }

    .form__button-block .btn {
        flex: 1 1 auto;
        min-width: max-content;
    }
}