/* =========================================
   Bikeshift Text Marquee
   Paarse balk met witte tekst die loopt
   Lichte tilt: links hoger, rechts lager
   ========================================= */

/* Wrapper — geen achtergrond, geen padding.
   Horizontaal clippen (zodat de bredere balk geen scroll geeft),
   verticaal vrij zodat de gedraaide balk in aangrenzende secties valt */
.text-marquee-wrap {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  /* Optioneel: z-index zodat de balk altijd boven aangrenzende elementen blijft */
  z-index: 5;
}

/* De daadwerkelijke balk — gedraaid + iets breder dan parent
   zodat de tilted edges het scherm vullen */
.text-marquee {
  background-color: var(--purple, #6c4ab6);
  color: #fff;
  padding: 1.25rem 0;
  position: relative;
  transform: rotate(2deg);
  /* Iets breder zodat de schuine hoeken het beeld vullen */
  width: calc(100% + 6rem);
  margin-left: -3rem;
  margin-right: -3rem;
}

/* Marquee mechaniek */
.text-marquee .draggable-marquee {
  cursor: grab;
}

.text-marquee .draggable-marquee:active {
  cursor: grabbing;
}

/* Lijst — geen gap, spacing zit IN het item */
.text-marquee__list {
  display: flex;
  align-items: center;
}

/* Item — spacing zit BINNEN het item zodat het ook werkt
   bij gedupliceerde items door de marquee-JS */
.text-marquee__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 2.5rem; /* ruimte tussen ★ en het volgende woord */
}

.text-marquee__text {
  font-family: "Hanken Grotesk", "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-right: 2.5rem; /* ruimte tussen woord en ★ */
}

.text-marquee__separator {
  font-size: 1rem;
  opacity: 0.7;
  color: #fff;
  display: inline-block;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .text-marquee {
    padding: 0.875rem 0;
    transform: rotate(1.5deg); /* iets minder schuin op mobiel */
  }

  .text-marquee__item {
    padding-right: 1.5rem;
  }

  .text-marquee__text {
    font-size: 1.125rem;
    margin-right: 1.5rem;
  }

  .text-marquee__separator {
    font-size: 0.875rem;
  }
}