/* =========================================================
   博客自定义样式 - 三模式切换
   白昼模式（light）、黑夜模式（dark）、红蓝渐变（gradient）
   ========================================================= */

/* ========== gradient模式：红蓝上下渐变 ========== */
html[data-theme="gradient"] body {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
 background-attachment: fixed !important;
}

html[data-theme="gradient"] #post,
html[data-theme="gradient"] .layout {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
}

html[data-theme="gradient"] #nav {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
}

html[data-theme="gradient"] .recent-post-item,
html[data-theme="gradient"] #sidebar-avatar,
html[data-theme="gradient"] #sidebar-welcome,
html[data-theme="gradient"] .card-widget {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
}

/* gradient模式的文字锐化 - 同时提升文章内容清晰度 */
html[data-theme="gradient"] .recent-post-item .article-title,
html[data-theme="gradient"] .article-container,
html[data-theme="gradient"] .article-meta-wrap,
html[data-theme="gradient"] .welcome-text,
html[data-theme="gradient"] .avatar-text,
html[data-theme="gradient"] #post .article-container {
 color: #ffffff !important;
 text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
 position: relative;
 z-index: 1;
}

/* gradient模式的文章卡片直接使用红蓝渐变背景 */
html[data-theme="gradient"] .recent-post-item,
html[data-theme="gradient"] #sidebar-avatar,
html[data-theme="gradient"] #sidebar-welcome,
html[data-theme="gradient"] .card-widget {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
}

/* gradient模式的导航栏 */
html[data-theme="gradient"] #nav {
 background: linear-gradient(to right, #ff4b2b, #4b6cb7) !important;
}

/* gradient模式的文字锐化 */
html[data-theme="gradient"] .recent-post-item .article-title,
html[data-theme="gradient"] .article-container,
html[data-theme="gradient"] .welcome-text,
html[data-theme="gradient"] .avatar-text {
 color: #ffffff !important;
 text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
 position: relative;
 z-index: 1;
}

/* 右侧卡片头像修复 */
.card-info .avatar {
    width: 118px !important;
    height: 118px !important;
    overflow: visible !important;
}

.card-info .avatar picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.card-info .avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* 使用背景图作为备用方案 */
.card-info .avatar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/avatar.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 1;
}

/* 隐藏原图片，显示背景图 */
.card-info .avatar picture {
    opacity: 0;
    position: relative;
    z-index: 0;
}

/* 版权声明区作者头像 */
.post-copyright__author_img {
    width: 80px !important;
    height: 80px !important;
    overflow: hidden !important;
}

.post-copyright__author_img picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.post-copyright__author_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* ============================================================
   加载页头像防拉伸
   ============================================================ */
#loading-box picture.loading-img,
#loading-box .loading-img,
#loading-box .loading-bg picture,
#loading-box .loading-bg img {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    margin: auto !important;
}

/* 覆盖 img 标签的内联宽高属性 */
#loading-box picture img {
    width: 100px !important;
    height: 100px !important;
}

/* ============================================================
   博客文章图片防拉伸
   ============================================================ */
#post .article-container img:not(.avatar *):not(.loading-img *),
.article-content img:not(.avatar *):not(.loading-img *),
.markdown-body img:not(.avatar *):not(.loading-img *),
.post-content img:not(.avatar *):not(.loading-img *) {
    max-width: 100% !important;
    height: auto !important;
}