/**
 * Transparante SVG-omlijning voor borderRed/borderTq met arrowTopOffwhite.
 * De bestaande CSS blijft de fallback totdat JS deze enhancement activeert.
 */

.border-arrow-outline-ready {
  border-color: transparent !important;
  isolation: isolate;
  position: relative;
}

.border-arrow-outline-ready::before,
.border-arrow-outline-ready::after {
  display: none !important;
}

.border-arrow-outline-svg {
  height: calc(100% + 4px);
  left: -2px;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: -2px;
  width: calc(100% + 4px);
  z-index: 4;
}

.border-arrow-outline-svg path {
  fill: none;
  stroke: var(--border-color);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Transparante SVG-omlijning voor de quote met een V aan de linkerzijde. */
.quote-outline-ready {
  border-color: transparent !important;
  isolation: isolate;
  position: relative;
}

.quote-outline-ready::before,
.quote-outline-ready::after {
  display: none !important;
}

.quote-outline-svg {
  height: calc(100% + 2px);
  left: -1px;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: -1px;
  width: calc(100% + 2px);
  z-index: 4;
}

.quote-outline-svg path {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/**
 * Echte uitsparing voor mask-arrow-top. Hierdoor blijven de achtergrond en
 * reislijn zichtbaar, zonder een halftransparante kleur over de foto.
 */
.mask-arrow-clip-ready {
  clip-path: polygon(
    0 0,
    calc(50% - var(--notch-half-width)) 0,
    50% var(--notch-height),
    calc(50% + var(--notch-half-width)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.mask-arrow-clip-ready::before {
  display: none !important;
}

@media (max-width: 767px) {
  .mask-arrow-clip-ready {
    --notch-half-width: 12px;
    --notch-height: 18px;
  }
}