/* Villalivet Läge 1.1.0 */
.vllg{--vllg-rubrikfont:"Fraunces",Georgia,"Times New Roman",serif;--vllg-brodfont:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;container-type:inline-size;display:block;width:100%;max-width:980px;margin:0 auto}
.vllg.is-tom{display:none}

/* Platsreservering medan annonsen laddar, så att sidan inte hoppar */
.vllg:not(.is-klar):not(.is-tom)[data-format=mpu]{aspect-ratio:6/5}
.vllg:not(.is-klar):not(.is-tom)[data-format=sky]{aspect-ratio:1/2}
.vllg:not(.is-klar):not(.is-tom)[data-format=panorama]{aspect-ratio:5/8}
@container (min-width:600px){.vllg:not(.is-klar):not(.is-tom)[data-format=panorama]{aspect-ratio:auto;height:240px}}
.vllg:not(.is-klar):not(.is-tom)[data-format=mpu],.vllg:not(.is-klar):not(.is-tom)[data-format=sky],.vllg:not(.is-klar):not(.is-tom)[data-format=panorama]{border-radius:14px;background:linear-gradient(100deg,#eef0ee 30%,#f7f8f7 50%,#eef0ee 70%) 0 0/300% 100%;animation:vllg-skimmer 1.4s linear infinite}
@supports not (container-type:inline-size){.vllg:not(.is-klar):not(.is-tom)[data-format=panorama]{aspect-ratio:auto;height:240px}}
@keyframes vllg-skimmer{to{background-position:-150% 0}}

/* Grund */
.vllg-kort,.vllg-kort *{box-sizing:border-box}
.vllg-kort{--vllg-farg:#1f5c3f;--vllg-chipbg:#eef3ef;--vllg-chip:#1f5c3f;position:relative;height:100%;background:#fff;border:1px solid rgba(20,32,26,.09);border-radius:14px;overflow:hidden;color:#18201c;font-family:var(--vllg-brodfont);text-align:left;box-shadow:0 1px 2px rgba(16,24,20,.05),0 10px 28px -14px rgba(16,24,20,.22);transition:transform .25s ease,box-shadow .25s ease;animation:vllg-in .45s cubic-bezier(.2,.7,.2,1) both}
.vllg-kort:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(16,24,20,.05),0 16px 36px -16px rgba(16,24,20,.32)}
@keyframes vllg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vllg-lank{display:flex;flex-direction:column;height:100%;color:inherit!important;text-decoration:none!important;box-shadow:none!important;border:0!important}
.vllg-lank:focus-visible{outline:3px solid var(--vllg-farg);outline-offset:-3px;border-radius:14px}

/* Bild med stor siffra */
.vllg-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--vllg-farg),#0e1a14)}
.vllg-media__bild{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vllg-kort:hover .vllg-media__bild{transform:scale(1.045)}
.vllg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,11,.62) 0,rgba(8,14,11,.18) 45%,rgba(8,14,11,0) 70%);pointer-events:none}
.vllg--sasong .vllg-media::after{background:linear-gradient(to top,rgba(8,14,11,.25),rgba(8,14,11,0) 50%)}
.vllg-media__monster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.16}
.vllg-media__monster svg{width:62%;height:62%;stroke-width:1.2}
.vllg-tal{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.vllg-tal b{font-family:var(--vllg-rubrikfont);font-size:52px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vllg-tal i{font-style:normal;font-size:17px;font-weight:700;margin-left:4px;vertical-align:top;position:relative;top:6px}
.vllg-tal small{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.vllg-markning{position:absolute;top:10px;right:10px;z-index:2;padding:4px 8px;border-radius:999px;background:rgba(10,16,13,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1}

/* Innehåll */
.vllg-innehall{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1;min-width:0;padding:16px 16px 14px}
.vllg-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 11px 5px 9px;border-radius:999px;background:var(--vllg-chipbg);color:var(--vllg-chip);font-size:12px;font-weight:700;line-height:1.3}
.vllg-chip svg{flex:0 0 auto}
.vllg-chip__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vllg-puls{position:relative;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor}
.vllg-puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:vllg-puls 2s ease-out infinite}
@keyframes vllg-puls{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.vllg-rubrik{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-family:var(--vllg-rubrikfont);font-size:22px;line-height:1.18;font-weight:700;letter-spacing:-.015em;color:#121915}
.vllg-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:15px;line-height:1.45;color:#4b5550}

/* Graf */
.vllg-graf{display:block;width:100%;padding:9px 11px 7px;border-radius:10px;background:var(--vllg-chipbg);color:var(--vllg-chip)}
.vllg-graf__rubrik{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;line-height:1.2;color:#47514c}
.vllg-graf__kalla{font-weight:600;color:#7f8883;white-space:nowrap}
.vllg-graf__svg{display:block;width:100%;height:auto;margin:6px 0 3px;overflow:visible}
.vllg-graf__linje{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.vllg-graf__noll{stroke:currentColor;stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.vllg-graf__punkt{fill:#fff;stroke:currentColor;stroke-width:2.2}
.vllg-graf__nu{fill:currentColor}
.vllg-graf__stapel{fill:currentColor;opacity:.28;transform-box:fill-box;transform-origin:50% 100%}
.vllg-graf__stapel.is-markerad{opacity:1}
.vllg-graf__axel{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:#86908b;font-variant-numeric:tabular-nums}

/* Knapp och avsändare */
.vllg-rad{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:auto;padding-top:2px}
.vllg-knapp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 20px;border-radius:999px;background:var(--vllg-farg);color:#fff;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 6px 16px -8px var(--vllg-farg);transition:filter .2s ease}
.vllg-knapp svg{transition:transform .25s ease}
.vllg-lank:hover .vllg-knapp{filter:brightness(1.12)}
.vllg-lank:hover .vllg-knapp svg{transform:translateX(3px)}
.vllg-avs{display:flex;align-items:center;gap:6px;min-width:0}
.vllg-avs__markning{display:none;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b746f}
.vllg-logga{display:block;max-height:24px!important;width:auto!important;max-width:96px!important;margin:0!important;object-fit:contain}
.vllg-avs__namn{font-size:12px;font-weight:700;color:#5d6762;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Färger per läge */
.vllg--frost{--vllg-chipbg:#e8f1fb;--vllg-chip:#1d5fa8}
.vllg--storm{--vllg-chipbg:#edf0f4;--vllg-chip:#34434e}
.vllg--skyfall{--vllg-chipbg:#e3f3f3;--vllg-chip:#0f6a6a}
.vllg--snolast{--vllg-chipbg:#eef4fb;--vllg-chip:#3a6ea5}
.vllg--varme{--vllg-chipbg:#fdefe5;--vllg-chip:#b4501c}
.vllg--elhog{--vllg-chipbg:#fdecea;--vllg-chip:#b42318}
.vllg--ellag{--vllg-chipbg:#e7f6ec;--vllg-chip:#1f7a3e}

/* Animation när annonsen syns (skriptet lägger till klasserna) */
.vllg.is-anim .vllg-graf__linje{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1) .15s}
.vllg.is-anim .vllg-graf__yta,.vllg.is-anim .vllg-graf__punkt{opacity:0;transition:opacity .5s ease .9s}
.vllg.is-anim .vllg-graf__stapel{transform:scaleY(0);transition:transform .7s cubic-bezier(.3,.7,.2,1) .1s}
.vllg.is-anim.is-synlig .vllg-graf__linje{stroke-dashoffset:0}
.vllg.is-anim.is-synlig .vllg-graf__yta,.vllg.is-anim.is-synlig .vllg-graf__punkt{opacity:1}
.vllg.is-anim.is-synlig .vllg-graf__stapel{transform:none}

/* Mycket smal plats */
@container (max-width:260px){
	.vllg-innehall{padding:12px 12px 12px;gap:7px}
	.vllg-tal b{font-size:40px}
	.vllg-rubrik{font-size:18px}
	.vllg-text{font-size:14px}
	.vllg-rad{flex-direction:column;align-items:stretch}
	.vllg-knapp{justify-content:center}
	.vllg-avs{justify-content:center}
}

/* MPU 300×250: bilden fyller hela ytan, texten ligger ovanpå */
.vllg[data-format=mpu] .vllg-kort{aspect-ratio:6/5;height:auto}
.vllg[data-format=mpu] .vllg-lank{position:relative}
.vllg[data-format=mpu] .vllg-media{position:absolute;inset:0;aspect-ratio:auto}
.vllg[data-format=mpu] .vllg-media::after{background:linear-gradient(to top,rgba(8,14,11,.88) 0,rgba(8,14,11,.55) 42%,rgba(8,14,11,.08) 72%,rgba(8,14,11,.28) 100%)}
.vllg[data-format=mpu] .vllg-tal{left:14px;bottom:auto;top:46px}
.vllg[data-format=mpu] .vllg-tal b{font-size:44px}
.vllg[data-format=mpu] .vllg-innehall{position:relative;z-index:2;justify-content:flex-end;gap:7px;padding:12px 14px 14px;color:#fff}
.vllg[data-format=mpu] .vllg-markning{display:none}
.vllg[data-format=mpu] .vllg-avs__markning{display:inline}
.vllg[data-format=mpu] .vllg-chip{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);font-size:11.5px;background:rgba(255,255,255,.94);box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
.vllg[data-format=mpu] .vllg-rubrik{font-size:19px;-webkit-line-clamp:2;color:#fff}
.vllg[data-format=mpu] .vllg-text{font-size:13.5px;line-height:1.35;-webkit-line-clamp:2;color:rgba(255,255,255,.86)}
.vllg[data-format=mpu] .vllg-graf{display:none}
.vllg[data-format=mpu] .vllg--tal .vllg-text{display:none}
.vllg[data-format=mpu] .vllg--tal .vllg-rubrik{font-size:20px}
.vllg[data-format=mpu] .vllg-rad{margin-top:4px;flex-direction:row;align-items:center}
.vllg[data-format=mpu] .vllg-knapp{min-height:38px;min-width:0;padding:0 15px;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.vllg[data-format=mpu] .vllg-knapp svg{display:none}
.vllg[data-format=mpu] .vllg-avs{flex-shrink:0;gap:5px}
.vllg[data-format=mpu] .vllg-avs__markning{font-size:8.5px}
.vllg[data-format=mpu] .vllg-avs{padding:5px 9px;border-radius:999px;background:#fff}
.vllg[data-format=mpu] .vllg-logga{max-height:18px!important;max-width:64px!important}
.vllg[data-format=mpu] .vllg-avs__namn{font-size:11px;color:#27302b}
.vllg[data-format=mpu] .vllg-kort:not(.vllg--tal) .vllg-media::after{background:linear-gradient(to top,rgba(8,14,11,.85) 0,rgba(8,14,11,.4) 50%,rgba(8,14,11,0) 75%)}

/* Skyscraper 300×600 */
.vllg[data-format=sky] .vllg-kort{aspect-ratio:1/2;height:auto}
.vllg[data-format=sky] .vllg-media{flex:0 0 40%;aspect-ratio:auto}
.vllg[data-format=sky] .vllg-text{-webkit-line-clamp:4}

/* Panorama 980×240 och fritt format på bred yta */
@container (min-width:600px){
	.vllg[data-format=panorama] .vllg-kort{height:240px}
	.vllg[data-format=auto] .vllg-kort{min-height:240px}
	.vllg[data-format=panorama] .vllg-lank,.vllg[data-format=auto] .vllg-lank{flex-direction:row}
	.vllg[data-format=panorama] .vllg-media,.vllg[data-format=auto] .vllg-media{flex:0 0 36%;aspect-ratio:auto}
	.vllg[data-format=panorama] .vllg-innehall,.vllg[data-format=auto] .vllg-innehall{justify-content:center;padding:20px 24px}
	.vllg[data-format=panorama] .vllg-rubrik,.vllg[data-format=auto] .vllg-rubrik{font-size:25px;-webkit-line-clamp:2}
	.vllg[data-format=panorama] .vllg-text,.vllg[data-format=auto] .vllg-text{-webkit-line-clamp:2}
	.vllg[data-format=panorama] .vllg-rad,.vllg[data-format=auto] .vllg-rad{margin-top:4px}
	.vllg[data-format=panorama] .vllg-graf{display:none}
	.vllg[data-format=panorama] .vllg-tal b,.vllg[data-format=auto] .vllg-tal b{font-size:58px}
}
@container (min-width:780px){
	.vllg[data-format=panorama] .vllg-media,.vllg[data-format=auto] .vllg-media{flex-basis:30%}
	.vllg[data-format=panorama] .vllg--graf .vllg-innehall,.vllg[data-format=auto] .vllg--graf .vllg-innehall{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:24px;row-gap:9px;align-content:center;justify-items:start}
	.vllg[data-format=panorama] .vllg--graf .vllg-innehall>*,.vllg[data-format=auto] .vllg--graf .vllg-innehall>*{grid-column:1}
	.vllg[data-format=panorama] .vllg--graf .vllg-graf,.vllg[data-format=auto] .vllg--graf .vllg-graf{display:block;grid-column:2;grid-row:1/span 4;align-self:center}
}

@media (prefers-reduced-motion:reduce){
	.vllg-kort,.vllg-puls::after,.vllg:not(.is-klar){animation:none!important}
	.vllg-kort,.vllg-media__bild,.vllg-knapp svg{transition:none!important}
	.vllg.is-anim .vllg-graf__linje{stroke-dashoffset:0}
	.vllg.is-anim .vllg-graf__yta,.vllg.is-anim .vllg-graf__punkt{opacity:1}
	.vllg.is-anim .vllg-graf__stapel{transform:none}
}