/**
* details.css
* 
* 作者：莫哥
* 日期：2026/06/01
* 版本：1.0.0
*----通用详情的css----
*/
.detail-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 30px rgba(0,0,0,0.08); border: 1px solid #f0f0f0; max-width: 900px; margin: 0 auto; }
.detail-img-wrapper { width: 100%; max-height: 500px; overflow: hidden; background: #f8f9fa; }
.detail-img { width: 100%; height: auto; max-height: 500px; object-fit: cover; object-position: center; }
.detail-body { padding: 40px 45px; }
.detail-title { font-size: 28px; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; position: relative; padding-bottom: 14px; }
.detail-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg, #4A90D9, #764ba2); border-radius: 2px; }
.detail-content { font-size: 16px; line-height: 1.9; color: #444; margin-top: 10px; }
.detail-meta { font-size: 13px; color: #999; }
.related-section { max-width: 900px; margin: 0 auto; }
.related-title { font-size: 22px; font-weight: 600; color: #1a1a2e; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; }
.related-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; height: 100%; display: flex; flex-direction: column; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.10); }
.related-card .related-img { width: 100%; height: 140px; object-fit: cover; }
.related-card .related-body { padding: 14px 18px 18px; flex: 1; }
.related-card .related-item-title { font-size: 15px; font-weight: 500; color: #1a1a2e; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) {
    .detail-body { padding: 25px 20px; }
    .detail-title { font-size: 22px; }
    .detail-content { font-size: 15px; }
    .related-card .related-img { height: 120px; }
}