/* 全站平滑滚动 */
html { scroll-behavior: smooth; }

/* 回到顶部按钮 */
#backToTop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}

#backToTop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#backToTop:hover {
  transform: translateY(-2px);
}

/* 小优化：链接 hover 更柔和一些 */
a { transition: opacity .15s ease, transform .15s ease; }
a:hover { opacity: .9; }

/* 可选：鼠标造型（先给你“轻量版”，不需要自定义图片） */
a, button { cursor: pointer; }


/* ===== 首页 Hero 动画（更明显）===== */
.hero-animate {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(6px);
  animation: heroPop 1s cubic-bezier(.2,.9,.2,1) forwards;
}

.hero-animate.delay-1 { animation-delay: .18s; }
.hero-animate.delay-2 { animation-delay: .32s; }

@keyframes heroPop {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 卡片进入动画（首次加载更有感觉） */
.post-card {
  animation: cardIn .6s ease both;
}
.post-card:nth-child(1){ animation-delay: .05s; }
.post-card:nth-child(2){ animation-delay: .10s; }
.post-card:nth-child(3){ animation-delay: .15s; }
.post-card:nth-child(4){ animation-delay: .20s; }
.post-card:nth-child(5){ animation-delay: .25s; }
.post-card:nth-child(6){ animation-delay: .30s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===== 首页卡片样式 ===== */
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 900px) {
  .home-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.post-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.16),
    0 6px 18px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .post-card{
  background: linear-gradient(180deg, rgba(16,24,36,.82), rgba(16,24,36,.62));
}

.post-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px circle at 20% 0%, rgba(120,180,255,.25), transparent 40%),
              radial-gradient(600px circle at 80% 20%, rgba(255,140,200,.18), transparent 42%);
  opacity:.45;
  pointer-events:none;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 90px rgba(0,0,0,.22),
    0 10px 24px rgba(0,0,0,.12);
  border-color: rgba(120,180,255,.35);
}

.post-card h2 {
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.post-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.post-summary {
  color: var(--text);
  opacity: .92;
}

/* 让首页 section 更居中更舒服 */
.home-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}
/* ===== 全屏开场 Hero ===== */
.hero{
  min-height: 100vh;
  position: relative;
  width: 100%; 
  display: grid;
  place-items: center;
  padding: 64px 16px;
  background: url("/images/hero.jpg") center/cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 55%, rgba(0,0,0,.10));
}

.hero-inner{
  position:relative;
  text-align:center;
  max-width: 980px;
  color: #fff;
}

.hero-title{
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 10px 0;
  letter-spacing: .5px;
  text-shadow: 0 16px 60px rgba(0,0,0,.55);
}

.hero-sub{
  font-size: clamp(16px, 2.2vw, 22px);
  opacity: .92;
  text-shadow: 0 12px 40px rgba(0,0,0,.55);
}

.hero-hint{
  margin-top: 26px;
  font-size: 14px;
  opacity: .88;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

/* 提示的小箭头动效 */
.hero-hint::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  display:inline-block;
  animation: hintBounce 1.2s ease-in-out infinite;
}

@keyframes hintBounce{
  0%,100% { transform: translateY(0) rotate(45deg); opacity: .85; }
  50%     { transform: translateY(4px) rotate(45deg); opacity: 1; }
}

/* ===== 首页：隐藏主题自带的封面区（防止和自定义 Hero 叠加）===== */
body.home header,
body.home .cover,
body.home .cover-image,
body.home .featured-image,
body.home .bg-black-60 {
  display: none !important;
}
/* =========================
   现代阅读排版（全站）
   ========================= */

/* 更舒服的基础色 */
:root{
  --text: #111827;        /* 主文字 */
  --muted: #6b7280;       /* 次文字 */
  --bg: #ffffff;
  --link: #2563eb;        /* 链接蓝 */
  --link-hover: #1d4ed8;
}

/* 全站默认文字颜色与渲染 */
html, body{
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 中文更现代：系统字体栈（不用安装字体） */
body{
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.8;
  font-size: 17px;
}

/* 文章页正文容器：宽度更“阅读型” */
main .content,
main article,
main .mw7{
  max-width: 760px;
}

/* 标题层级：更现代 */
h1, h2, h3{
  letter-spacing: -0.02em;
}
h1{ font-size: 2.1rem; line-height: 1.2; }
h2{ font-size: 1.6rem; line-height: 1.25; }
h3{ font-size: 1.25rem; line-height: 1.35; }

/* 段落与列表：阅读节奏 */
p{ margin: 0.9em 0; }
ul, ol{ margin: 0.9em 0 0.9em 1.2em; }
li{ margin: 0.35em 0; }

/* 链接：去掉复古紫色，改为现代蓝 + 下划线动效 */
a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, .35);
}
a:hover{
  color: var(--link-hover);
  border-bottom-color: rgba(29, 78, 216, .65);
}

/* 次级信息（日期/阅读时间）更柔和 */
.post-meta,
time,
small,
.muted{
  color: var(--muted) !important;
}

/* 代码块：更像“现代开发者博客” */
pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  padding: 14px 16px;
  border-radius: 12px;
  overflow: auto;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.08);
}
code{
  background: rgba(17,24,39,.06);
  padding: 0.12em 0.35em;
  border-radius: 6px;
}

/* 引用块：更有设计感 */
blockquote{
  margin: 1.2em 0;
  padding: 0.2em 1em;
  border-left: 4px solid rgba(37,99,235,.45);
  background: rgba(37,99,235,.06);
  border-radius: 10px;
  color: #111827;
}

/* 图片：圆角 + 轻阴影 */
article img{
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
}

/* =========================================
   /posts 列表页：真正自适应网格 + 铺满宽度
   命中结构：main > article > section.flex-ns...mt5
   ========================================= */

/* 1) 让 posts 列表这一段不要被任何 “measure/center” 之类限制宽度 */
body main.pb7 > article.pa3.pa4-ns{
  max-width: none !important;
  width: 100% !important;
}

/* 2) 列表容器改 Grid，并确保它自己有足够宽度 */
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;

  width: 100% !important;
  max-width: 1400px !important;      /* 想更宽就调大 */
  margin: 0 auto !important;
  padding: 0 18px !important;

  justify-items: stretch !important;
  align-items: start !important;
}

/* 3) 清掉每个卡片的固定宽度/外边距（w-30-l、mb4） */
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5 > div{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 4) 卡片内容占满列宽 */
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5 > div .bg-white{
  width: 100% !important;
  max-width: none !important;
}

/* 5) 摘要统一截断 */
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5 .nested-links{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 6 !important;
  overflow: hidden !important;
}

/* 6) read more 贴底（整齐） */
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5 .bg-white.mb3.pa4{
  display: flex;
  flex-direction: column;
}
body main.pb7 > article.pa3.pa4-ns > section.flex-ns.flex-wrap.justify-around.mt5 .bg-white.mb3.pa4 > a{
  margin-top: auto;
}