/**
 * 素材展示模块样式
 * 支持垂直布局和横向布局两种模式
 */

/* 素材展示模块卡片背景透明 */
.qm-material-gallery-section .card:has(.qm-material-gallery),
.qm-material-gallery-section .card:has(.qm-category-tags-wrapper) {
  background: transparent !important;
  box-shadow: none !important;
}

/* 兼容不支持:has()的浏览器 - 通过JavaScript添加类名或使用更通用的选择器 */
.qm-material-gallery-section .card.qm-material-gallery-card-container {
  background: transparent !important;
  box-shadow: none !important;
}

.qm-material-gallery-section {
    display: block !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 夜间模式适配 - 容器层透明，与文章卡片模块一致，不添加背景层 */
.dark .qm-material-gallery-section {
    background: transparent;
}

.dark .qm-material-gallery {
    background: transparent;
}

/* 移除素材下载模块中的 card 容器层背景 - 普通模式和夜间模式都透明 */
.qm-material-gallery-section .card.border-0.shadow-sm,
.dark .qm-material-gallery-section .card.border-0.shadow-sm {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.dark .qm-material-gallery-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.dark .qm-material-gallery-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}


.qm-material-gallery {
    display: grid;
    width: 100%;
    gap: 1rem;
    padding: 0 !important; /* 内边距为0 */
}

/* 移除素材下载模块card容器的内边距 */
.qm-material-gallery-section .card.border-0.shadow-sm.p-4,
.qm-material-gallery-section .card.border-0.shadow-sm.p-md-5,
.qm-material-gallery-section .card.border-0.shadow-sm[class*="p-"] {
    padding: 0 !important;
}


/* 素材下载模块一行显示数量与文章卡片一致：移动端2列，1024px以上3列，1280px以上4列 */
.qm-material-gallery--vertical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qm-material-gallery--vertical.qm-material-gallery-cols-2,
.qm-material-gallery--vertical.qm-material-gallery-cols-3,
.qm-material-gallery--vertical.qm-material-gallery-cols-4,
.qm-material-gallery--vertical.qm-material-gallery-cols-5,
.qm-material-gallery--vertical.qm-material-gallery-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.qm-material-gallery--horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
    padding-top: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    gap: 1rem;
}

.qm-material-gallery--horizontal::-webkit-scrollbar {
    height: 6px;
}

.qm-material-gallery--horizontal::-webkit-scrollbar-track {
    background: transparent;
}

.qm-material-gallery--horizontal::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
    border-radius: 999px;
}

.qm-material-gallery--horizontal::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}


.qm-material-gallery-card {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.qm-material-gallery-card.qm-sticky-badge-host {
    overflow: visible;
}

.qm-material-gallery-card__inner {
    position: relative;
    display: block;
    border-radius: inherit;
    overflow: hidden;
    background: inherit;
}

.qm-material-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


.qm-material-gallery--vertical .qm-material-gallery-card {
    
    height: auto;
    scroll-snap-align: none;
}


.qm-material-gallery--horizontal .qm-material-gallery-card {
    flex-shrink: 0;
    width: calc(100vw - 3rem);
    max-width: 400px;
    min-width: 280px;
    height: auto;
    scroll-snap-align: start;
}


.qm-material-gallery-card__image {
    position: relative;
    width: 100%;
    
    height: 200px;
    overflow: hidden;
}

.qm-material-gallery-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.qm-material-gallery-card:hover .qm-material-gallery-card__image img {
    transform: scale(1.05);
}


.qm-material-gallery-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

.qm-material-gallery-card__placeholder svg {
    width: 64px;
    height: 64px;
}


.qm-material-gallery-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(0);
    transition: transform 0.3s ease, background 0.3s ease;
}


.dark .qm-material-gallery-card__overlay {
    background: rgba(17, 24, 39, 0.75);
    border-top-color: rgba(255, 255, 255, 0.15);
}


.qm-material-gallery-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* 确保分类标签在素材下载模块中始终显示 */
.qm-material-gallery-card .qm-article-list-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.qm-material-gallery-card .d-flex.align-items-center.gap-2,
.qm-material-gallery-card .mt-1.d-flex.align-items-center.gap-2,
.qm-material-gallery-card .d-flex.align-items-center.justify-content-center.gap-2,
.qm-material-gallery-card .mt-1.d-flex.align-items-center.justify-content-center.gap-2 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


.qm-material-gallery-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 超过一行就省略 */
}

.dark .qm-material-gallery-card__title {
    color: #f9fafb;
}


.qm-material-gallery-card__desc {
    font-size: 0.6875rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.dark .qm-material-gallery-card__desc {
    color: #d1d5db;
}


.qm-material-gallery-card:hover .qm-material-gallery-card__desc {
    opacity: 1;
    max-height: 3em;
}

.dark .qm-material-gallery-card__desc {
    color: #9ca3af;
}


/* 与文章卡片一致的响应式布局：移动端2列，1024px以上3列，1280px以上4列 */
@media (min-width: 1024px) {
    .qm-material-gallery--vertical,
    .qm-material-gallery--vertical.qm-material-gallery-cols-2,
    .qm-material-gallery--vertical.qm-material-gallery-cols-3,
    .qm-material-gallery--vertical.qm-material-gallery-cols-4,
    .qm-material-gallery--vertical.qm-material-gallery-cols-5,
    .qm-material-gallery--vertical.qm-material-gallery-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .qm-material-gallery--horizontal .qm-material-gallery-card {
        width: calc(33.333vw - 2rem);
        max-width: 400px;
    }
    
    .qm-material-gallery-card__image {
        height: 300px;
    }
}

/* 更大屏幕显示4列 */
@media (min-width: 1280px) {
    .qm-material-gallery--vertical,
    .qm-material-gallery--vertical.qm-material-gallery-cols-2,
    .qm-material-gallery--vertical.qm-material-gallery-cols-3,
    .qm-material-gallery--vertical.qm-material-gallery-cols-4,
    .qm-material-gallery--vertical.qm-material-gallery-cols-5,
    .qm-material-gallery--vertical.qm-material-gallery-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 640px) {
    .qm-material-gallery--horizontal .qm-material-gallery-card {
        width: calc(50vw - 2rem);
        max-width: 350px;
    }
}


@media (min-width: 640px) and (max-width: 1023.98px) {
    .qm-material-gallery-card__title {
        font-size: 0.8125rem;
    }
}

@media (min-width: 768px) {
    .qm-material-gallery-card__title {
        font-size: 0.9375rem;
    }

    .qm-material-gallery-card__desc {
        font-size: 0.8125rem;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    .qm-material-gallery-card__title {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1440px) {
    .qm-material-gallery-card__title {
        font-size: 0.9375rem;
    }
}


.qm-material-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.dark .qm-material-gallery-filters {
    border-bottom-color: #374151;
}


.qm-material-gallery-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.qm-material-gallery-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.qm-material-gallery-category-pill:hover {
    color: #374151;
    border-bottom-color: #d1d5db;
}

.qm-material-gallery-category-pill.is-active {
    color: #374151;
    border-bottom-color: transparent;
    font-weight: 600;
    padding-left: 1.25rem;
}

.qm-material-gallery-category-pill.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF1493 0%, #FF69B4 100%);
}

.dark .qm-material-gallery-category-pill {
    color: #9ca3af;
}

.dark .qm-material-gallery-category-pill:hover {
    color: #d1d5db;
    border-bottom-color: #4b5563;
}

.dark .qm-material-gallery-category-pill.is-active {
    color: #f3f4f6;
    border-bottom-color: transparent;
}


.qm-material-gallery-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.qm-material-gallery-sort-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.dark .qm-material-gallery-sort-label {
    color: #9ca3af;
}

.qm-material-gallery-sort-item {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.qm-material-gallery-sort-item:hover {
    background: #e5e7eb;
    color: #374151;
}

.qm-material-gallery-sort-item.is-active {
    background: #2563eb;
    color: #ffffff;
}

.dark .qm-material-gallery-sort-item {
    background: #374151;
    color: #d1d5db;
}

.dark .qm-material-gallery-sort-item:hover {
    background: #4b5563;
    color: #f3f4f6;
}

.dark .qm-material-gallery-sort-item.is-active {
    background: #3b82f6;
    color: #ffffff;
}


@media (max-width: 639px) {
    
    .qm-material-gallery--vertical {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qm-material-gallery--horizontal {
        padding-left: 0;
        padding-right: 0;
    }
    
    .qm-material-gallery--horizontal .qm-material-gallery-card {
        
        width: calc((100vw - 1rem) / 2);
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    
    .qm-material-gallery-card__image {
        height: 180px; /* 移动端增加高度 */
    }

    .qm-material-gallery-card__overlay {
        padding: 0.75rem;
    }

    .qm-material-gallery-card__title {
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
        line-height: 1.4;
    }

    .qm-material-gallery-card__desc {
        display: none;
    }
    
    /* 确保移动端分类标签显示 */
    .qm-material-gallery-card .d-flex.align-items-center.gap-2,
    .qm-material-gallery-card .mt-1.d-flex.align-items-center.gap-2,
    .qm-material-gallery-card .d-flex.align-items-center.justify-content-center.gap-2,
    .qm-material-gallery-card .mt-1.d-flex.align-items-center.justify-content-center.gap-2 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .qm-material-gallery-card .qm-article-list-badge {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .qm-material-gallery-filters {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qm-material-gallery-sort {
        margin-left: 0;
    }
}