/**
 * Weather Today Component CSS
 * 
 * 天气卡片组件的完整 CSS 样式定义
 * 包含字体、字号、布局、颜色等所有样式配置
 */

/* ==================== CSS 变量定义 ==================== */

:root {
  /* 颜色变量 */
  --weather-color-white: #FFFFFF;
  --weather-color-black: #000000;
  --weather-color-red: #FF0000;
  
  /* 字体变量 */
  --weather-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
                         'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 
                         'Droid Sans', 'Helvetica Neue', sans-serif;
  
  /* 标准布局字体大小 */
  --weather-font-size-title: 30px;
  --weather-font-size-big-temp: 42px;
  --weather-font-size-label: 20px;
  --weather-font-size-timeline: 20px;
  
  /* 宽屏布局字体大小 */
  --weather-font-size-label-wide: 30px;
  --weather-font-size-timeline-wide: 30px;
  
  /* 字体粗细 */
  --weather-font-weight-title: 600;
  --weather-font-weight-big-temp: 700;
  --weather-font-weight-label: 500;
  
  /* 行高 */
  --weather-line-height-title: 1.2;
  --weather-line-height-big-temp: 1.1;
  --weather-line-height-label: 1.3;
  
  /* 标准布局尺寸 */
  --weather-width-standard: 400px;
  --weather-height-standard: 240px;
  --weather-left-padding-standard: 12px;
  --weather-title-offset-y-standard: 15px;
  --weather-big-temp-offset-y-standard: 60px;
  --weather-icon-scale-standard: 2;
  --weather-icon-gap-line-standard: 56px;
  --weather-label-offset-standard: 10px;
  --weather-temp-offset-standard: 28px;
  --weather-items-raise-standard: 20px;
  --weather-items-offset-x-standard: 48px;
  --weather-tl-side-margin-standard: 50px;
  --weather-tl-bottom-offset-standard: 60px;
  --weather-tl-dot-radius-standard: 4px;
  --weather-line-thickness-standard: 2px;
  --weather-label-offset-y-standard: 18px;
  
  /* 宽屏布局尺寸 */
  --weather-width-wide: 800px;
  --weather-height-wide: 240px;
  --weather-left-padding-wide: 24px;
  --weather-title-offset-y-wide: 15px;
  --weather-big-temp-offset-y-wide: 60px;
  --weather-icon-scale-wide: 3;
  --weather-icon-gap-line-wide: 56px;
  --weather-label-offset-wide: 10px;
  --weather-temp-offset-wide: 28px;
  --weather-items-raise-wide: 14px;
  --weather-items-offset-x-wide: 48px;
  --weather-tl-side-margin-wide: 100px;
  --weather-tl-bottom-offset-wide: 60px;
  --weather-tl-dot-radius-wide: 5px;
  --weather-line-thickness-wide: 2px;
  --weather-label-offset-y-wide: 18px;
  
  /* 边框样式 */
  --weather-frame-corner-radius: 20px;
  --weather-frame-thickness: 1px;
  --weather-frame-margin: 0px;
  --weather-dash-length: 10px;
  --weather-dash-gap: 6px;
}

/* ==================== 基础容器样式 ==================== */

.weather-today-card {
  position: relative;
  background: var(--weather-color-white);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--weather-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 确保所有内容都在容器内 */
  contain: layout style paint;
  width: 100%;
  height: 100%;
}

/* 标准布局 (400×240) - 使用 100% 以适应父容器 */
.weather-today-card.standard {
  /* width 和 height 由父容器控制，这里不需要设置固定值 */
}

/* 宽屏布局 (800×240) - 使用 100% 以适应父容器 */
.weather-today-card.wide {
  /* width 和 height 由父容器控制，这里不需要设置固定值 */
}

/* ==================== 边框样式 ==================== */

.weather-today-card .frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* 实线边框 */
.weather-today-card .frame-solid {
  border: var(--weather-frame-thickness) solid var(--weather-color-black);
  border-radius: var(--weather-frame-corner-radius);
}

/* 虚线边框 */
.weather-today-card .frame-dashed {
  border: var(--weather-frame-thickness) dashed var(--weather-color-black);
  border-radius: var(--weather-frame-corner-radius);
}

/* 红色边框 */
.weather-today-card .frame-red {
  border-color: var(--weather-color-red);
}

/* 无边框 */
.weather-today-card .frame-none {
  border: none;
}

/* ==================== 标题样式 ==================== */

.weather-today-card .title {
  position: absolute;
  font-size: var(--weather-font-size-title);
  font-weight: var(--weather-font-weight-title);
  line-height: var(--weather-line-height-title);
  color: var(--weather-color-black);
  white-space: nowrap;
}

.weather-today-card.standard .title {
  left: var(--weather-left-padding-standard);
  top: var(--weather-title-offset-y-standard);
}

.weather-today-card.wide .title {
  left: var(--weather-left-padding-wide);
  top: var(--weather-title-offset-y-wide);
}

/* ==================== 大温度样式 ==================== */

.weather-today-card .big-temp {
  position: absolute;
  font-size: var(--weather-font-size-big-temp);
  font-weight: var(--weather-font-weight-big-temp);
  line-height: var(--weather-line-height-big-temp);
  color: var(--weather-color-black);
  white-space: nowrap;
}

.weather-today-card.standard .big-temp {
  left: var(--weather-left-padding-standard);
  top: var(--weather-big-temp-offset-y-standard);
}

.weather-today-card.wide .big-temp {
  left: var(--weather-left-padding-wide);
  top: var(--weather-big-temp-offset-y-wide);
}

/* ==================== 中部三项区域样式 ==================== */

.weather-today-card .items-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.weather-today-card .weather-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

/* 标准布局 - 图标尺寸 */
.weather-today-card.standard .weather-item .item-icon {
  width: calc(20px * var(--weather-icon-scale-standard));
  height: calc(20px * var(--weather-icon-scale-standard));
  margin-bottom: var(--weather-label-offset-standard);
}

/* 宽屏布局 - 图标尺寸 */
.weather-today-card.wide .weather-item .item-icon {
  width: calc(20px * var(--weather-icon-scale-wide));
  height: calc(20px * var(--weather-icon-scale-wide));
  margin-bottom: var(--weather-label-offset-wide);
}

/* 标签样式 */
.weather-today-card .item-label {
  font-weight: var(--weather-font-weight-label);
  line-height: var(--weather-line-height-label);
  color: var(--weather-color-black);
  text-align: center;
  white-space: nowrap;
  margin-bottom: var(--weather-temp-offset-standard);
}

.weather-today-card.standard .item-label {
  font-size: var(--weather-font-size-label);
}

.weather-today-card.wide .item-label {
  font-size: var(--weather-font-size-label-wide);
}

/* 温度样式 */
.weather-today-card .item-temp {
  font-weight: var(--weather-font-weight-label);
  line-height: var(--weather-line-height-label);
  color: var(--weather-color-black);
  text-align: center;
  white-space: nowrap;
}

.weather-today-card.standard .item-temp {
  font-size: var(--weather-font-size-label);
}

.weather-today-card.wide .item-temp {
  font-size: var(--weather-font-size-label-wide);
}

/* ==================== 时间轴样式 ==================== */

.weather-today-card .timeline-container {
  position: absolute;
  height: 50px;
}

.weather-today-card.standard .timeline-container {
  left: var(--weather-tl-side-margin-standard);
  width: calc(100% - calc(2 * var(--weather-tl-side-margin-standard)));
  bottom: var(--weather-tl-bottom-offset-standard);
}

.weather-today-card.wide .timeline-container {
  left: var(--weather-tl-side-margin-wide);
  width: calc(100% - calc(2 * var(--weather-tl-side-margin-wide)));
  bottom: var(--weather-tl-bottom-offset-wide);
}

/* 时间轴线 - 在描述和温度下方 */
.weather-today-card .timeline-line {
  position: absolute;
  bottom: var(--weather-label-offset-y-standard);
  left: 0;
  right: 0;
  height: var(--weather-line-thickness-standard);
  background: var(--weather-color-black);
}

.weather-today-card.wide .timeline-line {
  bottom: var(--weather-label-offset-y-wide);
  height: var(--weather-line-thickness-wide);
}

/* 时间轴圆点 - 在时间轴线上 */
.weather-today-card .timeline-dot {
  position: absolute;
  bottom: var(--weather-label-offset-y-standard);
  transform: translateY(50%);
  background: var(--weather-color-black);
  border-radius: 50%;
}

.weather-today-card.wide .timeline-dot {
  bottom: var(--weather-label-offset-y-wide);
}

.weather-today-card.standard .timeline-dot {
  width: calc(2 * var(--weather-tl-dot-radius-standard));
  height: calc(2 * var(--weather-tl-dot-radius-standard));
}

.weather-today-card.wide .timeline-dot {
  width: calc(2 * var(--weather-tl-dot-radius-wide));
  height: calc(2 * var(--weather-tl-dot-radius-wide));
}

/* 时间轴标签 - 最下方，在时间轴线下方 */
.weather-today-card .timeline-label {
  position: absolute;
  font-weight: var(--weather-font-weight-label);
  line-height: var(--weather-line-height-label);
  color: var(--weather-color-black);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  bottom: 0;
}

.weather-today-card.standard .timeline-label {
  font-size: var(--weather-font-size-timeline);
}

.weather-today-card.wide .timeline-label {
  font-size: var(--weather-font-size-timeline-wide);
}

/* ==================== 颜色变体 ==================== */

.weather-today-card .text-red {
  color: var(--weather-color-red);
}

.weather-today-card .text-black {
  color: var(--weather-color-black);
}

.weather-today-card .text-white {
  color: var(--weather-color-white);
}

/* ==================== 工具类 ==================== */

/* 文本对齐 */
.weather-today-card .text-center {
  text-align: center;
}

.weather-today-card .text-left {
  text-align: left;
}

.weather-today-card .text-right {
  text-align: right;
}

/* 显示/隐藏 */
.weather-today-card .hide {
  display: none;
}

.weather-today-card .show {
  display: block;
}

/* ==================== 响应式调整 ==================== */

@media (max-width: 480px) {
  /* 小屏幕设备下的调整 */
  .weather-today-card.standard {
    transform: scale(0.8);
    transform-origin: top left;
  }
}

@media (max-width: 320px) {
  /* 超小屏幕设备下的调整 */
  .weather-today-card.standard {
    transform: scale(0.6);
    transform-origin: top left;
  }
}

/* ==================== 打印样式 ==================== */

@media print {
  .weather-today-card {
    background: white;
    border: 1px solid black;
  }
  
  .weather-today-card .frame {
    border-color: black !important;
  }
}

/* ==================== 动画效果（可选） ==================== */

/* 淡入动画 */
@keyframes weatherFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.weather-today-card.fade-in {
  animation: weatherFadeIn 0.3s ease-in;
}

/* 滑入动画 */
@keyframes weatherSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.weather-today-card.slide-in {
  animation: weatherSlideIn 0.4s ease-out;
}

/* ==================== 辅助样式 ==================== */

/* 清除默认样式 */
.weather-today-card * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 温度单位样式 */
.weather-today-card .temp-unit {
  font-size: 0.7em;
  vertical-align: super;
}

/* 度数字符 */
.weather-today-card .degree-symbol::before {
  content: '°';
}

/* ==================== 高对比度模式支持 ==================== */

@media (prefers-contrast: high) {
  .weather-today-card {
    border-width: 2px;
  }
  
  .weather-today-card .title,
  .weather-today-card .big-temp,
  .weather-today-card .item-label,
  .weather-today-card .item-temp,
  .weather-today-card .timeline-label {
    font-weight: 700;
  }
}

/* ==================== 暗色模式支持（可选） ==================== */

@media (prefers-color-scheme: dark) {
  .weather-today-card {
    background: #1a1a1a;
    color: #ffffff;
  }
  
  .weather-today-card .title,
  .weather-today-card .big-temp,
  .weather-today-card .item-label,
  .weather-today-card .item-temp,
  .weather-today-card .timeline-label {
    color: #ffffff;
  }
  
  .weather-today-card .timeline-line,
  .weather-today-card .timeline-dot {
    background: #ffffff;
  }
}

/* ==================== 可访问性支持 ==================== */

/* 减少动画（适用于偏好减少动画的用户） */
@media (prefers-reduced-motion: reduce) {
  .weather-today-card.fade-in,
  .weather-today-card.slide-in {
    animation: none;
  }
}

/* 焦点可见性 */
.weather-today-card:focus-visible {
  outline: 2px solid var(--weather-color-black);
  outline-offset: 2px;
}

/* ==================== 特定布局计算辅助类 ==================== */

/* 标准布局 - 天气项位置（原始计算：1/6, 1/2, 5/6 + 偏移量） */
.weather-today-card.standard .item-0 {
  left: calc(var(--weather-tl-side-margin-standard) + 
             calc((100% - calc(2 * var(--weather-tl-side-margin-standard))) / 6) + 
             var(--weather-items-offset-x-standard));
}

.weather-today-card.standard .item-1 {
  left: calc(var(--weather-tl-side-margin-standard) + 
             calc((100% - calc(2 * var(--weather-tl-side-margin-standard))) / 2) + 
             var(--weather-items-offset-x-standard));
}

.weather-today-card.standard .item-2 {
  left: calc(var(--weather-tl-side-margin-standard) + 
             calc(5 * (100% - calc(2 * var(--weather-tl-side-margin-standard))) / 6) + 
             var(--weather-items-offset-x-standard));
}

/* 宽屏布局 - 天气项位置（原始计算：1/6, 1/2, 5/6 + 偏移量） */
.weather-today-card.wide .item-0 {
  left: calc(var(--weather-tl-side-margin-wide) + 
             calc((100% - calc(2 * var(--weather-tl-side-margin-wide))) / 6) + 
             var(--weather-items-offset-x-wide));
}

.weather-today-card.wide .item-1 {
  left: calc(var(--weather-tl-side-margin-wide) + 
             calc((100% - calc(2 * var(--weather-tl-side-margin-wide))) / 2) + 
             var(--weather-items-offset-x-wide));
}

.weather-today-card.wide .item-2 {
  left: calc(var(--weather-tl-side-margin-wide) + 
             calc(5 * (100% - calc(2 * var(--weather-tl-side-margin-wide))) / 6) + 
             var(--weather-items-offset-x-wide));
}

/* ==================== 时间轴点对齐样式 ==================== */

/* 第一个时间点：对齐大温度位置（相对于时间轴容器） */
.weather-today-card.standard .timeline-dot-first,
.weather-today-card.standard .timeline-label-first {
  left: calc((var(--weather-left-padding-standard) + 
             calc(var(--weather-font-size-big-temp) * 0.5) + 
             24px) - var(--weather-tl-side-margin-standard));
}

.weather-today-card.wide .timeline-dot-first,
.weather-today-card.wide .timeline-label-first {
  left: calc((var(--weather-left-padding-wide) + 
             calc(var(--weather-font-size-big-temp) * 0.5) + 
             24px) - var(--weather-tl-side-margin-wide));
}

/* 后三个时间点：对齐三个天气项（相对于时间轴容器） */
/* 天气项位置 = tl_margin + (container_width * ratio) + offset */
/* 时间点位置（相对于容器）= (container_width * ratio) + offset */
/* 由于容器宽度是 100% - 2*tl_margin，这里使用简化的百分比计算 */
.weather-today-card.standard .timeline-dot-item-0,
.weather-today-card.standard .timeline-label-item-0 {
  /* 1/6 位置 + offset 的近似百分比 */
  left: calc(16.666% + var(--weather-items-offset-x-standard) / calc(100% - calc(2 * var(--weather-tl-side-margin-standard))) * 100%);
}

.weather-today-card.standard .timeline-dot-item-1,
.weather-today-card.standard .timeline-label-item-1 {
  /* 1/2 位置 + offset 的近似百分比 */
  left: calc(50% + var(--weather-items-offset-x-standard) / calc(100% - calc(2 * var(--weather-tl-side-margin-standard))) * 100%);
}

.weather-today-card.standard .timeline-dot-item-2,
.weather-today-card.standard .timeline-label-item-2 {
  /* 5/6 位置 + offset 的近似百分比 */
  left: calc(83.333% + var(--weather-items-offset-x-standard) / calc(100% - calc(2 * var(--weather-tl-side-margin-standard))) * 100%);
}

.weather-today-card.wide .timeline-dot-item-0,
.weather-today-card.wide .timeline-label-item-0 {
  left: calc(16.666% + var(--weather-items-offset-x-wide) / calc(100% - calc(2 * var(--weather-tl-side-margin-wide))) * 100%);
}

.weather-today-card.wide .timeline-dot-item-1,
.weather-today-card.wide .timeline-label-item-1 {
  left: calc(50% + var(--weather-items-offset-x-wide) / calc(100% - calc(2 * var(--weather-tl-side-margin-wide))) * 100%);
}

.weather-today-card.wide .timeline-dot-item-2,
.weather-today-card.wide .timeline-label-item-2 {
  left: calc(83.333% + var(--weather-items-offset-x-wide) / calc(100% - calc(2 * var(--weather-tl-side-margin-wide))) * 100%);
}