/* ============================================
   可配置本草卡片模块样式 v2
   - 卡片：上 65% 真实植物图 + 下 35% 文字
   - 三卡主体宽约 78%，左右留白明显
   - 卡片高度统一、间距充足、风格简洁偏高级
   - 对齐首页米色纸感 / 墨绿文字 / 留白
   覆盖：首页卡片区（.herb-card-grid）+ 详情页（.herb-detail-*）
   ============================================ */

/* ---- 首页卡片区 ---- */
.herb-card-grid{
  width:88%;
  max-width:1260px;
  margin:clamp(48px,5vw,72px) auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.8vw,40px);
}

.herb-card{
  min-width:0;
  border-radius:14px;
  overflow:hidden;
  background:#fdfcf7;
  border:1px solid rgb(70 98 85 / 13%);
  box-shadow:0 18px 44px rgb(46 70 59 / 7%);
  transition:box-shadow .28s ease,transform .28s ease;
  display:flex;
  flex-direction:column;
}

.herb-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.herb-card-link:hover .herb-card{box-shadow:0 26px 56px rgb(46 70 59 / 13%)}
.herb-card-link:hover{transform:translateY(-4px)}

/* 上部约 65%：真实植物图 */
.herb-card-media{
  margin:0;
  flex:0 0 65%;
  min-height:0;
  overflow:hidden;
  background:#e9efe9;
}

.herb-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 下部约 35%：药材名 + 短定位 + 了解入口 */
.herb-card-body{
  flex:1 1 35%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,32px);
}

.herb-card-body h3{
  margin:0;
  color:#214538;
  font-family:var(--sans);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  letter-spacing:.04em;
}

.herb-card-body p{
  margin:0;
  color:#5c6f66;
  font-family:var(--sans);
  font-size:13px;
  font-weight:450;
  line-height:1.7;
}

.herb-card-cta{
  margin-top:6px;
  color:#3f6253;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:650;
  letter-spacing:.03em;
}

.herb-card-cta:hover{color:#24483b}

/* 底部一句轻文字 */
.herb-formula-line{
  margin:clamp(40px,4.5vw,64px) auto 0;
  width:88%;
  max-width:1260px;
  text-align:center;
  color:#6b7c72;
  font-family:var(--serif);
  font-size:clamp(17px,1.6vw,20px);
  letter-spacing:.05em;
}

.herb-card-empty{
  color:#6f7f77;
  font-family:var(--sans);
  font-size:13px;
  text-align:center;
  padding:60px 0;
}

/* ---- 详情页 ---- */
.herb-detail-page .site-header{position:static}
.herb-detail-page main{padding-top:56px}

.herb-detail-wrap{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
  padding-bottom:90px;
}

.herb-detail-hero{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
  padding:34px 0 54px;
  border-bottom:1px solid rgb(70 98 85 / 14%);
}

.herb-detail-figure{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:#e9efe9;
  border:1px solid rgb(70 98 85 / 12%);
  aspect-ratio:4/3;
}

.herb-detail-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.herb-detail-heading .section-kicker{
  color:#5d756a;
  font-family:"Segoe UI",var(--sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:.23em;
}

.herb-detail-heading h1{
  margin:16px 0 14px;
  color:#24483b;
  font-family:var(--serif);
  font-size:clamp(38px,4.5vw,56px);
  font-weight:700;
  line-height:1.16;
}

.herb-detail-lead{
  margin:0;
  max-width:520px;
  color:#40534b;
  font-family:var(--sans);
  font-size:14px;
  font-weight:450;
  line-height:1.9;
}

.herb-back-link{
  display:inline-block;
  margin-bottom:26px;
  color:#4a6f5e;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.04em;
}

.herb-back-link:hover{color:#24483b}

.herb-detail-block{
  padding:38px 0 6px;
  border-bottom:1px solid rgb(70 98 85 / 10%);
}

.herb-detail-block h2{
  margin:0 0 18px;
  color:#214538;
  font-family:var(--sans);
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
}

.herb-detail-block>p{
  max-width:760px;
  margin:0;
  color:#40534b;
  font-family:var(--sans);
  font-size:14px;
  font-weight:450;
  line-height:1.95;
}

.herb-detail-story{
  color:#4d6158 !important;
  font-style:italic;
}

.herb-product-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding-bottom:14px;
}

.herb-product-link{
  display:inline-flex;
  align-items:center;
  padding:11px 20px;
  color:#fff;
  background:#3f6253;
  border-radius:8px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.herb-product-link:hover{background:#24483b}

.herb-product-empty{
  color:#6f7f77;
  font-family:var(--sans);
  font-size:13px;
}

.herb-detail-note{
  margin-top:40px;
  padding:18px 22px;
  color:#6f7f77;
  background:rgb(233 239 233 / 60%);
  border:1px solid rgb(70 98 85 / 10%);
  border-radius:10px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:450;
  line-height:1.8;
}

.herb-detail-footnote{
  margin-top:52px;
  padding:30px 8px 10px;
  border-top:1px solid rgb(70 98 85 / 14%);
  color:#4d6158;
  font-family:var(--serif);
  font-size:15px;
  font-weight:450;
  line-height:2;
  text-align:center;
}

.herb-detail-missing{
  padding:90px 0;
  text-align:center;
}

.herb-detail-missing h1{
  color:#24483b;
  font-family:var(--serif);
  font-size:34px;
}

.herb-detail-missing p{
  color:#6f7f77;
  font-family:var(--sans);
  font-size:14px;
  margin:14px 0 30px;
}

/* ---- 响应式 ---- */
@media(max-width:900px){
  .herb-card-grid{width:88%;grid-template-columns:1fr 1fr;gap:20px}
  .herb-formula-line{width:88%}
  .herb-detail-hero{grid-template-columns:1fr;padding-top:16px}
  .herb-back-link{margin-bottom:22px}
}

@media(max-width:640px){
  .herb-card-grid{width:calc(100% - 48px);grid-template-columns:1fr;gap:26px}
  .herb-card-media{flex-basis:auto;aspect-ratio:16/10}
  .herb-card-body{flex:1 1 auto;padding:22px 24px 26px}
  .herb-formula-line{width:calc(100% - 48px)}
  .herb-detail-wrap{width:calc(100% - 32px)}
  .herb-detail-hero{gap:26px;padding-bottom:40px}
  .herb-detail-block{padding-top:32px}
}