/* Grid masonry; DOM-orde → chrono links→rechts */
.cs-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 8px;
}

/* Kaart */
.cs-item {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: #f8f9fa;
  box-shadow: 0 .125rem .5rem rgba(0,0,0,.05);
}
.cs-item a.cs-link { display: block; text-decoration: none; color: inherit; }

/* Progressive blur, zonder CLS (pre-span via JS) */
.cs-img { width: 100%; height: auto; display: block; transform: translateZ(0); }
.cs-blur { filter: blur(10px); transform: scale(1.025); transition: filter .35s ease, transform .35s ease, opacity .2s ease; }
.cs-loaded { filter: none; transform: none; }

/* Uploader pill */
.cs-uploader-pill{
  position:absolute; left:.5rem; bottom:.5rem;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(6px);
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  padding:.15rem .5rem; font-size:.75rem; line-height:1;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08); color:var(--bs-body-color);
  max-width:85%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-uploader-pill i{ margin-right:.35rem; }

/* Hover + focus */
.cs-item .cs-img{ transition: transform .12s ease; }
.cs-item:hover .cs-img{ transform: translateY(-1px); }
.cs-link:focus-visible{ outline:3px solid rgba(13,110,253,.6); outline-offset:2px; border-radius:.75rem; }

/* Status/Sentinel */
#gallery-status{ min-height:1.25rem; }
#gallery-sentinel{ opacity:.75; }

/* Dual range slider met zichtbare selectie */
.cs-range{
  --min:0; --max:1440; --start:0; --end:1440;
  position:relative; height:2.25rem; display:grid; align-items:center;
}
.cs-range input[type="range"]{
  -webkit-appearance:none; appearance:none;
  position:absolute; width:100%; margin:0; background:none;
}
.cs-range input[type="range"]:first-of-type{ z-index:2; }
.cs-range input[type="range"]:last-of-type{ z-index:3; }
.cs-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1rem; height:1rem; border-radius:50%;
  background:var(--bs-primary); border:2px solid #fff;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.2);
}
.cs-range input[type="range"]::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:50%;
  background:var(--bs-primary); border:2px solid #fff;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.2);
}
.cs-range input[type="range"]::-webkit-slider-runnable-track{ height:.5rem; background:transparent; }
.cs-range input[type="range"]::-moz-range-track{ height:.5rem; background:transparent; }
.cs-range .track{
  position:absolute; height:.5rem; width:100%; border-radius:.5rem;
  /* blauwe balk met selectie */
  background:linear-gradient(
    to right,
    var(--bs-gray-300) 0%,
    var(--bs-gray-300) calc( (var(--start) - var(--min))/(var(--max)-var(--min)) * 100% ),
    var(--bs-primary)   calc( (var(--start) - var(--min))/(var(--max)-var(--min)) * 100% ),
    var(--bs-primary)   calc( (var(--end) - var(--min))/(var(--max)-var(--min)) * 100% ),
    var(--bs-gray-300)  calc( (var(--end) - var(--min))/(var(--max)-var(--min)) * 100% ),
    var(--bs-gray-300) 100%
  );
}

/* Selectiemodus */
.cs-select-mode .cs-item { cursor: pointer; }
.cs-item .cs-select-check {
  position:absolute; top:.5rem; right:.5rem; z-index:3;
  width:1.35rem; height:1.35rem; border-radius:.3rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.1);
  box-shadow:0 .125rem .25rem rgba(0,0,0,.1);
  color:var(--bs-body-color);
  opacity:0; transform:scale(.95); transition:opacity .12s ease, transform .12s ease;
}
.cs-select-mode .cs-item .cs-select-check { opacity:1; transform:scale(1); }
.cs-item.cs-selected { outline:3px solid rgba(13,110,253,.6); outline-offset:-3px; }

/* Actie-balk onderin */
.cs-selection-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:1rem; z-index:1000;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.75rem;
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12);
  padding:.5rem .75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-width: min(92vw, 640px);
}

/* ✨ Vote/Heart knop rechtsboven */
.cs-vote{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.1);
  border-radius:999px;
  padding:.2rem .5rem;
  font-size:.85rem; line-height:1;
  color:var(--bs-body-color);
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
}
.cs-vote i{ font-size:.95rem; }
.cs-vote .cs-vote-count{ min-width:1.25rem; text-align:right; font-variant-numeric: tabular-nums; }
.cs-vote:hover{ transform:translateY(-1px); }
.cs-vote.is-busy{ opacity:.6; pointer-events:none; }

/* Voted state: rood hart + stevig */
.cs-vote.is-voted{
  background:rgba(255,245,245,.98);
  border-color:rgba(220,53,69,.25);
  color:#dc3545;
  box-shadow:0 .25rem .75rem rgba(220,53,69,.12);
}
.cs-vote.is-voted i{ color:#dc3545; }

/* ===== Range track robuust (baseline + selectie) ===== */
.cs-range{
  --min:0; --max:1440; --start:0; --end:1440;
  position:relative; height:2.25rem; display:grid; align-items:center;
}

/* inputs boven de track voor interactie, maar transparant */
.cs-range input[type="range"]{
  -webkit-appearance:none; appearance:none;
  position:absolute; inset:0; width:100%; margin:0; background:transparent;
  z-index: 2;
}
.cs-range input[type="range"]::-webkit-slider-runnable-track{ height:.5rem; background:transparent; }
.cs-range input[type="range"]::-moz-range-track{ height:.5rem; background:transparent; }
.cs-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1rem; height:1rem; border-radius:50%;
  background:var(--bs-primary); border:2px solid #fff; box-shadow:0 .125rem .25rem rgba(0,0,0,.2);
}
.cs-range input[type="range"]::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:50%;
  background:var(--bs-primary); border:2px solid #fff; box-shadow:0 .125rem .25rem rgba(0,0,0,.2);
}

/* VISUELE BALK */
.cs-range .track{
  position:absolute; inset:auto 0; height:.5rem; top:50%;
  transform: translateY(-50%); border-radius:.5rem; z-index: 1;
}
.cs-range .track::before,
.cs-range .track::after{
  content:""; position:absolute; height:100%; border-radius:inherit;
  top:0;
}
/* grijze baseline */
.cs-range .track::before{
  left:0; right:0; background: var(--bs-gray-300);
}
/* blauwe selectie */
.cs-range .track::after{
  left: calc(( (var(--start) - var(--min)) / (var(--max) - var(--min)) ) * 100%);
  width: calc(( (var(--end)   - var(--start)) / (var(--max) - var(--min)) ) * 100%);
  background: var(--bs-primary);
}

/* Ticks (kleine streepjes) boven op de track */
.cs-range .cs-tick{
  position:absolute; bottom:2px; width:2px; height:6px;
  background: currentColor; opacity:.35; pointer-events:none;
  transform: translateX(-1px); z-index:3;
}

.cs-range .track{ pointer-events: none; }

/* ✨ Download knop linksboven */
.cs-dl{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.1);
  border-radius:.5rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
  color:var(--bs-body-color);
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
}
.cs-dl:hover{ transform:translateY(-1px); }
.cs-dl i{ font-size:1rem; line-height:1; }

.cs-item {
  position: relative;
}

.cs-dl {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 3;
}

.cs-fav {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 3;
  background: rgba(0,0,0,0.4);
  border: none;
  padding: 0.25rem 0.35rem;
  border-radius: 999px;
  color: #ffc107;
}
.cs-fav i {
  pointer-events: none;
}