/* 此文件位于: /wp-content/plugins/mx-matrix-engine/assets/css/components/downloads-grid.css */

/* =========================================
   🛡️ MX Matrix 终极防御：下载列表全局留白绝对控制
   ========================================= */

/* 1. 外部绝对清零：彻底干掉 WordPress 主题和外层 Wrapper 的所有干扰留白 */
body .inside-article:has(.mx-downloads-matrix-wrapper),
body .entry-content:has(.mx-downloads-matrix-wrapper) {
    padding: 0 !important; 
}

/* 2. 核心大权独揽：仅由 mx-container 统一发号施令 */
/* 💻 电脑端 (>= 769px)：上下左右均 30px */
@media (min-width: 769px) {
    /* 限定作用域，只影响包含下载列表的 mx-container */
    .mx-matrix-wrapper:has(.mx-downloads-matrix-wrapper) .mx-container {
        padding: 30px !important; 
        max-width: 1640px; 
        margin: 0 auto;    
    }
}
/* 📱 手机/平板端 (<= 768px)：上下 30px，左右 10px */
@media (max-width: 768px) {
    .mx-matrix-wrapper:has(.mx-downloads-matrix-wrapper) .mx-container {
        padding: 30px 10px !important; 
    }
}

/* =========================================
   网格与卡片样式
   ========================================= */

/* 配合全局 .mx-container，自身只需处理网格布局 */
.mx-downloads-matrix-wrapper {
    width: 100%; 
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 40px 20px; 
    padding: 0 !important; /* ✅ 修改点：清除网格自带的 40px 留白 */
}

.mx-download-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    height: 100%; 
}

.mx-download-card:hover {
    transform: translateY(-4px); 
}

.mx-dl-thumb-wrap {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    background-color: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
}

.mx-dl-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;     
    display: block;
    border: none !important; 
    padding: 0 !important;   
    transition: opacity 0.3s ease;
}

.mx-download-card:hover .mx-dl-thumb {
    opacity: 0.85; 
}

.mx-dl-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 220px; 
    flex-grow: 1; 
}

/* 强化标题防御，前缀带上防御盾类名增加权重 */
.mx-matrix-wrapper .mx-downloads-matrix-wrapper .mx-dl-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--mx-text-dark, #333); /* 联动全局变量 */
    margin: 0 0 8px 0 !important;
    font-weight: 400 !important; 
    transition: color 0.2s ease;
    border: none !important; 
    padding: 0 !important;
    text-align: center; 
    background: transparent;
}

.mx-matrix-wrapper .mx-downloads-matrix-wrapper .mx-download-card:hover .mx-dl-title {
    color: var(--mx-accent-blue, #003366) !important; 
}

.mx-dl-meta-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    margin-top: auto; 
}

.mx-dl-type {
    background-color: #e8e8e8; 
    color: #555555;
    padding: 2px 6px;
    border-radius: 2px;
}

.mx-dl-size {
    color: var(--mx-text-gray, #666666);
}

/* 响应式断点控制 */
@media (max-width: 1200px) {
    .mx-downloads-matrix-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .mx-downloads-matrix-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .mx-downloads-matrix-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 12px;      
        /* ✅ 修改点：不再需要这个 padding，因为外层 mx-container 已经接管 */
        padding: 0 !important; 
    }

    .mx-download-card {
        width: 100%;
    }

    .mx-downloads-matrix-wrapper .mx-dl-thumb-wrap {
        max-width: 100%;     
    }
}

/* =========================================
   分页导航样式 
   ========================================= */
.mx-pagination {
    text-align: center;
    /* ✅ 修改点：margin bottom 改为 0，防止底部双重留白 */
    margin: 30px auto 0 auto; 
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-matrix-wrapper .mx-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;  
    min-height: 48px; 
    padding: 0 12px;
    background-color: #f4f5f7; 
    color: var(--mx-text-dark, #222); 
    font-size: 14px;
    font-weight: 600; 
    text-decoration: none;
    border-radius: 0; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mx-matrix-wrapper .mx-pagination a.page-numbers:hover,
.mx-matrix-wrapper .mx-pagination a.page-numbers:focus-visible {
    background-color: #e5e7eb;
    color: var(--mx-text-dark, #222);
    outline: none;
}

.mx-matrix-wrapper .mx-pagination .page-numbers.current {
    background-color: var(--mx-accent-blue, #0056b3); 
    color: #ffffff;
    pointer-events: none;
}