/* ============================================
 * 模块: 公共组件（面包屑/分页/page-header/元信息/Tag/404）
 * 文件: assets/css/components.css
 * 依赖: main.css
 * @since 3.0.0
 * ============================================ */

/* 注意：面包屑和分页的基础样式已在 main.css 中定义 */
/* 本文件补充内页头部、文章元信息、Tag、404 等模板级组件样式 */

/* ============================================
 * 内页头部
 * ============================================ */

.page-header {
    position: relative;
    padding: var(--spacing-xxxxl) 0 var(--spacing-xxxl);
    background: var(--color-bg-page);
    text-align: center;
    overflow: hidden;
}

.page-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

.page-header__title {
    position: relative;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-sm);
}

/* 面包屑在 page-header 内的样式覆盖 */
.page-header .breadcrumb {
    position: relative;
    justify-content: center;
    padding: 0;
    margin-top: var(--spacing-sm);
}

.page-header .breadcrumb__item,
.page-header .breadcrumb__separator {
    color: var(--color-text-secondary);
}

/* ============================================
 * 文章元信息
 * ============================================ */

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-placeholder);
}

.post-meta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.post-meta__avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-circle);
    overflow: hidden;
}

.post-meta__author {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
}

.post-meta__date {
    color: var(--color-text-placeholder);
}

.post-meta__views {
    color: var(--color-text-placeholder);
}

/* ============================================
 * Tag 标签
 * ============================================ */

.tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: var(--color-primary-lighter);
    border-radius: var(--radius-small);
    text-decoration: none;
    transition: var(--transition-base);
    margin-right: var(--spacing-sm);
}

.tag:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

.tag--light {
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
}

.tag--light:hover {
    color: var(--color-text-primary);
    background: var(--color-border-light);
}

/* 文章分类/标签容器 */
.article__categories,
.article__tags {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

/* ============================================
 * 客户案例 Meta 信息
 * ============================================ */

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--color-bg-page);
    border-radius: var(--radius-medium);
    margin-bottom: var(--spacing-xl);
}

.case-meta__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.case-meta__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-meta__value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ============================================
 * 404 页面
 * ============================================ */

.page-404 {
    text-align: center;
    padding: var(--spacing-xxxxl) 0;
}

.page-404__code {
    font-size: 120px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-lighter);
    line-height: 1;
    letter-spacing: -4px;
}

.page-404__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.page-404__desc {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.page-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
}

/* ============================================
 * 响应式
 * ============================================ */

@media (max-width: 768px) {
    .page-header {
        padding: var(--spacing-xxl) 0 var(--spacing-xl);
    }

    .page-header__title {
        font-size: var(--font-size-xl);
    }

    .post-meta {
        gap: var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    .case-meta {
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }

    .page-404 {
        padding: var(--spacing-xxxl) 0;
    }

    .page-404__code {
        font-size: 80px;
    }

    .page-404__actions {
        flex-direction: column;
    }

    .page-404__actions .btn {
        width: 100%;
    }
}