/**
 * DripSafe Content Display Styles - Article Typography, Code Blocks, Images, Tables
 * Version: 1.0.0
 * Requires: variables.css, base.css
 */

/* ============================
   1. Article Typography — .ds-single__content
   ============================ */

.ds-single__content {
    /* 桌面端：18px，宽松行高 */
    font-size: var(--ds-text-lg);       /* 18px */
    line-height: 1.75;                   /* 1.75–1.8，符合要求 */
    color: var(--ds-text-primary);
    word-break: break-word;
    text-align: left;
}

/* 段落：增加间距 */
.ds-single__content p {
    margin-bottom: var(--ds-space-6);
    /* 首行可选缩进（取消注释可启用） */
    /* text-indent: 2em; */
}

/* H2 — 章节标题 */
.ds-single__content h2 {
    font-size: var(--ds-text-2xl);
    font-weight: var(--ds-font-semibold);
    line-height: 1.4;
    color: var(--ds-text-primary);
    margin: var(--ds-space-12) 0 var(--ds-space-5);
    padding-bottom: var(--ds-space-3);
    border-bottom: 2px solid var(--ds-border);
    position: relative;
}

/* H2 左则强调线 */
.ds-single__content h2::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 48px;
    height: 2px;
    background-color: var(--ds-primary);
}

/* H3 — 子章节 */
.ds-single__content h3 {
    font-size: var(--ds-text-xl);
    font-weight: var(--ds-font-semibold);
    line-height: 1.45;
    color: var(--ds-text-primary);
    margin: var(--ds-space-10) 0 var(--ds-space-4);
}

/* H4 — 小节 */
.ds-single__content h4 {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-medium);
    color: var(--ds-text-primary);
    margin: var(--ds-space-8) 0 var(--ds-space-3);
}

/* 链接 */
.ds-single__content a {
    color: var(--ds-link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-single__content a:hover {
    color: var(--ds-link-hover-color);
}

/* strong / em */
.ds-single__content strong {
    font-weight: var(--ds-font-semibold);
    color: var(--ds-text-primary);
}

.ds-single__content em {
    font-style: italic;
}

/* 引用块 */
.ds-single__content blockquote {
    margin: var(--ds-space-8) 0;
    padding: var(--ds-space-5) var(--ds-space-6);
    border-left: 4px solid var(--ds-primary);
    background-color: var(--ds-bg-secondary);
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
    color: var(--ds-text-secondary);
    font-style: italic;
}

.ds-single__content blockquote p {
    margin-bottom: 0;
    line-height: 1.75;
}

/* 列表 */
.ds-single__content ul,
.ds-single__content ol {
    margin: var(--ds-space-4) 0 var(--ds-space-6);
    padding-left: var(--ds-space-6);
}

.ds-single__content ul {
    list-style-type: disc;
}

.ds-single__content ol {
    list-style-type: decimal;
}

.ds-single__content li {
    margin-bottom: var(--ds-space-2);
    line-height: 1.75;
    padding-left: var(--ds-space-1);
}

/* 嵌套列表 */
.ds-single__content li ul,
.ds-single__content li ol {
    margin: var(--ds-space-2) 0;
}

/* 分割线 */
.ds-single__content hr {
    border: none;
    border-top: 1px solid var(--ds-border);
    margin: var(--ds-space-12) 0;
}

/* ============================
   2. Code Blocks — pre / code
   ============================ */

/* 行内代码 */
.ds-single__content code {
    background-color: var(--ds-gray-100);
    padding: 2px 7px;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-mono);
    font-size: 0.875em;
    color: var(--ds-error);
    word-break: break-word;
}

[data-theme="dark"] .ds-single__content code {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f8b4b4;
}

/* 预格式化代码块容器 */
.ds-single__content .code-block-wrapper {
    position: relative;
    margin: var(--ds-space-6) 0;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    background-color: #1e1e1e;        /* VS Code 深色主题 */
    border: 1px solid #333;
    box-shadow: var(--ds-shadow-md);
}

/* 语言标签 */
.ds-single__content .code-block-wrapper .code-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-2) var(--ds-space-4);
    background-color: #2d2d2d;
    border-bottom: 1px solid #404040;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    color: #888;
    user-select: none;
}

.ds-single__content .code-block-wrapper .code-lang span {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 复制按钮 */
.ds-single__content .code-block-wrapper .code-copy-btn {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: var(--ds-space-1) var(--ds-space-3);
    background: transparent;
    border: 1px solid #555;
    border-radius: var(--ds-radius-sm);
    color: #aaa;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-xs);
    cursor: pointer;
    transition: all var(--ds-duration-fast) var(--ds-ease);
    white-space: nowrap;
}

.ds-single__content .code-block-wrapper .code-copy-btn:hover {
    background: #404040;
    color: #fff;
    border-color: #666;
}

.ds-single__content .code-block-wrapper .code-copy-btn.copied {
    color: var(--ds-success);
    border-color: var(--ds-success);
}

/* pre 代码块 */
.ds-single__content .code-block-wrapper pre {
    margin: 0;
    padding: var(--ds-space-4) var(--ds-space-5);
    background-color: #1e1e1e;
    border-radius: 0;
    overflow-x: auto;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-sm);
    line-height: 1.7;
    color: #d4d4d4;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

/* 行号 */
.ds-single__content .code-block-wrapper pre .code-line {
    display: block;
    min-height: 1.7em;
}

.ds-single__content .code-block-wrapper pre .line-number {
    display: inline-block;
    width: 3em;
    padding-right: 1em;
    color: #555;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
}

/* 语法高亮 — 纯 CSS token 色（VS Code Dark+ 风格） */
.ds-single__content .code-block-wrapper pre .ht { color: #569cd6; } /* keyword */
.ds-single__content .code-block-wrapper pre .hf { color: #4ec9b0; } /* function */
.ds-single__content .code-block-wrapper pre .hs { color: #ce9178; } /* string */
.ds-single__content .code-block-wrapper pre .hn { color: #b5cea8; } /* number */
.ds-single__content .code-block-wrapper pre .hc { color: #6a9955; } /* comment */
.ds-single__content .code-block-wrapper pre .hp { color: #9cdcfe; } /* param */
.ds-single__content .code-block-wrapper pre .ht { color: #4ec9b0; } /* type */
.ds-single__content .code-block-wrapper pre .ho { color: #dcdcaa; } /* operator */
.ds-single__content .code-block-wrapper pre .hk { color: #569cd6; } /* keyword */

/* fallback：pre 样式（无 wrapper 时） */
.ds-single__content pre:not(.code-block-wrapper pre) {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: var(--ds-space-4) var(--ds-space-5);
    border-radius: var(--ds-radius-lg);
    overflow-x: auto;
    margin: var(--ds-space-6) 0;
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-sm);
    line-height: 1.7;
    border: 1px solid #333;
}

.ds-single__content pre:not(.code-block-wrapper pre) code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ============================
   3. Image Display — img + caption
   ============================ */

/* 文章图片基础 */
.ds-single__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-lg);
    margin: var(--ds-space-6) 0 var(--ds-space-2);
    cursor: pointer;
    transition: transform var(--ds-duration-normal) var(--ds-ease),
                box-shadow var(--ds-duration-normal) var(--ds-ease);
    display: block;
}

/* 图片 hover 放大提示 */
.ds-single__content img:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .ds-single__content img:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* 图片说明 caption */
.ds-single__content .wp-caption {
    max-width: 100%;
    margin: var(--ds-space-4) 0 var(--ds-space-8);
}

.ds-single__content .wp-caption img {
    margin-bottom: var(--ds-space-2);
}

.ds-single__content .wp-caption-text,
.ds-single__content figcaption,
.ds-single__content .ds-image-caption {
    display: block;
    text-align: center;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    margin-top: 0;
    padding: 0 var(--ds-space-4);
    line-height: 1.5;
    font-style: italic;
}

/* 图片暗影变体 */
.ds-single__content img[src*=".svg"] {
    background: transparent;
}

/* featured image 不加 cursor pointer */
.ds-single__featured-image {
    cursor: default !important;
}

.ds-single__featured-image:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ============================
   4. Table Styling
   ============================ */

/* 响应式表格容器 */
.ds-single__content .table-responsive,
.ds-single__content .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--ds-space-6) 0;
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm);
}

.ds-single__content table,
.ds-single__content .wp-block-table table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    margin: 0;
    font-size: var(--ds-text-base);
    line-height: 1.6;
}

/* 表头 */
.ds-single__content thead th,
.ds-single__content .wp-block-table thead th {
    background-color: var(--ds-primary);
    color: #fff;
    font-weight: var(--ds-font-semibold);
    padding: var(--ds-space-3) var(--ds-space-4);
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--ds-primary-dark);
}

[data-theme="dark"] .ds-single__content thead th,
[data-theme="dark"] .ds-single__content .wp-block-table thead th {
    background-color: var(--ds-primary-dark);
    border-bottom-color: var(--ds-primary);
}

/* 表格行 */
.ds-single__content tbody tr,
.ds-single__content .wp-block-table tbody tr {
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-single__content tbody tr:hover,
.ds-single__content .wp-block-table tbody tr:hover {
    background-color: var(--ds-bg-secondary);
}

/* 斑马纹 */
.ds-single__content tbody tr:nth-child(even),
.ds-single__content .wp-block-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .ds-single__content tbody tr:nth-child(even),
[data-theme="dark"] .ds-single__content .wp-block-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* 单元格 */
.ds-single__content td,
.ds-single__content th,
.ds-single__content .wp-block-table td,
.ds-single__content .wp-block-table th {
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid var(--ds-border);
    text-align: left;
    vertical-align: top;
}

[data-theme="dark"] .ds-single__content td,
[data-theme="dark"] .ds-single__content th {
    border-color: var(--ds-border-dark);
}

/* ============================
   5. Lightbox (pure CSS + JS)
   ============================ */

.ds-lightbox-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-normal) var(--ds-ease),
                visibility var(--ds-duration-normal) var(--ds-ease);
    cursor: zoom-out;
    padding: var(--ds-space-6);
}

.ds-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ds-lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform var(--ds-duration-normal) var(--ds-ease);
    cursor: default;
    margin: 0;
}

.ds-lightbox-overlay.active img {
    transform: scale(1);
}

.ds-lightbox-overlay:hover img {
    transform: scale(1);
}

.ds-lightbox-caption {
    position: absolute;
    bottom: var(--ds-space-6);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--ds-text-sm);
    text-align: center;
    max-width: 600px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-lightbox-close {
    position: absolute;
    top: var(--ds-space-4);
    right: var(--ds-space-4);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background var(--ds-duration-fast) var(--ds-ease);
}

.ds-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================
   6. 移动端适配
   ============================ */

@media (max-width: 767px) {
    .ds-single__content {
        /* 移动端：16px */
        font-size: var(--ds-text-base);  /* 16px */
        line-height: 1.75;
    }

    .ds-single__content h2 {
        font-size: var(--ds-text-xl);
        margin: var(--ds-space-10) 0 var(--ds-space-4);
    }

    .ds-single__content h3 {
        font-size: var(--ds-text-lg);
        margin: var(--ds-space-8) 0 var(--ds-space-3);
    }

    .ds-single__content h4 {
        font-size: var(--ds-text-base);
    }

    .ds-single__content p {
        margin-bottom: var(--ds-space-5);
    }

    /* 代码块移动端 */
    .ds-single__content .code-block-wrapper pre {
        font-size: var(--ds-text-xs);
        padding: var(--ds-space-3);
    }

    .ds-single__content pre:not(.code-block-wrapper pre) {
        font-size: var(--ds-text-xs);
        padding: var(--ds-space-3);
    }

    /* 图片移动端 */
    .ds-single__content img {
        border-radius: var(--ds-radius-md);
    }

    /* 表格 */
    .ds-single__content .table-responsive,
    .ds-single__content .wp-block-table {
        margin-left: calc(-1 * var(--ds-page-padding));
        margin-right: calc(-1 * var(--ds-page-padding));
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .ds-single__content table {
        font-size: var(--ds-text-sm);
    }

    /* 引用块 */
    .ds-single__content blockquote {
        padding: var(--ds-space-4);
        margin-left: 0;
        margin-right: 0;
    }

    /* 列表 */
    .ds-single__content ul,
    .ds-single__content ol {
        padding-left: var(--ds-space-5);
    }

    /* 暗箱 */
    .ds-lightbox-overlay {
        padding: 0;
    }

    .ds-lightbox-caption {
        bottom: var(--ds-space-4);
        font-size: var(--ds-text-xs);
        padding: 0 var(--ds-space-4);
    }
}

/* ============================
   7. 平板适配
   ============================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .ds-single__content {
        font-size: 17px;
        line-height: 1.75;
    }
}

/* ============================
   8. 无障碍增强
   ============================ */

@media (prefers-reduced-motion: reduce) {
    .ds-single__content img,
    .ds-lightbox-overlay,
    .ds-lightbox-overlay img,
    .ds-single__content .code-copy-btn {
        transition: none;
    }
}

/* 焦点样式 */
.ds-single__content a:focus-visible,
.ds-single__content img:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}