/* ================= 首页 ================= */
.home-page { background: #fff; }

/* 顶部导航 */
.home-header { background: #fff; }
.home-header-inner { display: flex; justify-content: flex-end; align-items: center; height: 62px; }
.home-nav { display: flex; gap: 38px; }
.home-nav a { font-size: 15px; color: #333; }
.home-nav a:hover { color: #c4161c; }

/* 大图 */
.home-hero {
  position: relative; height: 420px;
  background: linear-gradient(135deg, #eef4f8 0%, #dfeaf2 45%, #f4f7f9 100%);
  display: flex; align-items: center; overflow: hidden;
}
.home-hero-mask {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 82% 30%, rgba(255,205,80,.35) 0 60px, transparent 61px),
    radial-gradient(circle at 18% 70%, rgba(200,215,225,.5) 0 90px, transparent 91px);
  opacity: .9;
}
.home-hero-inner { position: relative; text-align: center; width: 100%; }
.home-hero-title { margin: 0 0 10px; font-size: 42px; font-weight: 700; letter-spacing: 6px; color: #2c3e50; }
.home-hero-sub { margin: 0; font-size: 15px; color: #7b8b99; letter-spacing: 2px; }

/* 搜索（上浮覆盖） */
.home-search-wrap { margin-top: -44px; position: relative; z-index: 2; margin-bottom: 54px; }
.home-search {
  display: flex; background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 26px rgba(0,0,0,.09);
}
.home-search input {
  flex: 1; height: 62px; padding: 0 24px; font-size: 15px; font-family: inherit; color: #333;
  border: none; outline: none;
}
.home-search input::placeholder { color: #b8c0c8; }
.home-search button {
  width: 150px; border: none; cursor: pointer; background: #e2635f; color: #fff;
  font-size: 17px; letter-spacing: 3px; font-family: inherit; transition: background .15s;
}
.home-search button:hover { background: #d15450; }

/* 区块标题 */
.home-section { padding: 10px 0 40px; }
.home-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.home-sec-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; font-weight: 700; color: #333; }
.home-sec-bar { width: 6px; height: 24px; background: #e2635f; border-radius: 3px; transform: skewX(-12deg); }
.home-sec-sub { font-size: 13px; color: #999; }
.home-empty { padding: 50px 0; text-align: center; color: #bbb; }

/* 推荐块 */
.rec-list { display: flex; flex-direction: column; gap: 34px; }
.rec-block { display: flex; gap: 0; background: #fff; }
.rec-side {
  flex: 0 0 210px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; text-align: center;
  background: linear-gradient(160deg, #3fb8d6 0%, #2ba3c9 60%, #2196bd 100%);
  position: relative; overflow: hidden;
}
.rec-side::after {
  content: ''; position: absolute; left: -40px; bottom: -60px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.rec-side::before {
  content: ''; position: absolute; right: -50px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: rgba(255,255,255,.09);
}
.rec-side-title { margin: 0; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 2px; position: relative; z-index: 1; }
.rec-side-btn {
  display: inline-block; padding: 8px 20px; border-radius: 20px; background: #fff; color: #2ba3c9;
  font-size: 14px; font-weight: 600; position: relative; z-index: 1; transition: all .15s; white-space: nowrap;
}
.rec-side-btn:hover { background: #f0f9fc; box-shadow: 0 2px 10px rgba(0,0,0,.10); }

.rec-items {
  /* 固定 2 列 2 行：不足 4 个时后面的位置留空，保持各板块栅格一致 */
  flex: 1; display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #eef1f4; border-right: 1px solid #eef1f4;
  min-width: 0; background: #fff;
}
.rec-item {
  display: flex; gap: 12px; padding: 10px 12px; background: #fff; min-width: 0;
  border-bottom: 1px solid #eef1f4; border-left: 1px solid #eef1f4;
  transition: background .15s;
}
.rec-item:hover { background: #fafcfd; }
.rec-item-cover { flex: 0 0 112px; }
.rec-item-cover img { width: 112px; height: 155px; object-fit: cover; display: block; border: 1px solid #eef1f4; }
.rec-item-nopic {
  width: 112px; height: 155px; display: flex; align-items: center; justify-content: center;
  background: #f5f7f9; color: #c6ccd2; font-size: 11px; border: 1px solid #eef1f4; text-align: center;
}
.rec-item-info { flex: 1; min-width: 0; }
.rec-item-name { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #2c3e50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item:hover .rec-item-name { color: #2ba3c9; }
.rec-item-info p { margin: 0 0 7px; font-size: 12px; color: #666; line-height: 1.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item-info p:last-child { margin-bottom: 0; }
.rec-item-info p span { color: #9aa5ae; }
.rec-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: #bbb; background: #fff; font-size: 14px; }
/* 占位格：只保留边框，撑出与有内容格子相同的高度 */
.rec-item-empty { pointer-events: none; }

/* 范文 */
.home-essay { background: #f7f8fa; padding: 46px 0 56px; }
.home-essay-title { margin: 0 0 32px; font-size: 24px; font-weight: 700; color: #333; text-align: center; letter-spacing: 2px; }
.essay-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.essay-col { list-style: none; margin: 0; padding: 26px 28px; background: #fff; border-radius: 4px; min-height: 200px; }
.essay-col li { margin-bottom: 14px; font-size: 14px; }
.essay-col li:last-child { margin-bottom: 0; }
.essay-col a { color: #444; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.essay-col a:hover { color: #e2635f; }
.essay-empty { color: #ccd2d8; }
.home-essay-more { text-align: center; margin-top: 26px; }
.home-essay-more a { font-size: 14px; color: #8a949e; }
.home-essay-more a:hover { color: #e2635f; }

/* 页脚 */
.home-footer { border-top: 1px solid #eef1f4; padding: 28px 0 34px; text-align: center; }
.home-footer-nav { margin: 0 0 10px; font-size: 13px; color: #999; }
.home-footer-nav a { color: #666; }
.home-footer-nav a:hover { color: #e2635f; }
.home-footer-nav span { margin: 0 10px; color: #ddd; }
.home-footer-copy { margin: 0; font-size: 12px; color: #b0b8c0; }

@media (max-width: 1100px) {
  .rec-block { flex-direction: column; }
  .rec-side { flex: none; padding: 22px; }
  .rec-items { border-left: 1px solid #eef1f4; border-top: none; }
  .essay-cols { grid-template-columns: 1fr; }
  .home-hero { height: 300px; }
  .home-hero-title { font-size: 30px; }
}
@media (max-width: 700px) {
  .rec-items { grid-template-columns: 1fr; }
  /* 单列时不需要补位空格 */
  .rec-item-empty { display: none; }
  .home-search button { width: 100px; }
  .home-nav { gap: 20px; }
}