/*
 * Страница-прокладка `/video/`: выбор мессенджера.
 *
 * Вид отдельным файлом, а не в стилях калькуляторов: у прокладки нет ни полей,
 * ни расчёта — только текст и кнопки мессенджеров. Кнопка `.pmfl-button` на
 * страницах калькуляторов остаётся обычной ссылкой темы, здесь она должна
 * выглядеть кнопкой: это главное действие страницы.
 *
 * Раскладка: кнопки стоят в ряд **по центру** и все **одной ширины — по самой
 * широкой** («ВКонтакте»). Сетка, а не flex: `grid-auto-columns: 1fr` выравнивает
 * колонки по самой широкой кнопке, а `width: max-content` не даёт ряду растянуться
 * на всю страницу — иначе кнопки стали бы шире, чем нужно. Просьба заказчика
 * 2026-09-24: «кнопки не прижатыми к левому краю, а по центру, и размеры кнопок
 * одинаковыми по ширине — в размер самой широкой».
 *
 * Грабля: WordPress расставляет `<br />` между шорткодами, написанными с новой
 * строки, и в сетке каждый `<br>` стал бы отдельной колонкой (кнопки уехали бы
 * вправо, а пустые колонки съели бы ширину). Поэтому они скрыты — заодно это
 * чинит переносы, которых в блоке кнопок быть не должно.
 */

.pmfl-messengers {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    margin: 28px auto;
}

.pmfl-messengers br {
    display: none;
}

.pmfl-messengers .pmfl-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 10px;
    background: #2a6df4;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease-in-out;
}

.pmfl-messengers .pmfl-button:hover,
.pmfl-messengers .pmfl-button:focus {
    background: #1f57c9;
    color: #fff;
}

/* Мессенджер, который ещё не подключён: показываем, но нажать нельзя. */
.pmfl-messengers .pmfl-button--soon {
    background: #e9edf5;
    color: #6b7280;
    cursor: default;
}

.pmfl-messengers .pmfl-button--soon:hover {
    background: #e9edf5;
    color: #6b7280;
}

/*
 * На узких экранах три равные кнопки в ряд уже не помещаются: подписи начали бы
 * переноситься внутри кнопок. Ставим их в столбик — ширина остаётся одинаковой.
 */
@media (max-width: 575px) {
    .pmfl-messengers {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 100%;
        gap: 10px;
    }

    .pmfl-messengers .pmfl-button {
        padding: 13px 20px;
    }
}

.pmfl-messengers__note {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}