/* ==========================================================================
   index 决策入口页专用样式
   原为 index.php 内联 <style>（约 4.8KB），按 ts.txt「样式超过 3 行放外部样式表」
   迁移至此。加载顺序位于 style.css 之后，可安全复用 --gd-* 等全站 CSS 变量。
   ========================================================================== */

/* --- Hero 区块（原内联 style 属性迁移；position/overflow 已在 style.css 的 .hero-home 中） --- */
.hero-home {
    min-height: 69vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-home-inner { text-align: center; padding: 2rem; position: relative; z-index: 2; }
/* 需提权：style.css 的 .hero-home .hero-subtitle 同为 (0,0,2,0)，靠 home.css 后加载取胜 */
.hero-home .hero-home-sub { font-size: 1.1rem; max-width: 1100px; margin-left: auto; margin-right: auto; }
.hero-home-actions { margin-top: 1.75rem; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- 顶部渐隐白底 section（原内联 style 迁移） --- */
/* 用 id 提权以覆盖 .section-snug 的 padding-top: 3rem */
.section-fade-top { background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%); }
#china-kinds.section-snug { padding-top: 1.5rem; }
#how-much-time            { margin-top: -1.4cm; }

/* --- 三种体验大卡 --- */
.tw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tw-card {
    position: relative; min-height: 460px; border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    text-decoration: none; color: #fff; background: #0a1628;
    box-shadow: 0 8px 30px -12px rgba(0,0,0,0.35);
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.tw-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -16px rgba(0,0,0,0.45); }
.tw-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.tw-card:hover .tw-card-bg { transform: scale(1.05); }
.tw-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0) 20%, rgba(10,22,40,.55) 60%, rgba(10,22,40,.92) 100%); }
.tw-card-inner { position: relative; z-index: 2; padding: 26px 26px 28px; }
.tw-overline { display: block; font-size: .78rem; letter-spacing: .16em; font-weight: 700; color: #86EFAC; text-transform: uppercase; }
.tw-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: .4rem 0 .35rem; }
.tw-tags { font-size: .82rem; font-weight: 600; color: #FCD34D; }
.tw-desc { font-size: .92rem; line-height: 1.65; opacity: .94; margin: .55rem 0 .95rem; }
.tw-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #4ADE80; }
.tw-link svg { transition: transform .25s ease; }
.tw-card:hover .tw-link svg { transform: translateX(4px); }

/* --- 你在找什么样的中国（四类体验） --- */
.kinds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kind-card {
    background: var(--gd-bg-card, #fff); border: 1px solid var(--gd-border, #E5E7EB);
    border-radius: 18px; padding: 26px 22px; text-decoration: none; color: inherit;
    box-shadow: var(--gd-shadow-sm, 0 2px 8px rgba(0,0,0,.04));
    display: flex; flex-direction: column; gap: 12px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.kind-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.12); border-color: #22C55E; }
.kind-icon {
    width: 46px; height: 46px; border-radius: 12px; background: rgba(34,197,94,.12); color: #16A34A;
    display: flex; align-items: center; justify-content: center;
}
.kind-icon svg { width: 22px; height: 22px; }
.kind-title { font-size: 1.08rem; font-weight: 700; margin: 0; }
.kind-places { font-size: .85rem; color: #6B7280; line-height: 1.6; margin: 0; }

/* --- 你有多少时间（三档） --- */
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.time-card {
    background: linear-gradient(160deg, #0A1628, #12304E); color: #fff; border-radius: 18px;
    padding: 30px 26px; text-decoration: none;
    box-shadow: 0 8px 30px -14px rgba(0,0,0,.35);
    display: flex; flex-direction: column; gap: 12px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.time-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px -14px rgba(0,0,0,.45); }
.time-range { font-size: 1.45rem; font-weight: 800; color: #4ADE80; }
.time-routes { font-size: .9rem; line-height: 1.65; opacity: .92; margin: 0; }
.time-count { font-size: .8rem; font-weight: 600; color: #93C5FD; }

/* --- Before You Go：四个问题卡（复用 practical-card 风格） --- */
.bgo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bgo-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.9rem; }
.bgo-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px;
    background: #fff; border: 1px solid #E5E7EB; color: #334155; font-weight: 600; font-size: .9rem;
    text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: all .3s ease;
}
.bgo-chip:hover { border-color: #22C55E; color: #15803D; transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(34,197,94,.35); }
.bgo-chip svg { width: 16px; height: 16px; }

/* --- 不确定去哪？CTA --- */
.find-cta {
    background: linear-gradient(135deg, #0A1628 0%, #12304E 100%); border-radius: 24px;
    padding: 64px 40px; text-align: center; color: #fff; position: relative; overflow: hidden;
}
.find-cta h2 { font-size: 2.2rem; margin-bottom: .6rem; }
.find-cta p { max-width: 560px; margin: 0 auto 1.9rem; opacity: .85; font-size: 1.05rem; line-height: 1.7; }
.find-cta .btn-secondary { margin-left: 0; }
/* 需提权：style.css 的 .find-cta p 特异性为 (0,0,1,1)，单类选择器压不住 */
.find-cta .find-cta-sub { max-width: 880px; font-size: 0.95rem; }
.find-cta .find-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- 首页景点卡：地点行（原内联 style 迁移） --- */
.card-loc-line {
    font-size: 0.85rem; color: #6B7280; margin: 0 0 6px;
    display: flex; align-items: center; gap: 4px;
}

@media (max-width: 980px) {
    .tw-grid, .kinds-grid, .time-grid, .bgo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .tw-grid, .kinds-grid, .time-grid, .bgo-grid { grid-template-columns: 1fr; }
    .tw-card { min-height: 420px; }
    .find-cta { padding: 44px 22px; }
}