@charset "UTF-8";
/* ============================================================
   谷勒大宅 — 内页区块
   作品 / 流程 / 关于 / 联系 / 动态

   只做板块级排版，沿用 style.css 与 desktop.css 的设计语言：
   深底 + 玻璃卡 + 金色点缀，几何变量一律复用。
   ============================================================ */

/* ------------------------------------------------------------
   1. 通用板块骨架
   ------------------------------------------------------------ */
.page-body-inner.pg-wide{ max-width:1080px; }

.pg-sec{ margin-top:52px; }
.pg-sec:first-child{ margin-top:0; }

.pg-sec-head{
  display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--stroke);
}
.pg-title{
  margin:0;
  font-family:var(--font-serif-cn);
  font-size:21px; font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
}
.pg-title-en{
  font-size:10.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}
.pg-lead{
  margin:-8px 0 20px;
  font-size:13.5px; line-height:1.85;
  color:var(--ink-3);
}
.pg-cta{ margin-top:56px; text-align:center; }

/* ------------------------------------------------------------
   2. 关于页
   ------------------------------------------------------------ */
.about-parent{
  display:flex; align-items:center; gap:16px;
  padding:20px 22px;
  margin-bottom:34px;
  border-radius:var(--radius-m);
  background:linear-gradient(120deg, rgba(201,164,106,.10), rgba(255,255,255,.022));
  border:1px solid rgba(201,164,106,.22);
}
.ap-rule{
  flex:0 0 auto;
  width:3px; height:34px;
  border-radius:2px;
  background:linear-gradient(180deg,#EED7A9,#C9A46A);
}
.ap-text{
  margin:0;
  font-size:13.5px; line-height:1.75;
  color:rgba(255,255,255,.78);
}

.about-grid{
  display:grid; gap:12px;
  grid-template-columns:1fr;
}
.about-card{
  position:relative;
  padding:24px 22px 26px;
  border-radius:var(--radius-m);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid var(--stroke);
  overflow:hidden;
}
.about-card::after{
  content:"";
  position:absolute; top:0; right:auto; bottom:auto; left:0; inset:0 auto auto 0;
  width:100%; height:1px;
  background:linear-gradient(90deg, rgba(232,191,126,.5), transparent 62%);
}
.ac-num{
  display:block;
  font-family:var(--font-disp);
  font-size:13px; letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:12px;
}
.ac-title{
  margin:0 0 10px;
  font-family:var(--font-serif-cn);
  font-size:17.5px; font-weight:500;
  color:var(--ink);
}
.ac-text{
  margin:0;
  font-size:13px; line-height:1.85;
  color:var(--ink-3);
}

.about-phil{
  margin-top:30px;
  padding:28px 24px;
  border-radius:var(--radius-l);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,164,106,.13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid var(--stroke);
}
.apil-cap{
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.apil-text{
  margin:0;
  font-family:var(--font-serif-cn);
  font-size:17px; line-height:1.95;
  color:rgba(255,255,255,.86);
}
.about-entry{ margin-top:36px; }

/* ------------------------------------------------------------
   3. 流程页 — 合作模式
   ------------------------------------------------------------ */
.mode-grid{ display:grid; gap:12px; grid-template-columns:1fr; }

.mode-card{
  position:relative;
  padding:26px 22px;
  border-radius:var(--radius-m);
  background:linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.020));
  border:1px solid var(--stroke);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.mode-card:hover{
  border-color:var(--stroke-2);
  transform:translateY(-2px);
}
.mc-num{
  display:inline-block;
  font-family:var(--font-disp);
  font-size:12px; letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:10px;
}
.mc-title{
  margin:0 0 8px;
  font-family:var(--font-serif-cn);
  font-size:19px; font-weight:500;
  color:var(--ink);
}
.mc-scope{
  margin:0 0 16px;
  font-size:12px; line-height:1.7;
  color:var(--ink-3);
}
.mc-list{
  margin:0; padding:16px 0 0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.07);
}
.mc-list li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; line-height:1.7;
  color:rgba(255,255,255,.72);
}
.mc-list li + li{ margin-top:9px; }
.mc-dot{
  flex:0 0 auto;
  width:4px; height:4px; margin-top:8px;
  border-radius:50%;
  background:var(--gold);
  opacity:.9;
}

/* ------------------------------------------------------------
   4. 流程页 — 六阶段
   ------------------------------------------------------------ */
.step-list{
  margin:0; padding:0 0 0 22px;
  list-style:none;
  position:relative;
}
.step-item{ position:relative; padding-bottom:24px; }
.step-item:last-child{ padding-bottom:0; }

.st-rail{
  position:absolute;
  left:-22px; top:9px; bottom:-9px;
  width:1px;
  background:linear-gradient(180deg, rgba(201,164,106,.42), rgba(255,255,255,.08));
}
.step-item:last-child .st-rail{ bottom:auto; height:0; }

.st-num{
  display:inline-block;
  font-family:var(--font-disp);
  font-size:11.5px; letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:6px;
}
.st-body{
  padding:16px 18px;
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.036);
  border:1px solid var(--stroke);
}
.st-title{
  margin:0 0 12px;
  font-family:var(--font-serif-cn);
  font-size:16px; font-weight:500;
  color:var(--ink);
}
.st-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.st-tag{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-size:11.5px; line-height:1.5;
  color:var(--ink-2);
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
}

/* ------------------------------------------------------------
   5. 流程页 — 设计收费
   ------------------------------------------------------------ */
.fee-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
.fee-card{
  padding:24px 22px;
  border-radius:var(--radius-m);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020));
  border:1px solid var(--stroke);
  text-align:left;
}
.fc-type{
  font-size:12px; letter-spacing:.04em;
  color:var(--ink-3);
  margin-bottom:14px;
}
.fc-price{ display:flex; align-items:baseline; gap:5px; }
.fc-num{
  font-family:var(--font-disp);
  font-size:38px; font-weight:500; line-height:1;
  letter-spacing:-.01em;
  background:linear-gradient(150deg,#F2DFB7,#C9A46A);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fc-unit{ font-size:12.5px; color:var(--ink-3); }
.fc-note{
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px; line-height:1.65;
  color:var(--ink-4);
}
.fee-note{ margin-top:16px; }
.fee-note p{
  margin:0;
  font-size:11.5px; line-height:1.8;
  color:var(--ink-4);
}

/* ------------------------------------------------------------
   6. 流程页 — 工艺标准（可展开）
   ------------------------------------------------------------ */
.craft-list{ display:grid; gap:10px; }
.craft-item{
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.038);
  border:1px solid var(--stroke);
  overflow:hidden;
  transition:border-color .4s var(--ease);
}
.craft-item[open]{ border-color:rgba(201,164,106,.26); }
.cf-sum{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none;
}
.cf-sum::-webkit-details-marker{ display:none; }
.cf-num{
  font-family:var(--font-disp);
  font-size:12px; letter-spacing:.14em;
  color:var(--gold);
  flex:0 0 auto;
}
.cf-name{
  font-family:var(--font-serif-cn);
  font-size:16px; font-weight:500;
  color:var(--ink);
  flex:1 1 auto;
}
.cf-en{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
  flex:0 0 auto;
}
.cf-arw{
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .4s var(--ease);
}
.craft-item[open] .cf-arw{ transform:rotate(-135deg) translate(-2px,-2px); }
.cf-body{
  margin:0; padding:4px 18px 18px;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.06);
}
.cf-body li{
  display:flex; gap:10px;
  padding:9px 0;
  font-size:12.5px; line-height:1.7;
  color:rgba(255,255,255,.68);
}
.cf-body li + li{ border-top:1px solid rgba(255,255,255,.045); }
.cf-idx{
  flex:0 0 auto;
  font-family:var(--font-disp);
  font-size:11px; letter-spacing:.1em;
  color:var(--ink-4);
  padding-top:2px;
}

/* 油漆八道工序 */
.paint-row{
  margin:0; padding:0;
  list-style:none;
  display:grid; gap:8px;
}
.paint-item{
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-areas:"num name" "num text";
  gap:2px 12px;
  padding:14px 16px;
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.034);
  border:1px solid var(--stroke);
}
.pi-num{
  grid-area:num;
  font-family:var(--font-disp);
  font-size:15px; letter-spacing:.06em;
  color:var(--gold);
  opacity:.85;
  padding-top:1px;
}
.pi-name{
  grid-area:name;
  font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.9);
}
.pi-text{
  grid-area:text;
  font-size:11.5px; line-height:1.7;
  color:var(--ink-4);
}

/* 半包材料清单 */
.mat-grid{
  display:grid; gap:8px;
  grid-template-columns:1fr 1fr;
}
.mat-item{
  padding:14px 14px 15px;
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.034);
  border:1px solid var(--stroke);
}
.mi-num{
  display:block;
  font-family:var(--font-disp);
  font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-4);
  margin-bottom:8px;
}
.mi-cat{
  display:block;
  font-size:11px;
  color:var(--ink-3);
  margin-bottom:3px;
}
.mi-brand{
  display:block;
  font-size:13px; line-height:1.5;
  color:rgba(255,255,255,.88);
}

/* ------------------------------------------------------------
   7. 作品页
   ------------------------------------------------------------ */
.work-grid{ display:grid; gap:16px; grid-template-columns:1fr; }

.work-card{ position:relative; }
.wc-link{
  display:block;
  text-decoration:none; color:inherit;
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.wc-link:hover{ border-color:var(--stroke-2); transform:translateY(-3px); }

.wc-media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#0d0d11;
}
/* aspect-ratio 需要 Chrome 88+，旧内核退化成固定高度，图仍然是可见的 */
@supports not (aspect-ratio:4/3){
  .wc-media{ height:250px; }
}
.wc-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s var(--ease);
}
.wc-link:hover .wc-media img{ transform:scale(1.045); }
.wc-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.62) 100%);
}
.wc-badge{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center;
  padding:5px 11px;
  border-radius:999px;
  font-size:10.5px; letter-spacing:.03em;
  color:#14110C;
  background:linear-gradient(150deg,#EED7A9,#C9A46A);
}

.wc-body{ padding:18px 18px 20px; }
.wc-name{
  margin:0 0 4px;
  font-family:var(--font-disp);
  font-size:19px; font-weight:500; line-height:1.2;
  letter-spacing:.01em;
  color:var(--ink);
}
.wc-cn{
  font-family:var(--font-serif-cn);
  font-size:13.5px;
  color:rgba(255,255,255,.8);
  margin-bottom:10px;
}
.wc-meta{
  font-size:11.5px;
  color:var(--ink-4);
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.065);
}

/* ------------------------------------------------------------
   8. 联系区块
   （原本是一个独立的「联系」页，现已并入「关于」页下半段，
     所以下面这些 .ct-* 规则现在跑在 page-about.php 上）
   ------------------------------------------------------------ */

/* 品牌内容与联系内容之间的分界。用双类提高特异性，
   免得被 1024px 断点里的 .page-body{padding-top:64px} 盖掉。 */
.page-body.page-body-contact{
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--stroke);
}

.ct-layout{ display:grid; gap:28px; grid-template-columns:1fr; }

.ct-title{
  margin:0 0 14px;
  font-family:var(--font-serif-cn);
  font-size:19px; font-weight:500;
  color:var(--ink);
}
.ct-text{
  margin:0 0 22px;
  font-size:13px; line-height:1.9;
  color:var(--ink-3);
}
.ct-list{
  margin:0; padding:0;
  list-style:none;
  border-top:1px solid var(--stroke);
}
.ct-list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--stroke);
}
.ct-k{
  flex:0 0 52px;
  font-size:11.5px;
  color:var(--ink-4);
  padding-top:1px;
}
.ct-v{
  flex:1 1 auto;
  font-size:13.5px; line-height:1.65;
  color:rgba(255,255,255,.88);
  word-break:break-all;
}
.ct-v a{ color:inherit; text-decoration:none; }
.ct-v a:hover{ color:var(--gold); }
.ct-hint{
  margin:0;
  font-size:12px; line-height:1.8;
  color:var(--ink-4);
}

/* 到访指引（占原来表单那一栏） */
.ct-panel{
  padding:24px 20px 26px;
  border-radius:var(--radius-l);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.019));
  border:1px solid var(--stroke);
}
.ct-steps{ margin:0; padding:0; list-style:none; }
.ct-steps li{
  display:flex; gap:14px;
  padding:15px 0;
  border-top:1px solid var(--stroke);
}
.ct-steps li:first-child{ border-top:0; padding-top:2px; }
.ct-steps li:last-child{ padding-bottom:2px; }
.ct-step-i{
  flex:0 0 auto;
  font-family:var(--font-disp);
  font-size:11.5px; letter-spacing:.08em;
  color:var(--gold);
  padding-top:3px;
}
.ct-step-b{ flex:1 1 auto; display:block; }
.ct-step-b b{
  display:block;
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  margin-bottom:6px;
}
.ct-step-b span{
  display:block;
  font-size:12.5px; line-height:1.85;
  color:var(--ink-3);
}

/* 通用区块：可以聊什么 / 常见问题 */
.ct-block{ margin-top:52px; }
.ct-block-title{
  position:relative;
  margin:0 0 20px;
  padding-bottom:14px;
  font-family:var(--font-serif-cn);
  font-size:19px; font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--stroke);
}
.ct-block-title::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:38px; height:1px;
  background:var(--gold);
}

.ct-scope{ display:grid; gap:12px; grid-template-columns:1fr; }
.ct-scope-item{
  padding:20px 18px 22px;
  border-radius:var(--radius-m);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.014));
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.ct-scope-item:hover{ border-color:var(--stroke-2); transform:translateY(-3px); }
.ct-scope-item h3{
  margin:0 0 9px;
  font-family:var(--font-serif-cn);
  font-size:15.5px; font-weight:500;
  color:var(--ink);
}
.ct-scope-item p{
  margin:0;
  font-size:12.5px; line-height:1.85;
  color:var(--ink-3);
}

.ct-faq{ border-top:1px solid var(--stroke); }
.ct-q{ border-bottom:1px solid var(--stroke); }
.ct-q summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:17px 0;
  font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.9);
  transition:color .35s var(--ease);
}
.ct-q summary::-webkit-details-marker{ display:none; }
.ct-q summary:hover{ color:var(--gold); }
.ct-q summary::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--font-disp);
  font-size:15px; line-height:1.4;
  color:var(--gold);
  transition:transform .4s var(--ease);
}
.ct-q[open] summary::after{ transform:rotate(45deg); }
.ct-a{ padding:0 0 20px; }
.ct-a p{
  margin:0;
  max-width:66ch;
  font-size:12.5px; line-height:1.9;
  color:var(--ink-3);
}

/* 底部呼唤 */
.ct-cta{
  margin-top:52px;
  padding:34px 24px 32px;
  border-radius:var(--radius-l);
  text-align:center;
  border:1px solid rgba(201,164,106,.26);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,164,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.017));
}
.ct-cta-title{
  margin:0 0 12px;
  font-family:var(--font-serif-cn);
  font-size:20px; font-weight:500;
  color:var(--ink);
}
.ct-cta-text{
  margin:0 auto 22px;
  max-width:36ch;
  font-size:12.5px; line-height:1.9;
  color:var(--ink-3);
}
.ct-cta-tel{
  display:inline-flex; align-items:baseline; gap:10px;
  padding:13px 26px;
  border-radius:999px;
  text-decoration:none;
  background:linear-gradient(150deg,#EED7A9,#C9A46A);
  box-shadow:0 12px 30px -14px rgba(201,164,106,.75);
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.ct-cta-tel:hover{ filter:brightness(1.05); }
.ct-cta-tel:active{ transform:scale(.985); }
.ct-cta-k{
  font-size:10.5px; letter-spacing:.14em;
  color:rgba(20,17,12,.62);
}
.ct-cta-v{
  font-family:var(--font-disp);
  font-size:17px; letter-spacing:.04em;
  color:#14110C;
}
.ct-cta-hours{
  margin:16px 0 0;
  font-size:11.5px;
  color:var(--ink-4);
}

/* 小屏：网格单列 */
@media (max-width:480px){
  .mat-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   9. 动态列表
   ------------------------------------------------------------ */
.jn-grid{ display:grid; gap:16px; grid-template-columns:1fr; }

.jn-link{
  display:block;
  text-decoration:none; color:inherit;
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.jn-link:hover{ border-color:var(--stroke-2); transform:translateY(-3px); }

.jn-media{
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#0d0d11;
}
@supports not (aspect-ratio:16/10){
  .jn-media{ height:200px; }
}
.jn-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.jn-link:hover .jn-media img{ transform:scale(1.045); }

.jn-body{ padding:18px 18px 20px; }
.jn-meta{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.jn-date{
  font-family:var(--font-disp);
  font-size:11.5px; letter-spacing:.1em;
  color:var(--gold);
}
.jn-cat{
  font-size:10.5px;
  padding:3px 9px;
  border-radius:999px;
  color:var(--ink-3);
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
}
.jn-title{
  margin:0 0 9px;
  font-family:var(--font-serif-cn);
  font-size:17px; font-weight:500; line-height:1.5;
  color:var(--ink);
}
.jn-ex{
  margin:0 0 14px;
  font-size:12.5px; line-height:1.8;
  color:var(--ink-3);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.jn-more{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px;
  color:var(--ink-4);
  transition:color .35s var(--ease);
}
.jn-link:hover .jn-more{ color:var(--gold); }
.jn-more .arw{ font-size:14px; line-height:1; }

/* ------------------------------------------------------------
   10. 桌面端适配
   ------------------------------------------------------------ */
@media (min-width:640px){
  .page-body-inner.pg-wide{ max-width:1040px; }

  .pg-sec{ margin-top:66px; }
  .pg-sec-head{ margin-bottom:28px; padding-bottom:16px; }
  .pg-title{ font-size:24px; }

  .about-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .about-card{ padding:30px 26px 32px; }
  .ac-title{ font-size:19px; }
  .about-phil{ padding:38px 34px; margin-top:38px; }
  .apil-text{ font-size:19px; }

  .mode-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .mode-card{ padding:30px 26px; }

  .step-list{ padding-left:0; }
  .step-item{ padding:0 0 18px 30px; }
  .st-rail{ left:6px; }
  .st-body{ padding:20px 22px; }
  .st-title{ font-size:17px; }

  .fee-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .fee-card{ padding:30px 26px; }

  .paint-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .mat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }

  .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
  .work-card:nth-child(even){ margin-top:38px; }

  .ct-layout{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:46px;
    align-items:start;
  }
  .ct-panel{ padding:32px 30px 34px; }

  .ct-block{ margin-top:66px; }
  .ct-block-title{ font-size:22px; margin-bottom:24px; }
  .ct-scope{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
  .ct-scope-item{ padding:24px 22px 26px; }
  .ct-q summary{ font-size:15px; }

  .ct-cta{ margin-top:66px; padding:46px 40px 44px; }
  .ct-cta-title{ font-size:24px; }

  .jn-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
}

@media (min-width:1080px){
  .jn-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
  .work-card:nth-child(even){ margin-top:52px; }
}

/* ============================================================
   案例详情页
   ------------------------------------------------------------
   页头就是作品页那张圆角图卡（.page-head-inner），只是把图换成
   作品自己的封面图，所以这里只补卡片以外的部分。
   ============================================================ */

/* 图卡上的角标，与作品卡右下角的 .wc-badge 同一支金 */
.ws-badge{
  display:inline-flex; align-items:center;
  align-self:flex-start;
  margin-top:15px;
  padding:6px 13px;
  border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:#14110C;
  background:linear-gradient(150deg,#EED7A9,#C9A46A);
}

/* 正文：编辑器里随手插的实景图也整宽、圆角，与页头卡左右对齐 */
.ws-entry img{
  width:100%; height:auto;
  display:block;
}
/* WordPress 有时会留下空段落，会顶出一截多余的行高 */
.ws-entry p:empty{ display:none; }

/* ---- 底部：前后案例 + 出口 ---- */
.ws-foot{ padding-top:6px; }

.ws-sibs{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:40px;
}
.ws-sib{
  display:block;
  padding:17px 19px;
  border-radius:var(--radius-m);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.ws-sib:hover{ border-color:var(--stroke-2); transform:translateY(-3px); }
.ws-sib-cap{
  display:block;
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.ws-sib-name{
  display:block;
  margin-top:8px;
  font-family:var(--font-disp);
  font-size:19px; font-weight:500; line-height:1.3;
  color:var(--ink);
}
.ws-sib--next{ text-align:right; }

/* 两个出口按钮并排居中（.pg-cta 原本是给单按钮用的居中容器） */
.ws-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:0;
}

@media (min-width:640px){
  .ws-sibs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  /* 只有一个「下一个」时也让它落在右侧 */
  .ws-sib--next{ grid-column:2; }
}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  .mode-card,
  .wc-link,
  .jn-link,
  .ws-sib,
  .wc-media img,
  .jn-media img{ transition:none; }
  .mode-card:hover,
  .wc-link:hover,
  .jn-link:hover,
  .ws-sib:hover{ transform:none; }
}