/* Приложение для Android (app.php): только то, чего нет у остальных страниц.
   Карточки возможностей, шаги установки и секции - общие, они в ui.css. Здесь блок
   скачивания в шапке страницы и галерея скриншотов. */

/* ============ шапка страницы ============ */
/* Подпись под h1 переехала в ui.css как .hm-phead__sub: она понадобилась второй странице
   (политике конфиденциальности), а копия завела бы вторую точку правки. Здесь остались
   только кнопки скачивания и строка про APK - их больше нигде нет. */
.hm-app__dl {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.hm-app__dl svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Разделённые точкой размер и предупреждение об источнике: и то, и другое человек
   хочет знать до нажатия на кнопку, а не после. */
.hm-app__note {
    margin-top: 14px;
    max-width: 46em;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--hm-ink-3);
}

.hm-app__note b {
    font-family: var(--hm-mono);
    font-weight: 500;
    color: var(--hm-ink-2);
}

/* ============ скриншоты ============ */
/* Две колонки, а не четыре: скриншот шириной 454px, ужатый до колонки в 232px, теряет
   собственный текст - лог и названия настроек перестают читаться. В двух колонках
   картинка показывается почти в натуральную величину. */
.hm-shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 38px;
}

.hm-shot {
    margin: 0;
    padding: 20px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 11px;
    text-align: center;
}

/* Скриншоты сняты со светлой темы приложения и в тёмной остаются светлыми: перекрасить
   их нельзя - это фотография чужого интерфейса. Та же история, что у руководства. */
.hm-shot img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--hm-border);
    border-radius: 8px;
}

.hm-shot__cap {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--hm-ink-2);
    text-wrap: balance;
}

/* ============ отсылка к руководству ============ */
.hm-app__more {
    margin-top: 24px;
    font-size: 14.5px;
    color: var(--hm-ink-2);
}

.hm-app__more a {
    color: var(--hm-brand);
    font-weight: 550;
}

.hm-app__more a:hover {
    color: var(--hm-brand-deep);
    text-decoration: underline;
}

@media (max-width: 768px) {
    /* Кнопки в строку по половине ширины: на узком экране они иначе выглядят обрубками. */
    .hm-app__dl .hm-btn { flex: 1 1 auto; }
}

@media (max-width: 620px) {
    .hm-shots {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }
    .hm-shot { padding: 14px; }
}