/* ==========================================================================
   GreatSea · 首页 hero + 线路 CTA 带 + 卡片显示框修复
   由 gs-home.php 在首页按需加载。全部规则带 #gs-hero / .gs-routecta /
   .home-tours 前缀，不污染其它页面。

   调性：Editorial / Magazine —— 非对称偏置排版、超大 Cormorant 标题跳跃、
        深青叠层 + 噪点氛围、手写体副标、竖排坐标（单一难忘元素）。
        v4：移除 kicker / 按钮 / 左下角票根文字，标题改 Discover China, Your way.
   色彩：60% 实景照片 / 30% 深青 #0A5F66 / 10% 薄荷 #78E0BC 强调。
   ========================================================================== */
@font-face{
  font-family:"GS Hero Display";
  src:url("../uploads/gs-inspiration/fonts/cormorant-normal.woff2") format("woff2");
  font-style:normal;font-weight:400 700;font-display:swap;
}
@font-face{
  font-family:"GS Hero Display";
  src:url("../uploads/gs-inspiration/fonts/cormorant-italic.woff2") format("woff2");
  font-style:italic;font-weight:400 700;font-display:swap;
}

/* ------------------------------------------------------------------ HERO */
#gs-hero{
  --deep:#0A5F66; --mint:#78E0BC; --paper:#F7FBF9;
  --display:"GS Hero Display","Cormorant Garamond",Georgia,serif;
  --hand:"Caveat","Ma Shan Zheng",cursive;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"DM Mono","SFMono-Regular",Consolas,monospace;

  position:relative;isolation:isolate;box-sizing:border-box;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:clamp(560px,80vh,780px);
  display:flex;align-items:center;
  overflow:hidden;background:#0b3a3d;color:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
#gs-hero :where(*){box-sizing:border-box;}

/* 照片：Pexels #39452382 桂林龙脊梯田（3:2，Free License）
   cover 居中取景，外国游客与两位当地老人牵手完整入画；左侧留给标题。 */
#gs-hero .gs-hero__media{
  position:absolute;inset:0;z-index:-3;
  background-image:url("../uploads/2026/11/gs-hero-longji.jpg");
  background-size:cover;background-position:50% 45%;background-repeat:no-repeat;
  transform:scale(1.04);
  animation:gsHeroZoom 14s ease-out both;
}
@keyframes gsHeroZoom{from{transform:scale(1.10)}to{transform:scale(1.04)}}

/* 深青叠层：左侧重、右侧轻，既保证文字对比度又让画面透气 */
#gs-hero .gs-hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(5,36,39,.92) 0%,rgba(5,36,39,.78) 30%,rgba(5,36,39,.34) 62%,rgba(5,36,39,.06) 84%,rgba(5,36,39,.24) 100%),
    linear-gradient(180deg,rgba(5,36,39,.34) 0%,rgba(5,36,39,0) 34%,rgba(5,36,39,0) 62%,rgba(5,36,39,.56) 100%);
}
/* 极轻噪点，去掉数码平滑感 */
#gs-hero .gs-hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 内容：刻意左偏置，不居中；右侧留给照片与竖排坐标 */
#gs-hero .gs-hero__inner{
  position:relative;z-index:2;
  width:min(100% - 96px,1360px);margin:0 auto;
  padding:96px 0 112px;
  max-width:760px;margin-left:max(48px,calc((100vw - 1360px)/2 + 36px));
}

/* 超大标题：11px → 110px 的 10 倍跳跃，斜体第二行是记忆点 */
#gs-hero .gs-hero__title{
  margin:0;font-family:var(--display);font-weight:500;
  /* 主题会给 h1 强制深色，必须显式覆盖，否则深青叠层上几乎看不见 */
  color:var(--paper) !important;
  /* "Discover China," 比原 "China," 长，字号收到 96px 上限避免超出 760px 文本栏 */
  font-size:clamp(56px,6.5vw,96px);line-height:.9;letter-spacing:-.03em;
  text-shadow:0 12px 40px rgba(0,0,0,.24);
  animation:gsHeroUp .8s cubic-bezier(.2,.7,.3,1) .16s both;
}
#gs-hero .gs-hero__title em{font-style:italic;font-weight:400;color:var(--mint);letter-spacing:-.02em;}

#gs-hero .gs-hero__hand{
  /* 与斜体标题的 y 降部留出呼吸空间 */
  margin:26px 0 0;font-family:var(--hand);font-size:clamp(26px,2.8vw,38px);
  line-height:1.1;color:#D8EEE9;transform:rotate(-1.6deg);transform-origin:left center;
  animation:gsHeroUp .8s cubic-bezier(.2,.7,.3,1) .28s both;
}

#gs-hero .gs-hero__lede{
  margin:30px 0 0;max-width:52ch;font-size:15px;line-height:1.85;
  color:rgba(247,251,249,.82);
  animation:gsHeroUp .8s cubic-bezier(.2,.7,.3,1) .38s both;
}

/* 右侧竖排坐标：单一难忘元素 */
#gs-hero .gs-hero__side{
  position:absolute;z-index:2;right:max(30px,calc((100vw - 1360px)/2));top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  color:rgba(247,251,249,.78);writing-mode:vertical-rl;
  animation:gsHeroUp .9s ease .6s both;
}
#gs-hero .gs-hero__side i{display:block;width:1px;height:66px;background:linear-gradient(180deg,var(--mint),transparent);}

/* 底部票根式信息条 */
#gs-hero .gs-hero__foot{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:20px;
  padding:20px max(48px,calc((100vw - 1360px)/2 + 36px));
  border-top:1px solid rgba(247,251,249,.2);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:rgba(247,251,249,.7);text-transform:uppercase;
  background:linear-gradient(0deg,rgba(5,36,39,.34),rgba(5,36,39,0));
}
#gs-hero .gs-hero__scroll{margin-left:auto;display:flex;align-items:center;gap:10px;}
#gs-hero .gs-hero__scroll b{font-size:15px;color:var(--mint);animation:gsHeroNudge 1.8s ease-in-out infinite;}
@keyframes gsHeroNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@keyframes gsHeroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
/* 手写体自带旋转，动画结束需保留旋转角度 */
#gs-hero .gs-hero__hand{animation-name:gsHeroHand;}
@keyframes gsHeroHand{from{opacity:0;transform:translateY(26px) rotate(-1.6deg)}to{opacity:1;transform:translateY(0) rotate(-1.6deg)}}

@media (max-width:1200px){
  #gs-hero .gs-hero__inner{margin-left:48px;width:min(100% - 96px,720px);}
  #gs-hero .gs-hero__side{right:26px;}
  #gs-hero .gs-hero__foot{padding-left:48px;padding-right:48px;}
}
@media (max-width:768px){
  #gs-hero{min-height:620px;align-items:flex-end;}
  /* 右移取景：窄屏下保住「女游客 + 当地老人牵手」这条中外交流主线 */
  #gs-hero .gs-hero__media{background-position:62% 56%;}
  #gs-hero .gs-hero__scrim{
    background:linear-gradient(90deg,rgba(5,36,39,.9) 0%,rgba(5,36,39,.62) 60%,rgba(5,36,39,.3) 100%),
               linear-gradient(180deg,rgba(5,36,39,.1) 0%,rgba(5,36,39,.1) 40%,rgba(5,36,39,.82) 100%);
  }
  #gs-hero .gs-hero__inner{width:100%;margin:0;padding:0 26px 56px;max-width:none;}
  #gs-hero .gs-hero__title{font-size:clamp(42px,11vw,64px);}
  /* 移动端副标会折成两行：去掉旋转并拉开行距，避免与 "Your way." 降部相撞 */
  #gs-hero .gs-hero__hand{
    font-size:24px;line-height:1.25;margin-top:22px;
    transform:none;animation-name:gsHeroUp;
  }
  #gs-hero .gs-hero__lede{font-size:14px;line-height:1.75;max-width:44ch;}
  #gs-hero .gs-hero__side{display:none;}
  /* 移动端底部信息条整体隐藏（左下角文字已删，滚动提示也不同步显示） */
  #gs-hero .gs-hero__foot{display:none;}
}
@media (max-width:480px){
  #gs-hero{min-height:600px;}
  #gs-hero .gs-hero__title{font-size:clamp(40px,10.5vw,56px);}
  #gs-hero .gs-hero__lede{margin-top:22px;}
}
@media (prefers-reduced-motion:reduce){
  #gs-hero *,#gs-hero *::before,#gs-hero *::after{animation:none!important;transition:none!important;}
}

/* ------------------------------------- GreatSea 品牌简介：上下呼吸感 */
.gs-intro-head{padding-top:86px;}
.gs-intro-copy{margin-bottom:56px !important;}
@media (max-width:767px){
  .gs-intro-head{padding-top:54px;}
  .gs-intro-copy{margin-bottom:38px !important;}
}

/* ------------------------------------- 栏目过渡条：只留深青背景 + 一行小字 */
.gs-routecta{
  position:relative;isolation:isolate;box-sizing:border-box;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:118px;padding:34px 24px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(115deg,#073F45 0%,#0A5F66 58%,#0E7A78 100%);
  color:#F7FBF9;
}
.gs-routecta__micro{
  margin:0;text-align:center;
  font-family:"DM Mono","SFMono-Regular",Consolas,monospace;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(247,251,249,.80);
}
.gs-routecta__micro span{color:#78E0BC;padding:0 10px;}
@media (max-width:767px){
  .gs-routecta{min-height:92px;padding:26px 20px;}
  .gs-routecta__micro{font-size:9px;letter-spacing:.16em;}
}

/* ------------------------------------- Recommended China Tours 显示框修复 */
/* 收紧卡片区底部留白，让深青 CTA 带紧接卡片，消除原来那条突兀的白色空块 */
.home-tours{padding-bottom:24px !important;}
/* 卡片图片严格落在圆角显示框内，未加载时也保持统一比例，不会变成"空色块" */
.home-tours .route-card{overflow:hidden;}
.home-tours .route-card .route-ph{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,#0A5F66,#12787A 55%,#0E8A8E);
}
.home-tours .route-card .route-ph img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
/* 卡片等高：标题行数不同也不参差 */
.home-tours .route-card .route-body{min-height:118px;}
@media (max-width:599px){
  .home-tours .route-card .route-ph{aspect-ratio:16/9;}
}

/* One h1 per page: the "Recommended China Tours" heading is now an h2.
   These values reproduce the old h1 computed style so the visual is unchanged. */
h2.wp-block-heading.gs-home-section-title{
  font-size:32px;font-weight:700;line-height:48px;
  margin:0;text-align:center;color:#1a202c;
}