/* skin/css/download.css */

/*
 * 极径下载站 - 现代柔和蓝风格
 * 下载详情页专用CSS文件
 */

/* ==================== 1. 应用信息板块 ==================== */
.app-detail-header {
    background-color: var(--background-white);
    padding: var(--spacing-xl) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-info-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.app-icon-large {
    width: 120px;
    height: 120px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    background-color: var(--background-light-gray);
}

.app-icon-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--text-dark-gray);
    margin-bottom: var(--spacing-sm);
}

.app-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-medium-gray);
    margin-bottom: 0;
}

.app-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.app-meta .star-rating {
    color: #FFD700; /* 星星颜色 */
}

.download-button-wrapper {
    width: 100%;
    max-width: 280px; /* 限制按钮宽度 */
}

.download-button {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-primary);
}

.fas.fa-download {
    margin-right: var(--spacing-xs);
}

/* ==================== 2. 应用截图轮播 ==================== */
.app-screenshots-section {
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-lg);
    background-color: var(--background-white);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* 确保 Swiper 不溢出 */
}

.app-screenshots-section .section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.screenshot-swiper-container {
    padding: 0 var(--spacing-md); /* 左右内边距 */
    width: auto;
    height: auto; /* 移动端截图高度 */
}

.screenshot-swiper-slide {
    width: auto; /* 移动端每个截图宽度 */
    height: auto;
    background-color: var(--background-light-gray);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.screenshot-swiper-slide img,.screenshot-swiper-slide video {
    width: auto;
    height: auto;
    max-width: 400px;
    max-height: 450px;
    object-fit: fill;
    border-radius: var(--border-radius-base);
}

/* Swiper 导航和分页 (如果需要) */
.screenshot-swiper-pagination,
.screenshot-swiper-button-next,
.screenshot-swiper-button-prev {
    /* 样式与首页轮播图相似 */
}

/* ==================== 3. 应用简介 ==================== */
.app-description-section {
    background-color: var(--background-white);
    padding: var(--spacing-xl) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
}

.app-description-section .section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.app-description-content p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
    color: var(--text-dark-gray);
}

.app-description-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    margin: var(--spacing-md) 0;
    display: block;
    box-shadow: var(--shadow-sm);
}

/* ==================== 4. 相关推荐 ==================== */
.related-apps-section {
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-lg);
    background-color: var(--background-white);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
}
.app-card a{
    width: 100%;
    display: block;
}
.related-apps-section .section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.related-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
    padding: 0;
    display: grid;
    /* 移除原始的 grid-template-columns，它会导致换行和可能的挤压 */
    /* grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); */

    /* 核心：让网格项按列方向流动，从而全部显示在一行上 */
    grid-auto-flow: column; 

    /* 明确定义一个行，确保所有内容都填充到这一行中 */
    grid-template-rows: 1fr; 

    /* 定义自动生成的列的尺寸，保证每个项目至少有140px宽，并根据内容自适应，防止挤压 */
    grid-auto-columns: minmax(140px, auto); 

    gap: var(--spacing-md); /* 保持列之间的间距 */

    /* 将 overflow: hidden; 替换为 overflow-x: auto; 
       当内容宽度超过容器时，显示水平滚动条，防止内容被挤压 */
    /* 如果原始有 overflow: hidden; 请删除或覆盖 */

    padding:10px; /* 保持内边距 */
    box-sizing: border-box;

    /* 可选：防止容器内文本在非网格项处换行，但对于网格项内的文本，
       最好在 .grid-item 中单独处理 */
    /* white-space: nowrap; */ 
}
/* PC端样式 */
@media (min-width: 769px) {
    .app-detail-header {
        flex-direction: row;
        text-align: left;
        padding: var(--spacing-xxl);
        align-items: center;
    }

    .app-info-top {
        flex-direction: row;
        align-items: center;
        margin-right: var(--spacing-xxl);
        margin-bottom: 0;
        flex: 1;
    }

    .app-icon-large {
        width: 160px;
        height: 160px;
        margin-right: var(--spacing-xl);
        margin-bottom: 0;
    }

    .app-title {
        font-size: calc(var(--font-size-base) * 2.5); /* 40px */
        margin-bottom: var(--spacing-md);
    }

    .app-meta {
        justify-content: flex-start;
        font-size: var(--font-size-base);
        margin-bottom: 12px;
    }

    .download-button-wrapper {
        max-width: 320px; /* PC端按钮可以更宽 */
    }

    .app-screenshots-section,
    .app-description-section,
    .related-apps-section {
        padding: var(--spacing-xxl) var(--spacing-xl);
        margin-bottom: var(--spacing-xxl);
    }

    .app-screenshots-section .section-header,
    .app-description-section .section-header,
    .related-apps-section .section-header {
        text-align: left;
    }

    .screenshot-swiper-container {
        padding: 0;
    }

    .screenshot-swiper-slide {
    }

    .related-apps-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-xl);
        overflow-x: auto;
    }
}