/* Blog页面优化CSS - 延迟加载部分 */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:35px;margin-bottom:60px}
.blog-card{background:linear-gradient(145deg,rgba(196,167,111,0.05) 0%,rgba(196,167,111,0.02) 100%);border:1px solid rgba(196,167,111,0.15);border-radius:20px;overflow:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 8px 30px rgba(0,0,0,0.2);height:100%;display:flex;flex-direction:column;position:relative;animation:fadeInUp 0.8s ease-out both}
.blog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,167,111,0.3),transparent)}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(196,167,111,0.2);border-color:rgba(196,167,111,0.3)}
.blog-card img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid rgba(196,167,111,0.1);transition:all 0.4s ease}
.blog-card:hover img{transform:scale(1.05)}
.blog-card .content{padding:30px;flex:1;display:flex;flex-direction:column;position:relative}
.blog-card h3{margin:0 0 15px 0;font-size:clamp(1.2rem,2.5vw,1.4rem);color:#f3e6c0;line-height:1.4;font-weight:600;letter-spacing:0.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.blog-card p{font-size:clamp(0.95rem,2.2vw,1rem);color:#d4c39c;margin:0 0 25px 0;line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.blog-card a{color:#c4a76f;text-decoration:none;font-weight:600;font-size:clamp(0.9rem,2.2vw,1rem);transition:all 0.3s ease;margin-top:auto;display:inline-flex;align-items:center;padding:10px 0;position:relative;letter-spacing:0.5px}
.blog-card a::after{content:'';position:absolute;bottom:8px;left:0;width:0;height:1px;background:linear-gradient(90deg,#c4a76f,#dfbe82);transition:width 0.3s ease}
.blog-card a:hover{color:#dfbe82}
.blog-card a:hover::after{width:100%}
.empty-state{text-align:center;padding:80px 20px;color:#c4a76f;background:linear-gradient(145deg,rgba(196,167,111,0.05) 0%,rgba(196,167,111,0.02) 100%);border-radius:20px;border:1px solid rgba(196,167,111,0.1);animation:fadeInUp 0.8s ease-out}
.empty-state h3{font-size:clamp(1.8rem,4vw,2.2rem);margin-bottom:20px;color:#f3e6c0;font-weight:300;letter-spacing:1px}
.empty-state p{font-size:clamp(1rem,2.5vw,1.1rem);color:#d4c39c;max-width:500px;margin:0 auto;line-height:1.6}
.navbar ul.desktop-menu li a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(196,167,111,0.2),transparent);transition:left 0.5s ease;z-index:-1}
.navbar ul.desktop-menu li a:hover::before{left:100%}
.navbar ul.desktop-menu li a:hover,.mobile-nav a:hover{background:linear-gradient(135deg,rgba(196,167,111,0.15) 0%,rgba(196,167,111,0.05) 100%);color:#c4a76f;box-shadow:0 4px 12px rgba(196,167,111,0.2)}
.navbar ul.desktop-menu li a:focus,.mobile-nav a:focus{outline:2px solid #c4a76f;outline-offset:2px;border-radius:8px}
.navbar ul.desktop-menu li a.active{background:linear-gradient(135deg,rgba(196,167,111,0.2) 0%,rgba(196,167,111,0.1) 100%);color:#c4a76f}
.navbar .logo:hover{color:#dfbe82;text-shadow:0 0 15px rgba(196,167,111,0.5);transform:scale(1.05)}
html{scroll-behavior:smooth}
::selection{background:rgba(196,167,111,0.3);color:#f3e6c0}
.blog-card a:focus{outline:2px solid #c4a76f;outline-offset:2px;border-radius:4px}
@media (max-width:767px){.mobile-nav a{color:#f3e6c0;text-decoration:none;font-size:0.85rem;padding:10px 12px;border-radius:8px;transition:all 0.3s ease;display:block;position:relative;z-index:1;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;text-align:center;flex:1;max-width:80px}}
@media (max-width:768px){body{padding:20px 15px}.container{padding:0 10px}.blog-grid{grid-template-columns:1fr;gap:25px}.blog-card .content{padding:25px}.blog-card h3{font-size:1.3rem}.blog-card p{font-size:0.95rem}.empty-state{padding:60px 20px}}
@media (max-width:480px){body{padding:15px 10px}.blog-card img{height:180px}.blog-card .content{padding:20px}.blog-card h3{font-size:1.2rem}.blog-card p{font-size:0.9rem}.empty-state{padding:50px 15px}}
@media (min-width:769px) and (max-width:1024px){.blog-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}}
@media (min-width:1025px){.blog-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:40px}.blog-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(196,167,111,0.25)}}