/* ========================= Article Detail Page Styles ========================= */

/* 通用 a 标签样式 */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: white;
    text-decoration: none;
}

/* Two-Column Layout */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: calc((60/1918) * 100vw);
    width: 100%;
    align-items: start;
    overflow: hidden; /* 防止子元素溢出 */
}

/* Main Article Column */
.article-main {
    width: 100%;
    min-width: 0; /* 允许 grid 子元素缩小 */
    background-color: var(--white);
    overflow: hidden; /* 防止内容溢出 */
}

/* Article Header */
.article-header {
    margin-bottom: calc((30/1918) * 100vw);
    padding-bottom: calc((30/1918) * 100vw);
    border-bottom: 1px solid var(--brand-gray-light);
}

.article-title {
    font-family: var(--font-heading);
    font-size: calc((36/1918) * 100vw);
    font-weight: bold;
    color: var(--text-gray-700);
    margin: 0 0 calc((15/1918) * 100vw) 0;
    line-height: 1.3;
}

.article-meta {
    font-family: var(--font-body);
    font-size: calc((14/1918) * 100vw);
    color: var(--text-gray-500);
    display: flex;
    align-items: baseline;
    gap: calc((8/1918) * 100vw);
}

.article-meta .meta-separator {
    color: var(--text-gray-500);
}

/* Article Content */
.article-content {
    font-family: var(--font-body);
    font-size: calc((16/1918) * 100vw);
    color: var(--text-gray-700);
    line-height: 1.8;
}

.article-content p {
    margin: 0 0 calc((20/1918) * 100vw) 0;
}

.article-image-wrapper {
    margin: calc((40/1918) * 100vw) 0;
    text-align: center;
}

.article-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: calc((8/1918) * 100vw);
}

/* Prev/Next Navigation */
.article-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc((30/1918) * 100vw);
    margin-top: calc((60/1918) * 100vw);
    padding-top: calc((40/1918) * 100vw);
    border-top: 1px solid var(--brand-gray-light);
}

.nav-link {
    font-family: var(--font-body);
    font-size: calc((14/1918) * 100vw);
    color: var(--text-gray-500);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: calc((5/1918) * 100vw);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--brand-primary);
}

.nav-link:hover .nav-title {
    color: var(--brand-primary);
}

.nav-prev {
    text-align: left;
}

.nav-next {
    text-align: right;
}

.nav-arrow {
    font-weight: bold;
}

.nav-title {
    font-size: calc((14/1918) * 100vw);
    color: var(--text-gray-500);
    transition: color 0.3s ease;
}

/* Sidebar */
.article-sidebar {
    width: 100%;
    min-width: 0; /* 允许 grid 子元素缩小 */
    position: sticky;
    top: calc((100/1918) * 100vw);
    overflow: hidden; /* 防止内容溢出 */
}

.sidebar-section {
    background-color: var(--white);
}

.sidebar-section-title {
    font-family: var(--font-heading);
    font-size: calc((22/1918) * 100vw);
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 calc((25/1918) * 100vw) 0;
}

/* Sidebar News Card - Same style as news-card but smaller */
.sidebar-news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: rgb(249, 249, 249);
    overflow: hidden;
    margin-top: calc((15/1918) * 100vw);
    margin-bottom: calc((25/1918) * 100vw);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.sidebar-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.sidebar-card-content {
    padding: calc((15/1918) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc((10/1918) * 100vw);
}

.sidebar-card-title {
    font-family: var(--font-heading);
    font-size: calc((14/1918) * 100vw);
    font-weight: 600;
    color: var(--text-gray-700);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.sidebar-news-card:hover .sidebar-card-title {
    color: var(--brand-primary);
}

.sidebar-card-meta {
    font-family: var(--font-body);
    font-size: calc((12/1918) * 100vw);
    color: var(--text-gray-500);
    display: flex;
    align-items: baseline;
    gap: calc((6/1918) * 100vw);
}

/* Product Center Section */
.product-center-section {
    margin-top: 0;
    width: 100%;
    background-color: rgb(249, 249, 249);
    padding: calc((40/1918) * 100vw) 0;
    margin-left: calc((-94/1918) * 100vw);
    margin-right: calc((-94/1918) * 100vw);
    padding-left: calc((94/1918) * 100vw);
    padding-right: calc((94/1918) * 100vw);
}

.product-center-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc((40/1918) * 100vw);
    width: 100%;
}

.product-center-title {
    font-family: var(--font-heading);
    font-size: calc((28/1918) * 100vw);
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc((30/1918) * 100vw);
    width: 100%;
}

/* ========================= Article Page Responsive ========================= */

/* Tablet */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    .article-main {
        min-width: 0;
        overflow: hidden;
    }

    .article-sidebar {
        position: static;
        margin-top: calc((40/1918) * 100vw);
        min-width: 0;
        overflow: hidden;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .article-layout {
        overflow: hidden;
        max-width: 100%;
    }

    .article-main {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .article-sidebar {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .article-header {
        padding-bottom: 25px;
        margin-bottom: 25px;
        max-width: 100%;
        overflow: hidden;
    }

    .article-title {
        font-size: 26px;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .article-meta {
        font-size: 13px;
    }

    .article-content {
        font-size: 16px;
        line-height: 1.7;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        overflow-x: hidden;
    }

    .article-content p {
        margin-bottom: 16px;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .article-content * {
        max-width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .article-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    .article-image-wrapper {
        margin: 30px 0;
    }

    .article-navigation {
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
        padding-top: 30px;
        align-items: flex-start;
    }

    .nav-link {
        font-size: 14px;
        width: 100%;
        flex-wrap: wrap;
    }

    .nav-title {
        font-size: 13px;
    }

    .nav-prev,
    .nav-next {
        text-align: left;
    }

    .sidebar-section-title {
        font-size: 20px;
        margin-bottom: 25px !important;
    }

    .sidebar-news-card {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }

    .sidebar-card-content {
        padding: 12px;
    }

    .sidebar-card-title {
        font-size: 14px;
        margin-bottom: 8px !important;
    }

    .sidebar-card-meta {
        font-size: 12px;
    }

    .product-center-section {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .product-center-title {
        font-size: 22px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-center-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px !important;
    }

    /* 修复旧样式系统的移动端溢出问题 */
    .page4-sec3 .item-all .left-sec .content-box,
    .content-box,
    .details {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .page4-sec3 .item-all .left-sec .content-box p,
    .content-box p,
    .details p {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .page4-sec3 .item-all .left-sec .content-box *,
    .content-box *,
    .details * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .page4-sec3 .item-all .left-sec .b-title,
    .b-title {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .page4-sec3,
    .page4 {
        overflow-x: hidden !important;
    }

    .aki-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}