/*
 * Vloeiende sectieranden (Paques Biomaterials) — sitebrede utility.
 *
 * Gebruik: zet op de BUITENSTE container van een band de klasse pq-sep-bottom, pq-sep-top of beide
 * (Elementor → Advanced → CSS Classes). Werkt op alles wat in de container zit: achtergrondkleur, afbeelding
 * en video, omdat het een CSS-mask op de container is (geen shape divider die een kleur over de rand schildert).
 * pq-sep--mirror spiegelt de golf horizontaal. De golfvorm is de exacte "Vector 6" uit het Figma-design (1513×75).
 * Hoogte via --pq-sep (75px desktop, 40px mobiel); per container te overschrijven met een inline variabele.
 *
 * Waarom hier en niet per element: dezelfde rand komt op tientallen banden terug; één definitie is de
 * toegestane uitzondering op "custom CSS alleen op het element" (wp-builder/references/elementor.md §1d).
 */
:root { --pq-sep: 75px; }
@media (max-width: 767px) { :root { --pq-sep: 40px; } }

.pq-sep-bottom, .pq-sep-top {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Onderrand: sectie blijft zichtbaar bóven de golf. */
.pq-sep-bottom:not(.pq-sep-top) {
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - var(--pq-sep) + 1px), 100% var(--pq-sep);
          mask-size: 100% calc(100% - var(--pq-sep) + 1px), 100% var(--pq-sep);
  -webkit-mask-position: top, bottom; mask-position: top, bottom;
}

/* Bovenrand: sectie blijft zichtbaar ónder de golf (verticaal gespiegelde golf). */
.pq-sep-top:not(.pq-sep-bottom) {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(0,64) scale(1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(0,64) scale(1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--pq-sep), 100% calc(100% - var(--pq-sep) + 1px);
          mask-size: 100% var(--pq-sep), 100% calc(100% - var(--pq-sep) + 1px);
  -webkit-mask-position: top, bottom; mask-position: top, bottom;
}

/* Beide randen (groene banden). */
.pq-sep-top.pq-sep-bottom {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(0,64) scale(1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(0,64) scale(1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% var(--pq-sep), 100% calc(100% - 2 * var(--pq-sep) + 2px), 100% var(--pq-sep);
          mask-size: 100% var(--pq-sep), 100% calc(100% - 2 * var(--pq-sep) + 2px), 100% var(--pq-sep);
  -webkit-mask-position: top, center, bottom; mask-position: top, center, bottom;
}

/* Horizontaal gespiegeld: de golf loopt de andere kant op. */
.pq-sep--mirror.pq-sep-bottom:not(.pq-sep-top) {
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(1513,0) scale(-1,1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(1513,0) scale(-1,1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
}
.pq-sep--mirror.pq-sep-top:not(.pq-sep-bottom) {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(1513,64) scale(-1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1513 88' preserveAspectRatio='none'%3E%3Cg transform='translate(1513,64) scale(-1,-1)'%3E%3Cpath d='M0 -12H1513V20.79C1378.5 -10 686.19 10.46 528.5 6.5C402.35 3.33 206 16 0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
}