/**
 * Hippe Zeeuw — productmarquee (doorlopende beeldstrip onder de hero).
 *
 * Techniek: een flexrij die twee keer dezelfde reeks bevat en met een lineaire
 * CSS-animatie exact 50% naar links schuift. Omdat de tweede helft identiek is
 * aan de eerste, is de sprong terug naar 0 onzichtbaar.
 *
 * BELANGRIJK: de tussenruimte staat als margin-right OP de tegel, niet als
 * gap op de rij. Met gap zit er tussen de twee reeksen één tussenruimte
 * minder dan binnen een reeks, en dan klopt -50% niet precies (je ziet elke
 * ronde een sprongetje van een halve gap). Met margin-right is de rij exact
 * 2 x (tegel + ruimte) x aantal breed en loopt hij naadloos rond.
 *
 * De duur komt inline mee als --hz-mq-dur / --hz-mq-dur-sm, berekend uit het
 * aantal tegels, zodat de snelheid altijd ~37px/s is ongeacht hoeveel
 * producten erin staan.
 *
 * @package hippezeeuw
 */

.hz-mq{
  --hz-mq-w: 210px;
  --hz-mq-gap: 10px;
  --hz-mq-dur: 90s;
  --hz-mq-dur-sm: 56s;

  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;              /* edge-to-edge, geen container-marges */
  background: var(--paper, #fff);
  padding-block: 8px;
  touch-action: pan-y;           /* verticaal scrollen blijft van de pagina */
  cursor: grab;
}

.hz-mq__track{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: hz-mq-run var(--hz-mq-dur) linear infinite;
  will-change: transform;
}

.hz-mq__i{
  flex: 0 0 auto;
  display: block;
  width: var(--hz-mq-w);
  aspect-ratio: 2 / 3;           /* vaste verhouding: geen layout shift */
  margin-right: var(--hz-mq-gap);
  overflow: hidden;
  background: #f1eee9;
  -webkit-user-drag: none;
}

.hz-mq__i img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block;
  transition: transform .9s ease;
  pointer-events: none;          /* slepen mag niet op het plaatje blijven hangen */
  -webkit-user-drag: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine){
  .hz-mq:hover .hz-mq__track{ animation-play-state: paused; }
  .hz-mq__i:hover img{ transform: scale(1.06); }
}

/*
 * Bij focus ook stilzetten, maar alleen bij focus-visible: dat is de focus die
 * je met het toetsenbord krijgt. Met :focus-within zou hij ook blijven staan na
 * een muisklik of een sleep, want Chrome laat de focus dan op de link achter.
 * Bewust een losse regel: een browser zonder :has() gooit de hele regel weg, en
 * dan moet de hover-pauze hierboven wel blijven werken.
 */
.hz-mq:has(:focus-visible) .hz-mq__track{ animation-play-state: paused; }

/* tijdens slepen stuurt de JS de transform aan */
.hz-mq.is-dragging{ cursor: grabbing; user-select: none; }
.hz-mq.is-dragging .hz-mq__i img{ transition: none; }

@keyframes hz-mq-run{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px){
  .hz-mq{ --hz-mq-w: 128px; padding-block: 6px; }
  /* de inline --hz-mq-dur staat op .hz-mq zelf en wint van elke regel hier,
     dus de mobiele duur zetten we op de track (die heeft geen inline style) */
  .hz-mq__track{ animation-duration: var(--hz-mq-dur-sm); }
}

@media (prefers-reduced-motion: reduce){
  .hz-mq{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: auto;
    cursor: default;
  }
  .hz-mq::-webkit-scrollbar{ display: none; }
  .hz-mq__track{ animation: none; }
}