/**
 * 动作库样式
 * 符合代码规范：<400行
 * 与项目面板保持统一的深色主题风格
 */

.action-library-content {
    /* 动作库特定样式 */
}

.action-library-content .library-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.action-library-content .library-title {
    color: var(--text-primary);
}

.action-library-content .library-description {
    color: rgba(255, 255, 255, 0.8);
}

.action-library-content .library-placeholder .placeholder-icon {
    opacity: 0.3;
    filter: brightness(1.2);
}

/* 动作库卡片样式 - 预览区域1:1 比例，卡片缩小约三分之一 */
.action-library-content .material-card-grid {
    /* 增加网格列数，使卡片变小约三分之一 */
    grid-template-columns: repeat(6, 1fr);
}

/* 动作库卡片 - 高度自适应，包含预览区域(1:1) + 信息区域 */
.action-library-content .material-card {
    height: auto;
    min-height: 0;
}

/* 动作库卡片预览区域 - 设置为1:1正方形 */
.action-library-content .material-card-preview {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    flex-shrink: 0;
}

/* 动作库卡片信息区域 - 确保正常显示所有内容 */
.action-library-content .material-card-info {
    flex: 0 0 auto;
    min-height: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
}

/* 确保标题行正常显示 */
.action-library-content .material-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
    flex-shrink: 0;
}

/* 确保推荐度正常显示 */
.action-library-content .material-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* 确保详情信息正常显示 */
.action-library-content .material-card-description {
    display: block;
    flex-shrink: 0;
}

/* 确保标签区域正常显示 */
.action-library-content .material-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 响应式布局 - 动作库卡片1:1比例适配 */
@media (max-width: 1600px) {
    .action-library-content .material-card-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .action-library-content .material-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .action-library-content .material-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}