/* ==========================================================================
   OmgevingsCompas — de kaart rechts naast de hero
   --------------------------------------------------------------------------
   Niet uit het designpakket: een tijdelijke aankondiging, nagebouwd uit de
   aangeleverde banner (banner_omgevingscompas_v2.png) en de mockup waarin hij
   rechts van de hero staat, op 1728px breed.

   De kaart schaalt als één beeld. Alle maten binnenin staan in cqw — een
   honderdste van de kaartbreedte — zodat tekst, kompas en witruimte samen
   meegroeien en de verhoudingen uit de banner op elke breedte gelden. Daarmee
   ligt ook de verhouding van de kaart vast: hij is 1,949 keer zo hoog als
   breed. Dat getal komt hieronder terug.

   Bij de eerste scrollbeweging schuift hij met de hero mee weg; dat doet
   scroll-animation.js. Hier staat alleen de ruststand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Plaats

   Op de kantlijn rechts (--page-padding-x, dezelfde als die van de introzin
   eronder) en 66px onder de navigatiebalk, zoals in de mockup. Even breed als
   daar: 316 van de 1708px binnenmaat, en meeschalend met de hero ernaast.

   Maar niet smaller dan 280px. In de banner is de lopende tekst 4,32% van de
   kaartbreedte; bij puur meeschalen werd dat op een laptop van 1280px tien
   pixels. Met 280px blijft het twaalf.

   Onder 1100px past hij niet meer naast de hero: de kaart van 280px schuift
   dan over de oranje balk heen. Daar valt hij weg, net als op een telefoon,
   waar de hero zelf er al niet is (zie responsive.css, "Op een telefoon
   heeft de landingspagina geen hero").

   z-index 46: dezelfde laag als de kleurbalken (45, site-overrides.css) en
   er net boven. Dat moet: de buitenste balk is blue-200, dezelfde kleur als
   de pagina, en reikt tot 86% van de hero. Je ziet hem niet, maar onder
   ongeveer 1260px ligt hij over de linkerrand van de kaart en knipte er een
   stuk uit. Onder het kader (50) en de nav (60), zodat de kaart bij het
   wegschuiven achter de nav verdwijnt, zoals de balken.
   -------------------------------------------------------------------------- */
.compas-banner {
  display: none;
}

@media (min-width: 1100px) {
  .compas-banner {
    display: block;
    position: absolute;
    top: 139px;
    right: var(--page-padding-x);
    z-index: 46;
    width: max(280px, 18.5%);
    container-type: inline-size;
  }

  /* De introzin begint onder de kaart.

     De kaart is hoger dan de hero ernaast en steekt dus uit tot waar de
     introzin begint. In de mockup ging dat net goed omdat de eerste regel daar
     kort genoeg is, maar dat hangt aan de breedte en aan de tekst: op 1440px
     liep "maatschappelijke" al onder de kaart door, en de zin is in het beheer
     aan te passen. Daarom schuift de ruimte onder de hero mee met de kaart,
     zodat de eerste regel altijd 40px onder de kaart begint.

     Die ruimte bestaat alleen in ruststand. De scrollanimatie meet waar de
     secties staan en trekt ze tot onder de nav (zie measure() in
     scroll-animation.js); na de animatie staat alles dus precies waar het
     zonder kaart ook stond.

     De som, met procenten van de breedte van .hero-area (padding-bottom
     rekent daarin, net als de breedte van de kaart):

       onderkant kaart   139 + 1,949 × kaartbreedte
       onderkant hero    (80% − 10px) × 653/1410  =  37,05% − 4,63px
       begin introzin    onderkant hero + padding-bottom + 19px (padding
                         van .intro, gemeten)

     en dat begin moet 40px onder de kaart liggen. Nooit minder dan de 73px
     die hier al stonden. */
  .hero-area__top:has(> .compas-banner) {
    position: relative;
    padding-bottom: max(
      73px,
      calc(164.63px + 1.949 * max(280px, 18.5%) - 37.05%)
    );
  }
}

/* --------------------------------------------------------------------------
   2. De kaart

   Wit met een lichtblauw beeldvlak erin. De schaduw is die uit de banner,
   in de blauwtint die de cookiemelding ook gebruikt. De focusring is de
   algemene uit site-overrides.css (.page a:focus-visible).
   -------------------------------------------------------------------------- */
.compas-banner__link {
  display: block;
  padding: 3.04cqw 3.28cqw 5.28cqw;
  background: var(--base-100);
  box-shadow: 1.5cqw 1.5cqw 10cqw rgba(0, 39, 65, 0.4);
  color: var(--green-1200);
  text-decoration: none;
}

.compas-banner__beeld {
  display: block;
  padding: 5.52cqw 0 3.04cqw 4.96cqw;
  background: var(--blue-200);
}

.compas-banner__titel {
  display: block;
  font-weight: var(--fw-bold);
  font-size: 7cqw;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.compas-banner__ondertitel {
  display: block;
  margin-top: 1.52cqw;
  padding-right: 4.96cqw;
  font-weight: var(--fw-regular);
  font-size: 6.67cqw;
  line-height: 7.2cqw;
}

.compas-banner__kompas {
  width: 79.12cqw;
  margin-top: 7.2cqw;
}

/* --------------------------------------------------------------------------
   3. De tekst onder het beeld

   Iets verder ingesprongen dan het beeldvlak, zoals in de banner. Een witregel
   tussen de alinea's: dat is de ruimte die de banner ertussen laat.
   -------------------------------------------------------------------------- */
.compas-banner__tekst {
  display: flex;
  flex-direction: column;
  gap: 7.04cqw;
  padding: 3.52cqw 5.4cqw 0 0.8cqw;
  font-weight: var(--fw-regular);
  font-size: 4.32cqw;
  line-height: 7.04cqw;
}

.compas-banner__tekst strong {
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   4. Wegschuiven

   scroll-animation.js zet transform en opacity per beeldje; zie
   .hero__bars--animating in scroll-animation.css voor hetzelfde bij de
   balken. Zonder het script (of met prefers-reduced-motion) blijft de kaart
   gewoon staan en scrolt hij met de pagina mee weg.
   -------------------------------------------------------------------------- */
.compas-banner--animating {
  will-change: transform, opacity;
}