/* ================================================================
   listing.css — 列表页（mods.html / recipes.html / ingredients.html）专属样式
================================================================ */

/* ── Hero 横幅 ── */
.listing-page .recipe-hero {
  position: relative;
  background: url('../pics/hero-main-bg.webp') center / cover no-repeat;
  background-color: #1e2820;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.listing-page .recipe-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,15,10,0.18) 0%, rgba(8,15,10,0.78) 100%);
}
.listing-page .recipe-hero::after {
  content: '';
  position: absolute;
  right: 8%; top: 50%;
  transform: translateY(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(141,161,145,0.2);
  box-shadow: 0 0 0 28px rgba(141,161,145,0.06), 0 0 0 60px rgba(141,161,145,0.03);
  pointer-events: none; z-index: 1;
}
.listing-page .recipe-hero-text { position: relative; z-index: 2; padding: 0 8% 48px; }
.listing-page .recipe-hero-text .page-label {
  font-size: 0.62rem; letter-spacing: 0.35em; font-weight: 300;
  color: rgba(255,255,255,0.5); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.listing-page .recipe-hero-text .page-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 1px; background: rgba(255,255,255,0.4);
}
.listing-page .recipe-hero-text h1 {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff; margin: 0; letter-spacing: 0.12em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.listing-page .recipe-hero-text p {
  margin: 12px 0 0; font-size: 0.82rem;
  color: rgba(255,255,255,0.45); font-weight: 300;
  letter-spacing: 0.06em; line-height: 1.9;
}

/* ── 工具栏 ── */
.listing-page .recipe-toolbar {
  padding: 44px 8% 0; background: var(--bg-base);
  border-top: 1px solid var(--subtle-gray);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
}
.listing-page .recipe-count {
  font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--text-muted); font-weight: 300;
}
.listing-page .recipe-count strong { color: var(--morandi-green-dark); font-weight: 500; }
.listing-page .filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-page .recipe-filter-btn {
  padding: 6px 20px; border-radius: 999px;
  border: 1.5px solid #ccc; background: transparent;
  font-size: 0.78rem; font-family: inherit;
  color: #777; transition: 0.2s; letter-spacing: 0.06em;
}
.listing-page .recipe-filter-btn:hover { border-color: var(--morandi-green); color: var(--morandi-green); }
.listing-page .recipe-filter-btn.active { background: var(--morandi-green); border-color: var(--morandi-green); color: #fff; }

/* ── 卡片网格 ── */
.listing-page .recipe-section { padding: 36px 8% 80px; background: var(--bg-base); }
.listing-page .recipe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mods-page .recipe-grid,
.functional-page .recipe-grid,
.shop-page .recipe-grid { grid-template-columns: repeat(3, 1fr); }

.listing-page .recipe-card {
  display: block; text-decoration: none;
  position: relative; overflow: hidden;
  aspect-ratio: 1; background: #2a3020;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mods-page .recipe-card,
.functional-page .recipe-card,
.shop-page .recipe-card { aspect-ratio: 2560 / 1500; }
.listing-page .recipe-card.visible { opacity: 1; transform: translateY(0); }
.listing-page .recipe-card.hidden { display: none; }

.listing-page .card-thumb { position: absolute; inset: 0; overflow: hidden; }
.listing-page .card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}
.listing-page .recipe-card:hover .card-thumb img { transform: scale(1.08); }

.listing-page .card-gradient-base {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,10,0.88) 0%, rgba(10,14,10,0.3) 45%, rgba(10,14,10,0) 72%);
  z-index: 2; transition: opacity 0.4s ease;
}
.listing-page .card-gradient-hover {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,10,0.96) 0%, rgba(10,14,10,0.55) 55%, rgba(10,14,10,0.1) 85%);
  z-index: 3; opacity: 0; transition: opacity 0.4s ease;
}
.listing-page .recipe-card:hover .card-gradient-hover { opacity: 1; }

.listing-page .card-vert-label {
  position: absolute; top: 18px; right: 16px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  writing-mode: vertical-rl;
  font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  font-size: 0.62rem; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45); transition: color 0.3s ease;
}
.listing-page .recipe-card:hover .card-vert-label { color: rgba(255,255,255,0.75); }
.listing-page .card-vert-label::before {
  content: ''; display: block;
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.25); margin-bottom: 2px;
}

.listing-page .card-frame {
  position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid rgba(255,255,255,0);
  z-index: 4; transition: border-color 0.45s ease; pointer-events: none;
}
.listing-page .recipe-card:hover .card-frame { border-color: rgba(255,255,255,0.18); }
.listing-page .card-frame::before,
.listing-page .card-frame::after {
  content: ''; position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(141,161,145,0); border-style: solid;
  transition: border-color 0.45s ease;
}
.listing-page .card-frame::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.listing-page .card-frame::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.listing-page .recipe-card:hover .card-frame::before,
.listing-page .recipe-card:hover .card-frame::after { border-color: rgba(141,161,145,0.6); }

.listing-page .card-corner-badges {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 8px; z-index: 6;
}
.listing-page .card-corner-badge {
  background: var(--morandi-green); color: #fff;
  font-size: 0.56rem; letter-spacing: 0.22em; padding: 3px 8px;
}
.listing-page .card-pro-badge { background: #b23a48; color: #fff6f6; }
.listing-page .card-coming-overlay {
  position: absolute; inset: 0;
  background: rgba(20,28,20,0.65);
  display: flex; align-items: center; justify-content: center; z-index: 6;
}
.listing-page .coming-label {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  font-size: 0.88rem; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.25); padding: 6px 18px;
}

.listing-page .card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 5; padding: 0 18px 18px;
}
.listing-page .card-meta-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 6px;
}
.listing-page .card-cat-tag {
  font-size: 0.6rem; letter-spacing: 0.18em;
  font-weight: 300; color: var(--morandi-green);
}
.listing-page .card-date {
  font-size: 0.58rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em; font-weight: 300;
}
.listing-page .card-title {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  font-size: 1.45rem; letter-spacing: 0.12em;
  color: #fff; margin: 0; line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  transition: letter-spacing 0.35s ease;
}
.listing-page .recipe-card:hover .card-title { letter-spacing: 0.18em; }

.listing-page .card-excerpt {
  font-size: 0.72rem; color: rgba(255,255,255,0.65);
  font-weight: 300; line-height: 1.7; margin: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.23,1,0.32,1), opacity 0.35s ease, margin 0.35s ease;
}
.listing-page .recipe-card:hover .card-excerpt { max-height: 80px; opacity: 1; margin-top: 8px; }

.listing-page .card-enter {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.68rem; color: rgba(255,255,255,0);
  letter-spacing: 0.14em; margin-top: 0;
  transform: translateY(4px);
  transition: color 0.3s ease 0.08s, transform 0.3s ease 0.08s, margin 0.3s ease;
}
.listing-page .recipe-card:hover .card-enter {
  color: rgba(255,255,255,0.55); transform: translateY(0); margin-top: 10px;
}
.listing-page .card-enter::after {
  content: '→'; color: var(--morandi-green); transition: transform 0.2s ease;
}
.listing-page .recipe-card:hover .card-enter::after { transform: translateX(3px); }

.listing-page .load-more-wrapper { text-align: center; padding: 40px 0; }
.listing-page .load-more-btn {
  padding: 12px 40px; border-radius: 999px;
  border: 1.5px solid var(--morandi-green); background: transparent;
  font-size: 0.82rem; font-family: inherit; font-weight: 500;
  color: var(--morandi-green); letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s;
}
.listing-page .load-more-btn:hover { background: var(--morandi-green); color: #fff; }
.listing-page .load-more-btn.hidden { display: none; }

.listing-page .no-recipe {
  grid-column: 1 / -1; text-align: center;
  padding: 80px 0; color: var(--text-muted);
  font-size: 0.88rem; letter-spacing: 0.12em; display: none;
}

/* ── 响应式 ── */
@media (max-width: 1100px) { .listing-page .recipe-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .listing-page .recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px)  {
  .listing-page .recipe-grid { grid-template-columns: 1fr; }
  .listing-page .recipe-toolbar { flex-direction: column; align-items: flex-start; }
}