/**
 * Download Center (ТЗ §45–46).
 *
 * Витрина и страница платформы делят один файл: шапка, карточки платформ,
 * блок официального источника, требования, шаги и разбор ошибок выглядят
 * одинаково в обоих местах.
 *
 * Кнопка «в магазин» намеренно вторична по цвету на витрине и первична
 * на странице платформы: на витрине человек выбирает устройство,
 * а на странице уже готов ставить.
 *
 * Все значения — через переменные `tokens.css`.
 */

.download {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── Шапки ───────────────────────────────────────────────────────── */

.download-hero,
.download-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    background: var(--bg-violet);
}

.download-hero__badge,
.download-head__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--primary);
}

.download-hero__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.download-head__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.download-hero__sub,
.download-head__lead {
    margin: var(--space-3) 0 0;
    max-width: 68ch;
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-panel);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--primary);
}

/* ── Платформы ───────────────────────────────────────────────────── */

.download-group,
.download-block,
.download-safety {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.download-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.download-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.download-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg-cold);
    color: var(--primary);
}

.download-card__title {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.download-card__title a {
    color: inherit;
    text-decoration: none;
}

.download-card__title a:hover {
    color: var(--primary);
}

.download-card__text {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-card__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--success);
}

.download-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
}

/* ── Официальный источник ────────────────────────────────────────── */

.download-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    border-left: 3px solid var(--success);
}

.download-source__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.download-source__note {
    margin: var(--space-2) 0 0;
    max-width: 60ch;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-source__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex: 0 0 auto;
    max-width: 42ch;
}

.download-source__hint {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    text-align: right;
    color: var(--text-muted);
}

.download-source__hint--strong {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    text-align: left;
    color: var(--text-secondary);
}

.download-source__hint--strong .icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--primary);
}

/* ── Версия ──────────────────────────────────────────────────────── */

.download-release {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.download-release__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.download-release__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
}

.download-release__row dt {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.download-release__row dd {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.download-release__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-release__empty .icon {
    flex: 0 0 auto;
    color: var(--primary);
}

.download-release__note,
.download-release__file {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    color: var(--text-muted);
}

/* ── Требования и шаги ───────────────────────────────────────────── */

.download-requirements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.download-requirement__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.download-requirement__text {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-steps__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.download-steps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--bg-violet);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--primary);
}

/* ── Ошибки ──────────────────────────────────────────────────────── */

.download-problems {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.download-problem__title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.download-problem__title .icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--warning);
}

.download-problem__text {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-problem__fix {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.download-problem__fix li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-problem__fix .icon {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--success);
}

/* ── Вопросы и история ───────────────────────────────────────────── */

.download-faq {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.download-faq__question {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.download-faq__answer {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-history__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-history__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.download-history__item:last-child {
    border-bottom: 0;
}

.download-history__version {
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.download-history__date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ── Ссылки на безопасность ──────────────────────────────────────── */

.download-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.download-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.download-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.download-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-violet);
    color: var(--primary);
}

.download-link__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.download-link__title {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.download-link__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.download-link > .icon {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
}

.download-warning__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* ── Мобильный ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .download-source {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-source__action {
        align-items: flex-start;
        max-width: none;
    }

    .download-source__hint {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .download {
        gap: var(--space-6);
    }

    .download-hero,
    .download-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .download-hero__icon {
        width: 56px;
        height: 56px;
    }

    .download-hero__title {
        font-size: var(--fs-h2);
    }

    .download-source__action .btn {
        width: 100%;
        justify-content: center;
    }
}