/* Правки клиента 27.10.2026: заставка, кнопка «Позвонить», плашки. Подключается после style.css и response.css */

/* Заставка: фото фасада офиса, затемнение слева под белый текст */
.top-img {
    background: linear-gradient(90deg, rgba(28, 10, 14, .78) 0%, rgba(28, 10, 14, .55) 45%, rgba(28, 10, 14, .30) 100%),
                url("../img/top-header-facade.jpg") center 30% / cover no-repeat;
}
@media (max-width: 767px) {
    .top-img {
        background: linear-gradient(180deg, rgba(28, 10, 14, .70) 0%, rgba(28, 10, 14, .55) 100%),
                    url("../img/top-header-facade.jpg") 40% center / cover no-repeat;
    }
}

/* Кнопка «Позвонить» вместо «Заказать звонок» */
.call-btn {
    width: auto;
    min-width: 185px;
}
.call-btn:hover,
.call-btn:focus {
    text-decoration: none;
}
.call-btn.is-revealed {
    letter-spacing: .3px;
}
/* без подписи «Перезвоним через 15 минут!» номер под кнопкой держим отдельной строкой */
.call-back .phone {
    display: block;
    margin-top: 8px;
    white-space: nowrap;
}

/* Плашки на главной: активные, по клику — звонок (телефон) или номер (ПК) */
a.info_call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
a.info_call:hover,
a.info_call:focus {
    color: #fff;
    text-decoration: none;
    background-color: rgba(214, 22, 62, .95);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
    outline: none;
}
/* блик, пробегающий по плашке */
a.info_call::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 100%);
    animation: docs-shine 5s ease-in-out infinite;
    pointer-events: none;
}
.info_call:nth-child(2)::after { animation-delay: 1.2s; }
.info_call:nth-child(3)::after { animation-delay: 2.4s; }
.info_call:nth-child(4)::after { animation-delay: 3.6s; }

.info_call-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") no-repeat center / 22px;
    animation: docs-ring 4s ease-in-out infinite;
}
.info_call:hover .info_call-icon { animation-duration: 1.2s; }

.info_call.is-revealed { background-color: rgba(214, 22, 62, .95); }
.info_call.is-revealed .js-call-label,
.call-btn.is-revealed .js-call-label { animation: docs-reveal .35s ease-out; }

@keyframes docs-shine {
    0%, 60% { left: -60%; }
    100% { left: 130%; }
}
@keyframes docs-ring {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(-14deg); }
    78% { transform: rotate(12deg); }
    82% { transform: rotate(-10deg); }
    86% { transform: rotate(8deg); }
    90% { transform: rotate(0); }
}
@keyframes docs-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    a.info_call::after,
    .info_call-icon,
    .info_call.is-revealed .js-call-label,
    .call-btn.is-revealed .js-call-label { animation: none; }
    a.info_call { transition: none; }
}
@media (max-width: 400px) {
    .info_call-icon { width: 38px; height: 38px; background-size: 18px; }
}