/* ==========================================================================
   Huatai Theme · Content
   文章详情 / 归档列表 / 产品详情 / 项目详情 / 搜索结果
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 文章 / 详情页通用头部
   -------------------------------------------------------------------------- */
.post-header,
.content-header,
.product-detail-section > .content-header,
.detail-content > .post-header {
    margin-block-end: var(--h-space-lg);
}

.post-title,
.content-title {
    font-size: var(--h-fs-700);
    line-height: var(--h-lh-tight);
}

.post-title a,
.content-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover,
.content-title a:hover { color: var(--h-color-brand); }

.post-featured-image,
.detail-hero-image,
.page-featured-image {
    margin-block-end: var(--h-space-lg);
    border-radius: var(--h-radius-lg);
    overflow: hidden;
    background: var(--h-bg-sunken);
}

.post-featured-image img,
.detail-hero-image img,
.page-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.detail-hero-image.project-hero img { aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   2. 长文排版
   -------------------------------------------------------------------------- */
.entry-content,
.post-content,
.content-body,
.detail-content,
.legal-content,
.product-description,
.project-content,
.archive-description,
.faq-answer {
    font-size: var(--h-fs-400);
    line-height: var(--h-lh-relaxed);
    color: var(--h-text-body);
}

/* 标题层级节奏统一：越是深层标题间距越小 */
.entry-content > h2,
.post-content h2,
.content-body h2,
.detail-content h2,
.legal-block h2,
.product-description h2,
.project-content h2,
.template-fullwidth .fullwidth-content h2 {
    margin-block: 2em 0.6em;
    font-size: var(--h-fs-600);
}

.entry-content > h3,
.post-content h3,
.content-body h3,
.detail-content h3,
.product-features h3,
.project-content h3 {
    margin-block: 1.6em 0.5em;
    font-size: var(--h-fs-500);
}

.detail-content h2::before,
.content-body h2::before,
.legal-block h2::before {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-inline-end: 0.4em;
    vertical-align: middle;
    rotate: 45deg;
    background: var(--h-color-brand);
}

.entry-content p,
.post-content p,
.content-body p,
.detail-content p,
.legal-block p,
.product-description p,
.project-content p {
    margin-block-end: 1.1em;
}

/* 正文超链接：改用「品牌色 + 细下边线」替代整行下划线，降低视觉疲劳；
   保留 hover 时加深，与主导航的下划线语言保持一致。 */
.post-content a,
.entry-content a,
.content-body a,
.detail-content a,
.product-description a,
.project-content a {
    color: var(--h-color-brand);
    text-decoration: none;
    border-block-end: 1px solid color-mix(in srgb, var(--h-color-brand) 30%, transparent);
    transition: var(--h-transition);
}

.post-content a:hover,
.entry-content a:hover,
.content-body a:hover,
.detail-content a:hover,
.product-description a:hover,
.project-content a:hover {
    color: var(--h-color-brand-strong);
    border-block-end-color: currentColor;
}

.post-content img,
.detail-content img,
.product-description img,
.project-content img {
    height: auto;
    border-radius: var(--h-radius-md);
    margin-block: var(--h-space-sm);
}

.detail-content img.alignnone,
.post-content img[class*="wp-image-"].alignnone,
.detail-content > img:not([class*="align"]) {
    width: 100%;
}

/* 列表 */
.post-content li,
.detail-content li,
.content-body li,
.legal-block li,
.faq-answer li {
    margin-block-end: 0.4em;
    padding-inline-start: 0.2em;
}

.post-content li::marker,
.detail-content li::marker { color: var(--h-color-brand); }

.detail-content strong,
.content-body strong { color: var(--h-text-strong); }

/* 表格包一层横向滚动容器，防止宽表顶破布局 */
.post-content table,
.detail-content table,
.product-specifications table { display: table; }

.table-scroll {
    overflow-x: auto;
    margin-block: var(--h-space-md);
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   3. 归档 / 列表项
   -------------------------------------------------------------------------- */
.archive-posts-list,
.posts-list,
.news-list,
.search-results {
    display: grid;
    gap: var(--h-space-md);
}

.archive-post-item,
.news-item,
.related-post-card,
.search-result-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--h-space-sm);
    padding: var(--h-space-md);
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-xs);
    transition: translate var(--h-dur-base) var(--h-ease-out),
                box-shadow var(--h-dur-base) var(--h-ease-standard);
}

@media (min-width: 36em) {
    .archive-post-item,
    .news-item,
    .related-post-card,
    .search-result-item {
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
        align-items: start;
    }
}

.archive-post-item:hover,
.news-item:hover,
.related-post-card:hover,
.search-result-item:hover {
    translate: 0 -3px;
    box-shadow: var(--h-shadow-md);
}

.archive-post-image,
.news-thumb,
.related-post-image {
    border-radius: var(--h-radius-md);
    overflow: hidden;
}

.archive-post-title,
.news-title,
.search-result-title,
.related-post-info h4 {
    font-size: var(--h-fs-500);
    line-height: var(--h-lh-snug);
}

.archive-post-title a,
.news-title a,
.search-result-title a,
.related-post-info h4 a {
    color: var(--h-text-strong);
    text-decoration: none;
}

.news-item:hover .news-title,
.archive-post-item:hover .archive-post-title {
    color: var(--h-color-brand);
}

.archive-post-excerpt,
.search-result-excerpt {
    margin-block: var(--h-space-3xs);
    font-size: var(--h-fs-200);
    line-height: var(--h-lh-relaxed);
    color: var(--h-text-muted);
}

.search-result-type {
    display: inline-block;
    margin-block-start: var(--h-space-3xs);
    padding: 0.2em 0.7em;
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-sunken);
    font-size: var(--h-fs-100);
    color: var(--h-text-muted);
}

.news-date,
.post-date,
.related-post-info .post-date {
    font-size: var(--h-fs-100);
    color: var(--h-text-muted);
}

.results-count {
    margin-block-end: var(--h-space-md);
    font-size: var(--h-fs-200);
    color: var(--h-text-muted);
}

/* --------------------------------------------------------------------------
   4. 产品详情
   -------------------------------------------------------------------------- */
.product-detail-section,
.project-detail-section {
    padding-block: clamp(2rem, 1.25rem + 2.5vw, 4rem);
}

.product-main-image,
.project-main-image {
    overflow: hidden;
    margin-block-end: var(--h-space-2xs);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
    background: var(--h-bg-surface);
    aspect-ratio: 4 / 3;
}

.product-main-image img,
.project-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--h-space-xs);
}

.product-thumbnails,
.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h-space-2xs);
}

.thumb-item {
    width: 84px;
    height: 84px;
    flex: none;
    padding: 4px;
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-sm);
    background: var(--h-bg-surface);
    cursor: pointer;
    transition: var(--h-transition);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--h-radius-sm) - 2px);
}

.thumb-item:hover { border-color: var(--h-border-strong); }
.thumb-item.active { border-color: var(--h-color-brand); box-shadow: var(--h-shadow-focus); }

.product-info,
.detail-meta-content {
    display: grid;
    gap: var(--h-space-2xs);
}

.detail-meta-box {
    margin-block-start: var(--h-space-md);
}

.detail-meta-box h3,
.product-info-box h3,
.detail-meta-title {
    margin-block-end: var(--h-space-xs);
    font-size: var(--h-fs-400);
}

.product-features,
.product-specifications {
    margin-block-start: var(--h-space-md);
}

.product-specifications ul.resp-tabs-list,
.product-features ul {
    display: grid;
    gap: var(--h-space-2xs);
    padding: 0;
    list-style: none;
}

.meta-label { color: var(--h-text-strong); }
.meta-value { border: 0; padding: 0; background: none; }

/* --------------------------------------------------------------------------
   5. 相关推荐
   -------------------------------------------------------------------------- */
.detail-related,
.related-posts,
.related-products {
    margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    padding-block-start: var(--h-space-lg);
    border-block-start: 1px solid var(--h-border-subtle);
}

.detail-related-title,
.related-posts .section-title,
.related-products .section-title {
    margin-block-end: var(--h-space-md);
    font-size: var(--h-fs-600);
}

/* --------------------------------------------------------------------------
   6. 单行 home/blog 摘要卡（index.php）
   -------------------------------------------------------------------------- */
.content-body > * + * { margin-block-start: var(--h-space-sm); }

.content-body .btn { margin-block-start: var(--h-space-2xs); }

/* --------------------------------------------------------------------------
   7. 项目侧栏信息
   -------------------------------------------------------------------------- */
.project-sidebar,
.detail-sidebar {
    display: grid;
    gap: var(--h-space-md);
}

.project-meta {
    display: grid;
    gap: var(--h-space-2xs);
    padding: 0;
    list-style: none;
}

.project-meta li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--h-space-sm);
    padding-block-end: var(--h-space-2xs);
    border-block-end: 1px solid var(--h-border-subtle);
    font-size: var(--h-fs-200);
}

.project-meta li:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.project-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3em 0.85em;
    border-radius: var(--h-radius-pill);
    background: var(--h-color-gold-wash);
    color: var(--h-color-gold-strong);
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-semibold);
}