/* Витрина продуктов: адаптивная сетка карточек в стиле сайта */

/* На сайте нет глобального border-box, поэтому ширина 100% складывалась бы
   с внутренними отступами и выводила кнопки за край карточки. Ограничиваем
   сброс разделом, чтобы не задеть остальные страницы. */
.products-section,
.products-section *,
.products-section *::before,
.products-section *::after {
    box-sizing: border-box;
}

/* Прижать подвал к низу экрана. Страница продуктов короткая: без этого подвал
   вставал сразу за карточками, а под ним оставалась белая полоса до края окна.
   Правило живёт здесь, а не в общей таблице стилей, потому что этот файл
   подключается только на витрине — остальные страницы длинные, и трогать их
   разметку ради одной короткой незачем. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > .main-content {
    flex: 1 0 auto;
    /* У элемента флексбокса min-width по умолчанию auto: без этого широкое
       содержимое растянуло бы страницу и добавило горизонтальную прокрутку
       там, где раньше её не было. */
    min-width: 0;
}

body > .footer {
    flex-shrink: 0;
}

.products-section {
    padding: 1rem 5% 3rem;
}

.products-intro {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.6;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1240px;
}

.products-grid__item {
    display: flex;
}

.product-card {
    /* Цвета продукта. Каталог присылает свои, и карточка на сайте выглядит
       так же, как в лаунчере. У карточек, заведённых на сайте, их нет —
       работают эти значения. */
    --product-accent: #0761b0;
    --product-cover-from: #0761b0;
    --product-cover-to: #044680;

    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;
    /* Отступов у карточки нет: обложка идёт от края до края, поля задают
       внутренние блоки. overflow скругляет углы обложки вместе с карточкой. */
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(7, 97, 176, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(7, 97, 176, 0.18);
}

/* ── Обложка ─────────────────────────────────────────────────────────────── */

/* Логотип на фирменном градиенте продукта. На белом фоне светлые знаки
   читались плохо, а цвет заодно отличает продукты друг от друга с одного
   взгляда — так же, как на витрине лаунчера. */
.product-card__cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 148px;
    background: linear-gradient(135deg, var(--product-cover-from), var(--product-cover-to));
    overflow: hidden;
}

/* Мягкий блик: плоская заливка выглядит казённо, а градиент с бликом придаёт
   карточке глубину, не отвлекая от логотипа. */
.product-card__cover::after {
    content: '';
    position: absolute;
    top: -55%;
    right: -25%;
    width: 78%;
    height: 190%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22), transparent 62%);
    pointer-events: none;
}

.product-card__plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.product-card__logo-img {
    max-height: 88px;
    max-width: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.product-card__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Содержимое ──────────────────────────────────────────────────────────── */

.product-card__body {
    flex: 1 1 auto;
    padding: 1.35rem 1.4rem 0.5rem;
}

.product-card__title {
    margin: 0 0 0.55rem;
    font-size: 1.28rem;
    line-height: 1.3;
    color: #10243b;
}

/* Общий стиль сайта подчёркивает h2 полоской — в карточках она лишняя */
.product-card__title::after {
    content: none;
}

.product-card__desc {
    margin: 0 0 1rem;
    color: #4a5a6a;
    font-size: 0.97rem;
    line-height: 1.6;
}

/* Возможности: главное о продукте читается без раскрывашек. Список, а не
   плашки, — возможности описаны фразами, и в плашках они обрезались. */
.product-card__highlights {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.product-card__highlights li {
    position: relative;
    padding-left: 1.45rem;
    margin-bottom: 0.42rem;
    color: #3d4d5d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.product-card__highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -0.02em;
    color: var(--product-accent);
    font-weight: 700;
}

.product-card__more {
    margin: 0 0 1rem 1.45rem;
    color: #8a97a6;
    font-size: 0.85rem;
}

.product-card__about {
    border-top: 1px solid #eef2f7;
    padding-top: 0.65rem;
    margin-bottom: 0.65rem;
}

.product-card__about > summary,
.product-card__changelog > summary {
    position: relative;
    padding-left: 1.1rem;
    color: var(--product-accent);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
    transition: color 0.3s ease;
}

.product-card__about > summary::-webkit-details-marker,
.product-card__changelog > summary::-webkit-details-marker {
    display: none;
}

.product-card__about > summary::before,
.product-card__changelog > summary::before {
    content: '▸';
    position: absolute;
    left: 0;
    transition: transform 0.2s ease;
}

.product-card__about[open] > summary::before,
.product-card__changelog[open] > summary::before {
    transform: rotate(90deg);
}

.product-card__about > summary:focus-visible,
.product-card__changelog > summary:focus-visible,
.product-btn:focus-visible {
    outline: 3px solid #0761b0;
    outline-offset: 2px;
}

.product-card__about p {
    margin: 0.5rem 0 0;
    color: #4a5a6a;
    line-height: 1.6;
}

/* Системные требования: «параметр — значение» в две колонки */
.product-card__specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.9rem;
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
}

.product-card__specs dt {
    color: #8a97a6;
}

.product-card__specs dd {
    margin: 0;
    color: #2f3f4f;
    text-align: right;
}

/* ── Версия и сборка ─────────────────────────────────────────────────────── */

/* Дата выпуска у продукта каталога: известна сразу, без запроса */
.product-card__release-note {
    margin: 0;
    padding: 0 1.4rem 0.4rem;
    color: #8a97a6;
    font-size: 0.82rem;
}

/* Блок версии карточек сайта: заполняется скриптом с сервера сборок */
.product-card__release {
    margin: 0 1.4rem 1rem;
    padding: 0.85rem 1rem;
    background: #f5f9fd;
    border: 1px solid #e1ecf7;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* Элементы прячутся атрибутом hidden — он должен побеждать display у кнопок и блоков */
.products-section [hidden] {
    display: none !important;
}

.product-card__release-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.product-card__release-label {
    color: #6b7c8f;
}

.product-card__release-label::after {
    content: ':';
}

.product-card__version {
    font-weight: 700;
    color: var(--product-accent);
}

.product-card__release-date {
    color: #333;
}

.product-card__changelog-list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: #444;
    line-height: 1.55;
    max-height: 220px;
    overflow-y: auto;
}

.product-card__changelog-list li {
    margin-bottom: 0.3rem;
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.product-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.6rem 1.4rem 1.4rem;
}

.product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* Основное действие красится цветом продукта — карточка держится своей гаммы */
.product-btn--download,
.product-btn--contact {
    background-color: var(--product-accent);
    color: #ffffff;
}

.product-btn--download:hover,
.product-btn--contact:hover {
    filter: brightness(0.9);
    color: #ffffff;
}

.product-btn--secondary {
    background-color: transparent;
    color: var(--product-accent);
    border: 2px solid var(--product-accent);
}

.product-btn--secondary:hover {
    background-color: var(--product-accent);
    color: #ffffff;
    filter: none;
}

/* Кнопка без ссылки (файл ещё не собран) и явно отключённая кнопка */
.product-btn[aria-disabled='true']:not(.product-btn--active),
.product-btn--disabled {
    background-color: #cccccc;
    color: #545454; /* контраст 4.5:1 к серому фону — читаемо и в отключённом виде */
    cursor: not-allowed;
    pointer-events: none;
}

.product-card__filemeta {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7c8f;
    text-align: center;
}

.product-card__checksum {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #6b7c8f;
    word-break: break-all;
    cursor: help;
}

.product-card__hint {
    margin: 0;
    font-size: 0.85rem;
    color: #8a6d3b;
    text-align: center;
}

/* Пустое состояние */
.products-empty {
    max-width: 520px;
    margin: 2rem auto 3rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #c9d6e5;
    border-radius: 14px;
}

.products-empty__img {
    width: 96px;
    height: auto;
    opacity: 0.55;
    margin-bottom: 1rem;
}

.products-empty__title {
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #0761b0;
}

.products-empty__text {
    margin: 0 0 1.5rem;
    color: #555;
    line-height: 1.6;
}

.products-empty .product-btn {
    display: inline-flex;
    min-width: 200px;
}

@media (max-width: 768px) {
    .products-section {
        padding: 0.5rem 4% 2.5rem;
    }

    .products-intro {
        margin-bottom: 1.75rem;
        font-size: 1rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .product-card:hover {
        transform: none;
    }

    .product-card__cover {
        height: 128px;
    }

    .product-card__plate {
        width: 92px;
        height: 92px;
        border-radius: 20px;
    }

    .product-card__logo-img {
        max-height: 74px;
        max-width: 74px;
    }

    .product-card__title {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .products-section {
        padding: 0.5rem 1rem 2rem;
    }

    .product-card__body {
        padding: 1.15rem 1.15rem 0.4rem;
    }

    .product-card__footer,
    .product-card__release-note {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .product-card__release {
        margin-left: 1.15rem;
        margin-right: 1.15rem;
    }

    .product-card__desc {
        font-size: 0.93rem;
    }

    .product-card__changelog-list {
        max-height: 180px;
    }

    .product-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-btn,
    .product-card__about > summary::before,
    .product-card__changelog > summary::before {
        transition: none;
    }

    .product-card:hover,
    .product-card:focus-within {
        transform: none;
    }
}