/* weatherdata.gr — 24h Premium V1.2.0
   Presentation-only redesign. No backend, forecast-schema or scheduling changes. */
:root {
  color-scheme: light;
  --ink: #102e44;
  --muted: #5c7b8c;
  --night: #061c32;
  --night-2: #0a2b48;
  --sky: #7cd6ff;
  --accent: #249de6;
  --border: rgba(174,213,232,.32);
  --white: #fff;
}
*, *::before, *::after {box-sizing: border-box}
html {font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;background:#eaf3f8;color:var(--ink);scroll-behavior:smooth}
body {margin:0;min-height:100vh;background:radial-gradient(ellipse 890px 390px at 82% -5%,rgba(144,213,246,.47),transparent 75%),linear-gradient(150deg,#eaf4fa 0%,#f3f7f9 55%,#e8f2f8 100%)}
button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #58c8ff;outline-offset:3px}
.shell{width:min(1328px,calc(100% - 56px));margin:0 auto;padding:25px 0 30px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#3b6a85;font-size:14px}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;letter-spacing:2.25px;color:#153d5e}
.brand-dot{width:10px;height:10px;border:2px solid #23a0de;background:#d6f4ff;border-radius:50%;box-shadow:0 0 0 5px rgba(56,174,224,.09)}
.brand-accent{color:#149bcd}
.loc{font-weight:700;color:#457088}.pin{color:#149dd4;font-size:21px;vertical-align:-1px}.loc-divider{color:#9db9c9;margin:0 9px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin:26px 0 23px}
.eyebrow{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:2.45px;color:#52819b}
.eyebrow-line{display:inline-block;vertical-align:middle;margin:0 8px;width:26px;height:1px;background:#88b7cc}
.intro h1{margin:0;line-height:1.02;letter-spacing:-1.9px;font-weight:800;font-size:clamp(35px,4.6vw,59px);color:#092d48}
.intro h1 em{font-style:normal;color:#1a9dcb;background:linear-gradient(120deg,#37add6,#0876b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:16px;line-height:1.45;color:#5f7e91;margin:13px 0 0}
.update{flex:none;background:rgba(255,255,255,.84);border:1px solid #d0e5ef;border-radius:999px;padding:9px 16px;color:#3d789c;font-weight:700;font-size:12px;box-shadow:0 4px 16px #1554730b;white-space:nowrap;font-variant-numeric:tabular-nums}
/* HERO */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:425px;border-radius:27px;color:#fff;background:#0b3049;box-shadow:0 24px 50px rgba(17,57,85,.18),0 7px 18px #062c4711;border:1px solid rgba(255,255,255,.38)}
.photo{position:absolute;inset:0;z-index:-3;background:url('mesogeia-golden.webp') center 52%/cover no-repeat;filter:saturate(1.14) contrast(1.04)}
.photo-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,20,39,.95) 0%,rgba(3,28,50,.87) 30%,rgba(4,36,56,.52) 60%,rgba(4,31,47,.08) 100%),linear-gradient(0deg,rgba(2,16,30,.72) 0%,rgba(2,20,33,.13) 44%,rgba(3,30,52,.23) 100%)}
.hero.night .photo{filter:saturate(1.08) contrast(1.04)}
.hero.night .photo-overlay{background:linear-gradient(90deg,rgba(3,18,38,.97) 0%,rgba(5,25,48,.88) 30%,rgba(6,34,57,.55) 61%,rgba(3,27,46,.09) 100%),linear-gradient(0deg,rgba(2,14,30,.74) 0%,rgba(3,23,42,.09) 44%,rgba(4,27,48,.21) 100%)}
.hero:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.1);pointer-events:none;z-index:2}
.hero-content{min-height:425px;padding:26px 33px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(18,70,103,.72);border:1px solid rgba(176,231,255,.47);border-radius:999px;color:#e7f7ff;padding:10px 16px;font-weight:800;letter-spacing:1.55px;font-size:11px;box-shadow:0 5px 17px #00172944;backdrop-filter:blur(10px)}
.pulse{width:8px;height:8px;border-radius:50%;background:#77e4ed;box-shadow:0 0 0 4px #5ad8fa27}
.hero-head .period{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;max-width:60%;padding:10px 17px;background:rgba(4,25,43,.86);border:1px solid rgba(225,247,255,.48);color:#fff;border-radius:12px;box-shadow:0 4px 18px #0005;font-weight:800;font-size:14px;letter-spacing:.35px;font-variant-numeric:tabular-nums;backdrop-filter:blur(11px)}
.hero-main{display:flex;align-items:center;gap:25px;max-width:910px;flex:1;margin:8px 0 3px}
.big-icon{width:184px;height:184px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 11px 16px rgba(0,6,20,.64))}
.hero-text{max-width:710px}
.hero-kicker{margin:0 0 9px;color:#92defc;font-weight:800;letter-spacing:2.2px;font-size:12px}
.hero h2{margin:0 0 12px;line-height:1.05;font-size:clamp(32px,3.25vw,47px);font-weight:800;letter-spacing:-.8px;text-shadow:0 2px 16px #0006;text-wrap:balance}
.hero-text p:last-child{font-size:clamp(15px,1.28vw,18px);line-height:1.53;max-width:660px;margin:0;color:#eff9ff;font-weight:500;text-wrap:pretty;text-shadow:0 1px 5px #00172e9c}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;width:100%}
.stat{position:relative;min-width:0;padding:14px 16px 12px 18px;border:1px solid rgba(201,237,255,.28);border-radius:13px;background:linear-gradient(125deg,rgba(5,28,49,.78),rgba(9,57,81,.57));box-shadow:inset 0 1px #ffffff16,0 6px 17px #03132330;backdrop-filter:blur(12px)}
.stat:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:#6ed6fb}
.stat-rain:before{background:#8ccaff}.stat-gust:before{background:#ffcc91}.stat-humidity:before{background:#b1e4fb}
.stat span{display:block;color:#b8e5f7;font-size:11px;line-height:1.2;letter-spacing:1.05px;font-weight:800}
.stat strong{display:block;margin:5px 0 2px;color:#fff;line-height:1.05;font-weight:800;font-size:clamp(21px,2.0vw,28px);white-space:nowrap;font-variant-numeric:tabular-nums}
.stat small{display:block;font-size:11px;color:#c4dbe8;font-weight:500}
/* HOURLY PANEL */
.hourly{margin-top:21px;border-radius:26px;padding:26px 26px 21px;background:radial-gradient(ellipse 55% 90% at 100% 0%,rgba(24,98,138,.30),transparent 80%),linear-gradient(140deg,#082943 0%,#061d34 62%,#051a2e 100%);border:1px solid #244c68;color:#f7fbff;box-shadow:0 24px 44px rgba(9,45,72,.18),inset 0 1px rgba(255,255,255,.06)}
.hourly .eyebrow{color:#75bce2;font-size:11px;margin-bottom:6px}
.hourly .eyebrow-line{background:#397c9c}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 20px}
.section-heading h2{margin:0;color:#fff;font-size:clamp(26px,2.55vw,35px);line-height:1.06;letter-spacing:-.5px;font-weight:800}
.range-note{border-radius:999px;background:rgba(13,71,107,.62);padding:8px 13px;border:1px solid #296587;color:#baddf4;font-size:12px;font-weight:700;white-space:nowrap}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border:1px solid #214f6f;border-radius:14px;background:#061a2d}
.tab{min-width:0;border:1px solid transparent;border-radius:10px;padding:12px 10px;font-size:15px;letter-spacing:.1px;font-weight:800;color:#bcd3e5;background:linear-gradient(180deg,#102e48,#0c273f);cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
.tab:hover:not(.active){background:#194968;color:#fff}.tab.active{border-color:#6bc8ff;color:#fff;background:linear-gradient(145deg,#21a3f1,#096acc 78%);box-shadow:inset 0 1px rgba(255,255,255,.38),0 5px 18px #007ad434}
.segment-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 2px 15px}
.segment-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;font-size:14px;color:#f0f9ff}
.segment-indicator{width:7px;height:7px;background:#5bd9ff;box-shadow:0 0 12px #20aaff9b;border-radius:100%}
.segment-times{font-size:12px;color:#8db5ce;font-weight:700}
.segment-summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.segment-summary .metric{font-size:12px;color:#d0e9fa;border:1px solid #285471;border-radius:999px;padding:5px 10px;background:#0c3552;white-space:nowrap;font-weight:700}
.segment-summary .metric strong{color:#fff;font-size:12px}
.hours{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px;min-height:295px}
.hour{min-width:0;position:relative;min-height:292px;padding:13px 10px 13px;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden;text-align:center;border:1px solid #2b5774;border-radius:17px;background:linear-gradient(162deg,#15415b 0%,#0b2d46 45%,#082337 100%);box-shadow:inset 0 1px #ffffff10,0 7px 15px #0015235e;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hour:hover{transform:translateY(-3px);border-color:#58abd1;box-shadow:inset 0 1px #ffffff17,0 12px 23px #0015237c}
.hour.night{background:linear-gradient(158deg,#102d4b 0%,#0b2942 44%,#081e36 100%)}
.hour:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#69bde6 48%,transparent);opacity:.48;pointer-events:none}
.hour.wet-high:before{background:linear-gradient(90deg,transparent,#f4c38b 48%,transparent);opacity:.88}
.hour-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:3px}
.hour-time{font-size:15px;font-weight:800;color:#f2f9ff;font-variant-numeric:tabular-nums;letter-spacing:.18px}
.daypart{font-size:9px;color:#8cbbd5;letter-spacing:.5px;font-weight:800}
.hour-visual{height:80px;width:100%;display:flex;align-items:center;justify-content:center}
.hour img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 7px #001a2c9a)}
.hour .temp{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.75px;color:#fff;font-variant-numeric:tabular-nums}
.hour-condition{color:#bad6e8;font-size:12px;font-weight:600;line-height:1.15;max-width:100%;min-height:28px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
.hour-rain{width:100%;display:flex;gap:4px;align-items:center;justify-content:center;margin-top:auto}
.drop{display:inline-block;width:10px;height:13px;flex:none;background:linear-gradient(160deg,#a4e8ff,#2999ea);border-radius:0 55% 55% 55%;transform:rotate(45deg);box-shadow:0 1px 5px #0a81dd55}
.rain{font-size:14px;font-weight:800;color:#8ad4ff;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.rain.none{color:#bed2e0}
.rain-meter{width:100%;height:4px;border-radius:8px;background:#214962;overflow:hidden;margin:2px 0 3px}
.rain-meter > span{display:block;height:100%;min-width:0;background:linear-gradient(90deg,#4aa8eb,#8cd9ff);border-radius:inherit;transition:width .2s}
.hour.wet-high .rain-meter > span{background:linear-gradient(90deg,#69c6ff,#f5be75)}
.hour-wind-row{padding-top:8px;border-top:1px solid #244960;display:flex;flex-direction:column;gap:2px;width:100%;align-items:center}
.wind{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;min-width:0;color:#dbf2ff;font-size:13px;font-weight:700}
.wind-arrow{display:inline-block;flex:none;line-height:1;color:#79d5ff;font-size:17px;font-weight:900;transform-origin:center center;filter:drop-shadow(0 0 4px #0088ca50)}
.wind-label{display:inline-block;min-width:0}.gust{font-size:11px;font-weight:600;color:#83b4d2;font-variant-numeric:tabular-nums}
.micro-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 2px 0;font-size:12px;color:#8bb7d1}.precip-dot{font-size:11px;color:#6ec8ff;margin-right:4px}
.loading-hours{grid-column:1/-1;min-height:275px;display:flex;align-items:center;justify-content:center;color:#b6d7ed;font-size:15px}
.footer{display:flex;justify-content:space-between;gap:15px;color:#618095;font-size:12px;line-height:1.55;padding:18px 4px 0;flex-wrap:wrap}.footer a{color:#0c89c6;text-underline-offset:2px}
.error{grid-column:1/-1;color:#ffe8de;background:#6b2e35;border:1px solid #af6570;border-radius:12px;padding:18px 20px;font-size:14px}
/* Responsive: retain generous typography; on mobile use a single sideways strip of cards. */
@media(max-width:1160px){
  .shell{width:calc(100% - 38px)}
  .hours{gap:8px}.hour{padding:12px 7px;min-height:285px}
  .hour img{width:69px;height:69px}.hour-visual{height:75px}.hour .temp{font-size:29px}
  .hour-time{font-size:14px}.daypart{font-size:8px}.hour-condition{font-size:11px}.wind{font-size:12px}
}
@media(max-width:960px){
  .hero{min-height:430px}.hero-content{min-height:430px}
  .hours{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-color:#3d7293 #092b47;scrollbar-width:thin;padding:2px 2px 13px;min-height:310px}
  .hour{flex:0 0 159px;min-height:290px;scroll-snap-align:start;padding:13px 10px}
  .hour img{width:75px;height:75px}.hour-visual{height:78px}.hour .temp{font-size:31px}.hour-condition{font-size:12px}
  .hour-time{font-size:15px}.daypart{font-size:9px}
  .segment-head{flex-wrap:wrap}.segment-summary{justify-content:flex-start}
}
@media(max-width:720px){
  .shell{width:calc(100% - 22px);padding:16px 0 22px}
  .topline{align-items:flex-start;flex-wrap:wrap;gap:4px}.brand{font-size:13px}.loc{font-size:12px}
  .intro{margin:23px 3px 18px;align-items:flex-start;flex-direction:column;gap:14px}.eyebrow{font-size:10px;letter-spacing:1.55px}.eyebrow-line{width:13px;margin:0 5px}
  .intro h1{font-size:clamp(34px,8vw,45px);letter-spacing:-1.3px}.subtitle{font-size:14px;margin-top:10px}
  .update{font-size:11px;padding:7px 12px}
  .hero{border-radius:21px;min-height:565px}.hero-content{padding:18px 19px 19px;min-height:565px;gap:16px}
  .hero-head{gap:8px;align-items:flex-start}.pill{font-size:9px;letter-spacing:.7px;padding:8px 10px}.pulse{width:6px;height:6px}
  .hero-head .period{max-width:48%;font-size:11px;padding:8px 10px;border-radius:9px}
  .hero-main{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;max-width:100%;margin:0}
  .big-icon{width:112px;height:112px}.hero-kicker{font-size:10px;margin-bottom:6px}
  .hero h2{font-size:clamp(25px,6vw,32px);line-height:1.08}.hero-text p:last-child{font-size:14px;line-height:1.48}
  .photo-overlay{background:linear-gradient(90deg,rgba(3,21,42,.94) 0%,rgba(3,27,48,.76) 67%,rgba(6,33,52,.30)),linear-gradient(0deg,rgba(2,16,30,.85),transparent 68%)}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .stat{padding:10px 9px 10px 13px}.stat:before{top:10px;bottom:10px;width:2px}.stat span{font-size:9px;letter-spacing:.45px}.stat strong{font-size:20px}.stat small{font-size:10px}
  .hourly{padding:21px 12px 17px;border-radius:21px;margin-top:15px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:14px}.section-heading h2{font-size:27px}
  .range-note{font-size:11px;padding:6px 10px}.tabs{gap:3px;padding:4px}.tab{font-size:12px;padding:12px 4px}
  .segment-head{gap:9px;margin:14px 2px 13px}.segment-name{font-size:12px}.segment-times{font-size:11px}
  .segment-summary{gap:5px}.segment-summary .metric{font-size:10px;padding:5px 8px}
  .hour{flex-basis:166px;min-height:293px}.hours{min-height:314px;gap:9px}
  .micro-note{font-size:10px;flex-wrap:wrap;margin-top:10px}.footer{padding-top:14px;font-size:11px}
}
@media(max-width:385px){
  .hero-head{flex-wrap:wrap}.hero-head .period{max-width:100%}.hero{min-height:615px}.hero-content{min-height:615px}
  .intro h1{font-size:34px}.hero-stats .stat strong{font-size:18px}.pill{font-size:9px}
  .hour{flex-basis:156px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}