/* =====================================================
   Noëlle VanDijk – Project Gallery  v1.7.5
   ===================================================== */


/* ═══════════════════════════════════════════════════
   CONFIGURATIE — pas deze waarden aan via:
   WordPress → Weergave → Aanpassen → Extra CSS

   Voorbeeld:
   :root { --ndv-title-size: 64px; }
   ═══════════════════════════════════════════════════ */

:root {
  /* ── LAYOUT ────────────────────────────────────── */
  --ndv-header-h:    0px;     /* wordt door JS ingesteld (werkelijke navbalk)  */
  --ndv-header-flow: 0px;     /* wordt door JS ingesteld (ruimte in de stroom) */
  /* clamp(min, voorkeur, max) → schaalt automatisch mee met
     de schermbreedte zodat de gallery er goed uitziet van
     13" laptop tot grote monitor zonder extra breakpoints.  */
  --ndv-side-pad:    clamp(24px, 3.6vw, 52px);
  --ndv-gap:         clamp(20px, 2.8vw, 44px);
  --ndv-track-pad:   clamp(16px, 2.0vw, 28px);
  --ndv-info-w:      clamp(240px, 28vw, 400px);
  --ndv-credits-w:   clamp(200px, 24vw, 360px);
  --ndv-caption-h:   42px;    /* hoogte bijschrift-rij        */

  /* Berekende artwork-hoogte — gebruikt door img/video direct
     zodat de rendergrootte de itemgrootte bepaalt (geen witte gaten) */
  --ndv-track-pad-b: 24px;  /* ruimte onder bijschriften (onderkant gallery) */
  --ndv-art-h: calc(100vh - var(--ndv-header-h) - var(--ndv-track-pad) - var(--ndv-track-pad-b) - var(--ndv-caption-h));

  /* ── KLEUREN ──────────────────────────────────── */
  --ndv-bg:          #ffffff;
  --ndv-fg:          #000000;
  --ndv-muted:       rgba(0,0,0,0.40);
  --ndv-border:      #000000;

  /* ── LETTERTYPEN ─────────────────────────────── */
  --ndv-font:        'suisse-intl', 'Helvetica Neue', Arial, sans-serif;
  --ndv-font-mono:   'suisse-intl-mono', 'Courier New', monospace;

  /* ── PROJECTTITEL ────────────────────────────── */
  --ndv-title-size:    clamp(24px, 3vw, 46px);
  --ndv-title-weight:  600;          /* Suisse Semi Bold          */
  --ndv-title-color:   var(--ndv-fg);
  --ndv-title-spacing: -0.02em;
  --ndv-title-line-h:  1.06;

  /* ── CLIENT / MERK ───────────────────────────── */
  --ndv-client-size:    11px;
  --ndv-client-weight:  400;
  --ndv-client-color:   var(--ndv-fg);
  --ndv-client-spacing: 0.10em;

  /* ── PROJECTOMSCHRIJVING ─────────────────────── */
  --ndv-desc-size:    13.5px;
  --ndv-desc-weight:  400;
  --ndv-desc-color:   var(--ndv-fg);
  --ndv-desc-line-h:  1.70;
  --ndv-desc-border:  1px solid var(--ndv-fg);

  /* ── YEAR LABEL ──────────────────────────────── */
  --ndv-label-size:    9.5px;
  --ndv-label-color:   var(--ndv-fg);
  --ndv-label-spacing: 0.12em;
  --ndv-year-size:     14px;
  --ndv-year-weight:   400;
  --ndv-year-color:    var(--ndv-fg);

  /* ── BIJSCHRIFTEN ────────────────────────────── */
  --ndv-caption-size:    11px;
  --ndv-caption-weight:  400;
  --ndv-caption-color:   var(--ndv-muted);
  --ndv-caption-spacing: 0.01em;

  /* ── CREDITS ─────────────────────────────────── */
  --ndv-credits-head-size:    9.5px;
  --ndv-credits-head-color:   var(--ndv-fg);
  --ndv-credits-head-spacing: 0.12em;
  --ndv-credit-role-size:     10px;
  --ndv-credit-role-color:    var(--ndv-fg);
  --ndv-credit-role-spacing:  0.08em;
  --ndv-credit-name-size:     15px;
  --ndv-credit-name-weight:   500;
  --ndv-credit-name-color:    var(--ndv-fg);
}


/* ─────────────────────────────────────────────────────
   BODY LOCK — voorkomt verticaal scrollen op desktop
   ───────────────────────────────────────────────────── */
.ndv-project-body {
  overflow: hidden;
  height: 100vh;
  background: var(--ndv-bg);
}

/* Reset theme-wrapper padding/margin */
.ndv-project-body #page,
.ndv-project-body .site,
.ndv-project-body #content,
.ndv-project-body .site-content,
.ndv-project-body main,
.ndv-project-body #main,
.ndv-project-body .main-content {
  padding:   0 !important;
  margin:    0 !important;
  max-width: none !important;
}


/* ─────────────────────────────────────────────────────
   PAGINA-WRAPPER
   ───────────────────────────────────────────────────── */
.ndv-project-page {
  position:    relative;
  width:       100%;
  box-sizing:  border-box;
  height:      calc(100vh - var(--ndv-header-flow, 0px));
  padding-top: calc(var(--ndv-header-h, 0px) - var(--ndv-header-flow, 0px));
  overflow:    hidden;
  background:  var(--ndv-bg);
  font-family: var(--ndv-font);
  -webkit-font-smoothing: antialiased;
}


/* ─────────────────────────────────────────────────────
   HORIZONTAAL SCROLL-SPOOR
   align-items: stretch laat alle items de volledige
   hoogte van het spoor gebruiken (incl. padding).
   ───────────────────────────────────────────────────── */
.ndv-scroll-track {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-start;     /* items vluchten naar de bovenkant   */
  height:          100%;
  overflow-x:      scroll;
  overflow-y:      hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Boven: volledige track-pad / Onder: minimaal (6px) */
  padding: var(--ndv-track-pad) var(--ndv-side-pad) var(--ndv-track-pad-b);
  gap:     var(--ndv-gap);
  cursor:  default;
  will-change: scroll-position;
  /* Onzichtbaar tot JS de header-hoogte heeft gecorrigeerd,
     zodat de pagina niet zichtbaar springt bij laden */
  opacity:    0;
  transition: opacity 0.18s ease;
}
.ndv-scroll-track::-webkit-scrollbar { display: none; }


/* ─────────────────────────────────────────────────────
   INFO-PANEEL (eerste kolom in de scroll)
   ───────────────────────────────────────────────────── */
.ndv-info-panel {
  flex-shrink:     0;
  align-self:      stretch;        /* strekt altijd tot de volle hoogte  */
  width:           var(--ndv-info-w);
  position:        relative;       /* voor de ::after border-lijn        */
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding-right:   var(--ndv-gap);
  padding-bottom:  var(--ndv-caption-h);  /* uitlijnen met onderkant foto's */
}
/* Eerste border (info-panel rechts) verwijderd — sectie-verdelers nemen deze rol over */

.ndv-info-top {
  display:        flex;
  flex-direction: column;
  gap: 10px;
}

.ndv-project-title {
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-title-size);
  font-weight:    var(--ndv-title-weight);
  line-height:    var(--ndv-title-line-h);
  letter-spacing: var(--ndv-title-spacing);
  color:          var(--ndv-title-color) !important; /* overschrijft thema link-kleur */
  margin:  0;
  padding: 0;
  text-decoration: none !important;
}

.ndv-project-client {
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-client-size);
  font-weight:    var(--ndv-client-weight);
  letter-spacing: var(--ndv-client-spacing);
  text-transform: uppercase;
  color:          var(--ndv-client-color);
  margin: 0;
}

.ndv-info-middle {
  flex: 1;
  display:     flex;
  align-items: center;
  padding:     20px 0;
  min-height:  0;
}

.ndv-project-description {
  font-family:  var(--ndv-font);
  font-size:    var(--ndv-desc-size);
  font-weight:  var(--ndv-desc-weight);
  line-height:  var(--ndv-desc-line-h);
  color:        var(--ndv-desc-color);
  max-width:    320px;
  border-left:  var(--ndv-desc-border);
  padding-left: 18px;
}
.ndv-project-description p { margin: 0 0 0.8em; }
.ndv-project-description p:last-child { margin: 0; }

.ndv-info-bottom {
  /* Jaar/Series zitten altijd zichtbaar onderaan het paneel */
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.ndv-project-meta {
  display:        flex;
  flex-direction: column;
  gap: 3px;
}

.ndv-meta-label {
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-label-size);
  font-weight:    400;
  letter-spacing: var(--ndv-label-spacing);
  text-transform: uppercase;
  color:          var(--ndv-label-color);
}

.ndv-meta-value {
  font-family: var(--ndv-font);
  font-size:   var(--ndv-credit-name-size);   /* zelfde als creditsnamen */
  font-weight: 500;                            /* medium, zelfde als creditsnamen */
  color:       var(--ndv-year-color);
}


/* ─────────────────────────────────────────────────────
   ARTWORK-ITEMS
   ───────────────────────────────────────────────────── */
.ndv-artwork-item {
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  /* Breedte: automatisch van het beeld, of handmatig */
  width: var(--item-width, auto);
  /* Safari z-index fix: isoleer elk item zodat video's niet over foto's komen */
  position:  relative;
  z-index:   0;
  isolation: isolate;
}

/* Media-container: wraps precies om het beeld — geen flex-grow */
.ndv-artwork-media {
  flex:     none;
  display:  block;
  overflow: visible;      /* NOOIT afsnijden — altijd volledig tonen */
  position: relative;
  z-index:  0;
}

/* ──────────────────────────────────────────────────────
   KERNREGEL: beeldverhouding altijd behouden
   --ndv-art-h (calc) → expliciete hoogte, geen flex-overerving
   width: auto         → breedte volgt automatisch uit de verhouding
   object-fit: contain → nooit bijsnijden, altijd volledig

   Waarom calc() i.p.v. height:100%?
   Bij height:100% berekent de browser de intrinsieke/native breedte
   van het beeld als de itembreedte — de render-breedte is kleiner
   → grote witte gaten naast elk beeld. Met een expliciete hoogte
   weet de browser meteen de exacte render-breedte.
   ────────────────────────────────────────────────────── */
.ndv-artwork-media img,
.ndv-artwork-media video {
  display:     block;
  height:      var(--ndv-art-h);   /* expliciet, niet 100% via flex */
  width:       auto;               /* beeldverhouding automatisch   */
  object-fit:  contain;            /* nooit bijsnijden              */
  background:  var(--ndv-bg);
  flex-shrink: 0;
  position:    relative;
  z-index:     0;
}

/* Wanneer gebruiker een vaste breedte instelt:
   beeld heeft die breedte EN de volledige artworkhoogte.
   object-fit: contain zorgt dat het beeld niet wordt bijgesneden. */
.ndv-artwork-item[style] .ndv-artwork-media img,
.ndv-artwork-item[style] .ndv-artwork-media video {
  width:      var(--item-width);
  height:     var(--ndv-art-h);  /* altijd volle hoogte, ook voor video's zonder geladen metadata */
  object-fit: contain;
  background: var(--ndv-bg);
}

/* Video: gewone pijlcursor, geen handje */
.ndv-video {
  cursor: default;
}


/* ─────────────────────────────────────────────────────
   YOUTUBE / VIMEO EMBED IFRAMES
   Zelfde hoogte als andere artworks, breedte 16:9
   ───────────────────────────────────────────────────── */
.ndv-embed-frame {
  display:    block;
  height:     var(--ndv-art-h);
  width:      calc(var(--ndv-art-h) * 16 / 9);
  border:     none;
  background: #000;
  position:   relative;
  z-index:    0;
}



/* ─────────────────────────────────────────────────────
   BIJSCHRIFTEN — bewegen mee met hun artwork
   ───────────────────────────────────────────────────── */
.ndv-artwork-caption {
  flex-shrink:    0;
  height:         var(--ndv-caption-h);
  display:        flex;
  align-items:    flex-start;
  padding-top:    10px;
  margin:         0;
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-caption-size);
  font-weight:    var(--ndv-caption-weight);
  letter-spacing: var(--ndv-caption-spacing);
  color:          var(--ndv-caption-color);
  overflow:       hidden;
  white-space:    nowrap;
  text-overflow:  ellipsis;
}
.ndv-caption-empty { visibility: hidden; }


/* ─────────────────────────────────────────────────────
   SECTIE-VERDELER
   Voeg toe via WordPress als artwork-type "Sectie".
   Volledig onzichtbaar als je hem niet gebruikt.
   ───────────────────────────────────────────────────── */
.ndv-section-divider {
  flex-shrink: 0;
  position:    relative;
  width:       1px;
  height:      var(--ndv-art-h);
  background:  var(--ndv-border);
}

.ndv-divider-label {
  position:       absolute;
  top:            16px;
  left:           10px;          /* iets rechts van de lijn            */
  writing-mode:   vertical-rl;   /* tekst loopt van boven naar beneden */
  white-space:    nowrap;
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-credit-role-size);    /* zelfde als credit-rol */
  font-weight:    400;
  letter-spacing: var(--ndv-credit-role-spacing);
  text-transform: uppercase;
  color:          var(--ndv-fg);
}


/* ─────────────────────────────────────────────────────
   CREDITS-PANEEL (laatste kolom)
   ───────────────────────────────────────────────────── */
.ndv-credits-panel {
  flex-shrink:     0;
  align-self:      stretch;        /* strekt altijd tot de volle hoogte  */
  width:           var(--ndv-credits-w);
  position:        relative;       /* voor de ::before border-lijn       */
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding-left:    var(--ndv-gap);
}
/* Border stopt bij onderkant foto's, niet bij onderkant paneel */
.ndv-credits-panel::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     var(--ndv-caption-h);
  width:      1px;
  background: var(--ndv-border);
}

.ndv-credits-top {
  flex-shrink: 0;
}

.ndv-credits-heading {
  display:        block;
  font-family:    var(--ndv-font);
  font-size:      clamp(20px, 2.4vw, 34px);  /* paginatitel: clamp(24px,3vw,46px) */
  font-weight:    var(--ndv-title-weight);
  letter-spacing: var(--ndv-title-spacing);
  line-height:    var(--ndv-title-line-h);
  text-transform: none;
  color:          var(--ndv-fg);
}

.ndv-credits-list {
  flex: 1;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  gap: 20px;
  /* Laatste creditregel sluit aan op onderkant van de beelden ernaast */
  padding-bottom: var(--ndv-caption-h);
}

/* ── Creditgroepen ────────────────────────────────────── */
.ndv-credit-section {
  display:        flex;
  flex-direction: column;
  gap: 14px;
}

/* Groepstitel — Suisse Int'l bold, sentence case, compact label */
.ndv-credit-section-title {
  display:        block;
  font-family:    var(--ndv-font);
  font-size:      clamp(13px, 1.3vw, 16px);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: none;
  color:          var(--ndv-fg);
  margin-bottom:  4px;
  padding-top:    14px;
  border-top:     1px solid var(--ndv-border);
}
.ndv-credit-section:first-child .ndv-credit-section-title {
  padding-top: 0;
  border-top:  none;
}

.ndv-credit-item {
  display:        flex;
  flex-direction: column;
  gap: 2px;
}

/* Rollen — Suisse Int'l, micro-label: uppercase + ruime spatiëring */
.ndv-credit-role {
  font-family:    var(--ndv-font);
  font-size:      var(--ndv-credit-role-size);
  font-weight:    400;
  letter-spacing: var(--ndv-credit-role-spacing);
  text-transform: uppercase;
  color:          var(--ndv-fg);
}

.ndv-credit-name {
  font-family: var(--ndv-font);
  font-size:   var(--ndv-credit-name-size);
  font-weight: var(--ndv-credit-name-weight);
  color:       var(--ndv-credit-name-color);
}

/* Klikbare naam: kleurverandering bij hover, geen underline */
a.ndv-credit-name {
  text-decoration: none;
  color:           var(--ndv-credit-name-color);
  transition:      opacity 0.15s ease;
}
a.ndv-credit-name:hover {
  text-decoration: none;
  opacity:         1;
}


/* ─────────────────────────────────────────────────────
   VIDEO CONTROLS — altijd zichtbaar onderaan de video
   Subtiel (lage opacity), iets zichtbaarder bij hover.
   ───────────────────────────────────────────────────── */
.ndv-video-controls {
  position:   absolute;
  bottom:     10px;
  left:       10px;
  display:    flex;
  gap:        5px;
  z-index:    5;
  opacity:    0.35;
  transition: opacity 0.2s ease;
}
.ndv-artwork-media:hover .ndv-video-controls {
  opacity: 0.75;
}
.ndv-video-btn {
  width:           26px;
  height:          26px;
  border-radius:   3px;
  background:      rgba(0, 0, 0, 0.45);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  flex-shrink:     0;
  transition:      background 0.15s ease;
}
.ndv-video-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.ndv-video-btn svg {
  display:       block;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────
   VOORTGANGSBALK
   ───────────────────────────────────────────────────── */
.ndv-progress-bar {
  position:   fixed;
  bottom:     0; left: 0;
  height:     1.5px;
  background: var(--ndv-fg);
  width:      0%;
  opacity:    0.15;
  transition: width 0.06s linear;
  z-index:    9999;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────
   MOBIEL — verticale scroll, originele beeldverhoudingen
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .ndv-project-body {
    overflow: auto;
    height:   auto;
  }

  .ndv-project-page {
    height:   auto;
    overflow: visible;
  }

  .ndv-scroll-track {
    flex-direction: column;
    height:         auto;
    overflow-x:     hidden;
    overflow-y:     visible;
    padding:        20px 20px;
    gap:            10px;
    align-items:    stretch;
  }

  .ndv-info-panel {
    width:          100%;
    border-right:   none;
    border-bottom:  none;
    padding-right:  0;
    padding-bottom: 20px;  /* + 8px gap = 28px voor de scheidingslijn */
    gap:            24px;
    justify-content: flex-start;
  }
  .ndv-info-middle { flex: none; padding: 0; }
  .ndv-project-description {
    max-width: 100%;
    border-left: var(--ndv-desc-border);  /* lijn blijft zichtbaar */
    padding-left: 16px;
  }

  /* Artworks op mobiel: volledige breedte,
     hoogte automatisch van beeldverhouding */
  .ndv-artwork-item {
    width: 100% !important;
    height: auto;
  }

  .ndv-artwork-media {
    /* Geen vaste hoogte — beeldverhouding bepaalt de hoogte */
    overflow: visible;
    flex: none;
    height: auto;
    width: 100%;
  }

  /* Afbeelding: volle breedte, hoogte automatisch → behoudt verhouding */
  .ndv-artwork-media img {
    width:  100% !important;
    height: auto !important;
    object-fit: unset;
    display: block;
  }

  /* Video: volle breedte, hoogte automatisch */
  .ndv-artwork-media video {
    width:  100% !important;
    height: auto !important;
    display: block;
  }

  /* Overschrijf ook de [style]-variant op mobiel */
  .ndv-artwork-item[style] .ndv-artwork-media img,
  .ndv-artwork-item[style] .ndv-artwork-media video {
    width:  100% !important;
    height: auto !important;
    object-fit: unset;
  }

  .ndv-artwork-caption {
    height:     auto;
    min-height: 32px;
    white-space: normal;
  }

  /* Iframes op mobiel: 16:9, volledige breedte */
  .ndv-embed-frame {
    width:  100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* Credits: geen bottom padding nodig op mobiel */
  .ndv-credits-list {
    padding-bottom: 0;
  }

  /* Credits onderaan */
  .ndv-credits-panel {
    width:          100%;
    border-left:    none;
    border-top:     1px solid var(--ndv-border);
    padding-left:   0;

    padding-top:    22px;
    padding-bottom: 16px;
    justify-content: flex-start;
  }
  /* Pseudo-element borders alleen op desktop */
  .ndv-info-panel::after,
  .ndv-credits-panel::before {
    display: none;
  }
  /* Op mobiel: geen extra lijn onder de heading,
     de afstand doet het werk */
  .ndv-credits-top {
    border-bottom:  none;
    padding-bottom: 10px;
    margin-bottom:  0;
  }
  /* Groepstitels: groter dan namen → duidelijke hiërarchie, geen lijnen op mobiel */
  .ndv-credit-section-title {
    font-size:   14px !important;
    border-top:  none !important;
    padding-top: 0 !important;
    margin-top:  12px;
  }
  .ndv-credit-section:first-child .ndv-credit-section-title {
    margin-top: 0;
  }
  /* Namen en rollen iets kleiner dan de groepstitel */
  .ndv-credit-name {
    font-size: 13px;
  }
  .ndv-credit-role {
    font-size: 9px;
  }
  .ndv-credits-list {
    justify-content: flex-start;
    gap: 12px;
  }
  .ndv-credit-section {
    gap: 8px;  /* minder ruimte tussen groeptitel en credits */
  }

  /* Sectie-verdeler: horizontale lijn op mobiel
     De lijn loopt via ::before zodat de label eronder
     gewoon ruimte kan innemen in de flex-kolom.        */
  .ndv-section-divider {
    width:      100%;
    height:     auto;          /* groeit mee met de label  */
    background: transparent;   /* lijn via ::before        */
    position:   relative;
    padding:    0;             /* geen extra ruimte boven de lijn */
    margin:     0;
  }
  .ndv-section-divider::before {
    content:    '';
    display:    block;
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: var(--ndv-border);
  }
  .ndv-divider-label {
    writing-mode: horizontal-tb;
    position:     static;
    display:      block;
    padding:      10px 0 10px; /* boven tekst / onder tekst */
    left:         auto;
    top:          auto;
    font-size:    var(--ndv-credit-role-size);
    letter-spacing: var(--ndv-credit-role-spacing);
    text-transform: uppercase;
    color:        var(--ndv-fg);
  }
}


/* ─────────────────────────────────────────────────────
   TABLET (769–1024px)
   De clamp()-waarden in :root dekken dit al grotendeels,
   maar hier stellen we de ondergrens scherper in.
   ───────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --ndv-side-pad:  clamp(20px, 3vw, 32px);
    --ndv-gap:       clamp(20px, 3vw, 32px);
    --ndv-track-pad: 18px;
    --ndv-info-w:    clamp(220px, 30vw, 320px);
    --ndv-credits-w: clamp(180px, 26vw, 260px);
  }
}