/* =========================================================
   Huaxia Journeys — homepage layout (loaded on all pages,
   all selectors are prefixed so nothing leaks to other pages)
   ========================================================= */

/* ===== 让首页内容真正铺满浏览器宽度 ===== */

.hjx-growth-page{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
}

.hjx-growth-page section{
    width:100%!important;
    max-width:100%!important;
}

.ast-container,
#primary,
.site-content,
.content-area{
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
}

/* ===== 通用容器 / 排版 ===== */

.hxg-wrap{
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
}

.hxg-section{
    padding:100px 0;
    position:relative;
}

.hxg-eyebrow{
    color:var(--hx-red, #8f251f);
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin:0 0 18px;
}

.hxg-section h2{
    font-size:clamp(30px, 3.6vw, 46px);
    line-height:1.16;
    font-weight:600;
    margin:0 0 18px;
    letter-spacing:-.5px;
}

.hxg-section p{
    font-size:17px;
    line-height:1.8;
    color:#4a4a4a;
    margin:0 0 16px;
}

.hxg-head{
    max-width:820px;
    margin:0 auto 56px;
    text-align:center;
}

.hxg-head p{
    font-size:18px;
}

.hxg-dark{
    background:#14100f;
    color:#fff;
}

.hxg-dark h2,
.hxg-dark h3{
    color:#fff;
}

.hxg-dark p{
    color:rgba(255,255,255,.76);
}

.hxg-dark .hxg-eyebrow{
    color:#d8b486;
}

/* =========================================================
   HERO — 首屏铺满全屏
   ========================================================= */

.hxg-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
    padding:150px 0 0;
    color:#fff;
}

/* 移动端浏览器地址栏收缩时不会跳变 */
@supports (min-height:100svh){
    .hxg-hero{
        min-height:100svh;
    }
}

/* 登录状态下 WordPress 管理条会占据视口顶部 */
body.admin-bar .hxg-hero{
    min-height:calc(100vh - 32px);
}

@supports (min-height:100svh){
    body.admin-bar .hxg-hero{
        min-height:calc(100svh - 32px);
    }
}

html{
    scroll-behavior:smooth;
}

#hxg-destinations{
    scroll-margin-top:80px;
}

.hxg-hero-media{
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:url('/wp-content/uploads/destinations/hero-jiuzhaigou-1920.jpg');
    background-size:cover;
    background-position:center 50%;
    background-repeat:no-repeat;
    transform:scale(1.02);
}

/* 深色渐变遮罩：左侧压暗保证白字可读，右侧保留湖水与山体的通透感 */
.hxg-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(to top, rgba(8,8,10,.74) 0%, rgba(8,8,10,0) 28%),
        radial-gradient(circle at 82% 20%, rgba(143,37,31,.20), transparent 46%),
        linear-gradient(100deg, rgba(14,10,9,.90) 0%, rgba(20,15,13,.70) 42%, rgba(30,22,18,.32) 100%);
}

.hxg-hero-inner{
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px 0 60px;
}

.hxg-hero .hxg-eyebrow{
    color:#ddbd91;
    font-size:13px;
    letter-spacing:5px;
}

.hjx-growth-page .hxg-hero h1{
    font-size:clamp(40px, 6vw, 78px);
    line-height:1.06;
    font-weight:600;
    letter-spacing:-2px;
    max-width:1000px;
    margin:0 0 26px;
    color:#fff;
}

.hxg-hero-lead{
    max-width:720px;
    font-size:clamp(17px, 1.5vw, 21px);
    line-height:1.75;
    color:rgba(255,255,255,.86);
    margin:0 0 38px;
}

.hxg-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:44px;
}

.hxg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:17px 34px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.4px;
    text-decoration:none;
    border-radius:2px;
    transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.hxg-btn-solid{
    background:#8f251f;
    color:#fff !important;
    border:1px solid #8f251f;
}

.hxg-btn-solid:hover{
    background:#6f1915;
    border-color:#6f1915;
    transform:translateY(-2px);
}

.hxg-btn-ghost{
    background:rgba(255,255,255,.06);
    color:#fff !important;
    border:1px solid rgba(255,255,255,.45);
    backdrop-filter:blur(2px);
}

.hxg-btn-ghost:hover{
    background:rgba(255,255,255,.16);
    border-color:#fff;
    transform:translateY(-2px);
}

/* Hero 底部的信任标识 */
.hxg-hero-badges{
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
    padding:26px 0 34px;
    border-top:1px solid rgba(255,255,255,.16);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    flex:0 0 auto;
}

.hxg-badge{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:15px;
    line-height:1.45;
    color:rgba(255,255,255,.9);
}

.hxg-badge svg{
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin-top:2px;
    stroke:#ddbd91;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hxg-badge b{
    display:block;
    font-weight:600;
    color:#fff;
}

.hxg-badge span{
    display:block;
    font-size:13px;
    color:rgba(255,255,255,.62);
}

/* 向下滚动提示 */
.hxg-scroll{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    width:26px;
    height:42px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:14px;
    z-index:2;
}

.hxg-scroll::before{
    content:"";
    position:absolute;
    left:50%;
    top:9px;
    width:3px;
    height:7px;
    margin-left:-1.5px;
    background:rgba(255,255,255,.85);
    border-radius:2px;
    animation:hxgScroll 1.8s ease-in-out infinite;
}

@keyframes hxgScroll{
    0%   { transform:translateY(0);    opacity:0; }
    25%  { opacity:1; }
    75%  { transform:translateY(12px); opacity:0; }
    100% { transform:translateY(12px); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
    .hxg-scroll::before{ animation:none; }
    .hxg-scroll{ display:none; }
}

/* =========================================================
   FEATURED JOURNEYS
   ========================================================= */

.hxg-journeys{
    background:#fbf8f4;
}

.hxg-journey-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
}

.hxg-journey{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #ebe3d8;
    border-radius:4px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
}

.hxg-journey:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(20,15,12,.1);
}

.hxg-journey-media{
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#e8e0d5;
}

.hxg-journey-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.hxg-journey:hover .hxg-journey-media img{
    transform:scale(1.04);
}

.hxg-journey-days{
    position:absolute;
    left:16px;
    top:16px;
    background:rgba(143,37,31,.94);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px 13px;
    border-radius:2px;
}

.hxg-journey-body{
    padding:28px 30px 30px;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

.hxg-journey-route{
    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:#a8813f;
    margin:0 0 10px;
}

.hxg-journey-body h3{
    font-size:24px;
    line-height:1.3;
    font-weight:600;
    margin:0 0 12px;
    color:#1c1c1c;
}

.hxg-journey-body > p{
    font-size:16px;
    color:#55504a;
    margin:0 0 18px;
}

.hxg-journey-list{
    list-style:none;
    padding:0;
    margin:0 0 24px;
    display:grid;
    gap:9px;
}

.hxg-journey-list li{
    position:relative;
    padding-left:22px;
    font-size:15px;
    line-height:1.6;
    color:#4a4a4a;
}

.hxg-journey-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:7px;
    height:7px;
    background:#8f251f;
    border-radius:50%;
}

.hxg-link{
    margin-top:auto;
    align-self:flex-start;
    font-size:15px;
    font-weight:600;
    color:#8f251f !important;
    background:none !important;
    padding:0 !important;
    text-decoration:none;
    border-bottom:1px solid rgba(143,37,31,.35);
    transition:border-color .2s ease, gap .2s ease;
}

.hxg-link:hover{
    border-color:#8f251f;
    transform:none;
}

/* =========================================================
   WHY CHOOSE US
   ========================================================= */

.hxg-why{
    background:#fff;
}

.hxg-why-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:26px;
}

.hxg-why-item{
    padding:34px 28px;
    background:#fbf8f4;
    border-top:3px solid #8f251f;
    border-radius:0 0 4px 4px;
}

.hxg-why-icon{
    width:46px;
    height:46px;
    margin-bottom:20px;
    stroke:#8f251f;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hxg-why-item h3{
    font-size:20px;
    font-weight:600;
    margin:0 0 12px;
    color:#1c1c1c;
}

.hxg-why-item p{
    font-size:15px;
    line-height:1.75;
    color:#5c564f;
    margin:0;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.hxg-quotes-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
}

.hxg-quote{
    background:#1c1715;
    border:1px solid rgba(255,255,255,.09);
    border-radius:4px;
    padding:36px 32px;
    display:flex;
    flex-direction:column;
}

.hxg-quote-mark{
    font-size:44px;
    line-height:1;
    color:#8f251f;
    font-family:Georgia, "Times New Roman", serif;
    margin-bottom:14px;
}

/* 示例场景标签（替代引号，避免被误读为客户评价） */
.hxg-scenario-tag{
    display:inline-block;
    align-self:flex-start;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:#ddbd91;
    border:1px solid rgba(221,189,145,.45);
    border-radius:2px;
    padding:5px 10px;
    margin-bottom:18px;
}

.hxg-testimonials .hxg-head p{
    font-size:16px;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.8;
}

.hxg-quote p{
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
    margin:0 0 24px;
    flex:1 1 auto;
}

.hxg-quote-by{
    font-size:14px;
    color:#ddbd91;
    font-weight:600;
    letter-spacing:.4px;
}

.hxg-quote-from{
    font-size:13px;
    color:rgba(255,255,255,.45);
}

/* =========================================================
   TRAVEL ESSENTIALS
   ========================================================= */

.hxg-essentials{
    background:#fbf8f4;
}

.hxg-essential-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}

.hxg-essential{
    background:#fff;
    border:1px solid #ebe3d8;
    border-radius:4px;
    padding:30px 26px;
}

.hxg-essential h3{
    font-size:19px;
    font-weight:600;
    margin:0 0 12px;
    color:#1c1c1c;
}

.hxg-essential p{
    font-size:15px;
    line-height:1.75;
    color:#5c564f;
    margin:0;
}

.hxg-essential-tag{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:#fff;
    background:#8f251f;
    padding:5px 11px;
    border-radius:2px;
    margin-bottom:16px;
}

/* =========================================================
   FAQ
   ========================================================= */

.hxg-faq{
    background:#fff;
}

.hxg-faq-list{
    max-width:900px;
    margin:0 auto;
    border-top:1px solid #e8e0d5;
}

.hxg-faq-item{
    border-bottom:1px solid #e8e0d5;
}

.hxg-faq-item summary{
    cursor:pointer;
    list-style:none;
    padding:24px 46px 24px 0;
    position:relative;
    font-size:18px;
    font-weight:600;
    line-height:1.5;
    color:#1c1c1c;
}

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

.hxg-faq-item summary::after{
    content:"";
    position:absolute;
    right:6px;
    top:32px;
    width:11px;
    height:11px;
    border-right:2px solid #8f251f;
    border-bottom:2px solid #8f251f;
    transform:rotate(45deg);
    transition:transform .2s ease;
}

.hxg-faq-item[open] summary::after{
    transform:rotate(-135deg);
    top:34px;
}

.hxg-faq-answer{
    padding:0 60px 26px 0;
    font-size:16px;
    line-height:1.8;
    color:#55504a;
}

.hxg-faq-answer p{
    margin:0 0 12px;
    font-size:16px;
    color:#55504a;
}

.hxg-faq-answer p:last-child{
    margin-bottom:0;
}

/* =========================================================
   响应式
   ========================================================= */

@media (max-width:1100px){
    .hxg-why-grid,
    .hxg-essential-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .hxg-hero-badges{
        grid-template-columns:repeat(2, 1fr);
        gap:16px;
    }
}

@media (max-width:900px){
    .hxg-section{
        padding:72px 0;
    }

    .hxg-journey-grid,
    .hxg-quotes-grid{
        grid-template-columns:1fr;
    }

    .hxg-hero{
        padding-top:130px;
    }

    .hxg-hero-actions{
        margin-bottom:32px;
    }

    .hxg-hero-badges{
        padding:22px 0 28px;
    }
}

@media (max-width:640px){
    .hxg-wrap,
    .hxg-hero-inner,
    .hxg-hero-badges{
        width:calc(100% - 32px);
    }

    .hxg-section{
        padding:60px 0;
    }

    .hxg-why-grid,
    .hxg-essential-grid{
        grid-template-columns:1fr;
    }

    .hxg-hero-badges{
        grid-template-columns:1fr;
        gap:14px;
    }

    .hxg-hero-actions .hxg-btn{
        width:100%;
    }

    .hxg-journey-body{
        padding:24px 22px 26px;
    }

    .hxg-faq-item summary{
        font-size:16px;
        padding:20px 40px 20px 0;
    }

    .hxg-faq-answer{
        padding-right:20px;
    }
}

/* 小屏用较小的 hero 图，节省流量 */
@media (max-width:1280px){
    .hxg-hero-media{
        background-image:url('/wp-content/uploads/destinations/hero-jiuzhaigou-1280.jpg');
    }
}

@media (max-width:640px){
    .hxg-hero-media{
        background-image:url('/wp-content/uploads/destinations/hero-jiuzhaigou-800.jpg');
        /* 竖屏裁切时偏向山体与湖面反射一侧，避开左侧枯枝 */
        background-position:58% 50%;
    }
}