/* ==========================================================================
   资源详情页卡片样式 (Modern Resource Card UI)
   ========================================================================== */
.resource-card * { box-sizing: border-box; }

/* 卡片主容器：增加 text-align: left 抵抗老代码居中干扰 */
.resource-card { 
    max-width: 100%; 
    margin: 20px auto; 
    background: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    overflow: hidden; 
    border: 1px solid #ebeef5; 
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif; 
    text-align: left !important; 
}

/* 头部区域 */
.resource-card .card-header { padding: 24px; border-bottom: 1px solid #ebeef5; background-color: #fafbfe; }
.resource-card .card-title { font-size: 20px; font-weight: 600; color: #303133; margin: 0 0 16px 0; line-height: 1.5; }
.resource-card .badge-type { background-color: #409EFF; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: normal; vertical-align: middle; margin-left: 8px; text-transform: uppercase; }
.resource-card .meta-info { display: flex; flex-wrap: wrap; gap: 16px 24px; font-size: 13px; color: #909399; }
.resource-card .meta-item { display: flex; align-items: center; gap: 6px; }
.resource-card .meta-item strong { color: #606266; font-weight: 500; }

/* 主体内容区域 */
.resource-card .card-body { padding: 24px; }
.resource-card .section { margin-bottom: 20px; }
.resource-card .section-title { font-size: 15px; font-weight: 600; color: #303133; margin-bottom: 10px; display: flex; align-items: center; }
.resource-card .section-title::before { content: ''; display: inline-block; width: 4px; height: 14px; background-color: #409EFF; border-radius: 2px; margin-right: 8px; }

/* 知识点标签 */
.resource-card .tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.resource-card .tag { background-color: #ecf5ff; color: #409EFF; padding: 6px 12px; border-radius: 6px; font-size: 13px; border: 1px solid #d9ecff; display: inline-block; }

/* 简介文本框 */
.resource-card .desc-box { background-color: #f8f9fa; padding: 16px; border-radius: 8px; font-size: 14px; color: #606266; line-height: 1.6; border: 1px dashed #dcdfe6; }

/* 教研属性网格展示 (Dashboard) */
.resource-card .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.resource-card .info-card { background: #f8f9fa; padding: 14px 16px; border-radius: 8px; border: 1px solid #ebeef5; transition: all 0.3s ease; }
.resource-card .info-card:hover { background: #f0f7ff; border-color: #c6e2ff; }
.resource-card .info-label { font-size: 12px; color: #909399; margin-bottom: 6px; display: block; }
.resource-card .info-value { font-size: 14px; font-weight: 500; color: #303133; line-height: 1.5; display: block; }

/* 缩略图画廊 */
.resource-card .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; }
.resource-card .gallery a { display: block; overflow: hidden; border-radius: 8px; border: 1px solid #ebeef5; text-align: center; background: #f4f5f7; }
.resource-card .gallery img { width: 100%; height: 140px; object-fit: contain; display: block; transition: transform 0.3s ease; background-color: #fff; }
.resource-card .gallery a:hover img { transform: scale(1.05); }

/* 底部操作栏 */
.resource-card .card-footer { padding: 16px 24px; background-color: #fafbfc; border-top: 1px solid #ebeef5; display: flex; justify-content: space-between; align-items: center; }
.resource-card .btn-group { display: flex; gap: 12px; }
.resource-card .btn { text-decoration: none; padding: 10px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.resource-card .btn-primary { background-color: #67C23A; color: #fff; border: 1px solid #67C23A; box-shadow: 0 2px 4px rgba(103,194,58,0.2); }
.resource-card .btn-primary:hover { background-color: #5daf34; color: #fff; text-decoration: none; }
.resource-card .btn-outline { background-color: #fff; color: #606266; border: 1px solid #dcdfe6; }
.resource-card .btn-outline:hover { color: #409EFF; border-color: #c6e2ff; background-color: #ecf5ff; text-decoration: none; }
.resource-card .notice { font-size: 12px; color: #C0C4CC; }

/* 响应式适配 */
@media (max-width: 600px) { 
    .resource-card .info-grid { grid-template-columns: 1fr; gap: 12px; }
    .resource-card .gallery { grid-template-columns: repeat(2, 1fr); } 
    .resource-card .card-footer { flex-direction: column; gap: 15px; } 
}