/* 樱桃产区图谱专用样式（与全站头部/尾部保持一致，主体独立命名） */

.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 28px 0 16px;
  color: #222;
}

/* 1) 全国产区总览图 */
.china-cherry-map {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}

.map-container {
  width: 100%;
  height: 520px;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.map-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.legend-item {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-size: 12px;
  color: #475569;
  background: #fff;
}

.legend-item.high-density { border-color: #ef4444; color: #b91c1c; }
.legend-item.medium-density { border-color: #f59e0b; color: #b45309; }
.legend-item.low-density { border-color: #10b981; color: #047857; }

/* 2) 产区卡片 */
.area-cards .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.area-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.area-card__name { font-size: 1.1rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.area-card__meta { font-size: 12px; color: #64748b; margin-bottom: 10px; }
.area-card__list { font-size: 14px; color: #374151; line-height: 1.5; }
.area-card__list strong { color: #111827; }

/* 3) 物候仪表盘 */
.phenology-dashboard .phenology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.phenology-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.phenology-card__title { font-weight: 700; color: #111827; margin-bottom: 8px; }
.phenology-card__row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; margin: 6px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #e5e7eb; background: #fff; color: #475569; }

/* 4) 风险预警 */
.risk-warning .risk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.risk-item { background:#fff; border:1px solid #e5e7eb; border-radius: 12px; padding: 12px; }
.risk-item__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; }
.risk-item__badge { font-size: 12px; border-radius: 999px; padding: 2px 8px; border:1px solid #e5e7eb; color:#475569; background:#fff; }
.risk-item__advice { font-size: 13px; color: #334155; }
.risk-footnote { margin-top: 8px; font-size: 12px; color: #94a3b8; }
.risk-high { border-color: #ef4444; }
.risk-medium { border-color: #f59e0b; }
.risk-low { border-color: #10b981; }

/* 5) 品种适应性表格 */
.table-wrapper { overflow-x: auto; background:#fff; border:1px solid #e5e7eb; border-radius: 12px; }
.variety-table { width: 100%; border-collapse: collapse; }
.variety-table th, .variety-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
}
.variety-table thead th { background:#f8fafc; color:#0f172a; font-weight: 700; }

/* 6) 预测 */
.forecast .forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.forecast-card { background:#fff; border:1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
.forecast-card__title { font-weight:700; margin-bottom: 8px; color:#111827; }
.forecast-kpi { display:flex; flex-wrap:wrap; gap:10px; }
.kpi { background:#fff; border:1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; font-size: 13px; color:#334155; }

/* 无障碍小工具 */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); border:0; }

@media (max-width: 768px) {
  .map-container { height: 360px; }
}


