/* ==========================================
   1. 为不同的主题模式定义卡片变量
   ========================================== */

/* ===== 亮色/白色主题 (Default) ===== */
:root, [data-theme="light"] {
    --card-bg: #c9d1d9;             /* 白色模式下，卡片采用纯白底色 */
    --card-title-color: #404040;    /* 配合白底的深灰色标题 */
    --card-subtitle-color: #a3a3a3; /* 配合白底的浅灰色简介 */
    --card-hover-title: #0085a1;    /* 悬浮时的经典蓝色 */
    --card-border-color: rgba(0, 0, 0, 0.05);
}

/* ===== 暗色主题 (#4d4d4d) ===== */
[data-theme="dark"] {
    --card-bg: #702424;             /* 暗色模式下，改用你指定的红棕色背景 */
    --card-title-color: #eff4ff;    /* 配合红棕色底的高亮浅色标题 */
    --card-subtitle-color: #c9d1d9; /* 配合红棕色底的明亮简介文字 */
    --card-hover-title: #7fb4ff;    /* 悬浮时的明亮蓝色 */
    --card-border-color: rgba(255, 255, 255, 0.1);
}


/* ==========================================
   2. 应用到文章卡片 (.post-preview) 上（格式大小完全不变）
   ========================================== */
.post-preview {
    position: relative; /* 必须为绝对定位的背景层提供容器 */
    overflow: hidden;   /* 必须裁剪边缘模糊的图片，防止溢出卡片 */

    /* ⚠️ 完全保留你原本的一切尺寸与圆角格式 */
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border-color) !important;
    
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.3s ease;
    
    padding: 4px 24px;
    border-radius: 8px;
    margin-bottom: 5px;
}

/* 直接将卡片原本自带的 a 标签和 p 标签提到最上层，防止被模糊背景覆盖 */
.post-preview > a,
.post-preview > p.post-meta {
    position: relative;
    z-index: 3;
}

/* 鼠标悬浮到整块文章卡片上时的动态反馈 */
.post-preview:hover {
    transform: translateY(-6px); 
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); 
    border-color: transparent !important;   
}


/* ==========================================
   3. 图片自适应卡片本身的大小 + 模糊效果
   ========================================== */
/* 平时没图时彻底隐藏，不影响原纯色卡片 */
.post-preview .card-blur-background,
.post-preview .card-image-overlay {
    display: none; 
}

/* 当检测到 pre-image 激活时 */
.post-preview.has-bg-img {
    border: none !important; /* 有图时去掉原纯色边框 */
}

/* 让背景图完美自适应卡片尺寸（不撑大、不改变卡片原本大小） */
.post-preview.has-bg-img .card-blur-background {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* 铺满卡片自身 */
    z-index: 1;                           /* 压在最底层 */
    
    /* 🌟 冲突修正：删除了之前错误的纯色渐变叠加。直接单层渲染变量图片 */
    background-image: var(--card-post-img);
    background-size: cover;      /* 图片等比例自适应缩放铺满 */
    background-position: center;  /* 居中对齐 */
    filter: blur(2px);          /* 高斯模糊效果 */
    transform: scale(1.02);      /* 微微放大消除模糊带来的死角白边 */
    opacity: 0.85;                /* 适当降低图片亮度，突显文字 */
}

/* 🌟 核心改动：暗色遮罩层只在“图片真的成功显示”时作为文字背景 */
.post-preview.has-bg-img .card-image-overlay {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2; /* 在图片之上，文字之下 */
    
    /* 🌟 这里改为半透明黑色遮罩，既能沉淀白字，在图片加载失败时又不会完全封死底层主题色 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
}


/* ==========================================
   4. 动态控制卡片内部的标题与内容颜色
   ========================================== */
/* 平时文章标题的过渡属性与动态颜色 */
.post-preview .post-title {
    color: var(--card-title-color) !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* 当鼠标滑过整块卡片时，标题变色并微微右移 */
.post-preview:hover .post-title {
    color: var(--card-hover-title) !important; 
    display: inline-block;
    transform: translateX(3px); 
}

/* 动态控制副标题/简介文字的颜色 */
.post-preview .post-subtitle {
    color: var(--card-subtitle-color) !important;
    transition: color 0.3s ease;
}

/* 悬浮时让副标题字色稍微加深提亮一点，增加联动 */
.post-preview:hover .post-subtitle {
    color: var(--card-title-color) !important;
}


/* ==========================================
   5. 有背景图时的文字颜色适配（仅改字色，不改大小和格式）
   ========================================== */
.post-preview.has-bg-img .post-title { color: #ffffff !important; }
.post-preview.has-bg-img .post-subtitle { color: rgba(255, 255, 255, 0.85) !important; }
.post-preview.has-bg-img .post-content-preview { color: rgba(255, 255, 255, 0.75) !important; }
.post-preview.has-bg-img .post-meta { color: rgba(255, 255, 255, 0.55) !important; }
.post-preview.has-bg-img .post-meta a { color: rgba(255, 255, 255, 0.8) !important; }

/* 有背景图时悬浮，标题依然会亮起对应的主题色 */
.post-preview.has-bg-img:hover .post-title {
    color: var(--card-hover-title) !important;
}


/* 卡片里的图标样式 */
/* ==========================================
   🌟 卡片图标排版微调
   ========================================== */

/* 让图标与文字同行居中对齐 */
.post-preview .card-icon {
    display: inline-block;
    vertical-align: -2px; /* 修正微调偏移量 */
    margin-right: 6px;    /* 图标与文字的右间距 */
    stroke-width: 2px;
}

/* 标题图标特化 */
.post-preview .post-title .card-icon {
    vertical-align: -1px;
    margin-right: 8px;
    opacity: 0.85;
}

/* 简介文字图标稍微淡化，不要太抢眼 */
.post-preview .post-content-preview .mini-icon {
    vertical-align: -1px;
    opacity: 0.6;
}

/* 底部元数据项排版（作者、日期、地点） */
.post-preview .post-meta {
    display: flex;
    flex-wrap: wrap;       /* 核心：大屏一行显示，手机屏幕若实在挤不下时允许自动折行，防止溢出卡片 */
    align-items: center;   /* 垂直方向居中对齐 */
    gap: 16px;             /* 元素与元素之间的横向/纵向物理间距，告别拥挤 */
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.post-preview .meta-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;   /* 核心：确保“图标+文字”作为一个整体永远不换行（例如不会发生图标在第一行，文字被挤到第二行的情况） */
}

/* 🌟 在项与项之间添加轻量级小圆点分割线（可选，极具现代媒体感） */
.post-preview .meta-item + .meta-item::before {
    content: "•";
    margin-right: 16px;    /* 刚好与 gap 遥相呼应 */
    opacity: 0.4;
    font-size: 10px;
    vertical-align: middle;
    display: inline-block;
}

.post-preview .meta-icon {
    margin-right: 4px;
    opacity: 0.7; /* 图标比文字略淡，符合现代UI规范 */
}

/* 地点图标特殊联动效果（可选，悬浮时亮起提示） */
.post-preview:hover .location-item {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}