/* =====================================================
   weather.css — 天气详情页 & 站点页天气卡片
   ===================================================== */

/* ── 站点页实时天气入口卡 ── */
.weather-now-card {
  display: block;
  background: var(--glass2);
  border: 1px solid rgba(241,196,15,0.25);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 42px;   /* 与日期导航拉开距离 */
  cursor: pointer;
  text-decoration: none !important;
  color: #fff !important;
  transition: border-color .2s, background .2s;
  backdrop-filter: blur(12px);
}
.weather-now-card:hover {
  border-color: rgba(241,196,15,0.6);
  background: rgba(255,255,255,0.07);
  text-decoration: none !important;
}
.wn-loading, .wn-err { color: #cde; font-size: 13px; }

/* 主行：图标 + 温度 + 天气文字 + 副信息全部一行 */
.wn-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wn-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.wn-temp {
  font-size: 1.5rem; font-weight: 700;
  font-family: var(--font-mono); color: #f1c40f;
  flex-shrink: 0;
}
.wn-text { font-size: 14px; color: #fff; font-weight: 500; flex-shrink: 0; }

/* 分隔线 */
.wn-divider {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.25); flex-shrink: 0;
}

/* 副信息（湿度、能见度）inline */
.wn-sub {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: #fff;   /* 接近白色，清晰可读 */
  flex: 1;
}

/* 右侧提示文字 */
.wn-hint {
  font-size: 11px;
  color: rgba(241,196,15,0.7);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 天气详情页：实时大卡 ── */
.weather-now-section { margin-bottom: 24px; }
.weather-now-big {
  display: flex; flex-wrap: wrap; gap: 24px;
  background: var(--glass2); border: 1px solid rgba(241,196,15,0.2);
  border-radius: var(--radius); padding: 24px 28px;
  backdrop-filter: blur(12px);
}
.wnb-left {
  display: flex; align-items: center; gap: 20px; flex: 0 0 auto;
}
.wnb-icon { font-size: 3.5rem; }
.wnb-temp {
  font-size: 3rem; font-weight: 700;
  font-family: var(--font-mono); color: #f1c40f; line-height: 1;
}
.wnb-unit { font-size: 1.2rem; }
.wnb-text { font-size: 1rem; color: var(--sea-pale); margin-top: 4px; }
.wnb-right {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px;
  flex: 1; align-content: center;
}
.wnb-item { display: flex; flex-direction: column; gap: 2px; }
.wnb-label { font-size: 11px; color: var(--sea-pale); }
.wnb-item > span:last-child { font-size: 14px; color: var(--white); font-family: var(--font-mono); }

/* ── 7天每日预报 ── */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.daily-card {
  background: var(--glass2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 12px;
  text-align: center; backdrop-filter: blur(8px);
  transition: border-color .2s;
}
.daily-card:hover { border-color: rgba(241,196,15,0.4); }
.daily-date { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.daily-date small { font-size: 11px; color: var(--sea-pale); }
.daily-icons { font-size: 1.4rem; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 6px; }
.daily-arrow { font-size: 11px; color: var(--sea-pale); }
.daily-text { font-size: 11px; color: var(--sea-pale); margin-bottom: 6px; }
.daily-temp { font-family: var(--font-mono); font-size: 13px; margin-bottom: 4px; }
.temp-high { color: #e67e22; }
.temp-sep  { color: var(--sea-pale); margin: 0 2px; }
.temp-low  { color: #5dade2; }
.daily-wind { font-size: 11px; color: var(--sea-pale); margin-bottom: 2px; }
.daily-uv   { font-size: 10px; color: rgba(241,196,15,0.7); }

/* ── 24小时逐小时 ── */
.hourly-scroll { overflow-x: auto; padding-bottom: 8px; }
.hourly-list {
  display: flex; gap: 8px; width: max-content; padding: 4px 2px 8px;
}
.hourly-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 56px;
  background: var(--glass2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 6px;
  backdrop-filter: blur(8px); text-align: center;
  transition: border-color .2s;
}
.hourly-item:hover { border-color: rgba(241,196,15,0.4); }
.hourly-time { font-size: 10px; color: var(--sea-pale); font-family: var(--font-mono); }
.hourly-icon { font-size: 1.3rem; }
.hourly-temp { font-size: 13px; font-weight: 700; color: #f1c40f; font-family: var(--font-mono); }
.hourly-text { font-size: 10px; color: var(--sea-pale); }
.hourly-wind { font-size: 10px; color: var(--sea-pale); }
.hourly-pop  { font-size: 10px; color: #5dade2; }

/* ── 响应式 ── */
@media (max-width: 600px) {
  .wnb-right { grid-template-columns: repeat(2, 1fr); }
  .daily-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .wn-hint { display: none; } /* 手机不显示"点击查看"提示，节省空间 */
}