@charset "UTF-8";
/*!
 * StaticPress Blocksy theme - download-strip.css
 *
 * The front page "下载中心" module: the download centre of the site as a card
 * grid, one module above the tools strip.
 *
 * Split out of modules.css on purpose, the same way the download centre add
 * ons were split out of pages.css: the module is only linked by index.html -
 * and only while ``home_downloads`` is on and a download is published - so a
 * site that never used the download centre does not download it at all, and
 * modules.css stays inside the module size the project allows.
 *
 * It reads as a panel of the same family as the featured grid and the tool
 * strip (same border, radius, padding and shadow tokens), but a card is a
 * software you open rather than an article you read: icon, name, version, size,
 * file type, a two line summary, the category / platform chips and the status
 * badge - everything a visitor decides with, nothing to click twice for.
 *
 * Degrading notes:
 *   - the grid is one card per row on a phone and two from 690px up; the
 *     desktop count comes from the theme option through ``data-columns``, the
 *     same contract the tool strip uses;
 *   - the icon tile falls back to the first letter of the name (the template
 *     prints it), so a download without a picture keeps the grid even;
 *   - ``prefers-reduced-motion`` drops the hover lift but keeps the focus ring
 *     of the anchor untouched (the browser draws it).
 */

/* ===================================================== download strip */
/* The strip closes the page together with the tool strip, and the news listing
   above it carries no bottom margin of its own - without this one the panel
   would sit flush against the last card (measured: a 0px gap while every other
   module boundary on the page is 46px). */
.ct-dl-strip {
    margin-top: 46px;
    margin-bottom: 46px;
    padding: 24px 24px 26px;
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-7);
    box-shadow: var(--theme-box-shadow);
}

.ct-dl-strip .ct-module-title {
    margin-bottom: 8px;
    padding-bottom: 12px;
}

.ct-dl-strip .ct-module-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

.ct-dl-strip .ct-module-heading .ct-icon {
    color: var(--theme-palette-color-1);
}

.ct-dl-strip-desc {
    margin: 0 0 20px;
    color: var(--theme-text-color);
    font-size: 13px;
    line-height: 1.6;
}

.ct-dl-grid {
    display: grid;
    /* Phone: one card per row. The card is wide (icon, name, version, summary,
       chips) and its summary is clamped to two lines, so two per row on a
       375px screen would truncate every field at once. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 690px) {
    .ct-dl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .ct-dl-strip[data-columns='auto'] .ct-dl-grid,
    .ct-dl-strip[data-columns='3'] .ct-dl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ct-dl-strip[data-columns='4'] .ct-dl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ct-dl-strip[data-columns='2'] .ct-dl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The item only stretches the anchor to the row height, so the "查看" footer of
   every card in a row sits on the same line. */
.ct-dl-item {
    display: flex;
}

.ct-dl-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 16px 16px 14px;
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-8);
    color: inherit;
    text-decoration: none;
    transition: var(--theme-transition);
}

.ct-dl-card:hover,
.ct-dl-card:focus {
    border-color: var(--theme-palette-color-1);
    box-shadow: var(--theme-box-shadow-strong);
    transform: translateY(-2px);
}

.ct-dl-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-dl-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background-image: linear-gradient(135deg, var(--theme-palette-color-1), var(--theme-palette-color-2));
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
}

.ct-dl-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-dl-title {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ct-dl-name {
    overflow: hidden;
    color: var(--theme-palette-color-4);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-dl-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.ct-dl-version {
    padding: 0 6px;
    border-radius: 4px;
    background-color: rgba(40, 114, 250, 0.1);
    color: var(--theme-palette-color-1);
    font-weight: 600;
}

.ct-dl-desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--theme-text-color);
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ct-dl-flag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ct-dl-flag--open {
    border-color: #bfe0c8;
    background-color: #e6f4ea;
    color: #1d6b34;
}

.ct-dl-flag--lock {
    border-color: #f0d9b5;
    background-color: #fff4e5;
    color: #8a4b00;
}

.ct-dl-flag--off {
    border-color: #d9dee5;
    background-color: #eef0f3;
    color: #5a6472;
}

/* margin-top: auto keeps the footer on the bottom edge of the card, so the
   chips and the "查看" link line up across a row even when one summary is
   shorter than its neighbour. */
.ct-dl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--theme-border-color);
}

.ct-dl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.ct-dl-chip {
    padding: 1px 8px;
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    color: var(--theme-text-color);
    font-size: 11.5px;
    line-height: 1.7;
}

.ct-dl-chip--pick {
    border-color: transparent;
    background-color: var(--theme-palette-color-1);
    color: #fff;
}

.ct-dl-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-text-color);
    font-size: 12.5px;
    opacity: 0.75;
    transition: var(--theme-transition);
}

.ct-dl-card:hover .ct-dl-go,
.ct-dl-card:focus .ct-dl-go {
    color: var(--theme-palette-color-1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ct-dl-card:hover,
    .ct-dl-card:focus {
        transform: none;
    }
}