/**
 * CLEAN SIMPLE CSS — Indexhibit (Theo)
 * Hele ndxzsite/default/style.css
 */

/* ===== Base ===== */
body {
  font-size: 16px;
  font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
  background: #fff;
  color: #000;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}

/* Links */
a:link    { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #888; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: none; color: #00cc00; }
a img     { border: none; }
audio:focus { outline: none; }

/* Text basics */
small { font-size: 9px; }
code  { font-family: monospace; }
blockquote { padding-left: 9px; }

/* Headings */
h1, h2, h3, h4 {
  font-size: 16px;
  margin-bottom: 1em;
  font-weight: bold;
}

/* Paragraphs */
#index p { margin-bottom: 1em; }
#exhibit p, code, blockquote {
  width: 600px;
  margin-bottom: 1em;
}

/* Highlight */
.highlight { background: #ccff00; color: #000; }

/* ===== Sidebar ===== */
#index {
  background-color: #E5EFDB;
  width: 215px;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  padding: 27px 9px 40px 27px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Copyright vast onderin */
#index .copyright {
  position: fixed;
  bottom: 10px;
  left: 20px;
  font-size: 0.7em;
  color: #333;
  width: 175px;
}

/* Sidebar list */
#index ul { list-style: none; margin: 0; padding: 0; }
#index ul.section { margin-bottom: 1em; }

/* Subsections */
#index ul.section ul {
  margin-left: 15px;
  font-size: 14px;
  display: none;
}
#index ul.section:hover ul { display: block; }

/* Active link styles */
li.active a:link, li a.active,
li.active a:hover, li a.active,
li.active a:active, li a.active,
li.active a:visited, li a.active,
li span.active,
#index ul.section li.active a:link,
#index ul.section li.active a:hover,
#index ul.section li.active a:active,
#index ul.section li.active a:visited {
  font-weight: normal;
  color: #00f;
}

/* Logo & title (optioneel) */
#logo { font-size: 1.2em; font-weight: bold; margin-bottom: 20px; }
#logo .subtitle { font-size: 0.8em; font-style: italic; color: #555; }

.site-title { font-weight: bold; font-size: 1.2em; margin: 0; }
.site-title a { text-decoration: none; color: #000; }
site-title a:hover { text-decoration: underline; }
.subtitle { font-weight: normal; font-size: 0.9em; color: #555; margin-top: 2px; }

/* ===== Content Area ===== */
#exhibit {
  background-color: #fff;
  margin-left: 215px;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Fallback caption-styles (als overlay uit staat) */
.captioning { margin-top: 2px; }
.title, .caption {
  font-size: 0.7em;
  font-style: italic;
  line-height: 1.2em;
}

/* =========================================================
   VISUAL INDEX — INLINE-BLOCK “MASONRY”
   - gelijke H & V afstand
   - geen crop (thumbnails houden eigen verhouding)
   - overlay midden
   ========================================================= */

:root{
  --thumb-gap: 28px;  /* wijzig dit ene getal voor alle tussenruimtes */
}

/* Container: inline-block tiles gebruiken -> whitespace verwijderen met font-size:0 */
#img-container{
  margin-top: 40px;       /* ruimte onder sectietitel */
  font-size: 0;           /* voorkomt inline-block whitespace */
  line-height: 0;         /* extra zekerheid */
}

/* Elk kaartje: inline-block met vaste marges = gelijke gaps */
#img-container .picture_holder{
  display: inline-block;
  vertical-align: top;
  margin: 0 var(--thumb-gap) var(--thumb-gap) 0; /* H & V === */
  width: auto !important;
  height: auto !important;
  position: relative;
  overflow: hidden;

  /* haal oude layout van Indexhibit weg */
  float: none !important;
  padding: 0 !important;
}

/* Geef de kaartjes een “basismatrix” door alle inline-stijlen te neutraliseren */
#img-container .picture{
  position: relative;
  height: auto !important;
}
#img-container .picture > div{
  padding-top: 0 !important;
  margin: 0 !important;
}

/* Afbeelding: schaal proportioneel, nooit croppen */
#img-container .picture_holder img{
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important; /* extra bescherming tegen croppen */
  transition: transform .2s ease, filter .2s ease;
}

/* “Beetje wit worden” (2D, geen schaduw) */
#img-container .picture::after{
  content:'';
  position:absolute; inset:0;
  background:#fff;
  opacity:.08;
  pointer-events:none;
  transition:opacity .22s ease;
}
#img-container .picture_holder:hover .picture::after{ opacity:.30; }
#img-container .picture_holder:hover img{ transform: scale(1.01); }

/* Overlay midden */
#img-container .captioning{
  position:absolute !important;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  margin:0 !important;
  padding:0 16px !important;
  background:transparent !important;
  color:#000;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:2;
}
#img-container .picture_holder:hover .captioning{
  opacity:1;
  transform:translateY(0);
}

/* Typografie overlay */
#img-container .captioning .title{
  font: 600 16px/1.3 Helvetica, Arial, sans-serif;
  color:#000;
}
#img-container .captioning .subtitle{
  margin-top:6px;
  font: 400 14px/1.35 Helvetica, Arial, sans-serif;
  color:#000;
}

/* Herstel normale tekstgrootte binnen de kaarten (we hebben container op 0 gezet) */
#img-container .picture_holder,
#img-container .captioning,
#img-container .captioning .title,
#img-container .captioning .subtitle{
  font-size: 16px; /* basis voor inside tekst */
  line-height: normal;
}

/* Optioneel: breek op small screens iets compacter */
@media (max-width: 900px){
  :root{ --thumb-gap: 22px; }
}

/* =========================
   Responsive tweaks
   ========================= */

/* Tablets & kleine laptops */
@media (max-width: 768px) {
  #img-container {
    grid-template-columns: repeat(2, 1fr);  /* 2 per rij */
    gap: 20px;  /* iets kleiner gap op mobiel */
  }

  #exhibit {
    margin-left: 0;    /* sidebar gaat vaak erboven of eraf op mobiel */
    padding: 16px;
  }

  #index {
    position: relative;
    width: 100%;
    padding: 12px;
  }
}

/* Hele kleine schermen (telefoons in portret) */
@media (max-width: 480px) {
  #img-container {
    grid-template-columns: 1fr;  /* alles onder elkaar */
    gap: 16px;
  }
}