/* Villalivet Annonsplatser 1.3.3. Brytpunkter som temat: dator från 1019 px, surfplatta 768 till 1018 px, mobil upp till 767 px. */
.vlan{display:flex;flex-direction:column;align-items:center;gap:6px;clear:both;box-sizing:border-box;width:100%;max-width:1200px;margin:28px auto;padding:10px 12px 14px;border-radius:14px;background:#f6f5f1;text-align:center}
.vlan *{box-sizing:border-box}
.vlan-l{display:block;font-family:var(--vl-sans,system-ui,sans-serif);font-size:10.5px;font-weight:800;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;color:#6b746d}
/* Platsen reserveras efter formatets proportioner, så att den stämmer även när den skalas ned i en smal spalt. */
/* 1.3.3: Reservationen ligger i ::before, i samma rutnätscell som annonsen. Rutan blir då minst
   formatets höjd medan sidan laddar, men växer om annonsen är högre (till exempel Homelet på mobil).
   Annonsen kan aldrig sticka ut över blocken runt omkring. */
.vlan-in{display:grid;grid-template:minmax(0,auto)/minmax(0,1fr);place-items:center;width:100%;overflow:hidden;--r:auto}
.vlan-in::before{content:"";grid-area:1/1;width:100%;aspect-ratio:var(--r)}
.vlan-in>*{grid-area:1/1;width:100%;min-width:0}
.vlan-in>.vlan-prov{align-self:stretch}
/* När annonsen har kommit gäller annonsens egen höjd, så att en låg annons inte står i en hög tom ruta. */
.vlan.is-laddad .vlan-in::before{display:none}
/* En bred bildannons i en smal plats (panorama där platsen är 300x250) får fylla hela rutans bredd. */
.vlan.is-bredbild .vlan-in{max-width:100%!important}
.vlan.is-bredbild .vlan-in>div,.vlan.is-bredbild .vlan-in>div>div{width:100%!important;max-width:100%!important}
.vlan.is-bredbild .vlan-in a:has(>img:only-child){display:block;width:100%!important;max-width:100%!important}
.vlan.is-bredbild .vlan-in a>img:only-child,.vlan.is-bredbild .vlan-in>div>img:only-child,.vlan.is-bredbild .vlan-in>div>div>img:only-child{width:100%!important;height:auto!important}
/* Bara bildannonser skalas: en bild som ensam ligger i länken eller i annonsens ram. HTML-annonser,
   som Homelet, har egna bilder och loggor med egen storlek och lämnas orörda. */
.vlan-in a>img:only-child,.vlan-in>div>img:only-child,.vlan-in>div>div>img:only-child{display:block;max-width:100%;height:auto;margin:0 auto!important;border:0}
.vlan-in iframe{display:block;max-width:100%;margin:0 auto!important;border:0}
.vlan-a{display:block;line-height:0}
.vlan-a:focus-visible{outline:3px solid rgba(31,107,69,.45);outline-offset:3px;border-radius:4px}
/* I texten: samma bredd som texten och lite mer luft. */
.vlan.is-text{margin:32px auto}
/* Förhandsvisning för den som administrerar sajten. */
.vlan-prov{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:100%;border:2px dashed #c9c3b5;border-radius:8px;font:13px/1.4 var(--vl-sans,system-ui,sans-serif);color:#6b746d}
.vlan-prov b{font-size:14px;color:#16201a}

/* Mobil */
@media (max-width:767px){
	.vlan{margin:22px auto;padding:8px 8px 12px;border-radius:12px}
	.vlan-in{max-width:var(--w-m,100%);--r:var(--r-m,auto)}
	.vlan.is-utan-m{display:none!important}
}
/* Surfplatta */
@media (min-width:768px) and (max-width:1018px){
	.vlan-in{max-width:var(--w-t,100%);--r:var(--r-t,auto)}
	.vlan.is-utan-t{display:none!important}
}
/* Dator */
@media (min-width:1019px){
	.vlan-in{max-width:var(--w-d,100%);--r:var(--r-d,auto)}
	.vlan.is-utan-d{display:none!important}
	.vlan.is-sticky{position:sticky;top:96px;margin-top:0}
	body.admin-bar .vlan.is-sticky{top:128px}
	/* Smala platser, som högerkolumnen och 300x250, ska inte få en bred bakgrund. */
	.vlan.vlan-artikel-hoger,.vlan.vlan-kategori-hoger,.vlan.vlan-start-inomhus,.vlan.vlan-artikel-text2{width:auto;max-width:100%;display:inline-flex;margin-left:auto;margin-right:auto}
	.vlan.vlan-artikel-text2{display:flex;width:fit-content}
}
/* Breda format (panorama och leaderboard) fyller rutans bredd. Proportionerna behålls, så en 980x240 blir
   till exempel 1046x256 i en bredare spalt. Bildannonser skalas med. Annonser i en ram (iframe) har fast
   storlek från annonsnätverket och visas som förut, centrerade. */
@media (min-width:1019px){
	.vlan.is-bred-d .vlan-in{max-width:100%}
	.vlan.is-bred-d .vlan-in>div,.vlan.is-bred-d .vlan-in>div>div{width:100%!important;max-width:100%!important}
	.vlan.is-bred-d .vlan-in a:has(>img:only-child){display:block;width:100%!important;max-width:100%!important}
	.vlan.is-bred-d .vlan-in a>img:only-child,.vlan.is-bred-d .vlan-in>div>img:only-child,.vlan.is-bred-d .vlan-in>div>div>img:only-child{width:100%!important;height:auto!important}
}
@media (min-width:768px) and (max-width:1018px){
	.vlan.is-bred-t .vlan-in{max-width:100%}
	.vlan.is-bred-t .vlan-in>div,.vlan.is-bred-t .vlan-in>div>div{width:100%!important;max-width:100%!important}
	.vlan.is-bred-t .vlan-in a:has(>img:only-child){display:block;width:100%!important;max-width:100%!important}
	.vlan.is-bred-t .vlan-in a>img:only-child,.vlan.is-bred-t .vlan-in>div>img:only-child,.vlan.is-bred-t .vlan-in>div>div>img:only-child{width:100%!important;height:auto!important}
}
@media print{.vlan{display:none!important}}
/* En plats där ingen annons visades fälls ihop. */
.vlan.is-tom{display:none!important}