/* ==========================================================================
   Gallery wall - kunstpagina
   De werken aan de muur in echte kamers (foto's van Frederique). Een
   museumwand van rand tot rand: swipe op touch, en wie er met de muis
   op staat wandelt vanzelf verder langs de kamers (js/wall.js). Geen
   knoppen, geen kaart-esthetiek. De lijsten onderaan dit blad worden
   ook door de ateliershop gebruikt.
   ========================================================================== */

.wall-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--inkt);
}
.wall-viewport::-webkit-scrollbar { display: none; }
.wall-viewport:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }

.wall-track { display: flex; }

.wall-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }

/* De kamer: één foto, van rand tot rand */
.kamer { margin: 0; height: clamp(420px, 68vh, 660px); }
.kamer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* Lijsten: aan de wand gefotografeerd, in de shop getekend */
.frame-oak    { border: 11px solid #b08b5e; outline: 1px solid #8f6f47; }
.frame-walnut { border: 11px solid #5a4534; outline: 1px solid #43331f; }
.frame-black  { border: 10px solid #26262a; outline: 1px solid #101013; }
.frame-white  { border: 12px solid #f1ede4; outline: 1px solid #d5cfc2; }
.frame-float  { border: 5px solid #2e2a26; }

/* De ateliershop toont de uitgesneden werken in hun eigen lijst.
   De schaduw is de slagschaduw van een echte lijst aan een muur. */
.artwork-img {
  background: #f6f3ec;
  box-shadow: 0 14px 26px rgba(20, 18, 14, 0.16), 0 3px 7px rgba(20, 18, 14, 0.1);
}
.artwork-img img { width: 100%; height: auto; }
.artwork-img.has-mat { padding: clamp(8px, 1.8vw, 20px); }
.artwork-img.has-mat img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }

@media (max-width: 620px) {
  .kamer { height: clamp(340px, 52vh, 460px); }
}