/* 博客风格自定义样式 - 精简整合 + 主题响应式 */

/* 统一品牌变量（头部/标签页共用） */
:root {
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-shadow: 0 2px 10px rgba(102,126,234,0.2);
    --brand-on: #ffffff;
}

/* 导航标签样式优化 */
.md-tabs__link {
    color: #ecf0f1 !important; /* 未选中标签的浅色 */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.md-tabs__link:hover {
    color: var(--brand-on) !important;
    opacity: 1;
}

/* 激活态（兼容两种选择器） */
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
    color: var(--brand-on) !important;
    opacity: 1;
    font-weight: 500;
}

/* 顶部导航栏与主导航栏背景统一 */
.md-header,
.md-tabs {
    background: var(--brand-gradient);
    box-shadow: var(--brand-shadow);
}

/* 头部文本/链接/图标统一颜色 */
.md-header,
.md-header :is(a, .md-icon, .md-header__button, .md-source__icon, .md-source__repository) {
    color: var(--brand-on) !important;
}

/* 头部悬停反馈 */
.md-header a:hover,
.md-header__source:hover {
    color: rgba(255,255,255,0.8) !important;
    opacity: 0.8;
}

/* 版本号或分支名 */
.md-source__version {
    color: rgba(255,255,255,0.8) !important;
}

/* 搜索框样式 */
.md-search__input {
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--brand-on);
}

.md-search__input::placeholder {
    color: rgba(255,255,255,0.7);
}

/* 首页专用样式 - 主题响应式 */

/* 亮色模式样式 */
[data-md-color-scheme="default"] {
    /* 渐变按钮 - 亮色模式 */
    --gradient-btn-bg: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    --gradient-btn-shadow: 0 8px 20px rgba(102,126,234,0.4);
    --gradient-btn-color: #ffffff; /* 亮色模式按钮文字为白色 */
    --card-bg: #ffffff;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.08);
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: rgba(0,0,0,0.1);
}

/* 暗色模式样式 */
[data-md-color-scheme="slate"] {
    /* 渐变按钮 - 暗色模式 */
    --gradient-btn-bg: linear-gradient(45deg, #8b7cf6 0%, #a855f7 100%);
    --gradient-btn-shadow: 0 8px 20px rgba(139,124,246,0.4);
    --gradient-btn-color: #ffffff; /* 暗色模式按钮文字也为白色 */
    --card-bg: var(--md-default-bg-color);
    --card-shadow: 0 4px 15px rgba(0,0,0,0.3);
    --text-primary: var(--md-default-fg-color);
    --text-secondary: var(--md-default-fg-color--light);
    --border-color: var(--md-default-fg-color--lightest);
}

/* 响应式渐变按钮 */
.gradient-btn {
    background: var(--gradient-btn-bg);
    color: var(--gradient-btn-color) !important;
    text-decoration: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s ease;
}

.gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--gradient-btn-shadow);
    color: var(--gradient-btn-color) !important;
    text-decoration: none;
}

/* 响应式卡片样式 */
.theme-card {
    background: var(--card-bg);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 响应式文本样式 */
.theme-text-primary {
    color: var(--text-primary);
}

.theme-text-secondary {
    color: var(--text-secondary);
}

/* 响应式边框 */
.theme-border {
    border: 1px solid var(--border-color);
}

/* 响应式网格 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
}

/* 遵循系统“减少动态效果”偏好：关闭过渡/位移动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .gradient-btn:hover,
    .theme-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =============================
   图像呈现与垂直间距优化
   - 让上下紧邻的图片间距更舒适
   - 兼容 Markdown 图片段落与 HTML 包裹
   - 避免表格内图片被拉大间距
   ============================= */

/* 基础图像适配（安全兜底） + 统一间距 */
.md-typeset :where(img, picture, figure) {
    max-width: 100%;
    height: auto;
}

/* Markdown 纯图片段落：用 padding 避免外边距塌陷，确保可见间距 */
.md-typeset p:has(> img:only-child),
.md-typeset p:has(> a:only-child > img:only-child) {
    margin-block: 0;         /* 避免与相邻段落合并塌陷 */
    padding-block: 1rem;     /* 垂直内边距≈16px，形成稳定空隙 */
}

/* HTML 居中包装的图片（仅包含图片时） */
.md-typeset div:has(> img:only-child) {
    margin-block: 1rem; /* 与站点整体节距协调 */
}

/* 图片自身作为块级元素，保证可居中与一致的内外距 */
.md-typeset p > img,
.md-typeset a > img,
.md-typeset div > img,
.md-typeset figure {
    display: block;
    margin-inline: auto;
}

/* 回退方案：即便浏览器不支持 :has，也给仅包含图片的段落留出上下空隙 */
.md-typeset p > img:only-child,
.md-typeset p > a:only-child > img:only-child {
    margin-block: 1rem; /* 约 16px */
}

/* 回退方案：div 仅包含单图的情况也提供上下空隙 */
.md-typeset div > img:only-child {
    margin-block: 0.75rem; /* 略小，和周边节距协调 */
}

/* 连续图片（同级相邻）时的额外上间距微调 */
.md-typeset img + img,
.md-typeset figure + figure {
    margin-top: 1rem;
}

/* 表格内图片保持紧凑，不改变表格布局 */
.md-typeset table img {
    margin: 0 !important;
    display: inline-block;
}

/* mkdocs-material[imaging] 通常将 Markdown 图片渲染为 <figure>：确保有可见间距 */
.md-typeset figure {
    margin-block: 1.25rem !important; /* 约 20px 的上下间距 */
}

/* —— 图片呈现增强 —— */
/* 常规图片：自适应容器，圆角与统一间距 */
.md-typeset img {
    display: block;
    border-radius: 8px;
    margin-block: 1.25rem; /* 统一更明显的间距 */
}

/* 排除 .md-author 容器内的所有图片（博客作者头像） */
.md-author img {
    display: inline-block !important;
    margin-block: 0 !important;
    border-radius: 50% !important; /* 保持圆形头像 */
}

/* 与 GLightbox 配合：悬停轻微浮起（遵循减少动画偏好） */
a.glightbox img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
a.glightbox:hover img {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 表格内图片适配：避免撑破表格且保持紧凑 */
.md-typeset table img {
    max-width: 100%;
    height: auto;
    margin: 0;
    display: inline-block;
}

/* 图片标题/说明样式（figcaption） */
.md-typeset figure figcaption {
    margin-top: 0.5rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.85rem;
    text-align: center;
}

/* =============================
   媒体与嵌入的通用工具类（替代内联样式）
   ============================= */
/* 居中媒体容器（单图/多图通用） */
.media-center {
    text-align: center;
}

/* 常用图片最大宽度约束 */
.img-600 {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* 通用嵌入卡片容器 */
.embed-card {
    text-align: center;
    margin: 20px 0;
}

/* 统一的 iframe 外观（圆角 + 阴影 + 自适应） */
.embed-frame {
    width: 100%;
    height: 600px;
    max-width: 1000px;
    min-height: 480px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 嵌入说明/提示条 */
.embed-note {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.embed-note--blue { background: rgba(0, 123, 255, 0.1); }
.embed-note--cyan { background: rgba(28, 170, 217, 0.1); }

/* Sketchfab 版权信息文本 */
.embed-credits {
    font-size: 13px;
    font-weight: normal;
    margin: 10px 5px;
    color: #4A4A4A;
    text-align: center;
}

/* =============================
   通用两列图片布局（响应式）
   - 在桌面端并列等宽
   - 在移动端自动换行
   ============================= */
.two-col-images {
    display: flex;
    gap: 12px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.two-col-item {
    flex: 1 1 420px; /* 两列：容器宽度足够时并列，小屏自动堆叠 */
    margin: 0;
}
.two-col-item img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.two-col-caption {
    width: 100%;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
    color: var(--md-default-fg-color--light, #666);
    font-size: 0.9rem;
}
@media (max-width: 640px) {
    .two-col-item img { max-height: 360px; }
}