/* ============================================================
   News Detail — shared styles
   ============================================================ */

/* Breadcrumb */
.crumb{
  padding:130px 0 0;font-size:13.5px;color:var(--ink-dim);
  max-width:820px;margin:0 auto;padding-left:28px;padding-right:28px;
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--violet)}
.crumb .sep{margin:0 8px;opacity:.5}

/* Article hero */
.article-hero{padding:40px 0 30px;max-width:820px;margin:0 auto;padding-left:28px;padding-right:28px}
.article-hero .tag-line{display:flex;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.article-hero .pill{
  padding:5px 14px;border-radius:999px;background:var(--grad-brand);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.article-hero .date{font-size:13px;color:var(--ink-dim);letter-spacing:.06em;font-family:'Manrope',sans-serif;font-weight:500}
.article-hero h1{
  font-family:'Noto Serif SC',serif;font-weight:500;
  font-size:clamp(32px,4.4vw,48px);line-height:1.2;letter-spacing:-.005em;color:var(--ink);
  margin-bottom:22px;
}
.article-hero .deck{
  font-size:clamp(16px,1.2vw,19px);color:var(--ink-soft);line-height:1.75;margin-bottom:30px;
  padding-left:16px;border-left:3px solid var(--violet);
}
.article-hero .byline{
  display:flex;align-items:center;gap:14px;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.by-avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#ffd4a8,#ff9ec9 60%,#b5a8ff);color:#fff;font-size:18px;
}
.byline .who strong{display:block;font-size:14.5px;color:var(--ink);font-weight:600}
.byline .who em{font-style:normal;font-size:12.5px;color:var(--ink-dim)}
.byline .read-time{margin-left:auto;font-size:13px;color:var(--ink-dim)}

/* Cover */
.cover{
  aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;
  max-width:920px;margin:40px auto 0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(109,83,255,.35) 40%,rgba(11,181,198,.35) 70%,rgba(235,164,84,.35));
  display:grid;place-items:center;font-size:clamp(80px,10vw,140px);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}

/* Body */
article.body{
  max-width:740px;margin:60px auto 0;padding:0 28px;
  font-size:17px;line-height:1.95;color:var(--ink-soft);
}
article.body p{margin-bottom:24px}
article.body p strong{color:var(--ink);font-weight:600}
article.body h2{
  font-family:'Noto Serif SC',serif;font-weight:500;font-size:26px;color:var(--ink);
  margin:48px 0 18px;letter-spacing:-.005em;line-height:1.3;
}
article.body h3{font-family:'Noto Serif SC',serif;font-weight:500;font-size:20px;color:var(--ink);margin:32px 0 12px}
article.body ul{margin:0 0 24px 22px}
article.body ul li{margin-bottom:10px;line-height:1.8}
article.body ol{margin:0 0 24px 24px}
article.body ol li{margin-bottom:10px;line-height:1.8}
article.body blockquote{
  margin:32px 0;padding:24px 28px;
  border-left:3px solid var(--violet);
  background:var(--grad-brand-soft);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:'Noto Serif SC',serif;font-size:18px;color:var(--ink);line-height:1.7;
}
article.body blockquote p{margin-bottom:0}
article.body blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13.5px;color:var(--ink-dim)}
article.body figure{margin:32px 0}
article.body figure .ph{
  aspect-ratio:16/9;border-radius:var(--radius-md);
  background:linear-gradient(135deg,#f4eeff 0%,#eaf7f9 55%,#fff3e4 100%);
  border:1px solid var(--line);display:grid;place-items:center;font-size:64px;
}
article.body figcaption{margin-top:12px;text-align:center;font-size:13px;color:var(--ink-dim);font-style:italic}
article.body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* Share */
.share{
  max-width:740px;margin:48px auto 0;padding:28px 28px 0;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.share .lbl{font-size:13px;color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.share .tags{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.share .tag{padding:5px 12px;border-radius:999px;font-size:12.5px;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft);font-weight:500}
.share .btns{display:flex;gap:8px}
.share .btns a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);transition:all .25s;
}
.share .btns a:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.share .btns svg{width:16px;height:16px}

/* Author card */
.author-card{
  max-width:740px;margin:48px auto 0;padding:28px;border-radius:var(--radius-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:flex;gap:20px;align-items:center;
}
@media (max-width:560px){.author-card{flex-direction:column;text-align:center}}
.author-card .av{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px;flex-shrink:0;
  background:linear-gradient(140deg,#ffd4a8,#ff9ec9 60%,#b5a8ff);
  box-shadow:0 10px 24px -8px rgba(181,168,255,.5);
}
.author-card h4{font-family:'Noto Serif SC',serif;font-size:17px;color:var(--ink);margin-bottom:4px}
.author-card .r{font-size:13px;color:var(--ink-dim);margin-bottom:8px}
.author-card p{color:var(--ink-soft);font-size:14px;line-height:1.7}

/* Related */
.related{max-width:1120px;margin:80px auto 0;padding:0 28px}
.related h3{font-family:'Noto Serif SC',serif;font-weight:500;font-size:26px;color:var(--ink);margin-bottom:28px;text-align:center}
.related h3 .grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'DM Serif Display',serif;font-style:italic;padding-right:.12em;margin-right:-.04em}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.rel-grid{grid-template-columns:1fr}}
.rel-card{
  border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:all .35s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.rel-card .thumb{aspect-ratio:16/10;display:grid;place-items:center;font-size:40px}
.rel-card .thumb.v1{background:linear-gradient(135deg,#ffebf1,#ffd4a8)}
.rel-card .thumb.v2{background:linear-gradient(135deg,#e8f3ff,#c7b5ff)}
.rel-card .thumb.v3{background:linear-gradient(135deg,#e9f7f0,#a8e6cf)}
.rel-card .thumb.v4{background:linear-gradient(135deg,#fff3e4,#eba454)}
.rel-card .thumb.v5{background:linear-gradient(135deg,#f1ecff,#b5a8ff)}
.rel-card .thumb.v6{background:linear-gradient(135deg,#ffebf1,#ff9ec9)}
.rel-card .body{padding:22px}
.rel-card .d{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;margin-bottom:10px;font-family:'Manrope',sans-serif;font-weight:500}
.rel-card h4{font-family:'Noto Serif SC',serif;font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:8px;font-weight:600}
.rel-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.7}