/* ---------- main grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.hero{grid-column:span 7;padding:30px;display:flex;flex-direction:column;gap:18px;min-width:0;transform-style:preserve-3d}
.tiles{grid-column:span 5;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.hourly{grid-column:span 12;padding:22px 0 18px;min-width:0}
.daily{grid-column:span 7;padding:22px;min-width:0;display:flex;flex-direction:column}
.side{grid-column:span 5;display:grid;gap:18px;align-content:start;min-width:0}
.sunbox{padding:22px;min-width:0;display:flex;flex-direction:column;gap:10px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:8px}
html[lang=fa] .eyebrow{letter-spacing:0;font-size:13px}
.eyebrow svg{width:16px;height:16px;opacity:.9}
.place{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.place h1{margin:0;font-size:clamp(26px,4vw,38px);font-weight:700;line-height:1.15}
.place p{margin:2px 0 0;color:var(--ink-2)}
.now{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.temp{font-size:clamp(84px,15vw,140px);font-weight:300;line-height:.95;letter-spacing:-.03em;display:flex;align-items:flex-start;direction:ltr}
.temp sup{font-size:.34em;font-weight:400;margin-top:.14em;opacity:.8}
.hero-icon{width:clamp(110px,18vw,170px);aspect-ratio:1;filter:drop-shadow(0 22px 22px rgba(10,20,50,.3));animation:float 7s ease-in-out infinite}
.hero-icon svg{width:100%;height:100%;display:block}
.cond{font-size:22px;font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:10px}
.pillbox{padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-weight:500}
.pillbox svg{width:16px;height:16px}
.tile{padding:16px;display:flex;flex-direction:column;gap:6px;justify-content:space-between;min-height:132px}
.tile .v{font-size:28px;font-weight:600;line-height:1.1;direction:ltr;text-align:start}
html[dir=rtl] .tile .v{text-align:right}
.tile .v small{font-size:14px;font-weight:500;color:var(--ink-2);margin-inline-start:4px}
.tile .s{font-size:13px;color:var(--ink-2)}
.bar{height:8px;border-radius:99px;background:rgba(10,20,50,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);overflow:hidden}
.bar b{display:block;height:100%;border-radius:inherit;width:0;background:linear-gradient(90deg,#7df0b4,#ffe17a,#ff9a62,#ff5d7a);background-size:var(--bs,300%) 100%;transition:width 1.1s var(--ease)}
.compass{position:relative;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 2px 6px rgba(10,20,50,.3),inset 0 -1px 0 rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.compass svg{position:absolute;inset:6px;width:32px;height:32px;transition:transform 1.2s var(--ease)}
.row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.drop{width:48px;height:48px;position:relative}
.drop svg{width:100%;height:100%}
.wave{transition:transform 1.2s var(--ease)}

/* grid children may shrink below their content width (keeps the page from scrolling sideways) */
.wrap>*{min-width:0}