/* =========================================================
   TSCB UTILITY-SYSTEEM — gradient overlays
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   ========================================================= */

/* ---------------------------------------------------------
   6. GRADIENTS — per project eigen, descriptieve classes.
   Geen standaardverlopen; elke site krijgt specifieke
   verlopen (meestal 5 kleuren) met eigen namen.

   BOUWREGEL voor de "ronding" bij de rand: de squeeze is
   PER STOP opt-in. Vaste stops = gewoon %, alleen stops die
   bij de eindrand horen (waar de degree naartoe wijst)
   schrijf je als:
     calc(100% - <afstand>% * var(--tscb_grad_squeeze))
   Volgorde: eerst alle vaste stops, dan de squeezed stops
   als aaneengesloten groep aan het eind — en de eerste
   squeezed stop moet bij squeeze = 1 al voorbij de laatste
   vaste stop liggen (anders harde rand bij kruisen).
   Stem het verloop af op je KLEINSTE sectie (squeeze = 1);
   op hogere secties zet je een maat-subclass die de stops
   naar de rand toe samendrukt, zodat de ronding visueel
   gelijk blijft i.p.v. uitgerekt.
   Pixel-exact nodig? Zet de ronding dan als tweede
   gradient-laag met vaste hoogte (background-size:
   100% <hoogte>rem; position: bottom; no-repeat) — die
   rekt nooit mee, maar moet wel naar transparent faden.
   --------------------------------------------------------- */

/* Maat-subclasses — hogere sectie = stops dichter bij de
   rand. Richtlijn t.o.v. de basis-sectiehoogte:
   _mg ≈ 1,5× hoger · _lg ≈ 2× · _xlg ≈ 3× */
.tscb_grad_mg  { --tscb_grad_squeeze: .66; }
.tscb_grad_lg  { --tscb_grad_squeeze: .5; }
.tscb_grad_xlg { --tscb_grad_squeeze: .33; }

/* VOORBEELDEN — zelfde sfeer als de bestaande warm_header_ipm/
   warm_offcanv_ipm (grotendeels transparant, warme kleur pas
   tegen de rand), maar opgebouwd uit de kleur-bridge via
   color-mix() i.p.v. vaste rgb-waarden, en met de squeeze
   op de randstops. Test/pas aan, verwijder daarna of hernoem
   naar een eigen beschrijvende naam. */

/* variant op warm_header_ipm — verticale overlay, kleur komt
   pas in de laatste 15% van de sectie tevoorschijn */
   .tscb_grad_warm-footer_donkerder {
    background: #ffebebcf;
    background-image: linear-gradient(0deg, #e2ecef47 40%, 
    color-mix(in srgb, #c6cd59 6%, transparent) calc(100% - 15% * var(--tscb_grad_squeeze)), 
    color-mix(in srgb, var(--tscb_tertiary_3) 21%, #cadf8200) calc(100% - 2% * var(--tscb_grad_squeeze)), 
    color-mix(in srgb, var(--tscb_secondary_2) 34%, transparent) calc(100% - 1% * var(--tscb_grad_squeeze)));
}
/* .tscb_grad_warm-footer_donkerder {
  background-image: linear-gradient(0deg,
    transparent 40%,
    color-mix(in srgb, var(--tscb_tertiary_2)  6%, transparent) calc(100% - 15% * var(--tscb_grad_squeeze)),
    color-mix(in srgb, var(--tscb_tertiary_3) 21%, transparent) calc(100% - 2%  * var(--tscb_grad_squeeze)),
    color-mix(in srgb, var(--tscb_secondary_2) 34%, transparent) calc(100% - 1% * var(--tscb_grad_squeeze)));
} */

/* variant op warm_offcanv_ipm — horizontale overlay, zelfde
   opbouw maar iets andere tussentint (tertiary_1 i.p.v. _3) */
.tscb_grad_voorbeeld_offcanvas {
  background-image: linear-gradient(90deg,
    transparent 40%,
    color-mix(in srgb, var(--tscb_tertiary_2)  6%, transparent) calc(100% - 15% * var(--tscb_grad_squeeze)),
    color-mix(in srgb, var(--tscb_tertiary_1) 21%, transparent) calc(100% - 2%  * var(--tscb_grad_squeeze)),
    color-mix(in srgb, var(--tscb_secondary_2) 34%, transparent) calc(100% - 1% * var(--tscb_grad_squeeze)));
}

/* derde variant — vol dekkende diagonale achtergrond (i.p.v.
   transparante filmlaag) warm naar koel, laat zien hoe de
   squeeze ook op een volle 5-stop achtergrond werkt */
.tscb_grad_voorbeeld_diagonaal {
  background-image: linear-gradient(135deg,
    var(--tscb_tertiary_3) 0%,
    var(--tscb_tertiary_2) 30%,
    color-mix(in srgb, var(--tscb_secondary_2) 60%, transparent) calc(100% - 40% * var(--tscb_grad_squeeze)),
    color-mix(in srgb, var(--tscb_secondary_3) 80%, transparent) calc(100% - 15% * var(--tscb_grad_squeeze)),
    var(--tscb_secondary_3) 100%);
}

/* ---------------------------------------------------------
   8. PROJECT CUSTOM — vaste namen, per project invullen.
   Voor maatwerk-gradients (randen, rondingen, overgangen).
   Leeg in het basisbestand; de standaardgroepen hierboven
   wijzig je NOOIT per project.
   --------------------------------------------------------- */
/* De WAARDE van dit verloop staat in basis/kleur.css, niet hier.
   Reden: layout/header.css zet hem ook op de <header> zelf (zie de
   toelichting daar), en dat bestand laadt eerder dan dit. Voor de
   browser maakt die volgorde niets uit — var() wordt pas opgelost
   als alle stylesheets binnen zijn — maar zodra je ooit kritieke
   CSS gaat inlinen of een bestand los meegeeft, is een token dat
   in een later bestand staat stil weg. En dan verdwijnt het
   verloop zonder foutmelding.
   Hier blijft alleen de utility-class staan; die hoort in dit
   bestand thuis. */
.tscb_grad_warm_header_ipm { background-image: var(--tscb_grad_warm_header_ipm); }
/* Eén doorlopend verloop naar rechts, steeds donkerder in dezelfde
   warme tint. De oude stops op 98% en 99% zaten te dicht op elkaar en
   lazen als een randje; de koele stop is eruit. */
.tscb_grad_warm_offcanv_ipm, .bricks-mobile-menu-wrapper:before {
  background-image: linear-gradient(90deg,
    #a97b7338 7%,
    rgb(213 162 133 / 39%) 70%,
    rgb(131 84 56 / 37%) 95%,
    rgb(231 209 176 / 25%) 101%);
}
/* Dezelfde warme randverloop als de header, maar RONDOM i.p.v.
   alleen onder. De header legt dat verloop over z'n volle hoogte
   (stops op 40/85/98/99%), waardoor de tint in de onderste ~60%
   opkomt en op de laatste procent een randlijn wordt.
   Hier zetten we vier keer dezelfde stops neer — één per zijde —
   elk in een band van --tscb_form_edge. Die band is bewust een
   vaste maat en geen percentage: anders zou het verloop meerekken
   met de hoogte van het formulier en er per pagina anders uitzien.
   90px ≈ de hoogte van de headerbar, dus de afloop is even lang.
   In de hoeken overlappen twee banden; dat geeft precies de
   vignet-verzwaring die je daar wil. */
.tscb_grad_warm_form_ipm,
.brxe-form {
  --tscb_form_edge: 90px;
  /* stops één keer opschrijven i.p.v. vier keer overtikken */
  --_tscb_edge_stops: transparent 40%, var(--tscb_grad_rand_zacht) 85%, rgb(165 89 89 / 21%) 98%, rgb(135 137 157 / 34%) 99%;

  background-image:
    linear-gradient(180deg, var(--_tscb_edge_stops)),   /* onder  */
    linear-gradient(0deg,   var(--_tscb_edge_stops)),   /* boven  */
    linear-gradient(90deg,  var(--_tscb_edge_stops)),   /* rechts */
    linear-gradient(270deg, var(--_tscb_edge_stops));   /* links  */
  background-size:
    100% var(--tscb_form_edge),
    100% var(--tscb_form_edge),
    var(--tscb_form_edge) 100%,
    var(--tscb_form_edge) 100%;
  background-position: bottom, top, right, left;
  background-repeat: no-repeat;
  background-color: rgb(255 241 247 / 82%);
}

/* .tscb_grad_custom_2 { }
/* .tscb_grad_custom_2 { }
.tscb_grad_custom_3 { } */