/* ==========================================================================
   Huatai Theme · Pages
   关于我们 / FAQ / 画廊 / 视频 / 站点地图 / 法律条款 / 404 / 联系页 / 解决方案
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 关于我们
   -------------------------------------------------------------------------- */
/* 关于页是 hero-first 模板（已关闭 page-header），main-wrapper 的默认
   顶部留白会让固定页头（含顶栏）盖住 hero 文字，这里改为零留白，
   由 about-hero 自己用 --h-header-total 补偿总高度，避免白条缝隙。 */
.main-wrapper--hero { padding-block-start: 0; }

.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--h-space-xl);
    grid-template-columns: 1fr;
    padding-block-start: calc(var(--h-header-total) + clamp(1.5rem, 1rem + 3vw, 3rem));
    padding-block-end: clamp(3rem, 2rem + 5vw, 6rem);
    background: linear-gradient(135deg, var(--h-color-navy-deep), var(--h-color-navy-soft));
    color: #fff;
}

/* 桌面端：简介单列铺满，视频已抽到 hero 之外独立成行 */
@media (min-width: 62em) {
    .about-hero-content { max-width: 52rem; }
}

/* 关于页视频：从 hero 抽出，独立成行、居中、16:9 响应式 */
.about-video {
    margin-block-start: var(--h-space-xl);
}

.about-video-inner {
    max-width: min(960px, 100%);
    margin-inline: auto;
    border-radius: var(--h-radius-lg);
    overflow: hidden;
    box-shadow: var(--h-shadow-lg);
    background: #000;
}

.about-video-inner .video-wrapper { aspect-ratio: 16 / 9; }

.about-hero-content { max-width: 44rem; }
.about-hero-title {
    font-size: var(--h-fs-800);
    line-height: var(--h-lh-tight);
    color: #fff;
}

.about-hero-desc {
    margin-block-start: var(--h-space-sm);
    font-size: var(--h-fs-500);
    line-height: var(--h-lh-relaxed);
    color: var(--h-text-inverse-muted);
}

.about-hero-stats,
.mission-image {
    margin-block-start: var(--h-space-xl);
}

.about-hero-video .video-wrapper { aspect-ratio: 16 / 9; }

.mission-image img,
.about-section img {
    width: 100%;
    height: auto;
    border-radius: var(--h-radius-lg);
}

.mission-content p { max-width: var(--h-content-measure); }

/* --------------------------------------------------------------------------
   1b. 关于页细化（PC / 移动复查 #5）
   -------------------------------------------------------------------------- */
/* about-hero 统计数字水平排列 */
.about-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h-space-lg);
}

.about-hero-stats .stat-item {
    flex: 1 1 9rem;
    min-width: 0;
}

/* 服务 / 优势卡片：图标居中 + 卡片内留白，避免贴边 */
.service-card,
.advantage-card {
    padding: var(--h-space-lg) var(--h-space-md);
    align-items: center;
    text-align: center;
}

.service-card p,
.advantage-card p {
    max-width: 34ch;
    margin-inline: auto;
}

/* 公司理念：桌面左右两栏，移动端堆叠 */
.about-mission {
    padding-block: var(--h-section-y);
    display: grid;
    gap: var(--h-gutter);
    align-items: center;
}

@media (min-width: 62em) {
    .about-mission {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.about-timeline,
.about-services,
.about-advantages {
    padding-block: var(--h-section-y);
}

/* --------------------------------------------------------------------------
   2. 联系页
   -------------------------------------------------------------------------- */
.contact-row-layout {
    display: grid;
    gap: var(--h-gutter);
    align-items: start;
}

@media (min-width: 62em) {
    .contact-row-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

.contact-info-sidebar {
    display: grid;
    gap: var(--h-space-md);
}

/* --------------------------------------------------------------------------
   3. FAQ
   -------------------------------------------------------------------------- */
.faq-search {
    margin-block-end: var(--h-space-lg);
}

.faq-content {
    margin-block-start: var(--h-space-lg);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   4. 画廊 / 视频
   -------------------------------------------------------------------------- */
.gallery-section,
.videos-section {
    padding-block: var(--h-section-y);
}

.video-group + .video-group { margin-block-start: var(--h-space-xl); }

.video-featured {
    margin-block-end: var(--h-space-xl);
}

.video-featured .section-subtitle {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
}

.video-featured .section-subtitle i { color: var(--h-color-brand); }

/* --------------------------------------------------------------------------
   5. 站点地图
   -------------------------------------------------------------------------- */
.sitemap-grid {
    display: grid;
    gap: var(--h-gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    align-items: start;
}

.sitemap-block {
    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);
}

.sitemap-block:hover {
    translate: 0 -3px;
    box-shadow: var(--h-shadow-md);
}

.sitemap-block h2 {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    padding-block-end: var(--h-space-2xs);
    margin-block-end: var(--h-space-sm);
    border-block-end: 1px solid var(--h-border-subtle);
    font-size: var(--h-fs-400);
}

.sitemap-block h2 i { color: var(--h-color-brand); }

.sitemap-block ul {
    display: grid;
    gap: var(--h-space-3xs);
}

.sitemap-block li { font-size: var(--h-fs-200); }

.sitemap-block li a {
    color: var(--h-text-body);
    text-decoration: none;
    transition: color var(--h-dur-base) var(--h-ease-standard),
                padding-inline-start var(--h-dur-base) var(--h-ease-standard);
}

.sitemap-block li a:hover {
    color: var(--h-color-brand);
    padding-inline-start: 4px;
}

/* --------------------------------------------------------------------------
   6. 法律条款（隐私 / 服务条款）
   -------------------------------------------------------------------------- */
.legal-intro {
    max-width: 60ch;
    margin-block-end: var(--h-space-xl);
    padding: var(--h-space-md);
    border-inline-start: 4px solid var(--h-color-gold);
    border-radius: var(--h-radius-md);
    background: var(--h-bg-surface-alt);
    font-size: var(--h-fs-300);
    color: var(--h-text-body);
}

.legal-content { display: grid; gap: var(--h-space-xl); }

.legal-block {
    padding-block-end: var(--h-space-md);
    border-block-end: 1px solid var(--h-border-subtle);
}

.legal-block:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.legal-block h2 { font-size: var(--h-fs-600); }

.legal-block ul { padding-inline-start: 1.4em; list-style: disc; }
.legal-block li { margin-block-end: 0.5em; }
.legal-block li strong { color: var(--h-text-strong); }

/* --------------------------------------------------------------------------
   7. 404
   -------------------------------------------------------------------------- */
.error-404-section,
.error-404 {
    padding-block: var(--h-section-y);
}

.error-404-content {
    max-width: 46rem;
    margin-inline: auto;
}

.error-code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: var(--h-fw-bold);
    line-height: 1;
    letter-spacing: var(--h-tracking-tight);
    background: linear-gradient(135deg, var(--h-color-brand), var(--h-color-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-title { font-size: var(--h-fs-700); }
.error-desc { max-width: 44ch; font-size: var(--h-fs-400); color: var(--h-text-muted); }
.error-404-hint { font-size: var(--h-fs-200); color: var(--h-text-muted); }

.error-404-search { margin-inline: auto; }

.error-404-search .search-form {
    gap: var(--h-space-2xs);
}

.error-404-search .search-field {
    padding-inline-start: 1em;
}

.error-404-search .search-submit {
    padding-inline: var(--h-space-lg);
    border-radius: var(--h-radius-pill);
}

.error-404-links h4 {
    grid-column: 1 / -1;
    font-size: var(--h-fs-300);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-caps);
    color: var(--h-text-muted);
}

.suggestion-card {
    gap: var(--h-space-2xs);
    padding: var(--h-space-md);
    text-align: center;
    align-items: center;
    font-size: var(--h-fs-300);
    color: var(--h-text-body);
    text-decoration: none;
}

.suggestion-card i,
.suggestion-card svg {
    font-size: var(--h-fs-600);
    color: var(--h-color-brand);
}

/* --------------------------------------------------------------------------
   8. 解决方案列表
   -------------------------------------------------------------------------- */
.solution-area,
.solution-list {
    display: grid;
    gap: var(--h-space-md);
}

.solution-empty {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   9. 全宽 / 左栏模板
   -------------------------------------------------------------------------- */
.template-fullwidth .page-featured-image,
.template-leftsidebar .page-featured-image {
    margin-block-end: var(--h-space-lg);
}

.template-leftsidebar {
    display: grid;
    gap: var(--h-gutter);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 62em) {
    .template-leftsidebar {
        grid-template-columns: var(--h-sidebar-w) minmax(0, 1fr);
    }

    .template-leftsidebar .sidebar { order: -1; }
}

/* --------------------------------------------------------------------------
   10. 感谢页（merci）
   -------------------------------------------------------------------------- */
.page-merci,
.merci-message {
    max-width: 46rem;
    margin-inline: auto;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
    text-align: center;
}

/* --------------------------------------------------------------------------
   11. 打印
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .nav-overlay,
    .main-nav,
    .menu-toggle,
    .sidebar,
    .sidebar-toggle,
    .sm_cta,
    .post-share,
    .product-share,
    .contact-form-wrapper,
    .sidebar-form,
    .error-404-search {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .container,
    .main-wrapper,
    .template-fullwidth,
    .template-leftsidebar {
        max-width: none;
        padding: 0;
        display: block;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    .page-header,
    .hero-section,
    .about-hero {
        background: none !important;
        color: #000 !important;
    }

    .page-title,
    .hero-title,
    .hero-desc { color: #000 !important; }
}