/* ==========================================================================
   XPCMS 首页专用样式 xp-home.css
   ========================================================================== */

/* ---- 1. Hero 区 ---------------------------------------------------------- */
.xp-hero {
    position: relative;
    padding: calc(var(--xp-nav-h) + 80px) 0 80px;
    background: linear-gradient(180deg, var(--xp-primary-mist), var(--xp-bg));
    overflow: hidden;
}
.xp-hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(22, 163, 74, .15), transparent 60%);
    pointer-events: none;
}
.xp-hero::after {
    content: '';
    position: absolute;
    bottom: -300px; left: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(34, 197, 94, .1), transparent 60%);
    pointer-events: none;
}
.xp-hero-inner {
    position: relative;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
.xp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--xp-bg);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-pill);
    font-size: 13px;
    color: var(--xp-text-2);
    margin-bottom: 24px;
    box-shadow: var(--xp-shadow-sm);
}
.xp-hero-eyebrow .xp-badge { margin: 0; }
.xp-hero h1 {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 20px;
}
.xp-hero h1 .xp-grad {
    background: linear-gradient(135deg, var(--xp-primary), #065f46);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.xp-hero p {
    font-size: 19px;
    color: var(--xp-text-2);
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.6;
}
.xp-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- 2. 信任徽章 --------------------------------------------------------- */
.xp-trust {
    padding: 36px 0;
    border-bottom: 1px solid var(--xp-border);
    background: var(--xp-bg);
}
.xp-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    color: var(--xp-text-3);
    font-size: 14px;
}
.xp-trust-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.xp-trust-stat strong {
    font-family: var(--xp-font-display);
    font-size: 22px;
    color: var(--xp-text);
    font-weight: 700;
}

/* ---- 3. 数据统计暗色块 --------------------------------------------------- */
.xp-stats-block {
    background: linear-gradient(135deg, var(--xp-dark-from), var(--xp-dark-to));
    color: #fff;
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}
.xp-stats-block::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(22, 163, 74, .18), transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}
.xp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

/* ---- 4. 置顶文章卡片 ---------------------------------------------------- */
.xp-top-articles {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
}
.xp-top-article {
    background: var(--xp-bg);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.xp-top-article:hover {
    transform: translateY(-4px);
    box-shadow: var(--xp-shadow-md);
}
.xp-top-article .xp-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--xp-bg-soft);
}
.xp-top-article .xp-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.xp-top-article:hover .xp-cover img { transform: scale(1.04); }
.xp-top-article .xp-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.xp-top-article .xp-body h3 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.35;
}
.xp-top-article .xp-body h3 a { color: var(--xp-text); }
.xp-top-article .xp-body h3 a:hover { color: var(--xp-primary); }
.xp-top-article .xp-body p { color: var(--xp-text-2); font-size: 14px; flex: 1; }
.xp-top-article .xp-body .xp-meta {
    color: var(--xp-text-3);
    font-size: 13px;
    margin-top: 16px;
    display: flex;
    gap: 12px;
}
.xp-top-article--lg .xp-body h3 { font-size: 26px; }

/* ---- 5. 文章列表（紧凑卡片） --------------------------------------------- */
.xp-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.xp-article-card {
    background: var(--xp-bg);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.xp-article-card:hover { transform: translateY(-3px); box-shadow: var(--xp-shadow-md); }
.xp-article-card .xp-cover {
    aspect-ratio: 16 / 9;
    background: var(--xp-bg-soft);
    overflow: hidden;
}
.xp-article-card .xp-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.xp-article-card:hover .xp-cover img { transform: scale(1.05); }
.xp-article-card .xp-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.xp-article-card .xp-cat {
    display: inline-block;
    font-size: 12px;
    color: var(--xp-primary-hover);
    background: var(--xp-primary-soft);
    padding: 3px 10px;
    border-radius: var(--xp-radius-pill);
    margin-bottom: 10px;
    align-self: flex-start;
}
.xp-article-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    line-height: 1.4;
}
.xp-article-card h3 a { color: var(--xp-text); }
.xp-article-card h3 a:hover { color: var(--xp-primary); }
.xp-article-card p { color: var(--xp-text-2); font-size: 14px; flex: 1; margin: 0; }
.xp-article-card .xp-meta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--xp-border);
    color: var(--xp-text-3);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---- 6. 产品卡片网格 ---------------------------------------------------- */
.xp-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.xp-product-card {
    background: var(--xp-bg);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-card);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.xp-product-card:hover { transform: translateY(-3px); box-shadow: var(--xp-shadow-md); }
.xp-product-card .xp-cover {
    aspect-ratio: 1;
    background: var(--xp-bg-soft);
    overflow: hidden;
}
.xp-product-card .xp-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.xp-product-card:hover .xp-cover img { transform: scale(1.05); }
.xp-product-card .xp-body { padding: 18px; }
.xp-product-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
}
.xp-product-card h3 a { color: var(--xp-text); }
.xp-product-card h3 a:hover { color: var(--xp-primary); }
.xp-product-card .xp-desc {
    color: var(--xp-text-3);
    font-size: 13px;
    margin: 0 0 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xp-product-card .xp-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.xp-product-card .xp-price {
    color: var(--xp-primary-hover);
    font-family: var(--xp-font-display);
    font-weight: 700;
    font-size: 18px;
}
.xp-product-card .xp-price-original {
    color: var(--xp-text-3);
    font-size: 13px;
    text-decoration: line-through;
}

/* ---- 7. 视频/帖子混合板块 ----------------------------------------------- */
.xp-mixed-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
}
.xp-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.xp-video-card {
    position: relative;
    border-radius: var(--xp-radius-card);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--xp-dark-from);
    border: 1px solid var(--xp-border);
}
.xp-video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .4s, opacity .3s; }
.xp-video-card:hover img { transform: scale(1.05); opacity: .7; }
.xp-video-card .xp-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    text-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.xp-video-card .xp-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
    color: #fff;
}
.xp-video-card .xp-info h3 { color: #fff; font-size: 15px; margin: 0; }
.xp-video-card .xp-duration {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
}

.xp-post-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.xp-post-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--xp-border);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.xp-post-list li:last-child { border-bottom: 0; }
.xp-post-list .xp-tag {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--xp-primary-hover);
    background: var(--xp-primary-soft);
    padding: 4px 10px;
    border-radius: var(--xp-radius-pill);
    white-space: nowrap;
}
.xp-post-list .xp-post-body { flex: 1; min-width: 0; }
.xp-post-list h4 {
    font-size: 15px;
    margin: 0 0 4px;
    font-family: var(--xp-font-body);
    font-weight: 500;
    line-height: 1.4;
}
.xp-post-list h4 a { color: var(--xp-text); }
.xp-post-list h4 a:hover { color: var(--xp-primary); }
.xp-post-list .xp-post-meta {
    color: var(--xp-text-3);
    font-size: 13px;
    display: flex;
    gap: 12px;
}

/* ---- 8. 栏目入口板块 ---------------------------------------------------- */
.xp-portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.xp-portal-card {
    display: block;
    padding: 32px 28px;
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius-card);
    background: var(--xp-bg);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.xp-portal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--xp-shadow-md);
    border-color: var(--xp-primary);
}
.xp-portal-icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--xp-primary-mist);
    color: var(--xp-primary-hover);
    font-size: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.xp-portal-card h3 { font-size: 19px; margin-bottom: 8px; }
.xp-portal-card p { color: var(--xp-text-2); font-size: 14px; margin: 0; }

/* ---- 9. Banner 轮播 ---------------------------------------------------- */
.xp-banner {
    position: relative;
    border-radius: var(--xp-radius-card);
    overflow: hidden;
    background: var(--xp-dark-from);
}
.xp-banner-track {
    display: flex;
    transition: transform .6s ease;
}
.xp-banner-slide {
    flex: 0 0 100%;
    position: relative;
    aspect-ratio: 21 / 7;
    overflow: hidden;
}
.xp-banner-slide .xp-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.xp-banner-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15,23,42,.85), rgba(15,23,42,.2));
}
.xp-banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 56px;
    color: #fff;
    z-index: 2;
}
.xp-banner-content h2 { color: #fff; font-size: 36px; margin-bottom: 10px; max-width: 60%; }
.xp-banner-content p { color: #cbd5e1; margin: 0; font-size: 16px; }
.xp-banner-content .xp-btn { margin-top: 20px; align-self: flex-start; }
.xp-banner-dots {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.xp-banner-dots button {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s;
}
.xp-banner-dots button.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}
.xp-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 3;
}
.xp-banner-arrow:hover { background: rgba(255, 255, 255, .25); }
.xp-banner-arrow.prev { left: 16px; }
.xp-banner-arrow.next { right: 16px; }

/* 响应式 */
@media (max-width: 1024px) {
    .xp-top-articles { grid-template-columns: 1fr; }
    .xp-product-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-portal-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .xp-article-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-mixed-grid { grid-template-columns: 1fr; gap: 32px; }
    .xp-video-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-banner-content h2 { font-size: 26px; max-width: 80%; }
}

@media (max-width: 768px) {
    .xp-hero { padding: calc(var(--xp-nav-h) + 48px) 0 48px; }
    .xp-hero h1 { font-size: 36px; }
    .xp-hero p { font-size: 16px; }
    .xp-top-articles { grid-template-columns: 1fr; }
    .xp-article-grid, .xp-product-grid, .xp-portal-grid, .xp-video-grid { grid-template-columns: 1fr; }
    .xp-banner-slide { aspect-ratio: 16 / 9; }
    .xp-banner-content { padding: 0 24px; }
    .xp-banner-content h2 { font-size: 22px; max-width: 100%; }
    .xp-banner-arrow { display: none; }
}