/* ============================================================
   感悟 LOGS 栏目 · 日志卡片列表（参考 category-books.css 书籍卡片语言）
   三色体系:黑 #0f0f0f / 白 / 高亮黄 #f9f506
   ============================================================ */

/* --- 列表区:浅灰底衬托白卡片 --- */
.section-logs-posts {
  background: #f6f6f6;
  padding: 70px 0 90px;
}
/* !important 对抗 media.css 中 ≥1536px 的 .container{max-width:960px!important} */
.section-logs-posts .container {
  max-width: 1080px !important;
}
.section-logs-posts .inner {
  margin-top: 22px; /* 为日期贴纸上探留余量(section-content 已有 60px 顶距) */
}

/* --- 日志卡片:白底黑描边圆角硬阴影,hover 抬升(书卡同款),整卡可点 --- */
.section-logs-posts .logs-post {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  margin-bottom: 40px;
  padding: 32px 34px;
  background: #fff;
  border: 2px solid #0f0f0f;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #0f0f0f;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.section-logs-posts .logs-post:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #0f0f0f;
}

/* --- 日期卡片:日历牌贴纸骑跨卡片左上角(与 program 页同语言) --- */
.section-logs-posts .date-card {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 2;
  width: 96px;
  padding: 14px 0 16px;
  text-align: center;
  background: #fff;
  border: 2px solid #0f0f0f;
  border-radius: 12px;
  box-shadow: 5px 5px 0 #0f0f0f;
}
.section-logs-posts .date-card-ym {
  display: inline-block;
  background: #f9f506;
  border: 2px solid #0f0f0f;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: Consolas, Monaco, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #0f0f0f;
}
.section-logs-posts .date-card-d {
  display: block;
  margin-top: 8px;
  font-size: 2.1em;
  font-weight: 900;
  line-height: 1.05;
  color: #0f0f0f;
}

/* --- 缩略图:4:3 大图圆角,整卡 hover 时轻微放大 --- */
.section-logs-posts .thumb {
  flex-shrink: 0;
  width: 340px;
}
.section-logs-posts .thumb a {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f0f0f0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .3s ease;
}
.section-logs-posts .logs-post:hover .thumb a {
  transform: scale(1.03);
}

/* --- 主体:标题 hover 黄底高亮 --- */
.section-logs-posts .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.section-logs-posts .title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.45;
}
.section-logs-posts .title a {
  padding: 0 4px;
  border-radius: 6px;
  transition: background-color .12s ease;
}
.section-logs-posts .title a:hover {
  background: #f9f506;
  color: #0f0f0f;
}
.section-logs-posts .excerpt {
  flex: 1; /* 撑开剩余空间,把回复/标签压到卡片底部 */
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #525252;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.section-logs-posts .opts {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .02em;
  color: #525252;
}
.section-logs-posts .opts .tags {
  margin-left: 14px;
}
.section-logs-posts .opts .tags a {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 8px;
  border: 1px solid #0f0f0f;
  border-radius: 6px;
  color: #0f0f0f;
}
.section-logs-posts .opts .tags a:hover {
  background: #0f0f0f;
  color: #f9f506;
}

/* --- 二维码:卡片右上角小框,扫码在手机上阅读 --- */
.section-logs-posts .qcode {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 6px;
  background: #fff;
  border: 2px solid #0f0f0f;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #0f0f0f;
}
.section-logs-posts .qcode img {
  display: block;
  width: 84px;
  height: 84px;
}

/* --- 中屏:缩略图收窄 --- */
@media (max-width: 1023px) {
  .section-logs-posts .thumb {
    width: 240px;
  }
}

/* --- 移动端:卡片纵排,日期贴纸收回为行内徽章 --- */
@media (max-width: 767px) {
  .section-logs-posts {
    padding: 48px 0 64px;
  }
  .section-logs-posts .logs-post {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
    padding: 22px;
    border-radius: 14px;
  }
  .section-logs-posts .date-card {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 5px 12px;
    border-radius: 10px;
    box-shadow: 3px 3px 0 #0f0f0f;
  }
  .section-logs-posts .date-card-d {
    margin: 0;
    font-size: 1.2em;
  }
  .section-logs-posts .thumb {
    width: 100%;
  }
  .section-logs-posts .thumb a {
    aspect-ratio: 16 / 10;
  }
  .section-logs-posts .qcode {
    display: none; /* 手机端卡片纵排,二维码隐藏(与原版行为一致) */
  }
}