/* =============================================================
   Component zo-project-scroll  (Aannemersbedrijf Noordhout)
   Projectenoverzicht dat horizontaal schuift terwijl je verticaal
   scrollt (sticky "pin"), met zo-card als kaart.

   De kop scrollt gewoon mee; alleen de twee rijen kaarten worden
   vastgezet en vullen dan het scherm. De kaarthoogte volgt uit de
   schermhoogte, de breedte uit de hoogte.

   Zonder JS (of bij reduced motion / smal scherm / te laag scherm)
   is het een gewone horizontaal swipebare rij. zo-project-scroll.js
   zet .is-pinned en stuurt dan --zo-ps-x aan.

   Kaarten staan in twee rijen (grid-auto-flow: column), de onderste
   rij iets naar rechts, zodat de schuine kaarten in elkaar grijpen.
   Werkt met elk aantal projecten.
   ============================================================= */

.zo-project-scroll{
  --zo-ps-ink:        #14143c;
  --zo-ps-outline:    var(--zo-outline-color, #c9c9d3);
  --zo-ps-gutter:     clamp(1rem, 4vw, 4rem);

  /* --zo-ps-vh zet de JS (vaste px, geen springende mobiele balk).
     De twee rijen samen (incl. tussenruimte) zijn --zo-ps-rows-h hoog. */
  --zo-ps-rows-h:     calc(var(--zo-ps-vh, 100dvh) * .9);
  --zo-ps-stage-pad:  clamp(1rem, 4vh, 3rem);
  --zo-ps-row-gap:    clamp(1rem, 3vh, 2.25rem);
  --zo-ps-card-h:     max(16rem, calc((var(--zo-ps-rows-h) - var(--zo-ps-row-gap)) / 2));
  --zo-ps-card-w:     min(85vw, calc(var(--zo-ps-card-h) * 2.2));
  --zo-ps-col-gap:    .25rem;
  --zo-ps-row-offset: calc(var(--zo-ps-card-w) * .3);

  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* --- Kop (scrollt gewoon mee) --------------------------------- */

/* Outline en titel onder elkaar, net als de Hub-headings (.backgroud_heading
   + titel): door de lage regelhoogte is het outline-blok laag en steken de
   letters erboven en eronder uit, zodat de titel er half in valt. */
.zo-project-scroll__header{
  margin: 0;
  padding-inline: var(--zo-ps-gutter);
}

.zo-project-scroll__outline{
  display: block;
  position: relative;
  left: -8px;
  opacity: .8;
  /* Sitebrede outline-stijl (style.css); fallbacks voor buiten WP. */
  color: transparent;
  -webkit-text-stroke: var(--zo-outline-width, 1.5px) var(--zo-ps-outline);
  font-family: var(--zo-outline-font, inherit);
  font-size: var(--zo-outline-size, clamp(4rem, 10vw, 15.5rem));
  font-weight: var(--zo-outline-weight, 700);
  line-height: var(--zo-outline-leading, .35);
  letter-spacing: var(--zo-outline-tracking, -.02em);
  white-space: nowrap;
  user-select: none;
}

.zo-project-scroll__title{
  position: relative;   /* boven de outline, die door left:-8px ook gepositioneerd is */
  z-index: 1;
  margin: 0;
}

/* --- Rij met kaarten ------------------------------------------ */

.zo-project-scroll__stage{
  padding-block: var(--zo-ps-stage-pad);
}

.zo-project-scroll__viewport{
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--zo-ps-gutter);
  padding: .25rem var(--zo-ps-gutter) 1rem;
  scrollbar-width: thin;
}

.zo-project-scroll__track{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: var(--zo-ps-card-w);
  column-gap: var(--zo-ps-col-gap);
  row-gap: var(--zo-ps-row-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--zo-ps-row-offset) 0 0;
  list-style: none;
}

.zo-project-scroll__item{
  position: relative;
  margin: 0;
  scroll-snap-align: start;
}
.zo-project-scroll__item::before{ content: none; } /* geen theme-bullets */

.zo-project-scroll__item:nth-child(even){
  left: var(--zo-ps-row-offset);
}

/* Vaste hoogte: de schuinte (hoogte × tan) ligt dan vast en kan niet
   meegroeien met de tekst. */
.zo-project-scroll .zo-card__inner{
  height: var(--zo-ps-card-h);
}

/* --- Gepind: verticaal scrollen schuift de rij ----------------- */

.zo-project-scroll.is-pinned .zo-project-scroll__pin{
  height: var(--zo-ps-height, auto);
}

.zo-project-scroll.is-pinned .zo-project-scroll__stage{
  position: sticky;
  /* Onder de WP-adminbalk; --zo-ps-top om bv. onder een vaste header te pinnen. */
  top: var(--zo-ps-top, var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--zo-ps-vh, 100vh);
  padding-block: 0; /* rijen zijn 90% hoog en staan gecentreerd */
  overflow: clip;
}

.zo-project-scroll.is-pinned .zo-project-scroll__viewport{
  overflow: visible;
  scroll-snap-type: none;
  padding-block: 0;
}

.zo-project-scroll.is-pinned .zo-project-scroll__track{
  transform: translate3d(var(--zo-ps-x, 0px), 0, 0);
  will-change: transform;
}

/* --- Smal: één rij, swipen ------------------------------------ */

@media (max-width: 767px){
  .zo-project-scroll{
    --zo-ps-card-w: min(85vw, 24rem);
    --zo-ps-col-gap: 1rem;
    --zo-ps-row-offset: 0px;
  }

  .zo-project-scroll__track{
    grid-template-rows: auto;
  }

  .zo-project-scroll .zo-card__inner{
    height: auto;
  }
}