/* ===== БЛОК «МЫ В СОЦСЕТЯХ» =====
   Переиспользуемый: подвал главной (--footer) и конец статьи (--article).
   Разметку отдаёт vi_social_links() в functions.php. */

.vi-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.vi-social__title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
}

.vi-social__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vi-social__item { margin: 0; }

/* Плашка: иконка + название. Название оставлено намеренно — четыре чужих
   логотипа подряд без подписей читаются хуже, особенно MAX и Дзен.
   Форма — скруглённый квадрат (10px), не пилюля */
.vi-social__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Astra подчёркивает все ссылки внутри .entry-content, а блок вставляется
   именно туда через the_content — снимаем подчёркивание с той же
   специфичностью, иначе пилюли выглядят как текстовые ссылки */
.vi-social__link,
.ast-single-post .entry-content .vi-social__link,
.vi-social__link:hover,
.ast-single-post .entry-content .vi-social__link:hover {
    text-decoration: none;
}

.vi-social__link img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.vi-social__name {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #3a3d41;
    white-space: nowrap;
}

/* Ховер — заливка фирменным золотым (--vi-accent из style.css, тот же цвет,
   что у акцента «-инфо» в логотипе). Подпись уходит в основной тёмный:
   на золоте серый #3a3d41 теряет контраст */
.vi-social__link:hover {
    background: var(--vi-accent);
    border-color: var(--vi-accent);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.vi-social__link:hover .vi-social__name { color: var(--vi-ink); }

@media (prefers-reduced-motion: reduce) {
    .vi-social__link { transition: none; }
    .vi-social__link:hover { transform: none; }
}

/* --- Строка копирайта: только значки ---
   Разметка подмешивается фильтром astra_get_option_footer-copyright-editor
   и попадает внутрь .ast-footer-copyright рядом с текстом копирайта.
   Делаем эту строку флексом, чтобы значки и текст стояли в одну линию. */

.ast-footer-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
}

/* Astra оборачивает текст копирайта в <p> через wpautop — гасим его отступы,
   иначе строка разъезжается по вертикали */
.ast-footer-copyright p { margin: 0; }

.vi-social--footer { gap: 8px; }

/* Без заголовка и подписей: в строке копирайта место только под знаки */
.vi-social--footer .vi-social__name { display: none; }

/* Строгий квадрат 36×36 со скруглением, а не «яйцо»: размер задан явно,
   а не паддингами. Так кнопка не растягивается по высоте от постороннего
   содержимого внутри ссылки (Astra прогоняет строку копирайта через wpautop) */
.vi-social--footer .vi-social__link {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 10px;
}

/* Страховка от wpautop: если <br> всё же появится внутри ссылки,
   он не должен участвовать в раскладке кнопки */
.vi-social__link br { display: none; }

.vi-social--footer .vi-social__link img {
    width: 22px;
    height: 22px;
}

/* --- Конец статьи --- */

.vi-social--article {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 32px 0 8px;
    padding: 22px;
    background: #f7f8f7;
    border-radius: 16px;
}