/* ============================================================
   WordPress 环境适配层
   只在 WP 环境下需要：管理条让位、页脚、链接重置、锚点、核心类
   ============================================================ */

/* ------------------------------------------------------------
   1. 元素语义变化后的重置
   参考设计里 .quick-card / .pill-btn / .link-btn / .tab 是 <button>，
   接入 WordPress 后它们变成 <a>（可指向页面）。补齐浏览器默认样式的差异。
   ------------------------------------------------------------ */
a{ color:inherit; }

.quick-card,
.pill-btn,
.link-btn,
.tab,
.nav-brand{
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.quick-card{ cursor:pointer; }
.tab{ cursor:pointer; }

/* .strip-mini 由按钮改为纯装饰性标签 */
.strip-mini{ cursor:default; pointer-events:none; }

/* ------------------------------------------------------------
   2. 锚点
   页内跳转目标不能撑开布局，还要给固定导航留出落点偏移。
   ------------------------------------------------------------ */
.gq-anchor{
  display:block;
  position:relative;
  width:0; height:0;
  overflow:hidden;
  scroll-margin-top:calc(var(--tabbar-h, 64px) + 24px);
}

/* ------------------------------------------------------------
   3. 品牌标识
   首屏左上角的标识现在由 header.php 的 .site-head 统一承担，
   样式在 style.css；首屏内部不再有第二处品牌文案。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4. 站点页脚
   这一层是 WordPress 站点的必要组成（联系方式 + 备案号 + 版权）。
   ------------------------------------------------------------ */
.gq-footer{
  padding:56px var(--pad) 8px;
  border-top:1px solid var(--stroke);
  margin-top:64px;
}
.gq-foot-inner{
  max-width:860px;
  margin-inline:auto;
}
.gq-foot-cap{
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em;
  color:var(--gold);
  text-transform:uppercase;
}
.gq-foot-title{
  font-family:var(--font-disp);
  font-size:30px; font-weight:500;
  line-height:1.24;
  letter-spacing:-.01em;
  margin-top:14px;
}
.gq-foot-text{
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink-2);
  margin-top:14px;
  max-width:60ch;
}
.gq-foot-list{
  list-style:none;
  margin-top:26px;
  display:grid;
  gap:11px;
}
.gq-foot-list li{
  display:flex; align-items:baseline; gap:12px;
  font-size:14px;
  color:rgba(255,255,255,.9);
}
.gq-foot-list li > span{
  flex:0 0 44px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-3);
}
.gq-foot-list li a{
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.gq-foot-list li a:hover{
  color:var(--gold);
  border-color:rgba(201,164,106,.5);
}
.gq-foot-note{
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.8;
  margin-top:30px;
}
.gq-foot-legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin-top:12px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11.5px;
  color:var(--ink-4);
}
.gq-foot-legal a{
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.gq-foot-legal a:hover{ color:var(--ink-2); }

/* ------------------------------------------------------------
   5. 管理条让位
   外壳是 100dvh 的全屏容器，管理条会盖住顶部，必须显式扣掉高度。

   注意：WordPress 会给 <html> 注入 `margin-top:32px !important`
   （≤782px 时是 46px），所以**不能再给 .app 加 margin-top** ——
   那会把管理条的高度算两次，结果整个外壳下移、底部导航被顶出视口。
   正确做法是让 html / body / .app 三者一起按同一高度收窄。

   html 上的 has-admin-bar 由 header.php 输出，因为 WP 只给 <body>
   加 admin-bar 类，CSS 无法从 html 侧选中它。
   ------------------------------------------------------------ */
html.has-admin-bar,
body.admin-bar,
html.has-admin-bar .app,
body.admin-bar .app{
  height:calc(100vh - 32px);
  height:calc(100dvh - 32px);
}
html.has-admin-bar .app,
body.admin-bar .app{
  margin-top:0;
  max-height:none;
}
@media screen and (max-width:782px){
  html.has-admin-bar,
  body.admin-bar,
  html.has-admin-bar .app,
  body.admin-bar .app{
    height:calc(100vh - 46px);
    height:calc(100dvh - 46px);
  }
}

/* 顶部导航是绝对定位在 .app 内的，它自然落在管理条下方，不用再偏移 */

/* ------------------------------------------------------------
   6. 无障碍：跳转链接与屏幕阅读器文本
   ------------------------------------------------------------ */
.screen-reader-text{
  border:0;
  clip-path:inset(50%);
  height:1px; width:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute !important;
  word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff;
  color:#111;
  border-radius:6px;
  box-shadow:0 0 2px 2px rgba(0,0,0,.6);
  clip-path:none;
  display:block;
  font-size:13px;
  font-weight:600;
  height:auto;
  left:16px; top:16px;
  line-height:normal;
  padding:14px 22px;
  text-decoration:none;
  width:auto;
  z-index:100000;
}
.gq-skip{ position:absolute; }

/* ------------------------------------------------------------
   7. 正文区（内页使用）
   ------------------------------------------------------------ */
.cy-entry{
  font-size:15px;
  line-height:1.95;
  color:rgba(255,255,255,.82);
}
.cy-entry > * + *{ margin-top:1.05em; }
.cy-entry h2{
  font-family:var(--font-disp);
  font-size:26px; font-weight:500;
  line-height:1.3;
  color:#fff;
  margin-top:1.8em;
}
.cy-entry h3{
  font-size:17px; font-weight:600;
  color:#fff;
  margin-top:1.6em;
}
.cy-entry a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(201,164,106,.34);
}
.cy-entry ul,.cy-entry ol{ padding-left:1.3em; }
.cy-entry li{ margin-top:.5em; }
.cy-entry img{ border-radius:var(--radius-m); }
.cy-entry blockquote{
  padding-left:18px;
  border-left:2px solid rgba(201,164,106,.42);
  color:var(--ink-2);
  font-family:var(--font-disp);
  font-size:18px;
}

/* 核心对齐类 */
.alignleft{ float:left; margin:6px 24px 18px 0; }
.alignright{ float:right; margin:6px 0 18px 24px; }
.aligncenter{ display:block; margin:18px auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{
  font-size:12px;
  color:var(--ink-3);
  margin-top:8px;
  text-align:center;
}
.sticky .tk-brand{ background:var(--gold); color:#111; }

/* ------------------------------------------------------------
   8. 内页骨架（关于 / 服务 / 联系等）
   沿用同一套外壳，但用一页式排版，不再是全屏 App。
   ------------------------------------------------------------ */
/* 上方已经有站点标识 + 面包屑（见 style.css 的 .site-head / .crumb），
   这里不再重复让出顶部空间。 */
.page-head{
  padding:20px var(--pad) 0;
}

/* ---- 页头图卡 -------------------------------------------------------
   参考模板（旅行 App 的内页）顶部都是一整块「看得清的」圆角图卡，
   标题直接叠在图上 —— 图是这一屏的主体，不是背景陪衬。
   这里照此实现：.page-head-inner 就是那张卡，图挂在它的 ::before 上。

   图由模板通过 --ph-img 注入（见 gq_head_img_attr()）。没有单独配图的页面
   （搜索 / 404 / 通用页 / 文章页）会落到 ::before 的兜底图，观感一致。

   ⚠ 内容层用 z-index:1 压在伪元素（z-index:0）之上，.page-head-inner 自己
     用 isolation:isolate 建独立层叠上下文，内部 z-index 不外泄。
     （页头早先用过负 z-index，一旦外层建了层叠上下文就会被抬到正文之上、
     把正文整段盖住 —— 这里避开那条路。） */
.page-head-inner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:860px;
  margin-inline:auto;
  min-height:372px;
  padding:26px 22px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:var(--radius-l);
  /* 边界按用户口味走「极淡白环 + 柔和暗影 + 同色系外发光」，
     不要深色硬描边（那种会被读成「贴纸边框」）。
     顶部再加一道内高光，卡片才像一块有厚度的玻璃，而不是一张平贴的图。 */
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 70px -28px rgba(0,0,0,.82),
    0 0 64px -22px rgba(201,164,106,.12),
    inset 0 1px 0 rgba(255,255,255,.10);
}
/* 图本体。保持清晰 —— 上一版曾把它雾化成背景底纹，图糊到认不出内容，被否掉。
   现在只做「降饱和 + 提对比」：降饱和统一调性，提对比把被压暗的立体感找回来
   （只压暗不较对比，图会平得像一张墙纸 —— 那就是「呆板」的来源）。
   最后一个参数是兜底图：搜索页 / 404 / 通用页 / 文章页没有单独配图，
   拿到兜底图才不会只剩一块空深色卡，四个内页与它们的观感也就统一了。 */
.page-head-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#101016;
  background-image:var(--ph-img, url(../img/p5.webp));
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
  /* 放大到 1.08 再由卡片圆角裁掉 —— 让构图变「紧」、主体「近」。
     全景图在原尺寸下主体太小，缩在一块方卡里就是「呆板」感的主要来源。 */
  transform:scale(1.08);
  filter:saturate(.85) contrast(1.1) brightness(.96);
}
/* 遮罩。这里不做「上下对称地均匀压暗」—— 那样图会被压平，正是「呆板」的来源。
   改成有方向的四层：
     ① 右上一束暖金微光（品牌金），右上角保持明亮；
     ② 左下角沉成一片斜向阴影，正好托住左对齐的标题与副标；
     ③ 顶部一条轻压，接住上方的页头；
     ④ 整个下沿再兜一层极淡的暗，任何一张图上的文字都稳。
   明暗一有方向，画面就有了景深，不再是贴上去的一张墙纸。 */
.page-head-inner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    /* ① 轻暗角：只收拢视线，不压暗画面（图要亮，才有「美」可言） */
    radial-gradient(100% 88% at 50% 46%,
      rgba(6,6,9,0) 52%,
      rgba(6,6,9,.12) 80%,
      rgba(6,6,9,.26) 100%),
    /* ② 右上一束暖金微光（品牌金），右上角保持明亮 */
    radial-gradient(78% 68% at 84% 14%,
      rgba(201,164,106,.16) 0%,
      rgba(201,164,106,.05) 42%,
      rgba(201,164,106,0) 68%),
    /* ③ 左下角的斜向阴影，托住左对齐的标题与副标 */
    radial-gradient(124% 104% at -8% 106%,
      rgba(6,6,9,.90) 0%,
      rgba(6,6,9,.70) 28%,
      rgba(6,6,9,.32) 54%,
      rgba(6,6,9,.06) 76%,
      rgba(6,6,9,0) 90%),
    /* ④ 顶部轻压，接住上方的页头 */
    linear-gradient(180deg,
      rgba(6,6,9,.34) 0%,
      rgba(6,6,9,.06) 16%,
      rgba(6,6,9,0) 30%),
    /* ⑤ 下沿兜底，让文字区彻底沉下去 */
    linear-gradient(180deg,
      rgba(6,6,9,0) 58%,
      rgba(6,6,9,.38) 100%);
}
.page-head-inner > *{ position:relative; z-index:1; }

.page-kicker{
  font-size:10.5px; font-weight:500;
  letter-spacing:.26em;
  color:var(--gold);
  text-transform:uppercase;
}
/* 与 .ap-rule 同一支金色渐变（#EED7A9→#C9A46A），只是横过来当引线 ——
   小标签前面有一道线，这行字才算「被设计过」，而不是干巴巴一行。 */
.page-kicker::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:20px; height:1px;
  margin-right:9px;
  background:linear-gradient(90deg,#EED7A9,#C9A46A);
}
.page-title{
  font-family:var(--font-disp);
  font-size:clamp(38px, 11vw, 56px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.02em;
  margin-top:14px;
  color:#fff;
}
.page-sub{
  font-size:13.5px;
  color:rgba(255,255,255,.74);
  line-height:1.8;
  margin-top:12px;
  max-width:46ch;
}
.page-body{
  padding:44px var(--pad) 0;
}
.page-body-inner{ max-width:860px; margin-inline:auto; }

@media (min-width:1024px){
  .page-title{ font-size:clamp(52px, 5vw, 84px); }
  /* 让位给顶部导航条的工作已交给 .crumb（desktop.css） */
  .page-head{ padding-top:24px; }
  /* 桌面端卡片拉宽拉高，与正文宽栏（.pg-wide 1040px）同一档 */
  .page-head-inner{
    max-width:1040px;
    min-height:466px;
    padding:42px 42px 46px;
  }
  .page-head-inner::before{ background-position:center 42%; }
  .page-body{ padding-top:64px; }
  .gq-footer{ margin-top:110px; padding-top:80px; }
  .gq-foot-title{ font-size:40px; }
}

/* ------------------------------------------------------------
   9. 列表 / 搜索 / 翻页
   ------------------------------------------------------------ */
.gq-list{
  display:grid;
  gap:14px;
  margin-top:30px;
}
.gq-item{
  display:block;
  padding:24px 22px;
  border-radius:var(--radius-m);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid var(--stroke);
  text-decoration:none;
  transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.gq-item:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.085);
  border-color:var(--stroke-2);
}
.gq-item-title{
  font-family:var(--font-disp);
  font-size:23px; font-weight:500;
  line-height:1.3;
  letter-spacing:-.01em;
}
.gq-item-meta{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-4);
  margin-top:10px;
}
.gq-item-ex{
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink-2);
  margin-top:12px;
}
.gq-pager{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:38px;
  font-size:12.5px;
}
.gq-pager a,
.gq-pager span{
  min-width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--ink-2);
  text-decoration:none;
}
.gq-pager .current{
  background:var(--gold);
  border-color:transparent;
  color:#14100A;
  font-weight:600;
}
.gq-pager a:hover{ border-color:var(--stroke-2); color:var(--ink); }
.gq-pager a:active{ transform:scale(.94); }

/*
 * 窄屏收紧一档。
 * 「上一页 + 4 个页码 + 下一页」共 6 个胶囊，按上面的 38px 高 / 12px 左右内距
 * 实测整排约 315px；而 390px 机型上 .page-body-inner 的可用宽是 354px，
 * 到 320px 机型（左右各 18px 留白 → 284px）就装不下了。统一降一档到 32px
 * 后整排约 266px，窄机也留有余量。
 */
@media (max-width:420px){
  .gq-pager{ gap:6px; margin-top:32px; }
  .gq-pager a,
  .gq-pager span{ min-width:32px; height:32px; padding:0 8px; font-size:12px; }
}
.gq-empty{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-2);
  margin-top:28px;
}
.gq-empty a{ color:var(--gold); }

/* 搜索表单 */
.gq-search{
  display:flex;
  gap:10px;
  margin-top:32px;
}
.gq-search-input{
  flex:1 1 auto;
  min-width:0;
  height:52px;
  padding:0 18px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  color:#fff;
  font-size:16px;              /* 16px：iOS 聚焦时才不会强制放大整页 */
  font-family:inherit;
  outline:none;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.gq-search-input::placeholder{ color:var(--ink-4); }
.gq-search-input:focus{
  border-color:rgba(201,164,106,.5);
  background:rgba(255,255,255,.075);
}
.gq-search-btn{
  flex:0 0 auto;
  height:52px;
  padding:0 26px;
  border-radius:14px;
  background:var(--gold);
  color:#14100A;
  font-size:13.5px; font-weight:600;
  border:0;
  cursor:pointer;
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.gq-search-btn:active{ transform:scale(.96); filter:brightness(.92); }

/* 404 的行动按钮组 */
.gq-actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:34px;
}

/* 文章底部上下篇 */
.gq-postnav{
  display:grid;
  gap:12px;
  margin-top:56px;
  padding-top:30px;
  border-top:1px solid var(--stroke);
}
.gq-postnav a{
  display:flex; flex-direction:column; gap:7px;
  padding:20px 22px;
  border-radius:var(--radius-m);
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  text-decoration:none;
  font-size:14.5px;
  line-height:1.5;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.gq-postnav a:hover{
  background:rgba(255,255,255,.075);
  border-color:var(--stroke-2);
}
.gq-postnav a span{
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--ink-4);
  text-transform:uppercase;
}
.gq-postnav .is-next{ text-align:right; }

.gq-hero-thumb{
  width:100%;
  height:auto;
  border-radius:var(--radius-l);
  margin-bottom:34px;
}

