/* Annonseslot — samme system på forside og artikkel.
   Merkelappen ligger i CSS så den aldri kan glemmes på en enkelt flate. */

.ad-slot{
  display:block;
  min-height:100px;
  margin:1rem 0;
  contain:layout;
}
/* «Annonse» står også over husbanneret. Det er markedsføring, vår egen, og
   merkeplikten gjelder uansett hvem som har betalt. Merkelappen ligger i
   CSS, så den aldri kan glemmes på en enkelt flate.

   Ramme rundt den reserverte flaten, så det går an å se hvor annonsen
   kommer. Stiplet og i kantlinjefargen: den skal lese som avsatt plass,
   ikke som en ramme rundt innhold.

   min-height beholdes med vilje. Fjernet vi den, ville rammen vist
   husbannerets størrelse i stedet for annonsens, og da viser den ingenting
   nyttig. */
.ad-slot[data-hus]{
  border:1px dashed var(--rule-2);
  border-radius:4px;
  padding:0.75rem;
  /* Kolonne, ikke rad: merkelappen er et ::before og må stå OVER
     banneret, ikke ved siden av det. */
  display:flex;flex-direction:column;justify-content:center;
}
.ad-slot[data-hus] .husbanner{width:100%;margin-block:0}


.ad-slot::before{
  content:"Annonse";
  display:block;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}

/* Aldri height, alltid min-height: større annonser skal få plass
   uten å bli beskåret. Feltet kollapser aldri når det står tomt —
   en kollaps er et nytt layout-hopp. */

.ad-slot--top    { min-height:100px }
.ad-slot--inline { min-height:250px }
.ad-slot--feed   { min-height:250px }
.ad-slot--rail   { min-height:600px }
.ad-slot--end    { min-height:300px }

@media(min-width:768px){
  .ad-slot--top{ min-height:90px }
  .ad-slot--feed{ min-height:280px }
}
@media(min-width:1100px){
  .ad-slot--top{ min-height:250px }
  .ad-slot--rail{ position:sticky; top:24px }
}

/* Mobilanker. Under 30 % av skjermhøyden, ellers bryter du
   Better Ads Standards og Chrome kan filtrere annonsene dine. */
.ad-anchor{
  position:sticky; bottom:0; z-index:100;
  background:var(--bg); border-top:1px solid var(--rule);
  padding:6px 0 8px;
}
.ad-anchor .ad-slot{ margin:0; min-height:50px }
@media(min-width:768px){ .ad-anchor{ display:none } }


/* ---------- husbanner ----------
   Fyller annonseflatene til vi har en betalt annonsør. Markupen har én
   kilde, i HUSBANNER i bygg.mjs, og settes inn i alle flater ved bygging.

   Tokennavnene er de faktiske i css/pengeguide.css. Parene er kjørt
   gjennom skript/kontrast.mjs. */
/* display:block eksplisitt. Banneret er en <aside>, og
   aside{display:grid} i det delte stilarket gjorde knappen til et
   grid-element som strakk seg over hele bredden. */
.husbanner{
  display:block;
  background:var(--spruce-2);color:var(--on-spruce);
  padding:1.5rem;border-radius:4px;margin-block:2rem;
}
.husbanner-kicker{
  margin:0 0 .5rem;font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 92,"wght" 700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rust-dim);
}
.husbanner-tekst{margin:0 0 1rem;font-size:var(--tekst-base);max-width:52ch}
.husbanner-knapp{
  display:inline-flex;align-items:center;
  background:var(--rust-dim);color:var(--spruce);
  font-variation-settings:"wdth" 96,"wght" 700;
  text-decoration:none;padding:.75rem 1.25rem;
  border-radius:3px;min-height:2.75rem;line-height:1.6;
}
.husbanner-knapp:hover{background:var(--on-spruce)}

/* I høyrespalten er flaten smal og høy. Der skal banneret ikke strekkes,
   og teksten trenger ikke 52ch.

   min-width:0 er nødvendig: aside er display:grid, og et grid-element har
   min-width:auto. Knappen satte en min-content-bredde på 341 px, så
   .rail-sticky nektet å krympe under det og stakk 41 px utenfor det
   300 px brede sidefeltet. Målt 12. august.

   Med mindre luft og mindre knappetekst får innholdet plass på 300 px,
   som er bredden en ekte annonse får. */
.rail-sticky{min-width:0}
.ad-slot--rail .husbanner{margin-block:0;padding:1rem}
.ad-slot--rail .husbanner-tekst{max-width:none;font-size:var(--tekst-sm)}
.ad-slot--rail .husbanner-knapp{
  font-size:var(--tekst-sm);padding:.75rem 1rem;
  overflow-wrap:anywhere;
}

/* Mobilankeret staar tomt til det finnes en ekte annonsor. En klebrig
   stripe med egenreklame nederst paa hver eneste mobilside er verre enn
   ingenting, og et husbanner faar ikke plass paa 50 px. */
.ad-anchor{display:none}