/* 自定义样式覆盖 */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css');
* {
    font-family: 'LXGW WenKai', ‘霞鹜文楷’,sans-serif;
}
.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 4.5rem);
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../images/header.png");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.page-section {
    padding: 8rem 0;
}

.divider {
    height: 0.2rem;
    max-width: 3.25rem;
    margin: 1.5rem auto;
    background-color: #f4623a;
    opacity: 1;
}

.divider-light {
    background-color: #fff;
}

.portfolio-box {
    position: relative;
    display: block;
}

    .portfolio-box .portfolio-box-caption {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0;
        color: #fff;
        background: rgba(244, 98, 58, 0.9);
        transition: all 0.2s;
    }

    .portfolio-box:hover .portfolio-box-caption {
        opacity: 1;
    }

    .portfolio-box .portfolio-box-caption .project-category,
    .portfolio-box .portfolio-box-caption .project-name {
        padding: 0 15px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
.btn-xl {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
}

.btn-xl:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
 /* 基础布局（桌面优先） */
.article-container { display: flex; gap: 2rem; align-items: flex-start; margin-top: 4rem; }
.article-main { flex: 1 1 65%; min-width: 0; }
.article-aside { flex: 0 0 32%; max-width: 32%; }
.article-title { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.article-meta span { margin-right: 1rem; color: #6c757d; font-size: .9rem; }
.article-hero { width: 100%; height: auto; border-radius: .5rem; margin-bottom: 1.25rem; display:block; object-fit:cover; }
.article-content p { line-height: 1.8; margin-bottom: 1rem; word-break: break-word; }
.tag { display: inline-block; margin-right: .5rem; margin-bottom:.5rem; background:#f1f3f5; padding:.25rem .5rem; border-radius: .25rem; color:#333; text-decoration:none; }
.author-box { background:#fff; border:1px solid #e9ecef; padding:1rem; border-radius:.5rem; text-align:center; }
.related-articles li { margin-bottom:.5rem; }
.comments-section { margin-top:2.5rem; }
.comment { border-top:1px solid #e9ecef; padding-top:1rem; margin-top:1rem; }

/* 页面标题样式 */
.section-title { font-size: 2.5rem; font-weight: 700; }

/* 联系页面 */
.contact-card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
.info-item { display: flex; align-items: center; padding: 1rem; border-radius: 8px; background: #f7fafc; transition: all 0.3s ease; }
.info-item:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
.info-item .info-icon { width: 50px; height: 50px; background: var(--bs-primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; margin-right: 1rem; flex-shrink: 0; }
.info-item h5 { font-weight: 600; color: #2d3748; }
.social-links { display: flex; gap: 10px; }
.social-link { width: 44px; height: 44px; background: #f7fafc; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bs-primary); text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; }
.social-link:hover { background: var(--bs-primary); color: white; transform: translateY(-3px); }

/* 表单浮动标签优化 */
.form-floating > label { padding: 1rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { transform: scale(.85) translateY(-.5rem) translateX(.15rem); }

@media (max-width: 991.98px) {
            .article-container { gap: 1rem; margin-top: 2rem; padding: 0 1rem; }
            .article-title { font-size: 1.6rem; }
            .article-meta span { display: inline-block; margin-bottom: .35rem; }
            .article-aside { flex-basis: 100%; max-width: 100%; order: 2; }
            .article-main { order: 1; }
            .author-box img { width: 72px; height: 72px; }
            .article-hero { max-height: 300px; }
        }
        /* 响应式：手机（窄屏） */
        @media (max-width: 575.98px) {
            .article-container { display: block; padding: 0 .75rem; }
            .article-main, .article-aside { width: 100%; max-width: 100%; }
            .article-title { font-size: 1.25rem; line-height: 1.25; }
            .article-meta { display: block; margin-bottom: .5rem; }
            .article-meta span { display: block; color: #6c757d; font-size: .85rem; margin-right: 0; }
            .article-hero { max-height: 220px; border-radius: .35rem; }
            .tag { padding: .18rem .4rem; font-size: .85rem; }
            .comment-form .row.g-2 { gap: .5rem; }
            .comment-form .col-md-4 { flex: 0 0 100%; max-width: 100%; }
            .comment-form .col-12.text-end { text-align: right; }
            .author-box { padding: .75rem; }
            .author-box p { display: none; } /* 手机隐藏简介，节省空间；可删除此行保留简介 */
        }
/* 为滚动隐藏/显示导航栏添加过渡 */
#mainNav {
    transition: transform 0.22s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 隐藏时将导航向上平移出视口 */
#mainNav.nav-hidden {
    transform: translateY(-100%);
    pointer-events: none; /* 隐藏时禁用交互，防止误触 */
}

/* 在大屏保持同样行为（可按需调整） */
@media (min-width: 992px) {
    #mainNav {
        transition: transform 0.22s ease-in-out;
    }
}

/* 图片懒加载样式 */
.lazy-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 150px;
}

.lazy-placeholder.circular {
    border-radius: 50%;
}

img[data-src] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

img.lazy-loaded,
img[data-src=""] {
    opacity: 1;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.lazy-fade-in {
    animation: lazyFadeIn 0.6s ease forwards;
}

@keyframes lazyFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3D卡片倾斜效果样式 */
.tilt-card,
.article-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    position: relative;
    will-change: transform;
    overflow: hidden;
}

.tilt-card:hover,
.article-card:hover {
    z-index: 10;
}

.tilt-card .card-body {
    transform: translateZ(20px);
}

.article-card .card-body {
    transform: translateZ(20px);
}