/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina "Wie ben ik"

   Laadt ná style.css en gebruikt dezelfde tokens. Alleen wat deze
   pagina extra nodig heeft staat hier.

   De opzet komt van de voorbeeldpagina die Brian goed vond, maar
   zonder het futuristische daar: geen deeltjesanimatie, geen teller
   onderaan het scherm. Wat overblijft is waar het hem om ging:
   veel lucht, één accentkleur, en per scherm één ding om te lezen.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────────── */
.wb-hero{
  position:relative; overflow:hidden;
  padding:clamp(7.5rem,15vh,10.5rem) 0 clamp(3rem,6vw,5rem);
}
.wb-hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1000px); aspect-ratio:1; right:-18%; top:-40%;
  background:radial-gradient(circle, rgba(245,37,31,.16), transparent 62%);
  filter:blur(30px);
}
.wb-hero .wrap{ position:relative; z-index:1; }

.wb-hero__grid{
  display:grid; grid-template-columns:1fr .78fr;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}

.wb-naam{
  font-family:var(--f-display);
  font-weight:800; line-height:.92; letter-spacing:-.03em;
  font-size:clamp(2.9rem,8vw,5.6rem);
  margin:.6rem 0 0;
}
.wb-naam em{
  display:block; font-style:normal;
  background:var(--grad-ember);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wb-hero__lead{
  color:var(--ash-2); max-width:46ch;
  font-size:clamp(1rem,.4vw + .95rem,1.16rem);
  margin-top:1.4rem;
}

/* De maskerafbeelding komt via --masker uit php, met een versienummer
   erin. Zonder dat nummer blijft een vervangen foto een jaar in de cache
   van de bezoeker hangen.

   De uitgeknipte foto eindigt onderaan met een rechte rand. Op de
   startpagina valt dat niet op omdat daar van alles omheen staat, maar
   hier lag ze er los opgeplakt bij.

   Daarom een kader met een eigen achtergrond, en de foto die onderin in
   dat kader wegzakt. De vervaging gebeurt met een laagje in de kleur van
   het kader zelf, niet met een tweede masker: maskers stapelen vraagt
   mask-composite, en dat doet niet elke browser mee. Als dat hier zou
   afhaken, staat die harde rand er gewoon weer. */
.wb-portret{
  position:relative; justify-self:center;
  width:min(100%,360px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse at 50% 108%, rgba(245,37,31,.20), transparent 62%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding:clamp(1.4rem,3vw,2rem) clamp(1rem,2vw,1.4rem) 0;
  overflow:hidden;
}
.wb-portret img{
  position:relative; z-index:1; width:100%;
  -webkit-mask-image:var(--masker); mask-image:var(--masker);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* Het laagje dat de onderrand opeet. De kleurstops komen overeen met de
   onderkant van het kader, dus je ziet geen overgang tussen de twee. */
.wb-portret::after{
  content:""; position:absolute; z-index:2; inset:auto 0 0; height:30%;
  background:linear-gradient(180deg, rgba(16,14,12,0) 0%, rgba(16,14,12,.72) 52%, var(--ink-2) 100%);
  pointer-events:none;
}

/* ── 2. Feitenrij ──────────────────────────────────────── */
/* Een raster van twee kolommen en geen flexrij. Met drie feiten paste alles
   nog naast elkaar, maar sinds Instagram erbij staat zijn het er vier en
   viel de laatste eronder met een gat ernaast. Twee bij twee staat recht,
   en blijft ook kloppen als er ooit een vijfde bij komt. */
.wb-feiten{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.3rem clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vw,2.8rem);
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.wb-feit__lbl{
  display:block; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-3); margin-bottom:.3rem;
}
.wb-feit__val{ font-weight:600; color:var(--ash); }
.wb-feit__val a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-2); }
.wb-feit__val a:hover{ border-color:var(--ember); }

/* ── 3. Tekstblok ──────────────────────────────────────── */
.wb-tekst{ max-width:62ch; }
.wb-tekst p + p{ margin-top:1.15rem; }
.wb-tekst p{ color:var(--ash-2); }
.wb-tekst strong{ color:var(--ash); font-weight:600; }

/* Eén zin die groter mag staan dan de rest. Meer dan één en het
   effect is weg, dan is het gewoon grote tekst. */
.wb-uitspraak{
  font-family:var(--f-serif); font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.32; color:var(--ash); max-width:20ch;
  border-left:2px solid var(--ember); padding-left:clamp(1rem,2vw,1.6rem);
}

.wb-split{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}

/* ── 4. Wat ik gebouwd heb ─────────────────────────────── */
.wb-werk{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.wb-item{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(1rem,3vw,2.2rem); align-items:center;
  background:var(--ink-2); padding:clamp(1.3rem,3vw,1.9rem) clamp(1.2rem,3vw,2rem);
  text-decoration:none; color:inherit;
  transition:background .35s var(--ease);
}
.wb-item:hover{ background:var(--ink-3); }
/* Zelfde verhaal als bij de kaarten op de home: geen link, geen zweeftruc. */
.wb-item--geenlink{ cursor:default; }
.wb-item--geenlink:hover{ background:var(--ink-2); }
.wb-item__num{
  font-family:var(--f-display); font-size:.85rem; font-weight:600;
  color:var(--ember); letter-spacing:.06em;
}
/* display:block is hier niet cosmetisch. Het zijn twee spans in een span,
   en zonder dit lopen de naam en de omschrijving als één zin door elkaar. */
.wb-item__naam{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.wb-item__wat{ display:block; color:var(--ash-3); font-size:.9rem; margin-top:.15rem; }
.wb-item__pijl{ color:var(--ash-3); transition:transform .35s var(--ease), color .35s var(--ease); }
.wb-item:hover .wb-item__pijl{ color:var(--ember); transform:translate(3px,-3px); }

/* ── 5. Vaardigheden ───────────────────────────────────── */
.wb-tags{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; padding:0; margin:0; }
.wb-tags li{
  border:1px solid var(--line-2); border-radius:999px;
  padding:.42rem .95rem; font-size:.85rem; color:var(--ash-2);
  background:var(--glass);
}

/* ── 6. Slot ───────────────────────────────────────────── */
.wb-slot{ position:relative; overflow:hidden; text-align:center; }
.wb-slot__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(130vw,1100px); aspect-ratio:1; left:50%; top:-32%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(245,37,31,.14), transparent 62%);
  filter:blur(34px);
}
.wb-slot .wrap{ position:relative; z-index:1; }
.wb-slot h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.06;
}
.wb-slot h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--ember); }
.wb-slot p{ color:var(--ash-2); max-width:52ch; margin:1.1rem auto 0; }
.wb-slot__acties{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem; }

/* ── 7. Smaller ────────────────────────────────────────── */
@media (max-width:980px){
  .wb-hero__grid{ grid-template-columns:1fr; gap:2.6rem; }
  /* Op een smal scherm hoort de foto boven de naam, niet eronder:
     anders scrol je eerst door een lap tekst voor je een gezicht ziet. */
  .wb-portret{ order:-1; width:min(78%,300px); }
  .wb-split{ grid-template-columns:1fr; }
  .wb-uitspraak{ max-width:none; }
}
@media (max-width:640px){
  .wb-item{ grid-template-columns:auto 1fr; }
  .wb-item__pijl{ display:none; }
  .wb-feiten{ gap:1.1rem 2rem; }
}

/* ── 8. Ook dit bouw ik ────────────────────────────────── */
.wb-ook{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem); }
.wb-kaart{
  position:relative;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); padding:clamp(1.4rem,3vw,2rem);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.wb-kaart:hover{ border-color:var(--line-2); background:var(--ink-3); }
.wb-kaart h3{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.015em;
  font-size:1.12rem; margin-bottom:.55rem;
}
.wb-kaart p{ color:var(--ash-3); font-size:.94rem; }

/* Alleen het punt dat echt ergens draait krijgt dit label. Zet je het op
   alles, dan zegt het niets meer en is het gewoon versiering. */
.wb-kaart__staat{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember); margin-bottom:.7rem;
}
.wb-kaart__stip{
  width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 3px rgba(245,37,31,.18);
}
/* Neemt wel plaats in, is niet te zien en wordt niet voorgelezen. */
.wb-kaart__staat--leeg{ visibility:hidden; }
.wb-ook__voet{
  margin-top:clamp(1.4rem,3vw,2rem); color:var(--ash-3); font-size:.92rem;
}
.wb-ook__voet a{ color:var(--ash); border-bottom:1px solid var(--line-2); text-decoration:none; }
.wb-ook__voet a:hover{ border-color:var(--ember); }

@media (max-width:900px){ .wb-ook{ grid-template-columns:1fr; } }

/* De kaarten zijn nu links, dus ze moeten zich ook zo gedragen: een
   duidelijke aanwijzing onderaan en een rand die meebeweegt. flex met
   margin-top:auto duwt die regel naar de onderkant, zodat hij bij alle
   drie op dezelfde hoogte staat ook al is de tekst erboven korter. */
a.wb-kaart{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
a.wb-kaart p{ margin-bottom:1.2rem; }
.wb-kaart__knop{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:auto;
  font-size:.86rem; font-weight:600; color:var(--ash);
}
.wb-kaart__knop svg{ transition:transform .35s var(--ease); }
a.wb-kaart:hover .wb-kaart__knop{ color:var(--ember); }
a.wb-kaart:hover .wb-kaart__knop svg{ transform:translateX(3px); }
a.wb-kaart:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }