/* =============================================================
   Component zo-project-archive  (Aannemersbedrijf Noordhout)
   Projectenarchief (onder de Hub-titelbalk): introductie op een
   grijs vlak, en de projecten als zo-card (layout overlay) in twee
   kolommen met paginering. Breedte via Hubs .container, zodat alles
   uitlijnt met de titelbalk.

   De cards grijpen met hun schuine randen in elkaar. De kolom-
   breedte volgt daarom uit de containerbreedte, de verhouding en de
   hoek: 2 × kolom − schuinte + tussenruimte = 100cqi, met
   schuinte = kolom / verhouding × tan. De eerste kolom is een
   schuinte smaller dan de card, zodat de tweede card eronder schuift.
   ============================================================= */

.zo-project-archive{
  --zo-pa-ink:      #14143c;
  --zo-pa-body:     #4f4f6a;
  --zo-pa-line:     #3a2f9e;
  --zo-pa-active:   #2f2a8a;
  --zo-pa-soft:     #f5f5f7;   /* vlak introductie */
  --zo-pa-outline:  var(--zo-outline-color, #c9c9d3);
  --zo-pa-space:    clamp(3rem, 8vw, 7rem);

  /* gedeeld met de cards */
  --zo-pa-tan:      .2;
  --zo-pa-ratio:    1.8;
  --zo-pa-gap:      .75rem;   /* zichtbare ruimte tussen de schuine randen */
  --zo-pa-row-gap:  clamp(1rem, 2.5vw, 1.75rem);
}

/* --- Kop met outline-tekst (introductie en projecten) ---------- */

/* 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-archive__heading{
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}

.zo-project-archive__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-pa-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;
  overflow-x: clip;   /* alleen zijwaarts: de letters steken boven en onder uit */
}

.zo-project-archive__title{
  position: relative;   /* boven de outline, die door left:-8px ook gepositioneerd is */
  z-index: 1;
  margin: 0;
  color: var(--zo-pa-ink);
}

/* --- Introductie ---------------------------------------------- */

.zo-project-archive__intro{
  padding-block: var(--zo-pa-space);
  background: var(--zo-pa-soft);
}

/* Titel over twee regels, zoals in het ontwerp. */
.zo-project-archive__intro-title{
  max-width: 13em;
}

.zo-project-archive__intro-text,
.zo-project-archive__intro-actions{
  max-width: 40rem;
  margin: 0;
}

.zo-project-archive__intro-text{
  color: var(--zo-pa-body);
}

.zo-project-archive__intro-actions{
  margin-top: 1.5rem;
}

.zo-project-archive__btn{
  display: inline-block;
  padding: .55rem 1.6rem;
  border: 1px solid var(--zo-pa-ink);
  border-radius: 999px;
  color: var(--zo-pa-ink);
  font-size: .75em;   /* t.o.v. de Hub-body */
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.zo-project-archive__btn:hover,
.zo-project-archive__btn:focus-visible{
  background: var(--zo-pa-ink);
  color: #fff;
}

.zo-project-archive__btn:focus-visible{
  outline: 2px solid var(--zo-pa-active);
  outline-offset: 3px;
}

/* --- Projecten ------------------------------------------------ */

.zo-project-archive__projects{
  padding-block: var(--zo-pa-space);
  /* Anker van de introductieknop; zonder Hub-JS springt de browser hierheen. */
  scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}

.zo-project-archive__body{
  container: zo-pa / inline-size;
}

.zo-project-archive .zo-card{
  --zo-card-tan:   var(--zo-pa-tan);
  --zo-card-ratio: var(--zo-pa-ratio);
}

.zo-project-archive__grid{
  --zo-pa-col:   calc((100cqi - var(--zo-pa-gap)) / (2 - var(--zo-pa-tan) / var(--zo-pa-ratio)));
  --zo-pa-slant: calc(var(--zo-pa-col) / var(--zo-pa-ratio) * var(--zo-pa-tan));

  display: grid;
  grid-template-columns: calc(var(--zo-pa-col) - var(--zo-pa-slant) + var(--zo-pa-gap)) var(--zo-pa-col);
  row-gap: var(--zo-pa-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zo-project-archive__item{
  width: var(--zo-pa-col);
  min-width: 0;
  margin: 0;
}
.zo-project-archive__item::before{ content: none; } /* geen theme-bullets */

@container zo-pa (max-width: 639px){
  .zo-project-archive__grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .zo-project-archive__item{
    width: auto;
  }
}

.zo-project-archive__empty{
  margin: 0;
}

/* --- Paginering ----------------------------------------------- */

.zo-project-archive__pagination{
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.zo-project-archive__pages{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zo-project-archive__page{
  margin: 0;
}
.zo-project-archive__page::before{ content: none; }

.zo-project-archive__page .page-numbers{
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  box-sizing: border-box;
  border: 1px solid var(--zo-pa-line);
  background: transparent;
  color: var(--zo-pa-line);
  font-size: .8em;   /* t.o.v. de Hub-body */
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.zo-project-archive__page a.page-numbers:hover,
.zo-project-archive__page a.page-numbers:focus-visible,
.zo-project-archive__page .page-numbers.current{
  background: var(--zo-pa-active);
  border-color: var(--zo-pa-active);
  color: #fff;
}

.zo-project-archive__page a.page-numbers:focus-visible{
  outline: 2px solid var(--zo-pa-active);
  outline-offset: 2px;
}

.zo-project-archive__page .page-numbers.dots{
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce){
  .zo-project-archive__btn,
  .zo-project-archive__page .page-numbers{ transition: none; }
}