/* Varve — manieren van bladeren. Bij varve-modi.js.
   Zelfde maat en letter als .v-jump en .os-filter-knop, zodat de drie rijen
   knoppen op de pagina als één systeem lezen. */

.v-modi {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-left: auto;
}
/* Staan de sprongknoppen er ook, dan gaan die naar rechts en de modi ernaast;
   samen duwen ze zichzelf niet uit elkaar. */
.v-jump + .v-modi { margin-left: var(--space-4); }

.v-modi-knop {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: .38rem .7rem;
  border: var(--border-hair);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-control);
}
.v-modi-knop:hover,
.v-modi-knop:focus-visible { color: var(--text-primary); border-color: currentColor; }
.v-modi-knop.is-aan {
  color: var(--text-primary);
  border-color: var(--red-600);
  box-shadow: inset 0 -2px 0 var(--red-600);
}

/* De mengbak heeft geen kop: hij ís de pagina in die modi, en een kop boven
   "alles" zegt niets. */
.v-modus-bak[hidden] { display: none; }

/* ---------- glitch ---------- */
/* De stroken liggen over het eigen beeld heen, in dezelfde bak, met dezelfde
   bijsnede. Alleen de clip-path verschilt — die wordt per strook gezet in
   varve-modi.js. pointer-events uit, zodat de tegel één klikvlak blijft. */
.v-glitch-strook {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  z-index: 2;
  pointer-events: none;
}

/* Een randje tussen de stroken: zonder die scheiding ziet een toevallige
   overgang tussen twee donkere beelden eruit als één beeld, en is de hele
   ingreep onzichtbaar. */
.is-glitch .v-shot,
.is-glitch .ig-beeld { background: var(--ink-900); }
.is-glitch .v-glitch-strook { outline: 1px solid rgba(0, 0, 0, .55); outline-offset: -1px; }

/* De geleende titel krijgt de kleur van het merk: dan lees je dat er iets niet
   klopt in plaats van dat je denkt dat de tegel verkeerd staat. */
.is-glitch .v-title { color: var(--text-accent, var(--red-600)); }

@media (prefers-reduced-motion: reduce) {
  .v-modi-knop { transition: none; }
}

@media (max-width: 560px) {
  .v-modi { margin-left: 0; width: 100%; }
}

/* ---------- uitzoomen ---------- */
.v-zoom {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: var(--space-4);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.v-zoom-knop {
  appearance: none;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: var(--border-hair);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-label);
  cursor: pointer;
  transition: var(--transition-control);
}
.v-zoom-knop:hover:not(:disabled),
.v-zoom-knop:focus-visible { color: var(--text-primary); border-color: currentColor; }
.v-zoom-knop:disabled { opacity: .35; cursor: default; }
/* Vaste breedte, anders springt de hele kop bij elke stap een paar pixels. */
.v-zoom-maat { min-width: 2.6em; text-align: center; font-family: var(--font-mono); }

@media (max-width: 560px) { .v-zoom { margin-left: 0; } }

/* De filterbalk stond hier met een tegen-zoom, omdat hij in .v-main zat en dus
   meekromp. Hij staat nu in de kop, buiten die kolom, en heeft dat niet meer
   nodig — de regel zou hem daar juist uitvergroten. */

/* ---------- groepen ---------- */
/* De balk staat er altijd, maar telt alleen mee op de verste zoomtrap. Zo hoeft
   hij niet bij elke wissel opnieuw gebouwd te worden — en dat scheelt: hij draagt
   luisteraars voor slepen en vouwen. */
.v-groep-bar { display: none; }
body.v-groepen .v-groep-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .3rem .1rem;
  border-bottom: var(--border-hair);
  /* De balk krimpt niet mee. Hij staat in .v-main en zou dus op 40% getekend
     worden — maar dit is geen inhoud, dit is de bediening: je moet de naam kunnen
     lezen en de greep kunnen pakken. De zoom van de hoofdkolom wordt hier
     teruggedraaid, en de breedte door dezelfde factor vermenigvuldigd zodat de
     balk weer precies zo breed is als de groep eronder. */
  zoom: calc(1 / var(--v-zoom, 1));
  width: 100%;
}
/* De bandkop zelf gaat weg: zijn tekst staat nu in de balk. */
body.v-groepen .v-band-title { display: none; }

.v-groep-greep {
  cursor: grab;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .35rem;
  touch-action: none;   /* anders scrollt de pagina mee tijdens het slepen */
}
.v-groep-bar:active .v-groep-greep { cursor: grabbing; }

.v-groep-naam {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .2rem 0;
  color: var(--text-primary);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.v-groep-naam:hover { color: var(--text-accent, var(--red-600)); }
.v-groep-tel {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.v-groep-pijl { font-style: normal; color: var(--text-muted); transition: var(--transition-control); }
.is-ingeklapt .v-groep-pijl { transform: rotate(-90deg); }

/* Ingeklapt: het raster weg, de balk blijft. De groep wordt een regel. */
body.v-groepen .v-band.is-ingeklapt .v-grid,
body.v-groepen .v-band.is-ingeklapt .ig-feed { display: none; }

/* Tijdens het slepen: de groep licht op en de rest schuift eronderdoor weg. */
body.v-groepen .v-band.is-sleep { outline: 2px solid var(--red-600); outline-offset: 4px; }
body.v-groepen .v-band.is-sleep .v-groep-bar { background: var(--surface-card); }

@media (prefers-reduced-motion: reduce) { .v-groep-pijl { transition: none; } }