/* Startsidan — apprad, nyheter/evenemang/kommun, sidospalt, tjänstegrid.
   Bygger vidare på style.css (samma tokens: --bg --ink --muted --line --navy --orange). */

:root{
  --navy-2:#1e2636; --navy-3:#2c364a;
  --surface:#fff; --surface-2:#f6f8fb;
  --t2:#4a5568; --t3:#64748b; --line-2:#eef1f6;
  --ok:#16a34a; --ok-bg:#dcfce7;
  --sh-sm:0 1px 2px rgba(20,26,38,.06),0 1px 3px rgba(20,26,38,.05);
  --sh:0 8px 24px -8px rgba(20,26,38,.18),0 2px 8px rgba(20,26,38,.05);
  --sh-lg:0 24px 60px -18px rgba(20,26,38,.30);
  --rr:14px; --rr-lg:20px;
}
.hem{max-width:1440px}

/* ---- apprad ---- */
.apps{padding:18px 0 4px}
.apps .row{display:grid;grid-template-columns:repeat(11,1fr);gap:10px}
.app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;border-radius:var(--rr);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);text-decoration:none;transition:.15s}
.app:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--orange)}
.app .ai{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px -4px rgba(20,26,38,.35)}
.app .ai svg{width:23px;height:23px}
.app span{font-size:12px;font-weight:700;color:var(--t2);white-space:nowrap}
.app.soon{opacity:.55}
.app.soon:hover{transform:none;box-shadow:var(--sh-sm);border-color:var(--line)}

.g-orange{background:linear-gradient(135deg,#ffb648,#e8940c)}
.g-amber{background:linear-gradient(135deg,#f5a623,#c9700a)}
.g-navy{background:linear-gradient(135deg,#2c374d,#141a26)}
.g-steel{background:linear-gradient(135deg,#4a5a78,#26314a)}
.g-teal{background:linear-gradient(135deg,#2f8f83,#17564f)}
.g-blue{background:linear-gradient(135deg,#3d6ea8,#1f3f68)}
.g-plum{background:linear-gradient(135deg,#7a5a8e,#452f55)}
.g-clay{background:linear-gradient(135deg,#c2703f,#8a4620)}
.g-moss{background:linear-gradient(135deg,#5f8a45,#345123)}
.g-slate{background:linear-gradient(135deg,#5c6b82,#333e52)}
.g-rust{background:linear-gradient(135deg,#b5563c,#7a3020)}

/* ---- tvåspaltslayout ---- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;padding:20px 0 8px}
.main{display:flex;flex-direction:column;gap:20px;min-width:0}
.side{display:flex;flex-direction:column;gap:20px}
.hpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rr-lg);box-shadow:var(--sh-sm);overflow:hidden}
.hpanel-h{display:flex;align-items:center;gap:12px;padding:16px 20px 0;flex-wrap:wrap}
.hpanel-h h2{font-size:19px;display:flex;align-items:center;gap:9px;margin:0}
.hpanel-h h2 svg{width:19px;height:19px;color:var(--orange-ink)}
.hpanel-h .hint{font-size:12.5px;font-weight:600;color:var(--t3)}
.hpanel-h .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--orange-ink);text-decoration:none}
.hpanel-h .more:hover{text-decoration:underline}
.hpanel-h .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--ok);background:var(--ok-bg);padding:3px 10px;border-radius:999px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:hpl 2s infinite}
@keyframes hpl{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}

/* ---- nyheter ---- */
.tabs{display:flex;gap:2px;padding:12px 20px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-size:13.5px;font-weight:700;color:var(--t3);padding:9px 13px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--orange-ink);border-bottom-color:var(--orange)}
.news{padding:16px 20px 20px}
.featured{display:block;position:relative;border-radius:var(--rr);overflow:hidden;margin-bottom:16px;min-height:250px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none}
.featured .fimg{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy-2),var(--navy-3) 45%,#3a4a68) center/cover;display:grid;place-items:center;color:rgba(255,255,255,.10)}
.featured .fimg svg{width:110px;height:110px}
.featured .fover{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,14,22,.90) 82%)}
.featured .ftxt{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff}
.featured .fsrc{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--orange)}
.featured h3{font-size:clamp(18px,2.4vw,24px);line-height:1.25;margin:5px 0 0;color:#fff}
.featured p{font-size:13.5px;color:#cbd5e1;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nitem{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line-2);text-decoration:none}
.nitem .thumb{width:86px;height:64px;border-radius:9px;background:var(--surface-2) center/cover;border:1px solid var(--line);flex:none;display:grid;place-items:center;color:var(--t3)}
.nitem .thumb svg{width:20px;height:20px}
.nitem .nt{flex:1;min-width:0}
.nitem h4{font-size:14.5px;font-weight:700;margin:0}
.nitem:hover h4{color:var(--orange-ink)}
.nmeta{display:flex;gap:8px;align-items:center;margin-top:5px;font-size:12px;color:var(--t3);flex-wrap:wrap}
.ncat{font-weight:800;color:var(--orange-ink);background:rgba(245,166,35,.13);padding:1px 8px;border-radius:6px;font-size:11px}
.nmore{display:block;text-align:center;padding:13px;font-weight:700;color:var(--orange-ink);font-size:14px;border-top:1px solid var(--line-2);text-decoration:none}
.nmore:hover{background:var(--surface-2)}

/* ---- evenemang ---- */
.ev-list{padding:8px 20px 6px}
.ev{display:flex;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line-2);text-decoration:none}
.ev:first-child{border-top:0}
.ev-date{width:54px;height:58px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;align-content:center;flex:none;line-height:1.05}
.ev-date .d{font-size:21px;font-weight:900;color:var(--orange-ink)}
.ev-date .m{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--t3);letter-spacing:.05em}
.ev:hover .ev-date{border-color:var(--orange);background:rgba(245,166,35,.09)}
.ev-t{flex:1;min-width:0}
.ev-t h4{font-size:14.5px;font-weight:700;margin:0}
.ev:hover .ev-t h4{color:var(--orange-ink)}
.ev-meta{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:var(--t3);flex-wrap:wrap}
.ev-cat{font-weight:800;color:var(--orange-ink);background:rgba(245,166,35,.13);padding:1px 8px;border-radius:6px;font-size:11px}

/* ---- kommunsök ---- */
.km-body{padding:16px 20px 20px}
.km-search{display:flex;gap:9px;position:relative}
.km-search input{flex:1;min-width:0;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:11px;padding:11px 15px;background:var(--surface-2);color:var(--ink)}
.km-search input:focus{outline:none;border-color:var(--orange);background:var(--surface)}
.km-geo{display:grid;place-items:center;width:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--t3);cursor:pointer;flex:none;transition:.15s}
.km-geo:hover{color:var(--orange-ink);border-color:var(--orange)}
.km-geo svg{width:18px;height:18px}
.km-geo.busy{opacity:.5;cursor:progress}
.km-sug{position:absolute;top:calc(100% + 6px);left:0;right:53px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);z-index:30;overflow:hidden;display:none}
.km-sug.open{display:block}
.km-sug button{display:flex;width:100%;align-items:baseline;gap:9px;padding:9px 14px;background:none;border:0;border-top:1px solid var(--line-2);font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.km-sug button:first-child{border-top:0}
.km-sug button:hover,.km-sug button.sel{background:rgba(245,166,35,.12)}
.km-sug .sg-n{font-weight:700}
.km-sug .sg-s{margin-left:auto;font-size:12.5px;color:var(--t3)}
.km-none{padding:11px 14px;font-size:13.5px;color:var(--t3)}
.km-res{margin-top:16px}
.km-name{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}
.km-name b{color:var(--ink);font-size:19px;text-transform:none;letter-spacing:-.01em;display:block;margin-top:2px}
.km-cards{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:12px;margin-top:12px}
.km-c{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--rr);padding:14px 16px}
.km-c.hero{background:var(--navy);border-color:var(--navy)}
.km-c .kl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.km-c.hero .kl{color:#8a97ad}
.km-c .kv{font-size:27px;font-weight:900;letter-spacing:-.02em;margin-top:5px}
.km-c.hero .kv{color:var(--orange)}
.km-c .ks{font-size:11.5px;color:var(--t3);margin-top:3px}
.km-c.hero .ks{color:#8a97ad}
.km-cmp{font-size:12.5px;color:var(--t3);margin-top:11px}
.km-cmp b{color:var(--ink)}
.km-cmp .up{color:#c2703f;font-weight:800}
.km-cmp .dn{color:var(--ok);font-weight:800}
.km-link{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:14px;font-weight:700;color:var(--orange-ink);text-decoration:none}
.km-link:hover{text-decoration:underline}

/* ---- sidospalt ---- */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--rr-lg);box-shadow:var(--sh-sm);padding:18px 20px}
.widget h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin:0 0 13px;display:flex;align-items:center;gap:8px}
.widget h3 svg{width:16px;height:16px;color:var(--orange-ink)}
.wx-head{margin-left:auto;display:flex;align-items:center;gap:6px}
.wx-sel{font:inherit;font-size:11.5px;font-weight:700;color:var(--orange-ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:3px 6px;text-transform:none;letter-spacing:0;cursor:pointer;max-width:120px}
.wx-sel:focus{outline:none;border-color:var(--orange)}
.wx-geo{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--t3);cursor:pointer;flex:none;transition:.15s}
.wx-geo:hover{color:var(--orange-ink);border-color:var(--orange)}
.wx-geo svg{width:14px;height:14px}
.wx-geo.busy{opacity:.5;cursor:progress}
.wx-now{display:flex;align-items:center;gap:14px}
.wx-now .wx-ic{font-size:44px;line-height:1}
.wx-now .wx-t{font-size:36px;font-weight:900;letter-spacing:-.03em}
.wx-now .wx-d{font-size:13px;color:var(--t2)}
.wx-row{display:flex;justify-content:space-between;font-size:13px;color:var(--t2);padding:6px 0;border-top:1px solid var(--line-2);margin-top:8px}
.wx-row b{color:var(--ink);font-weight:800}
.wx-det{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--t3);padding-top:8px;border-top:1px solid var(--line-2)}
.wx-days{margin-top:6px}
.wx-day{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);padding:6px 0;border-top:1px solid var(--line-2)}
.wx-day .wd-name{width:40px;font-weight:700;color:var(--ink)}
.wx-day .wd-ic{font-size:17px;width:22px;text-align:center}
.wx-day .wd-mid{display:flex;flex-direction:column;gap:1px;width:48px;font-size:11px;line-height:1.3}
.wx-day .wd-mid .wd-pop{color:var(--orange-ink);font-weight:700}
.wx-day .wd-mid .wd-wind{color:var(--t3)}
.wx-day .wd-mm{margin-left:auto;white-space:nowrap}
.wx-day.wx-today{background:rgba(245,166,35,.10);border-radius:10px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.wx-day.wx-today .wd-name{color:var(--orange-ink)}
.wx-day.wx-today .wd-mm{font-weight:800;color:var(--ink)}
.wx-hours{display:flex;overflow-x:auto;gap:2px;padding:8px 0 2px;border-top:1px solid var(--line-2);margin-top:2px}
.wx-h{min-width:46px;text-align:center;font-size:12px;color:var(--t2);padding:4px 2px;flex:none}
.wx-h .hh{font-weight:700;color:var(--ink)}
.wx-h .hi{font-size:16px;line-height:1.4}
.wx-h .hp{font-size:10.5px;color:var(--orange-ink);min-height:13px;font-weight:700}
.wx-h .hw{font-size:10.5px;color:var(--t3)}

.el-now{display:flex;align-items:baseline;gap:10px}
.el-now .el-v{font-size:38px;font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.el-now .el-u{font-size:13px;color:var(--t2);font-weight:700}
.el-zon{font-size:12.5px;color:var(--t3);margin-top:2px}
.el-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--t2);padding:7px 0;border-top:1px solid var(--line-2);margin-top:9px}
.el-row b{color:var(--ink);font-weight:800}
.el-bars{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2)}
.el-bars i{flex:1;background:var(--line);border-radius:3px 3px 0 0;display:block}
.el-bars i.hi{background:var(--orange)}
.el-bars i.lo{background:var(--ok)}
.el-note{font-size:11px;color:var(--t3);margin-top:9px}
.el-note a{color:var(--orange-ink);font-weight:700;text-decoration:none}

.qlinks{display:flex;flex-direction:column}
.qlinks a{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-weight:600;font-size:14px;color:var(--t2);text-decoration:none}
.qlinks a:first-child{border-top:0}
.qlinks a:hover{color:var(--orange-ink)}
.qlinks .qic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.qlinks .qic svg{width:15px;height:15px}
.qlinks .arr{margin-left:auto;color:var(--t3);font-weight:400}
.newbox{border:1px dashed rgba(245,166,35,.5);background:rgba(245,166,35,.07);border-radius:var(--rr);padding:13px 14px;font-size:13px;color:var(--t2)}
.newbox+.newbox{margin-top:10px}
.newbox b{color:var(--ink)}
.newbox a{color:var(--orange-ink);font-weight:700;text-decoration:none}

/* ---- tjänster ---- */
.services{padding:26px 0 10px}
.sec-h{text-align:center;max-width:640px;margin:0 auto 28px}
.sec-h .ey{color:var(--orange-ink);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.sec-h h2{font-size:clamp(24px,3.4vw,32px);margin:8px 0 0}
.sec-h p{color:var(--t2);margin-top:10px}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--rr-lg);padding:22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:.15s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.svc .ai{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;margin-bottom:14px;box-shadow:0 6px 14px -4px rgba(20,26,38,.35)}
.svc .ai svg{width:24px;height:24px}
.svc h3{font-size:17px;margin:0}
.svc .dom{font-size:12px;color:var(--orange-ink);font-weight:700;margin:2px 0 8px}
.svc p{color:var(--t2);font-size:13.5px;margin:0 0 16px;flex:1}
.svc .hbtn{align-self:flex-start;padding:8px 15px;font-size:13px;border-radius:11px;font-weight:700;background:var(--surface-2);color:var(--t2);border:1px solid var(--line);text-decoration:none;display:inline-block;transition:.15s}
.svc .hbtn:hover{color:var(--ink);border-color:var(--orange)}
.svc.soon{border-style:dashed;background:transparent;box-shadow:none}
.svc.soon:hover{transform:none;box-shadow:none}
.svc.soon .ai{background:var(--surface-2);color:var(--t3);border:1px dashed var(--line);box-shadow:none}
.svc.soon h3,.svc.soon .dom,.svc.soon p{color:var(--t3)}

/* ---- CTA ---- */
.ctaband{margin:26px 0 0;background:linear-gradient(135deg,var(--navy) 0%,#243050 55%,#3a2a12 100%);border-radius:var(--rr-lg);color:#fff;padding:34px 38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:var(--sh-lg)}
.ctaband .cb-t{flex:1;min-width:280px}
.ctaband .cb-ey{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.ctaband h2{font-size:clamp(22px,3vw,30px);margin:6px 0 0}
.ctaband p{margin:10px 0 0;color:#c3cddd;font-size:15px;max-width:640px}
.ctaband .hbtn{background:var(--orange);color:#2a1c00;flex:none;padding:11px 18px;border-radius:11px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.ctaband .hbtn:hover{background:#ffc260}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .apps .row{grid-template-columns:repeat(6,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .apps .row{grid-template-columns:repeat(3,1fr)}
  .app span{font-size:10.5px}
  .svc-grid{grid-template-columns:1fr}
  .km-cards{grid-template-columns:1fr}
  .ctaband{padding:26px 22px}
}