/* ==========================================
   天气预报组件样式
   ========================================== */

/* CSS 变量定义 */
:root {
  /* 颜色变量 */
  --bg-light: #f8f9fa;
  --bg-hover: #e9ecef;
  --text-primary: #4a5568;
  --text-secondary: #718096;
  --text-muted: #999;
  --high-temp: #ff6b6b;
  --low-temp: #4dabf7;
  --alarm-bg: #fff3cd;
  --alarm-border: #ffc107;
  --alarm-text: #856404;

  /* 尺寸与间距变量 */
  --card-radius: 10px;
  --card-padding: 10px;
  --transition-speed: 0.2s;
  --icon-size: 60px;
  --hourly-icon-size: 35px;
  --daily-icon-size: 40px;
  --gap-md: 10px;
  --gap-sm: 5px;
}

/* --- 通用卡片容器样式 --- */
.weather-header,
.weather-details,
.hourly-item,
.daily-item {
  background: var(--bg-light);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: background var(--transition-speed) ease;
}

.weather-header:hover,
.weather-details:hover,
.hourly-item:hover,
.daily-item:hover {
  background: var(--bg-hover);
}

/* --- 通用图标投影 --- */
.weather-icon,
.hourly-icon,
.daily-icon,
.alarm-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* --- 第一行：天气头部 --- */
.weather-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0 5px;
}

.weather-icon-wrapper {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.weather-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.weather-temp-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.weather-temp {
  display: flex;
  align-items: baseline;
}

.temp-value, .weather-desc, .temp-unit {
  font-size: 1.2em;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
}

.temp-unit { margin-left: 3px; }

.weather-range {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: 0.9em;
}

.range-high { color: var(--high-temp); font-weight: 500; }
.range-low { color: var(--low-temp); font-weight: 500; }
.range-separator { color: var(--text-muted); }

/* --- 第二行：详情 --- */
.weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-bottom: 5px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
}

.detail-label { font-size: 0.8em; color: var(--text-secondary); font-weight: 500; }
.detail-value { font-size: 0.8em; color: var(--text-primary); font-weight: 500; }

/* --- 预警信息 --- */
.weather-alarm {
  background: var(--alarm-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  color: var(--alarm-text);
}

.alarm-icon { font-size: 1.6em; position: relative; top: -2px; flex-shrink: 0; }
.alarm-text { flex: 1; line-height: 1.4; }

/* --- 第三行：小时预报 --- */
.weather-hourly { margin-bottom: 0; }

.hourly-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-sm);
}

.hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 5px;
}

.hourly-icon { width: var(--hourly-icon-size); height: var(--hourly-icon-size); }
.hourly-time { font-size: 0.8em; font-weight: 500; color: var(--text-secondary); }
.hourly-temp { font-size: 0.8em; font-weight: 500; color: var(--text-primary); }

/* --- 第四行：日期预报 --- */
.weather-daily { margin-top: 5px; }

.daily-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
}

.daily-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: 12px 8px;
}

.daily-date { display: flex; flex-direction: column; align-items: center; }
.daily-day { font-size: 0.8em; font-weight: 500; color: var(--text-secondary); }
.daily-date-text { font-size: 0.7em; color: var(--text-primary); }

.daily-icon { width: var(--daily-icon-size); height: var(--daily-icon-size); }
.daily-weather { font-size: 0.8em; color: var(--text-primary); text-align: center; }

.daily-temp {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

.daily-temp .temp-high { color: var(--high-temp); font-weight: 600; }
.daily-temp .temp-separator { color: var(--text-muted); }
.daily-temp .temp-low { color: var(--low-temp); font-weight: 600; }

/* ==========================================
   响应式设计
   ========================================== */

/* 平板设备 */
@media (max-width: 768px) {
  :root {
    --icon-size: 55px;
    --hourly-icon-size: 32px;
    --daily-icon-size: 38px;
    --gap-md: 8px;
  }

  .weather-header { gap: 12px; }
  .temp-value, .weather-desc, .temp-unit { font-size: 2em; }
  
  .daily-item { padding: 10px 6px; }
}

/* 手机设备 */
@media (max-width: 480px) {
  :root {
    --icon-size: 50px;
    --hourly-icon-size: 30px;
    --daily-icon-size: 36px;
    --gap-md: 6px;
    --card-padding: 8px;
  }

  .weather-header { gap: 10px; }
  .temp-value, .weather-desc { font-size: 1.8em; }
  .temp-unit { font-size: 1em; }
  .weather-range { font-size: 0.85em; }
  
  .hourly-item { padding: 8px 4px; }
  
  .daily-item {
    padding: 10px 5px;
  }
  .daily-day { font-size: 0.75em; }
  .daily-date-text { font-size: 0.7em; }
  .daily-weather { font-size: 0.75em; }
  .daily-temp { font-size: 0.8em; }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #2a2a2a;
    --bg-hover: #333;
    --text-primary: #e0e0e0;
    --text-secondary: #aaa;
    --text-muted: #888;
    --alarm-bg: #3a2a00;
    --alarm-border: #665200;
    --alarm-text: #ffd54f;
  }
}