/* ===============================================
   style.css  鄂豫皖红色研学数字地图 —— 样式
   =============================================== */

/* 全局配色变量：红色主题 */
:root{
  --red:#991b1e;      /* 主红色 */
  --red-deep:#781417; /* 深红 */
  --paper:#f7f3ec;    /* 米黄纸色 */
  --ink:#222;         /* 文字墨色 */
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  width:100%;
  height:100%;
  font-family:"微软雅黑","Microsoft YaHei",sans-serif;
  background:var(--paper);
  color:var(--ink);
}

body{
  display:grid;
  grid-template-rows:auto auto 1fr;
}

/* ===== 顶部标题栏 ===== */
.topbar{
  padding:12px 18px;
  background:linear-gradient(120deg,var(--red-deep),var(--red));
  color:#fff;
}
.topbar h1{font-size:22px;}
.topbar p{font-size:13px;opacity:.85;margin-top:2px;}

/* ===== 筛选工具栏 ===== */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 14px;
  background:#fff;
  border-bottom:1px #ddd solid;
  align-items:center;
}
.toolbar input,
.toolbar select,
.toolbar button{
  height:36px;
  padding:0 8px;
  border:1px #bbb solid;
  border-radius:4px;
  font-size:14px;
  font-family:inherit;
}
.toolbar input{flex:1;min-width:180px;}
.toolbar button{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  cursor:pointer;
}
.toolbar button:hover{background:var(--red-deep);}
#resultText{font-size:13px;color:#666;}

/* ===== 地图 ===== */
#map{width:100%;height:100%;}

/* ===== 弹窗卡片 ===== */
.pop-card{width:360px;max-width:100%;}
.pop-card h2{
  color:var(--red);
  margin-bottom:6px;
  font-size:17px;
  line-height:1.4;
}
.pop-meta{
  font-size:13px;
  color:#444;
  margin:3px 0;
  line-height:1.5;
}
.pop-desc{
  max-height:140px;
  overflow:auto;
  margin:8px 0;
  line-height:1.7;
  font-size:13px;
  color:#333;
  border-top:1px dashed #ccc;
  border-bottom:1px dashed #ccc;
  padding:6px 0;
}

/* ===== 图片网格 ===== */
.img-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:10px;
}
.img-grid img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:4px;
  background:#eee;
  transition:transform .2s;
}
.img-grid img:hover{transform:scale(1.03);}
.no-img{
  margin-top:8px;
  color:#777;
  font-size:12px;
}

/* ===== 手机端适配 ===== */
@media(max-width:640px){
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar input{width:100%;}
  .pop-card{width:260px;}
}