/* WoningPrijsKaart.nl — advertentie: 300x250-banner van HuisAssist (via Daisycon).

   Eén <aside class="promo"> per pagina, alleen op de negen menupagina's, vlak
   vóór </main>. Daarin het label "Advertentie" en de banner als één link.

   Plek en formaat — de banner is op één scherm op ELKE pagina even groot:
   - Scherm >= 1888px: in de linkermarge op ware grootte, 300x250.
   - Scherm 1280 tot 1888px: in de linkermarge op 200x167.
     Is de marge naast het (gecentreerde) middenkader breed genoeg
     (scherm >= wrap + 472px), dan blijft de pagina in het midden. Zo niet,
     dan schuift de pagina naar rechts (margin-left 236px op .wrap, via
     :has()) zodat de banner toch links past. Browsers zonder :has() tonen
     hem dan gewoon onderaan, zonder overlap.
   - Kleiner dan 1280px breed of 600px hoog: onderaan de content, 300x250.

   De pagina's zijn niet even breed (.wrap is 880 tot 1240px). Daarom draagt
   elke <aside> data-wrap="<breedte>" en heeft elke breedte onderaan twee
   blokken. Nieuwe paginabreedte? Kopieer de twee blokken van een bestaande
   breedte en pas de getallen aan (drempel = wrap + 472, halve wrap). */

.promo {
  width: 300px;
  max-width: 100%;
  margin: 32px auto 8px;
  line-height: 0;
}

.promo-lbl {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9aa3b2;
  margin: 0 0 5px;
}

.promo-link { display: block }
.promo-link:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px }

/* Vaste verhouding 300x250, ook als een aangeleverde banner net afwijkt:
   dan wordt hij binnen dat vak passend geschaald i.p.v. hoger of lager. */
.promo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 250;
  object-fit: contain;
  border: none;
}

/* ---------- Linkermarge ---------- */

/* Eén breedte voor alle pagina's, alleen afhankelijk van de schermbreedte. */
:root { --promo-w: 200px }
@media (min-width: 1888px) { :root { --promo-w: 300px } }

/* .wrap 880px */
@media (min-width: 1352px) and (min-height: 600px) {
  .promo[data-wrap="880"] {
    position: fixed;
    top: 165px;                              /* onder de blauwe kop */
    right: calc(50% + 440px + 12px);      /* halve .wrap + tussenruimte */
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}
@media (min-width: 1280px) and (max-width: 1351px) and (min-height: 600px) {
  body:has(.promo[data-wrap="880"]) .wrap {
    max-width: min(880px, calc(100vw - 248px));
    margin-left: 236px;
    margin-right: auto;
  }
  body:has(.promo[data-wrap="880"]) .promo {
    position: fixed;
    top: 165px;
    left: 12px;
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}

/* .wrap 1000px */
@media (min-width: 1472px) and (min-height: 600px) {
  .promo[data-wrap="1000"] {
    position: fixed;
    top: 165px;                              /* onder de blauwe kop */
    right: calc(50% + 500px + 12px);      /* halve .wrap + tussenruimte */
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}
@media (min-width: 1280px) and (max-width: 1471px) and (min-height: 600px) {
  body:has(.promo[data-wrap="1000"]) .wrap {
    max-width: min(1000px, calc(100vw - 248px));
    margin-left: 236px;
    margin-right: auto;
  }
  body:has(.promo[data-wrap="1000"]) .promo {
    position: fixed;
    top: 165px;
    left: 12px;
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}

/* .wrap 1080px */
@media (min-width: 1552px) and (min-height: 600px) {
  .promo[data-wrap="1080"] {
    position: fixed;
    top: 165px;                              /* onder de blauwe kop */
    right: calc(50% + 540px + 12px);      /* halve .wrap + tussenruimte */
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}
@media (min-width: 1280px) and (max-width: 1551px) and (min-height: 600px) {
  body:has(.promo[data-wrap="1080"]) .wrap {
    max-width: min(1080px, calc(100vw - 248px));
    margin-left: 236px;
    margin-right: auto;
  }
  body:has(.promo[data-wrap="1080"]) .promo {
    position: fixed;
    top: 165px;
    left: 12px;
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}

/* .wrap 1140px */
@media (min-width: 1612px) and (min-height: 600px) {
  .promo[data-wrap="1140"] {
    position: fixed;
    top: 165px;                              /* onder de blauwe kop */
    right: calc(50% + 570px + 12px);      /* halve .wrap + tussenruimte */
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}
@media (min-width: 1280px) and (max-width: 1611px) and (min-height: 600px) {
  body:has(.promo[data-wrap="1140"]) .wrap {
    max-width: min(1140px, calc(100vw - 248px));
    margin-left: 236px;
    margin-right: auto;
  }
  body:has(.promo[data-wrap="1140"]) .promo {
    position: fixed;
    top: 165px;
    left: 12px;
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}

/* .wrap 1240px */
@media (min-width: 1712px) and (min-height: 600px) {
  .promo[data-wrap="1240"] {
    position: fixed;
    top: 165px;                              /* onder de blauwe kop */
    right: calc(50% + 620px + 12px);      /* halve .wrap + tussenruimte */
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}
@media (min-width: 1280px) and (max-width: 1711px) and (min-height: 600px) {
  body:has(.promo[data-wrap="1240"]) .wrap {
    max-width: min(1240px, calc(100vw - 248px));
    margin-left: 236px;
    margin-right: auto;
  }
  body:has(.promo[data-wrap="1240"]) .promo {
    position: fixed;
    top: 165px;
    left: 12px;
    width: var(--promo-w);
    margin: 0;
    z-index: 20;
  }
}

@media print { .promo { display: none } }