/* VLAME - media, contact, 404 en zoeken.
 *
 * Laadt alleen op die vier. Ze delen de openingsplaat met de case-pagina, dus
 * case.css laadt daar mee; hier staat alleen wat deze vier zelf nodig hebben.
 *
 * Zelfde taal als de rest: kale foto's met een bijschrift erboven, vierkante
 * vlakken, geen ronding, geen schaduw, geen pil.
 */

/* ==========================================================================
   Media
   Metselwerk in drie breedtes. Het bijschrift staat boven de foto, net als
   overal; de foto zelf is kaal.
   ========================================================================== */

.vl-media{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.4rem,2.4vw,2.6rem);
  row-gap:clamp(2.6rem,5vw,5rem);
  align-items:start;
}
.vl-media__f{margin:0;grid-column:span 4}
.vl-media__f--1{grid-column:span 6}
.vl-media__f--2{grid-column:span 3}
.vl-media__f--3{grid-column:span 4}
/* Om de drie een stukje naar beneden, zodat de rijen niet op een lijn staan. */
.vl-media__f:nth-child(3n+2){margin-block-start:clamp(2rem,4vw,4rem)}
.vl-media__cap{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted);margin:0 0 .9em}
.vl-media__i{display:block}
.vl-media__img{display:block;width:100%;height:auto;object-fit:cover;transition:opacity var(--dur-mid) ease}
.vl-media__i:hover .vl-media__img,.vl-media__i:focus-visible .vl-media__img{opacity:.82}

/* ==========================================================================
   Lichtbak
   Inkt op .94, vierkante knoppen, bijschrift in veertien pixels. De dialoog
   bestaat alleen als er beeld is; zonder JS opent elke foto gewoon als link.
   ========================================================================== */

.vl-lb{
  position:fixed;inset:0;z-index:140;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.8rem,2vw,1.6rem);padding:clamp(1rem,4vw,3rem);
  background:rgba(10,7,12,.94);
}
.vl-lb[hidden]{display:none}
.vl-lb-open{overflow:hidden}
.vl-lb__fig{margin:0;display:grid;gap:.9em;justify-items:center;max-height:88vh}
.vl-lb__fig img{max-width:100%;max-height:78vh;object-fit:contain}
.vl-lb__fig figcaption{
  font-family:var(--font-body);font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.66);text-align:center;
}
.vl-lb__x,.vl-lb__nav{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6em;height:2.6em;border-radius:2px;
  border:2px solid rgba(255,255,255,.34);background:none;color:var(--paper);
  font-family:var(--font-body);font-size:18px;line-height:1;cursor:pointer;
  transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease;
}
.vl-lb__x:hover,.vl-lb__nav:hover,.vl-lb__x:focus-visible,.vl-lb__nav:focus-visible{
  border-color:var(--paper);background:rgba(255,255,255,.08);
}
.vl-lb__x{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2}

/* ==========================================================================
   Contact
   ========================================================================== */

.ct__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.ct__line{margin:0 0 1.6em;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:#3B333F;max-width:34ch}
.ct__list{margin:0;padding:0;list-style:none;display:grid;gap:.5em;font-size:16px}
.ct__list a{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--line)}
.ct__list a:hover{text-decoration-color:currentColor}

.ct__msg{
  margin:0 0 1.8em;padding:.9em 1.2em;
  border-left:.28em solid var(--vl-ember);
  background:var(--paper-2);
  font-size:16px;line-height:1.6;
}
.ct__msg.is-ok{border-left-color:var(--ink)}
.ct__msg.is-bad{border-left-color:var(--ink)}

.form{display:grid;gap:1.4em;max-width:44rem}
.form__row{margin:0;display:grid;gap:.5em}
.form__row label{font-size:14px;font-weight:600}
.form input,.form textarea{
  width:100%;padding:.8em .9em;border-radius:2px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
}
.form textarea{resize:vertical;min-height:9em}
.form input:focus-visible,.form textarea:focus-visible{
  outline:none;box-shadow:0 .14em 0 0 var(--ink);
}
/* Honeypot: aanwezig voor bots, onzichtbaar en onbereikbaar voor mensen. */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__go{margin:0}

/* ==========================================================================
   404 en zoeken
   ========================================================================== */

.err__line,.srch__body .lead{max-width:52ch}
.err__search,.srch__form{margin:clamp(1.8rem,3vw,2.6rem) 0 clamp(2.6rem,5vw,4rem)}
.sform{display:flex;flex-wrap:wrap;gap:.6em;max-width:34rem}
.sform__in{
  flex:1 1 14rem;min-width:0;padding:.8em .9em;border-radius:2px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
}
.sform__in:focus-visible{outline:none;box-shadow:0 .14em 0 0 var(--ink)}
.sform__go{flex:0 0 auto}

.srch__pages{list-style:none;margin:clamp(2.4rem,4vw,4rem) 0 0;padding:0;display:grid;gap:clamp(1.4rem,2.4vw,2.4rem)}
.srch__pages a{
  font-family:var(--font-display);font-weight:900;font-stretch:112%;
  font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;text-transform:uppercase;
}
.srch__pages a:hover{color:var(--vl-ember)}
.srch__pages p{margin:.4em 0 0;font-size:16px;line-height:1.7;color:#3B333F;max-width:56ch}
.srch .pagination,.err .pagination{margin-top:clamp(2.4rem,3.4vw,3.4rem)}

/* ==========================================================================
   Hulpmiddel
   ========================================================================== */

.vl-vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Responsief
   ========================================================================== */

@media (max-width:1080px){
  .vl-media__f,.vl-media__f--1,.vl-media__f--2,.vl-media__f--3{grid-column:span 6}
  .ct__in{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
}

@media (max-width:760px){
  .vl-media{grid-template-columns:1fr;row-gap:2.2rem}
  .vl-media__f,.vl-media__f--1,.vl-media__f--2,.vl-media__f--3{grid-column:1}
  .vl-media__f:nth-child(3n+2){margin-block-start:0}
  .vl-lb{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:.8rem}
  .vl-lb__nav{position:relative}
  .vl-lb__nav--prev{grid-row:2;justify-self:start}
  .vl-lb__nav--next{grid-row:2;justify-self:end}
  .vl-lb__fig{grid-row:1}
  .form{gap:1.2em}
}