/* =============================================================
   Component zo-card  (Aannemersbedrijf Noordhout)
   Brede card als parallellogram: foto links, tekst rechts, pijlvak
   rechtsonder. Alle schuine randen hebben dezelfde hoek.

   Geometrie: de vlakken zijn geknipt met clip-path. Een vaste hoek
   vraagt een horizontale verschuiving die meegroeit met de hoogte
   (hoogte × --zo-card-tan); zo-card.js meet de hoogte en zet die als
   --zo-card-slant-js. Zonder JS geldt een vaste schatting.

   De omlijning bestaat uit twee lagen: een donker vlak en een 1px
   kleiner licht vlak erboven (borders werken niet met clip-path).

   Layout schakelt op de breedte van de card zelf (container query),
   zodat hij ook in smalle kolommen werkt.
   ============================================================= */

.zo-card{
  /* kleur (zelfde palet als zo-about-stack) */
  --zo-card-ink:     #14143c;   /* titel */
  --zo-card-body:    #4f4f6a;   /* omschrijving */
  --zo-card-line:    #24243c;   /* omlijning, labels, pijl */
  --zo-card-bg:      #efeff2;   /* tekstvlak */
  --zo-card-focus-ring: #3a2f9e;

  /* geometrie */
  --zo-card-tan:     .2;        /* tan(hoek) van de schuine randen, ≈ 11° */
  --zo-card-media:   40%;
  --zo-card-pad:     clamp(1.25rem, 4cqi, 3rem);
  --zo-card-arrow-w: 5.5rem;
  --zo-card-arrow-h: 3.5rem;

  container: zo-card / inline-size;
  margin: 0;
}

.zo-card__inner{
  /* Hier en niet op .zo-card: zo-card.js zet --zo-card-slant-js op dit element. */
  --zo-card-slant:       var(--zo-card-slant-js, 3.5rem);
  --zo-card-arrow-slant: calc(var(--zo-card-arrow-h) * var(--zo-card-tan));

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--zo-card-media) minmax(0, 1fr);
  min-height: 16rem;
  color: var(--zo-card-body);
}

.zo-card--no-media .zo-card__inner{
  grid-template-columns: minmax(0, 1fr);
}

/* --- Vlakken ------------------------------------------------- */

.zo-card__inner::before,
.zo-card__inner::after,
.zo-card__figure,
.zo-card__arrow,
.zo-card__arrow::before{
  --s: var(--zo-card-slant);
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 100%, var(--s) 100%);
}

.zo-card__inner::before,
.zo-card__inner::after{
  content: "";
  position: absolute;
  z-index: -1;
}
.zo-card__inner::before{ inset: 0;   background: var(--zo-card-line); }
.zo-card__inner::after { inset: 1px; background: var(--zo-card-bg); }

/* --- Foto ----------------------------------------------------- */

.zo-card__media{
  position: relative;
}

/* Loopt een slant voorbij de kolom door, zodat de scheiding met het
   tekstvlak dezelfde hoek volgt als de buitenranden. */
.zo-card__figure{
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: calc(100% + var(--zo-card-slant));
  overflow: hidden;
}

.zo-card__figure .zo-card__img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--zo-card-focus, 50% 50%);
}

/* --- Tekst ---------------------------------------------------- */

.zo-card__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  min-width: 0;
  padding-block: var(--zo-card-pad);
  /* ruimte voor de schuine randen links (scheiding) en rechts (buitenrand) */
  padding-inline: calc(var(--zo-card-slant) + var(--zo-card-pad));
}

.zo-card--no-media .zo-card__body{
  padding-left: calc(var(--zo-card-slant) * .5 + var(--zo-card-pad));
}

.zo-card--linked .zo-card__body{
  padding-bottom: calc(var(--zo-card-arrow-h) + var(--zo-card-pad) * .5);
}

/* Lettertype en grootte uit Hub: de class .h2-.h6 op de titel (arg 'size',
   standaard h4) of anders het kopniveau zelf. Dubbele class zodat de kleur
   wint van Hubs kopkleur op .h4 e.d. */
.zo-card .zo-card__title{
  margin: 0;
  color: var(--zo-card-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.zo-card__link,
.zo-card__link:hover,
.zo-card__link:focus{
  color: inherit;
  text-decoration: none;
}

/* Hele card klikbaar: het linkvlak ligt over de card heen. */
.zo-card__link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.zo-card__link:focus{ outline: none; }
.zo-card__link:focus-visible::after{
  outline: 2px solid var(--zo-card-focus-ring);
  outline-offset: 4px;
}

.zo-card__text{
  margin: 0;
}

.zo-card__labels{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.zo-card__label{
  margin: 0;
  padding: .3em .9em;
  border: 1px solid var(--zo-card-line);
  border-radius: 999px;
  background: transparent;
  color: var(--zo-card-line);
  font-size: .75em;   /* t.o.v. de Hub-body */
  line-height: 1.3;
}
.zo-card__label::before{ content: none; } /* geen theme-bullets */

/* --- Pijlvak -------------------------------------------------- */

.zo-card__arrow{
  --s: var(--zo-card-arrow-slant);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--zo-card-arrow-w);
  height: var(--zo-card-arrow-h);
  background: var(--zo-card-line);
  color: var(--zo-card-line);
}

.zo-card__arrow::before{
  --s: var(--zo-card-arrow-slant);
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--zo-card-bg);
  transition: background-color .2s ease;
}

.zo-card__arrow-icon{
  position: relative;
  transition: transform .2s ease, color .2s ease;
}

.zo-card--linked:hover .zo-card__arrow,
.zo-card--linked:focus-within .zo-card__arrow{
  color: var(--zo-card-bg);
}
.zo-card--linked:hover .zo-card__arrow::before,
.zo-card--linked:focus-within .zo-card__arrow::before{
  background: var(--zo-card-line);
}
.zo-card--linked:hover .zo-card__arrow-icon,
.zo-card--linked:focus-within .zo-card__arrow-icon{
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .zo-card__arrow::before,
  .zo-card__arrow-icon{ transition: none; }
  .zo-card--linked:hover .zo-card__arrow-icon,
  .zo-card--linked:focus-within .zo-card__arrow-icon{ transform: none; }
}

/* --- Smal: foto boven, rechte randen -------------------------- */

@container zo-card (max-width: 559px){
  .zo-card__inner{
    --zo-card-slant: 0px;
    --zo-card-arrow-slant: 0px;
    --zo-card-arrow-w: 3.5rem;
    --zo-card-arrow-h: 3rem;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .zo-card__figure{
    position: relative;
    inset: auto;
    width: auto;
    margin: 1px 1px 0;
    aspect-ratio: 16 / 10;
  }

  .zo-card__body,
  .zo-card--no-media .zo-card__body{
    padding-inline: var(--zo-card-pad);
  }
}

/* --- Variant overlay: foto vult de card, titel eroverheen ------
   Vaste verhouding (--zo-card-ratio), dus de schuinte volgt uit de
   breedte en is zonder JS te berekenen. De hele card wordt geknipt,
   ook voor klikken: zo kunnen cards met de schuine randen in elkaar
   grijpen zonder elkaars klikvlak te raken.
   Staat onderaan zodat het ook de smalle weergave hierboven overschrijft. */

.zo-card--overlay{
  --zo-card-ratio:   1.8;       /* breedte / hoogte */
  --zo-card-overlay-ink:  #fff;
  --zo-card-overlay-fade: rgba(20, 20, 60, .6);
}

.zo-card--overlay .zo-card__inner{
  --zo-card-slant: calc(100cqi / var(--zo-card-ratio) * var(--zo-card-tan));
  --zo-card-arrow-slant: calc(var(--zo-card-arrow-h) * var(--zo-card-tan));
  --s: var(--zo-card-slant);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  aspect-ratio: var(--zo-card-ratio);
  min-height: 0;
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 100%, var(--s) 100%);
}

.zo-card--overlay .zo-card__inner::before,
.zo-card--overlay .zo-card__inner::after{
  content: none;
}

/* Onder de tekst, binnen de isolatie van .zo-card__inner. */
.zo-card--overlay .zo-card__media{
  position: absolute;
  inset: 0;
  z-index: -1;
}

.zo-card--overlay .zo-card__figure{
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
}

.zo-card--overlay .zo-card__figure::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--zo-card-overlay-fade), transparent 55%);
}

.zo-card--overlay .zo-card__img{
  transition: transform .4s ease;
}
.zo-card--overlay.zo-card--linked:hover .zo-card__img{
  transform: scale(1.03);
}

.zo-card--overlay .zo-card__body{
  justify-content: center;
  min-height: var(--zo-card-arrow-h);
  padding: 0 calc(var(--zo-card-arrow-w) + var(--zo-card-pad) * .5) 0 calc(var(--zo-card-slant) + var(--zo-card-pad) * .5);
}

.zo-card--overlay .zo-card__title{
  color: var(--zo-card-overlay-ink);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  hyphens: manual;
}

/* Licht pijlvak zonder donkere rand. */
.zo-card--overlay .zo-card__arrow{
  background: var(--zo-card-bg);
}

/* Het klikvlak is mee geknipt; een ring naar binnen blijft zichtbaar. */
.zo-card--overlay .zo-card__link:focus-visible::after{
  outline-color: var(--zo-card-overlay-ink);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce){
  .zo-card--overlay .zo-card__img{ transition: none; }
  .zo-card--overlay.zo-card--linked:hover .zo-card__img{ transform: none; }
}