/**
 * LineArt Fix CSS
 * 修复单页文章头部和内容样式问题
 */

/* =============== 页头部分 =============== */
/* 确保页头与首页一致 */
body.single-lineart .site-header {
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* 强制Logo位置在最左侧 */
body.single-lineart .ast-site-identity {
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

body.single-lineart .ast-logo-title-inline .site-logo-img {
    margin-right: auto;
    padding-right: 0;
}

body.single-lineart .main-header-bar-wrap {
    width: 100%;
}

body.single-lineart .ast-container {
    padding-left: 20px;
    padding-right: 20px;
}

/* =============== 内容主体布局 =============== */
body.single-lineart .lineart-content-wrapper {
    display: grid;
    grid-template-columns: 65% 30%;
    gap: 5%;
    margin: 30px 0;
}

@media (max-width: 768px) {
    body.single-lineart .lineart-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* =============== 左侧图片预览区域 =============== */
body.single-lineart .lineart-preview-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 主图容器 */
body.single-lineart .preview-container {
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 10px;
    background: #fff;
}

body.single-lineart .main-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    overflow: hidden;
}

body.single-lineart #lineart-main-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 多图导航控件 */
body.single-lineart .image-navigation {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

body.single-lineart .image-navigation span {
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

body.single-lineart .image-navigation span:hover {
    opacity: 1;
}

/* 图片控制按钮 */
body.single-lineart .image-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

body.single-lineart .image-controls button,
body.single-lineart .image-controls .download-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
}

body.single-lineart .image-controls button:hover,
body.single-lineart .image-controls .download-btn:hover {
    background: #e0e0e0;
}

/* 缩略图列表 */
body.single-lineart .thumbnails-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

body.single-lineart .thumbnail {
    width: 70px;
    height: 70px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}

body.single-lineart .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.single-lineart .thumbnail.active {
    border-color: #0073aa;
}

/* =============== 右侧信息区域 =============== */
body.single-lineart .lineart-info-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.single-lineart .lineart-categories h3,
body.single-lineart .lineart-description h3,
body.single-lineart .lineart-tags h3 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eaeaea;
}

body.single-lineart .lineart-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.single-lineart .lineart-categories li {
    margin-bottom: 5px;
}

/* 描述中隐藏图片 */
body.single-lineart .description-text-only img {
    display: none !important;
}

body.single-lineart .description-text-only .wp-block-image,
body.single-lineart .description-text-only figure {
    display: none !important;
}

/* 美化标签区域 */
body.single-lineart .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

body.single-lineart .tag-item {
    display: inline-block;
    padding: 4px 10px;
    background-color: #f5f5f5;
    border-radius: 3px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

body.single-lineart .tag-item:hover {
    background-color: #e0e0e0;
    color: #000;
}

/* =============== 相关线稿区域 =============== */
body.single-lineart .related-lineart {
    margin-top: 30px;
    border-top: 1px solid #eaeaea;
    padding-top: 20px;
}

body.single-lineart .related-lineart h2 {
    margin-bottom: 20px;
}

body.single-lineart .related-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

body.single-lineart .related-item {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

body.single-lineart .related-item:hover {
    transform: translateY(-5px);
}

body.single-lineart .related-item-image {
    border: 1px solid #eaeaea;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

body.single-lineart .related-item-image img {
    width: 100%;
    height: auto;
    display: block;
}

body.single-lineart .related-item h3 {
    font-size: 14px;
    margin: 5px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标题和菜单位置修正 */
body.single-lineart .main-header-bar-wrap {
    width: 100%;
}

body.single-lineart .main-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 确保logo大小与首页一致 */
body.single-lineart .site-branding {
    margin: 0;
    padding: 10px 0;
}

/* 修复导航菜单位置 */
body.single-lineart .main-navigation {
    display: flex;
    align-items: center;
}

/* 内容区域样式 */
body.single-lineart .lineart-content-wrapper {
    margin-top: 30px;
}

/* 标签样式 */
body.single-lineart .lineart-tags {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

body.single-lineart .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

body.single-lineart .tag-item {
    padding: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.9em;
    color: #333;
}

body.single-lineart .tag-item:hover {
    background-color: #e0e0e0;
}

/* 返回按钮样式 */
body.single-lineart .back-btn {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.single-lineart .back-btn:hover {
    background-color: #e0e0e0;
}