/* ============ WEATHER PAGE (v3 — cards + chart) ============ */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}

.wxp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line-strong);flex-wrap:wrap}
.wxp-head h1{font-size:30px;font-weight:800;position:relative;padding-bottom:12px}
.wxp-head h1::after{content:"";position:absolute;bottom:-1px;right:0;width:100%;height:4px;background:var(--red)}
.wxp-head .upd{font-size:11.5px;color:var(--muted);margin-bottom:13px;font-variant-numeric:tabular-nums}

.city-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.city-chips a{font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;height:38px;padding:0 18px;display:inline-flex;align-items:center;transition:.15s;line-height:1;background:var(--surface)}
.city-chips a:hover{border-color:var(--line-strong);color:var(--ink)}
.city-chips a.active{background:var(--red);border-color:var(--red);color:#fff}

.wx-now-card{border-radius:var(--radius);background:linear-gradient(115deg,var(--brand-deep) 0%,#3d1014 65%,var(--red) 135%);color:#fff;padding:26px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(19,19,22,.14)}
.wx-now-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px);pointer-events:none}
.wx-now-card>*{position:relative}
.wxn-main{display:flex;align-items:center;gap:18px}
.wxn-main .icon{width:64px;height:64px;color:#ffdca8}
.wxn-t{font-family:var(--font-head);font-weight:800;font-size:58px;line-height:1;font-variant-numeric:tabular-nums}
.wxn-city{font-family:var(--font-head);font-weight:800;font-size:19px}
.wxn-cond{font-size:13px;color:#ffd6d6;margin-top:3px}
.wxn-feels{font-size:11.5px;color:#ffb3b3;margin-top:6px;font-variant-numeric:tabular-nums}
.wxn-stats{margin-inline-start:auto;display:grid;grid-template-columns:repeat(3,auto);gap:10px 26px;font-size:12px;font-variant-numeric:tabular-nums}
.wxn-stats span{color:#ffb3b3;display:block;font-size:10.5px;margin-bottom:2px}
.wxn-stats b{font-family:var(--font-head);font-size:15px;font-weight:800}

.wx-hours{display:grid;grid-auto-flow:column;grid-auto-columns:86px;gap:10px;overflow-x:auto;padding-bottom:8px;margin-top:18px;scrollbar-width:thin}
.wxh{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 8px;text-align:center;flex-shrink:0}
.wxh time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;display:block}
.wxh .icon{width:22px;height:22px;color:var(--red);margin:8px auto 6px;display:block}
.wxh b{font-family:var(--font-head);font-size:15px;font-variant-numeric:tabular-nums}
.wxh small{display:block;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

.wx-week{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wxw{display:grid;grid-template-columns:88px 34px 1fr auto;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:13px}
.wxw:last-child{border-bottom:none}
.wxw .day{font-family:var(--font-head);font-weight:800}
.wxw .icon{width:20px;height:20px;color:var(--red)}
.wxw .range{position:relative;height:6px;background:var(--surface-2);border-radius:3px}
.wxw .range i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#f2b3b3,var(--red))}
.wxw .hilo{font-variant-numeric:tabular-nums;min-width:86px;text-align:left}
.wxw .hilo b{font-family:var(--font-head);font-weight:800}
.wxw .hilo span{color:var(--muted)}

.wx-chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.wx-chart-card .sub{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.wxc{width:100%;height:auto;display:block}
.wxc text{font-family:var(--font-body);font-size:11px;fill:var(--muted)}
.wxc .gl{stroke:var(--line);stroke-width:1}
.wxc .band{fill:rgba(204,0,0,.10)}
.wxc .hi{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.wxc .lo{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}

.wx-cities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wxt{background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:.15s}
.wxt:hover{border-color:var(--red)}
.wxt.active{border-color:var(--red);background:var(--red-soft)}
.wxt b{font-family:var(--font-head);font-size:13px;color:var(--ink)}
.wxt span{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--red);font-variant-numeric:tabular-nums}

.sun-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.sun-card h3{font-size:14px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.sun-card h3::before{content:"";width:4px;height:16px;background:var(--red);border-radius:2px}
.sun-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px;font-variant-numeric:tabular-nums}
.sun-row:last-child{border-bottom:none}
.sun-row b{font-family:var(--font-head)}

@media (max-width:1080px){
  .article-grid{grid-template-columns:1fr}
  .wx-cities{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .wxp-head h1{font-size:23px}
  .wxn-t{font-size:44px}
  .wxn-stats{margin-inline-start:0;grid-template-columns:repeat(3,1fr);width:100%}
  .wx-cities{grid-template-columns:1fr 1fr}
  .wxw{grid-template-columns:74px 26px 1fr auto;padding:12px 14px;gap:9px}
}