/* CT-BY · cj-specialist-grid · 山水青花瓷 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500&display=swap');

.cjsg{
  --cobalt:#26477E; --cobalt-soft:#5C7BA8; --porcelain:#EEF1F2; --porcelain-2:#E7ECEE; --paper:#F6F8F9;
  --pk-ink:#1B2A3F; --pk-soft:#7E8A9A; --pk-line:#D6DDE1;
  padding:96px 0; background:var(--porcelain); position:relative;
  font-family:'Inter',-apple-system,sans-serif; font-weight:300; color:var(--pk-ink);
}
.cjsg-wrap{max-width:1320px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.cjsg-head{text-align:left;margin-bottom:0}
.cjsg-eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--cobalt-soft);display:inline-block;margin-bottom:16px}
.cjsg-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:44px;color:var(--cobalt);line-height:1.12;letter-spacing:0;margin:0}
.cjsg-sub{font-size:15px;color:var(--pk-soft);margin:14px 0 0;max-width:none;line-height:1.7}

.cjsg-gridwrap{position:relative;min-width:0}
.cjsg-grid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.cjsg-grid::-webkit-scrollbar{display:none}
.cjsg-grid > *{flex:0 0 calc(23% + 22px);min-width:215px;scroll-snap-align:start}
.cjsg-nav{position:absolute;top:-58px;right:0;display:flex;gap:10px;z-index:2}
.cjsg-nav--hidden{display:none}
.cjsg-arr{width:42px;height:42px;border-radius:50%;border:1px solid var(--pk-line);background:transparent;color:var(--cobalt);font-size:16px;cursor:pointer;transition:all .25s;font-family:inherit}
.cjsg-arr:hover{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
.cjsg-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.cjsg-card--empty{display:none}
.cjsg-card--split{display:flex;flex-direction:column}
.cjsg-card__main{display:flex;flex-direction:column;text-decoration:none;color:inherit}

.cjsg-photo{aspect-ratio:4/5;overflow:hidden;border-radius:3px;position:relative;box-shadow:0 26px 48px -32px rgba(27,42,63,.5);background:var(--porcelain);margin-bottom:18px}
.cjsg-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1);filter:saturate(.96)}
.cjsg-card:hover .cjsg-photo img{transform:scale(1.05)}
.cjsg-photo__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--cobalt-soft);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.cjsg-body{display:flex;flex-direction:column}
.cjsg-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:26px;color:var(--cobalt);line-height:1.05;margin:0 0 5px}
.cjsg-role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-soft);margin-bottom:12px}
.cjsg-row{font-size:13.5px;color:#34435a;line-height:1.55;margin:0 0 6px}
.cjsg-row b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-soft);font-weight:500;margin-bottom:2px}
.cjsg-bio{font-size:14px;color:#34435a;line-height:1.6;margin:0 0 12px;font-weight:300}

.cjsg-cases{margin:4px 0 12px}
.cjsg-cases__lab{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-soft);margin-bottom:6px}
.cjsg-cases__list{list-style:none;margin:0;padding:0}
.cjsg-cases__item{font-size:13px;color:#34435a;font-style:italic;font-family:'Cormorant Garamond',serif;margin-bottom:3px}
.cjsg-cases__link{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}

.cjsg-links{display:flex;flex-direction:column;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid var(--pk-line)}
.cjsg-link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;padding-bottom:4px;transition:border-color .25s}
.cjsg-link:hover{border-bottom-color:var(--cobalt)}
/* WhatsApp 改成文字链接式(不再实心块),跟全站 "→" 语言一致 */
.cjsg-link--wa{color:var(--cobalt);background:none;border:none;padding:0;border-radius:0;margin:0;
  border-bottom:1px solid var(--cobalt);align-self:flex-start;padding-bottom:4px}
.cjsg-link--wa:hover{background:none;color:#1c3763;border-bottom-color:#1c3763}
.cjsg-link--standalone{margin-top:0}
a.cjsg-card--link{text-decoration:none;color:inherit;cursor:pointer}

@media(max-width:860px){
  .cjsg{padding:56px 0 62px}
  .cjsg-wrap{padding:0 22px}
  .cjsg-grid{grid-template-columns:1fr 1fr;gap:30px 18px}
  .cjsg-name{font-size:22px}
}

/* 在途状态(smart-match 自动注入) */
.cjsg-live{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--cobalt);margin:9px 0 0;line-height:1.45}
.cjsg-live i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--cobalt);animation:cjsgPulse 2.4s ease-in-out infinite}
.cjsg-live--next{color:var(--pk-soft)}
.cjsg-live--next i{background:var(--porcelain);border:1px solid var(--cobalt-soft);animation:none}
@keyframes cjsgPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cjsg-count{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cobalt);margin-top:18px}
.cjsg-count i{width:7px;height:7px;border-radius:50%;background:var(--cobalt);animation:cjsgPulse 2.4s ease-in-out infinite}
@media(max-width:860px){.cjsg-wrap{grid-template-columns:1fr;gap:28px}}

/* 紧凑卡(首页·按 ChatGPT 样图):方形人像 + 下接浅色说明条,无内嵌按钮 */
.cjsg--compact .cjsg-bio, .cjsg--compact .cjsg-cases, .cjsg--compact .cjsg-links { display: none; }
.cjsg--compact .cjsg-photo{aspect-ratio:1/1.02;border-radius:8px 8px 0 0;box-shadow:none;margin-bottom:0}
.cjsg--compact .cjsg-body{background:var(--paper);border:1px solid var(--pk-line);border-top:none;padding:16px 18px 18px;border-radius:0 0 8px 8px}
.cjsg--compact .cjsg-name{font-size:20px;margin-bottom:3px}
.cjsg--compact .cjsg-role{font-size:10px;letter-spacing:.12em;margin-bottom:9px}
.cjsg--compact .cjsg-live{margin-top:0;font-size:11px}

.cjsg-headlink{display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;border-bottom:1px solid var(--cobalt);padding-bottom:4px;transition:color .25s}
.cjsg-headlink:hover{color:#1C3763}

@media(max-width:860px){
  .cjsg-grid > *{flex:0 0 72%;min-width:0}
  .cjsg-nav{display:none}
}

/* Premium v16 pass: specialists as an editorial portrait rail. */
.cjsg{
  --cobalt:#26477E;
  --cobalt-soft:#5C7BA8;
  --porcelain:#EEF1F2;
  --porcelain-2:#E7ECEE;
  --paper:#F6F8F9;
  --pk-ink:#1B2A3F;
  --pk-soft:#7E8A9A;
  --pk-line:#D6DDE1;
  padding:104px 0 108px;
  background:var(--porcelain);
}
.cjsg-wrap{
  max-width:1380px;
  padding:0 72px;
  grid-template-columns:minmax(300px,360px) 1fr;
  gap:72px;
}
.cjsg-eyebrow{
  color:var(--cobalt-soft);
  letter-spacing:.26em;
}
.cjsg-title{
  color:var(--cobalt);
  font-size:44px;
  line-height:1.08;
  letter-spacing:0;
}
.cjsg-sub{
  color:var(--pk-soft);
  line-height:1.75;
  max-width:330px;
}
.cjsg-grid{
  gap:28px;
  padding-bottom:12px;
}
.cjsg-grid > *{
  flex:0 0 248px;
  min-width:248px;
}
.cjsg-photo{
  aspect-ratio:4/5.25;
  border-radius:2px;
  box-shadow:none;
  border:1px solid var(--pk-line);
  margin-bottom:0;
  background:var(--porcelain-2);
}
.cjsg-photo img{
  filter:saturate(.88) contrast(.98);
}
.cjsg-card:hover .cjsg-photo img{
  transform:scale(1.035);
}
.cjsg--compact .cjsg-photo{
  aspect-ratio:4/5.25;
  border-radius:2px;
}
.cjsg--compact .cjsg-body{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--pk-line);
  padding:18px 0 0;
  border-radius:0;
}
.cjsg--compact .cjsg-name{
  color:var(--cobalt);
  font-size:22px;
  line-height:1.08;
  margin-bottom:6px;
}
.cjsg--compact .cjsg-role{
  color:var(--cobalt-soft);
  letter-spacing:.12em;
}
.cjsg-live,
.cjsg-count{
  color:var(--pk-soft);
}
.cjsg-live i,
.cjsg-count i{
  background:var(--cobalt);
}
.cjsg-headlink{
  color:var(--cobalt);
  border-bottom-color:rgba(20,59,49,.5);
}
@media(max-width:860px){
  .cjsg{
    padding:58px 0 38px;
  }
  .cjsg-wrap{
    padding:0 24px;
    grid-template-columns:1fr;
    gap:30px;
  }
  .cjsg-eyebrow{
    letter-spacing:.22em;
    font-size:10px;
    margin-bottom:13px;
  }
  .cjsg-title{
    font-size:36px;
    line-height:1.06;
    max-width:350px;
  }
  .cjsg-sub{
    font-size:15px;
    line-height:1.68;
    margin-top:14px;
    max-width:350px;
  }
  .cjsg-headlink{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    margin-top:14px;
  }
  .cjsg-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-right:0;
    padding:6px 0 0;
    overflow:visible;
    scroll-snap-type:none;
  }
  .cjsg-grid > *{
    flex:initial;
    min-width:0;
  }
  .cjsg-title,
  .cjsg-sub{
    text-wrap:pretty;
  }
  .cjsg--compact .cjsg-photo{
    aspect-ratio:4/5.05;
  }
  .cjsg--compact .cjsg-body{
    padding-top:15px;
  }
  .cjsg--compact .cjsg-name{
    font-size:20px;
  }
  .cjsg--compact .cjsg-role{
    font-size:9.5px;
    line-height:1.35;
    margin-bottom:7px;
  }
  .cjsg--compact .cjsg-live{
    font-size:10.5px;
  }
  .cjsg--compact .cjsg-card{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:18px;
    align-items:end;
    padding:0 0 18px;
    border-bottom:1px solid var(--pk-line);
  }
  .cjsg--compact .cjsg-card:first-child{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:18px;
    align-items:end;
    padding:0 0 18px;
  }
  .cjsg--compact .cjsg-card:first-child .cjsg-photo{
    aspect-ratio:4/5.05;
    margin-bottom:0;
  }
  .cjsg--compact .cjsg-card:first-child .cjsg-name{
    font-size:20px;
  }
  .cjsg--compact .cjsg-photo{
    border:0;
    box-shadow:none;
  }
  .cjsg--compact .cjsg-body{
    border:0;
    padding:0 0 2px;
  }
  .cjsg--compact .cjsg-role{
    max-width:190px;
  }
  .cjsg--compact .cjsg-live{
    color:#607078;
  }
  .cjsg--compact .cjsg-live i{
    width:5px;
    height:5px;
    background:var(--cobalt-soft);
  }
}
@media(max-width:360px){
  .cjsg--compact .cjsg-card{grid-template-columns:96px minmax(0,1fr);gap:15px}
}

/* Mobile premium redo: editorial people profiles, not a contact list. */
@media(max-width:860px){
  .cjsg{
    padding:62px 0 46px;
  }
  .cjsg-wrap{
    padding:0 24px;
    gap:32px;
  }
  .cjsg-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    overflow:visible;
    padding:0;
    margin:0;
  }
  .cjsg-grid > *,
  .cjsg--compact .cjsg-card,
  .cjsg--compact .cjsg-card:first-child{
    display:block;
    min-width:0;
    padding:0 0 25px;
    border-bottom:1px solid var(--pk-line);
  }
  .cjsg--compact .cjsg-photo,
  .cjsg--compact .cjsg-card:first-child .cjsg-photo{
    aspect-ratio:16/11.5;
    width:100%;
    margin:0 0 16px;
    border:0;
    border-radius:2px;
    box-shadow:none;
    background:var(--porcelain-2);
  }
  .cjsg--compact .cjsg-photo img{
    filter:saturate(.82) contrast(.98);
  }
  .cjsg--compact .cjsg-body{
    border:0;
    padding:0;
  }
  .cjsg--compact .cjsg-name,
  .cjsg--compact .cjsg-card:first-child .cjsg-name{
    font-size:25px;
    line-height:1.05;
    margin-bottom:7px;
  }
  .cjsg--compact .cjsg-role{
    max-width:320px;
    font-size:10px;
    letter-spacing:.14em;
    line-height:1.45;
    margin-bottom:8px;
  }
  .cjsg--compact .cjsg-live{
    margin-top:0;
    color:#607078;
    font-size:11px;
  }
  .cjsg--compact .cjsg-live i{
    width:5px;
    height:5px;
    background:var(--cobalt-soft);
  }
}

/* Mobile scroll reduction: keep premium portraits, but avoid long vertical stacking. */
@media(max-width:860px){
  .cjsg{
    padding:54px 0 34px;
  }
  .cjsg-wrap{
    gap:26px;
  }
  .cjsg-grid{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin:0 -24px;
    padding:0 24px 8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .cjsg-grid::-webkit-scrollbar{display:none}
  .cjsg-grid > *,
  .cjsg--compact .cjsg-card,
  .cjsg--compact .cjsg-card:first-child{
    flex:0 0 min(72vw,280px);
    scroll-snap-align:start;
    border-bottom:0;
    padding:0;
  }
  .cjsg--compact .cjsg-photo,
  .cjsg--compact .cjsg-card:first-child .cjsg-photo{
    aspect-ratio:4/3.35;
    margin-bottom:13px;
  }
  .cjsg--compact .cjsg-name,
  .cjsg--compact .cjsg-card:first-child .cjsg-name{
    font-size:22px;
    margin-bottom:5px;
  }
  .cjsg--compact .cjsg-role{
    font-size:9.5px;
    line-height:1.35;
    margin-bottom:6px;
  }
  .cjsg--compact .cjsg-live{
    font-size:10.5px;
  }
}