/* ==========================================================================
   Detail Page Styles (Adapted from list.css)
   ========================================================================== */

/* Hero Section Base */
.detail-hero-section {
    min-height: 280px; /* 移动端默认高度 */
    display: flex;
    align-items: center;
    background-color: var(--bs-dark, #212529); /* 兼容多主题的基础背景色 */
}

/* Hero Background Image */
.detail-hero-bg {
    background-size: cover;
    background-position: center;
    /* 增加轻微的模糊和放大效果，使背景更有质感且不喧宾夺主 */
    filter: blur(8px) brightness(0.8);
    transform: scale(1.05);
    z-index: 0;
}

/* Gradient Overlay - 确保文字可读性 */
.detail-hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

/* Typography & Layout */
.detail-hero-title {
    font-size: 1.75rem; /* 移动端默认字体大小，文章标题通常较长，稍微调小 */
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.detail-hero-meta {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.text-shadow-sm {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Utilities */
.hover-text-white:hover {
    color: #fff !important;
}

.transition-all {
    transition: all 0.3s ease;
}

/* ==========================================================================
   Download Section Styles
   ========================================================================== */

.download-card {
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.download-item {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.download-item:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.download-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Modal Specific Styles */
.modal-qr-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-qr-container img {
    max-width: 100%;
    max-height: 100%;
}

.scan-guide-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* 平板端 (md: >= 768px) */
@media (min-width: 768px) {
    .detail-hero-section {
        min-height: 350px;
    }

    .detail-hero-title {
        font-size: 2.5rem; /* 平板端字体大小 */
    }

    .detail-hero-meta {
        font-size: 1rem;
    }
}

/* 电脑端 (lg: >= 992px) */
@media (min-width: 992px) {
    .detail-hero-section {
        min-height: 400px;
    }

    .detail-hero-title {
        font-size: 3.5rem; /* 电脑端字体大小 */
    }
}