/* ---------------------------------------------------------
   HET HEADERVERLOOP OP DE <header> IN PLAATS VAN OP DE SECTIE

   Bricks zet op elk nestable element (section, container, block,
   div) de class .bricks-lazy-hidden, en die doet
   `background-image: none !important` totdat zijn JavaScript het
   element vrijgeeft. Voor een afbeelding die pas in beeld hoeft te
   komen is dat prima; voor het verloop van de header niet: dat
   staat meteen bovenaan, dus je ziet het er nét te laat in
   springen. En het is een harde omslag, geen overgang.

   Overschrijven kan hier niet: het is een !important-declaratie,
   en die van Bricks staat in een cascade-laag. Bij !important
   draait de volgorde van lagen om, dus een un-layered !important
   van ons zou het juist VERLIEZEN.

   Daarom verhuist het verloop een niveau omhoog. De <header> is
   geen Bricks-element, krijgt die class dus nooit, en omsluit de
   sectie precies — het beeld is identiek, maar staat er vanaf de
   eerste paint.

   :has() zorgt dat dit alleen gebeurt waar de class ook echt
   gebruikt wordt; zet je hem in de builder op een andere sectie,
   dan volgt dit vanzelf.
   --------------------------------------------------------- */
#brx-header:has(.tscb_grad_warm_header_ipm) {
  background-image: var(--tscb_grad_warm_header_ipm);
}

/* En dan niet dubbel schilderen zodra Bricks de sectie vrijgeeft:
   twee keer hetzelfde halftransparante verloop over elkaar geeft
   een zichtbaar donkerdere rand. */
#brx-header .tscb_grad_warm_header_ipm {
  background-image: none;
}