/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — alleen voor de startpagina

   Laadt ná style.css. Hierin staat wat er bij de ombouw van augustus
   2026 bij gekomen is: de strook met drie sites, en de vijf deuren.

   De startpagina legt sinds die ombouw niets meer uit. Over mij,
   diensten en werkwijze stonden er woordelijk hetzelfde als op hun
   eigen pagina, en dat was 66% van de tekst. Wat overblijft is
   bewijs en wegwijzers.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Drie sites als bewijs ──────────────────────────── */
.tw-rij{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.5rem); }
.tw-kaart{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.tw-kaart:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.tw-kaart:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
/* Een kaart zonder link mag ook niet doen alsof: geen optillen, geen inzoomen,
   geen handje. Anders klikt iemand op een kaart die niets doet. */
.tw-kaart--geenlink{ cursor:default; }
.tw-kaart--geenlink:hover{ border-color:var(--line); transform:none; }
.tw-kaart--geenlink:hover .tw-kaart__beeld img{ transform:none; }
/* VALKUIL: dit zijn spans binnen een <a>, en die zijn inline. Op een inline
   element doet aspect-ratio niets, dus stond de schermafbeelding hier eerst
   in een bijna vierkant vak en werd hij aan de zijkanten afgesneden.
   display:block lost het op. Geldt ook voor __body hieronder. */
.tw-kaart__beeld{ display:block; position:relative; aspect-ratio:1200/690; overflow:hidden; background:var(--ink-3); }
.tw-kaart__beeld img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .6s var(--ease);
}
.tw-kaart:hover .tw-kaart__beeld img{ transform:scale(1.03); }
.tw-kaart__body{ display:block; padding:clamp(1rem,2.2vw,1.3rem); }
.tw-kaart__sector{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ash-3); display:block; margin-bottom:.3rem;
}
.tw-kaart__naam{
  font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.015em; display:flex; align-items:center; gap:.4rem;
}
.tw-kaart__naam svg{ color:var(--ash-3); transition:transform .35s var(--ease), color .35s var(--ease); }
.tw-kaart:hover .tw-kaart__naam svg{ color:var(--ember); transform:translate(2px,-2px); }
.tw-kaart__wat{ color:var(--ash-3); font-size:.88rem; margin-top:.25rem; }

/* ── 2. De vijf deuren ─────────────────────────────────── */
/* Elke rij stelt de vraag die een bezoeker op dat moment heeft, geeft
   er een half antwoord op, en wijst naar de pagina die het afmaakt.
   Bewust een half antwoord: een volledige samenvatting laat mensen
   denken dat ze het al gezien hebben, en dan klikken ze niet door. */
.tw-deuren{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.tw-deur{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,3vw,2.4rem);
  background:var(--ink-2); padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,3vw,2rem);
  text-decoration:none; color:inherit;
  transition:background .35s var(--ease);
}
.tw-deur:hover{ background:var(--ink-3); }
.tw-deur:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }
.tw-deur__nr{
  font-family:var(--f-display); font-weight:600; font-size:.82rem;
  color:var(--ember); letter-spacing:.06em;
}
.tw-deur__vraag{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem,2vw,1.25rem); letter-spacing:-.015em;
}
.tw-deur__half{ display:block; color:var(--ash-3); font-size:.93rem; margin-top:.2rem; }
.tw-deur__heen{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:.85rem; font-weight:600; color:var(--ash-3);
  transition:color .35s var(--ease);
}
.tw-deur__heen svg{ transition:transform .35s var(--ease); }
.tw-deur:hover .tw-deur__heen{ color:var(--ember); }
.tw-deur:hover .tw-deur__heen svg{ transform:translateX(3px); }

/* ── 3. Smaller ────────────────────────────────────────── */
@media (max-width:900px){
  .tw-rij{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  /* De pijl met het woord ernaast past niet meer naast de vraag. Het
     woord verdwijnt, de rij blijft aanklikbaar en de pijl blijft staan
     zodat zichtbaar blijft dat er iets achter zit. */
  .tw-deur{ grid-template-columns:auto 1fr auto; gap:.9rem; }
  .tw-deur__heen span{ display:none; }
}

/* ── 4. De deeltjesknoop ───────────────────────────────── */
/* Het canvas krijgt zijn maat van dit vak, niet van het venster. Daarom
   staat er een vaste hoogte op: zonder hoogte is een lege div nul pixels
   hoog en tekent het script in het niets. */
.tw-drie{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.tw-doek{
  position:relative; aspect-ratio:1/1; min-height:280px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(245,37,31,.10), transparent 65%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  overflow:hidden;
}
.tw-doek canvas{ display:block; width:100%; height:100%; }
/* Een zachte donkere rand zodat het vak als een venster leest en niet als
   een gat. Stond eerst op 60px en .55 zwart: dat vrat de knoop op, want die
   raakt met zijn buitenste punten net die rand. Nu smaller en lichter. */
.tw-doek::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 40px 0 rgba(10,9,8,.35);
}
.tw-drie h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.06; margin-bottom:1rem;
}
.tw-drie h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--ember); }
.tw-drie p{ color:var(--ash-2); max-width:46ch; }
.tw-drie p + p{ margin-top:.9rem; }
.tw-drie__acties{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

@media (max-width:820px){
  .tw-drie{ grid-template-columns:1fr; }
  /* Het beeld eerst: dat is het argument, de tekst is de toelichting. */
  .tw-doek{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
}