/* =============================================================
   WPBakery-element zo_dienstblok  (Aannemersbedrijf Noordhout)
   Variant op zo-card (layout overlay): foto vult het blok, titel
   linksonder, pijlvak rechtsonder. Hier staan alleen de afwijkingen;
   geometrie en opbouw komen uit zo-card.css.

   Kleuren via de sitebrede variabelen van Hub (Theme Options):
   --color-primary voor het pijlvak bij hover en als achtergrond
   zonder foto. De hoek is die van de knoppen .primary_button-skew
   (skewX 20°), zodat blokken en knoppen eronder bij elkaar passen.
   ============================================================= */

/* Hoek en verhouding op één plek; de rij (diensten_col-container,
   onderaan) rekent er ook mee. */
.zo-card--dienst,
.diensten_col-container{
  --zo-dienst-tan:   .364;                             /* tan(20°) */
  --zo-dienst-ratio: 1.8;                              /* breedte / hoogte */
}

.zo-card--dienst{
  --zo-card-tan:   var(--zo-dienst-tan);
  --zo-card-ratio: var(--zo-dienst-ratio);
  --zo-card-line:  var(--color-primary, #332d80);      /* pijl; vlak bij hover */
  --zo-dienst-bg:  var(--color-primary, #332d80);      /* zonder foto */
  --zo-dienst-gap: clamp(.75rem, 1.5vw, 1.25rem);      /* ruimte onder het blok */

  margin-bottom: var(--zo-dienst-gap);
}

/* Maten volgen de breedte van het blok (container van zo-card), zodat de
   verhouding in elke kolombreedte gelijk blijft. Hogere specificiteit dan
   de smalle weergave van zo-card, die het pijlvak anders vast zet. */
.zo-card--dienst .zo-card__inner{
  --zo-card-arrow-w: clamp(3.5rem, 24cqi, 8.5rem);
  --zo-card-arrow-h: clamp(2.75rem, 12cqi, 4.5rem);
  background: var(--zo-dienst-bg);
}

/* Heel smal (drie kolommen op tablet): kleiner pijlvak, zodat woorden
   als "Monumenten" op één regel blijven. De titel volgt Hub (zo-card). */
@container zo-card (max-width: 260px){
  .zo-card--dienst .zo-card__inner{
    --zo-card-arrow-w: 2.75rem;
    --zo-card-arrow-h: 2.5rem;
  }

  .zo-card--dienst .zo-card__body{
    padding-right: calc(var(--zo-card-arrow-w) + .375rem);
  }
}

/* Pijlvak zonder rand: het binnenvlak vult het hele vak, ook bij hover. */
.zo-card--dienst .zo-card__arrow::before{
  inset: 0;
}

/* --- Rij: alle blokken in één kolom ---------------------------
   Zet "diensten_col-container" in het veld "Extra class name" van een
   WPBakery-kolom en plaats de dienstblokken daar direct onder elkaar.
   Vanaf 640px kolombreedte komen ze naast elkaar en grijpen ze met de
   schuine randen in elkaar, met --zo-dienst-gap-x horizontaal tussen
   de randen. Smaller: onder elkaar, volle breedte.

   Geometrie (zoals het projectenarchief): schuinte s = w × k met
   k = tan / verhouding. n blokken vullen de kolom als
   n × w − (n − 1) × (s − gap) = 100%, dus
   w = (100% − (n − 1) × gap) / (n − (n − 1) × k).
   Elk blok na het eerste schuift (s − gap) onder zijn voorganger.
   Het aantal (n) volgt uit een quantity query; standaard 1.

   Er wordt gerekend met de directe kinderen van .wpb_wrapper: op de
   site zijn dat de blokken zelf, in de frontend-editor de .vc_element-
   wrappers eromheen. Zet in deze kolom dus alleen dienstblokken. */

.diensten_col-container .vc_column-inner{
  container: zo-diensten / inline-size;
}

.diensten_col-container .wpb_wrapper{
  --zo-dienst-gap-x: 15px;
  --zo-dienst-k: calc(var(--zo-dienst-tan) / var(--zo-dienst-ratio));
}

.diensten_col-container .wpb_wrapper > *{
  --zo-dienst-n: 1;
  --zo-dienst-w: calc((100% - (var(--zo-dienst-n) - 1) * var(--zo-dienst-gap-x)) / (var(--zo-dienst-n) - (var(--zo-dienst-n) - 1) * var(--zo-dienst-k)));
}

.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(2),
.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(2) ~ *{ --zo-dienst-n: 2; }
.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(3),
.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(3) ~ *{ --zo-dienst-n: 3; }
.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(4),
.diensten_col-container .wpb_wrapper > :first-child:nth-last-child(4) ~ *{ --zo-dienst-n: 4; }

@container zo-diensten (min-width: 640px){
  .diensten_col-container .wpb_wrapper{
    display: flex;
    align-items: flex-start;
  }

  .diensten_col-container .wpb_wrapper > *{
    flex: 0 0 auto;
    width: var(--zo-dienst-w);
  }

  .diensten_col-container .wpb_wrapper > * + *{
    margin-left: calc(var(--zo-dienst-gap-x) - var(--zo-dienst-k) * var(--zo-dienst-w));
  }
}