/* ══════════════════════════════════════════════════════════════════════════
   CONTACT — één blok

   De kop en de voet komen uit kop-voet.css en de opening uit zine.css. Hier
   staat alleen het blok: dezelfde vorm als de etalage op de thuispagina, één
   kleur met de foto als tegel erin, zodat het blok zich gedraagt als lijst.
   ══════════════════════════════════════════════════════════════════════════ */

/* #opening rekent onderaan de hoogte van de tafel mee, want op de thuispagina
   staat die eronder. Hier staat geen tafel, en dat gaf tweehonderd pixels
   groen onder de tekst. */
#opening{padding-bottom:clamp(2.4rem,7vh,4.4rem)}

.contactblok{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2rem);
  width:min(100%,70rem);margin-inline:auto;
  padding:clamp(.8rem,1.5vw,1.1rem);
  background:var(--inkt);
  border-radius:var(--rond);
  color:var(--vanille-zacht);
}
.contactblok__tekst{
  display:flex;flex-direction:column;
  padding:clamp(1rem,2.4vw,2rem) clamp(.6rem,2vw,1.6rem);
}

/* De kop van de pagina, maar in een blok: de 8vw van de andere openingen
   zou hier de kolom uit lopen. */
.contactblok .opening__kop{white-space:normal}
.contactblok .opening__regel{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.15}
.opening__kicker{margin:.3rem 0 clamp(.9rem,2.2vh,1.3rem);color:var(--goud)}

.contactblok__zin{
  margin:0 0 clamp(1.2rem,3vh,1.8rem);max-width:44ch;
  font-size:var(--nl-body);font-weight:300;line-height:1.7;
}

/* Drie regels die elk zelf de link zijn: de hele regel tikt aan, niet een
   woordje erin. Label links, waar je voor komt in het groot ernaast. */
.contactblok__wegen{list-style:none;margin:0;padding:0;border-top:1px solid rgba(223,237,192,.16)}
.contactweg{
  display:grid;grid-template-columns:7rem minmax(0,1fr) auto;
  align-items:baseline;column-gap:1rem;
  padding:clamp(.8rem,1.8vh,1.05rem) .2rem;
  border-bottom:1px solid rgba(223,237,192,.16);
  text-decoration:none;color:var(--vanille);
}
.contactweg__wat{
  font-size:var(--label);font-weight:500;line-height:1.4;letter-spacing:.04em;
  color:var(--goud);
}
.contactweg__waarde{
  font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:300;line-height:1.3;
  overflow-wrap:break-word;
  transition:color .3s var(--ease-ui);
}
.contactweg .pijl{color:var(--goud);transition:transform .35s var(--ease-ui)}
.contactweg:hover .contactweg__waarde,
.contactweg:focus-visible .contactweg__waarde{color:var(--goud)}
.contactweg:hover .pijl,
.contactweg:focus-visible .pijl{transform:translateX(.3rem)}
.contactweg:focus-visible{outline:2px solid var(--goud);outline-offset:4px;border-radius:4px}

.contactblok__waar{
  display:grid;grid-template-columns:7rem minmax(0,1fr);
  align-items:baseline;column-gap:1rem;
  margin:clamp(1rem,2.4vh,1.5rem) 0 0;padding-inline:.2rem;
  font-size:var(--nl-body);font-weight:300;line-height:1.7;
}
.contactblok__mini{
  margin:clamp(1rem,2.4vh,1.5rem) 0 0;padding-inline:.2rem;
  font-size:var(--label-mini);font-weight:500;letter-spacing:.03em;
  color:var(--vanille-stil);
}

/* De tegel. Vanille in inkt, net als de pakken in de etalage. */
.contactblok__beeld{
  margin:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.4rem,3vw,2.6rem);
  background:var(--vanille);
  border-radius:var(--rond-in);
}
.contactblok__beeld img{width:min(100%,26rem);height:auto}

/* Onder elkaar: eerst wat je zoekt, dan de foto, en die laag. */
@media (max-width:800px){
  .contactblok{grid-template-columns:1fr}
  .contactblok__beeld{height:clamp(9rem,40vw,13rem);padding:1rem}
  .contactblok__beeld img{width:auto;height:100%}
}
/* Op een telefoon past het label niet meer naast een telefoonnummer van
   zestien tekens. Het gaat erboven staan. */
@media (max-width:480px){
  .contactweg{grid-template-columns:minmax(0,1fr) auto;row-gap:.2rem}
  .contactweg__wat{grid-column:1 / -1}
  .contactblok__waar{grid-template-columns:1fr;row-gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  .contactweg__waarde,.contactweg .pijl{transition:none}
}

/* Het blok komt zacht binnen, de regels erin een voor een. */
@media (prefers-reduced-motion:no-preference){
  .contactblok{animation:vt-binnen .8s cubic-bezier(.2,.8,.2,1) .05s backwards}
  .contactweg{animation:vt-binnen .6s cubic-bezier(.2,.8,.2,1) backwards}
  .contactblok__wegen li:nth-child(1) .contactweg{animation-delay:.25s}
  .contactblok__wegen li:nth-child(2) .contactweg{animation-delay:.32s}
  .contactblok__wegen li:nth-child(3) .contactweg{animation-delay:.39s}
}

/* Groothandel & B2B: een regel en een knop naar All4Trade. */
.contactblok__b2b{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.4rem;
  margin-top:clamp(1.2rem,3vh,1.8rem);padding:clamp(1rem,2vw,1.3rem);
  border:1px solid rgba(249,222,96,.35);border-radius:var(--rond-in);
}
.contactblok__b2b-zin{
  display:flex;flex-direction:column;gap:.25rem;margin:0;flex:1 1 16rem;
  font-size:var(--nl-body);font-weight:300;line-height:1.6;color:var(--vanille-zacht);
}