@import url('./nv-variables.css');

/* ==========================================================================
   1. DESKTOP BASE STYLES (Default Viewport)
   ========================================================================== */

.download-list {
    display: flex;
    flex-direction: column;
    gap: var(--nv-space-lg);
    padding: var(--nv-space-lg);
    margin-left: 15%;
    margin-right: 15%;
}

.download-row {
    display: flex;
    align-items: center;
    background: var(--nv-bg-row);
    border: 1px solid var(--nv-scale-white-10); 
    border-radius: var(--nv-radius-md);
    padding: var(--nv-space-lg);
    gap: var(--nv-space-md);
    transition: transform var(--nv-transition-slow), box-shadow var(--nv-transition-slow);
}

.download-row:hover {
    transform: translateY(-2px);
}

.download-row img {
    width: auto;
    height: 25dvh;
    border-radius: var(--nv-radius-sm);
    flex-shrink: 0;
}

.file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    align-items: flex-start;
}

.file-info h3 {
    margin: 0;
    font-size: 1.1rem;
}

.file-info p {
    margin: 0;
    color: var(--nv-text-muted);
    font-size: 0.9rem;
}

.placeholder {
    display: none;
}

html.light-mode .download-row {
    background-color: var(--nv-scale-white-80);
    color: var(--nv-text-main);
    border-color: var(--nv-scale-black-20);
    box-shadow: inset 0 0 20px -5px var(--nv-scale-white-10), 0px 6px 24px var(--nv-scale-black-20); /* 彻底收拢四舍五入 */
}


/* ==========================================================================
   2. RESPONSIVE MEDIA QUERIES (Cascading Downwards)
   ========================================================================== */

/* --- Laptops / Tablets (<= 1100px) --- */
@media (max-width: 1100px) {
    .download-list {
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* --- Mobile Devices (<= 768px) --- */
@media (max-width: 768px) {
    .download-list {
        padding: var(--nv-space-lg);
        margin: 0 4%; 
        gap: var(--nv-space-md);
    }

    .download-row {
        flex-direction: column;
        align-items: center;
        padding: var(--nv-space-md); 
        gap: var(--nv-space-md);
        max-width: 420px;
        margin: 0 auto; 
        width: 100%;
        box-sizing: border-box;
    }

    .download-row img {
        height: 160px;
        width: 100%; 
        max-width: 100%; 
        object-fit: cover;
        border-radius: var(--nv-radius-sm); 
    }

    .file-info {
        width: 100%;
        margin-top: var(--nv-space-xxs);
        align-items: flex-start; 
        text-align: left;
    }

    .file-info h3 {
        font-size: 1.15rem;
    }

    .file-info p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}