/**
 * BQ Builder — 前台样式
 * 12栅格系统 + 通用布局 + 响应式
 */

/* ===== 图片优化器 <picture> 兼容 ===== */
/* BQ_Image_Optimizer 将 <img> 包裹为 <picture>+<source> 以实现 WebP/AVIF；
   <picture> 默认 display:inline 会导致内部 <img> 的 width:100%/height:100% 失效；
   强制 block 恢复与原始 <img> 一致的盒模型行为 */
picture { display: block; }

/* ===== 行 ===== */
.bq-row {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.bq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.bq-row-full .bq-container {
    max-width: none;
    padding: 0;
}
.bq-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* ===== 12栅格列 ===== */
.bq-col-12 { flex: 0 0 calc(100% - 0px); }
.bq-col-8  { flex: 0 0 calc(66.666% - 20px * 1/3); }
.bq-col-6  { flex: 0 0 calc(50% - 20px * 1/2); }
.bq-col-4  { flex: 0 0 calc(33.333% - 20px * 2/3); }
.bq-col-3  { flex: 0 0 calc(25% - 20px * 3/4); }

/* ===== 模块通用 ===== */
.bq-module {
    margin-bottom: 0;
}
.bq-module:last-child {
    margin-bottom: 0;
}

/* ===== 服务卡片网格（用于 bq-grid-{n}） ===== */
.bq-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.bq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.bq-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ===== 按钮 hover ===== */
.bq-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== 页面包装器 ===== */
.bq-page-wrapper {
    overflow: hidden;
}

/* ===== 模块入场动画 ===== */
.bq-animate-hidden {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}
.bq-animate-fade-in.bq-animate-visible { opacity: 1; }
.bq-animate-slide-up.bq-animate-hidden { transform: translateY(40px); }
.bq-animate-slide-up.bq-animate-visible { transform: translateY(0); opacity: 1; }
.bq-animate-slide-left.bq-animate-hidden { transform: translateX(-40px); }
.bq-animate-slide-left.bq-animate-visible { transform: translateX(0); opacity: 1; }
.bq-animate-slide-right.bq-animate-hidden { transform: translateX(40px); }
.bq-animate-slide-right.bq-animate-visible { transform: translateX(0); opacity: 1; }
.bq-animate-zoom-in.bq-animate-hidden { transform: scale(0.95); }
.bq-animate-zoom-in.bq-animate-visible { transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .bq-animate-hidden {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== 响应式显隐控制 ===== */
@media (max-width: 768px)  { .bq-hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .bq-hide-desktop { display: none !important; } }

/* ===== 响应式列宽 */
@media (max-width: 1200px) {
    .bq-col-3  { flex: 0 0 calc(33.333% - 20px * 2/3); }
    .bq-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .bq-col-4  { flex: 0 0 calc(50% - 20px * 1/2); }
    .bq-col-3  { flex: 0 0 calc(50% - 20px * 1/2); }
    .bq-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bq-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bq-columns {
        flex-direction: column;
        gap: 0;
    }
    .bq-col-12,
    .bq-col-8,
    .bq-col-6,
    .bq-col-4,
    .bq-col-3 {
        flex: 0 0 100%;
        width: 100%;
    }
    .bq-grid-2,
    .bq-grid-3,
    .bq-grid-4 {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    .bq-container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .bq-hero-banner h1 {
        font-size: 24px !important;
    }
    .bq-hero-banner p {
        font-size: 14px !important;
    }
}

/* ===== 前台暗黑模式（CSS变量方案，避免大量属性选择器） ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --bq-color-bg: #0f172a;
        --bq-color-text: #e2e8f0;
        --bq-card-bg: #1e293b;
        --bq-card-border: #334155;
        --bq-muted-bg: #1e293b;
        --bq-heading-color: #e2e8f0;
        --bq-meta-color: #94a3b8;
    }
    body {
        background: var(--bq-color-bg);
        color: var(--bq-color-text);
    }
    /* 页脚模板已内置暗色设计，无需额外覆盖 */
}

/* ===== 返回顶部响应式 ===== */
@media (max-width: 768px) {
    .bq-back-top {
        bottom: 20px;
        right: 20px;
    }
}