/* ============================================================
   MARCEL ZWEEDIJK · Linkpagina (/links)
   ------------------------------------------------------------
   Losstaande pagina voor de link in de Instagram-bio. Bewust zonder
   het sitemenu: wie hier binnenkomt komt van een telefoon en moet in
   één blik zien waar hij heen kan. Mobiel eerst opgebouwd.
   ============================================================ */

.linkpagina {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Het cirkelmotief uit het logo, groot en zacht op de achtergrond */
.linkpagina .achtergrond {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%;
}

.linkpagina .binnen {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px;
  margin: 0 auto; padding: 40px 20px 48px;
  flex: 1;
  display: flex; flex-direction: column;
}

/* ---------- Kop ---------- */
.lp-kop { text-align: center; margin-bottom: 30px; }
.lp-kop img {
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 18px;
  box-shadow: 0 0 0 4px var(--yellow), 0 18px 44px rgba(0, 0, 0, .55);
}
.lp-kop h1 {
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  text-transform: uppercase; letter-spacing: -0.01em;
}
.lp-kop .rol {
  color: var(--yellow); font-weight: 700; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; margin-top: 10px;
}
.lp-kop .pitch {
  color: #b8b8b8; font-size: .97rem; margin-top: 14px;
  max-width: 30em; margin-left: auto; margin-right: auto;
}

/* ---------- Uitgelicht: de nieuwste blog ---------- */
.lp-uitgelicht {
  display: flex; gap: 16px; align-items: center;
  background: #141414; border: 2px solid var(--yellow);
  border-radius: 18px; padding: 14px;
  text-decoration: none; color: #fff;
  margin-bottom: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-uitgelicht:hover, .lp-uitgelicht:focus-visible {
  transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 222, 89, .22);
}
.lp-uitgelicht img {
  width: 84px; height: 84px; flex: none;
  border-radius: 12px; object-fit: cover; object-position: center top;
}
.lp-uitgelicht .tekst { min-width: 0; }
.lp-uitgelicht .vlag {
  display: inline-block; background: var(--yellow); color: var(--black);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 7px;
}
.lp-uitgelicht b {
  display: block; font-family: var(--font-head); font-weight: 400;
  font-size: 1.02rem; line-height: 1.22;
}
.lp-uitgelicht span.sub {
  display: block; color: #a8a8a8; font-size: .86rem; margin-top: 6px;
}

/* ---------- Gewone knoppen ---------- */
.lp-knop {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 14px 18px;
  background: #141414; border: 1.5px solid #2c2c2c; border-radius: 16px;
  text-decoration: none; color: #fff; margin-bottom: 12px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.lp-knop:hover, .lp-knop:focus-visible {
  transform: translateY(-2px); border-color: var(--yellow); background: #191919;
}
.lp-knop .merk {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  background: #202020; display: flex; align-items: center; justify-content: center;
}
.lp-knop .merk svg { width: 22px; height: 22px; }
.lp-knop .lab { flex: 1; min-width: 0; }
.lp-knop .lab b { display: block; font-size: .99rem; font-weight: 700; }
.lp-knop .lab span { display: block; color: #9a9a9a; font-size: .84rem; margin-top: 2px; }
.lp-knop .pijl { flex: none; color: var(--yellow); font-size: 1.1rem; }

/* De hoofdactie krijgt het merkgeel, zodat er één duidelijke eerste stap is */
.lp-knop--geel {
  background: var(--yellow); border-color: var(--yellow); color: var(--black);
}
.lp-knop--geel:hover, .lp-knop--geel:focus-visible {
  background: #ffe77a; border-color: #ffe77a;
}
.lp-knop--geel .merk { background: rgba(0, 0, 0, .12); }
.lp-knop--geel .lab span { color: #6b5a15; }
.lp-knop--geel .pijl { color: var(--black); }

/* ---------- Sociale iconen ---------- */
.lp-socials {
  display: flex; justify-content: center; gap: 14px;
  margin: 30px 0 8px; flex-wrap: wrap;
}
.lp-socials a {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid #2c2c2c; background: #141414;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.lp-socials a:hover, .lp-socials a:focus-visible {
  transform: translateY(-3px); background: var(--yellow);
  border-color: var(--yellow); color: var(--black);
}
.lp-socials svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Voet ---------- */
.lp-voet {
  margin-top: auto; padding-top: 34px; text-align: center;
  color: #7c7c7c; font-size: .82rem; line-height: 1.8;
}
.lp-voet a { color: #9a9a9a; text-decoration: underline; text-underline-offset: 3px; }
.lp-voet a:hover { color: var(--yellow); }

@media (min-width: 560px) {
  .linkpagina .binnen { padding-top: 56px; }
  .lp-uitgelicht img { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-uitgelicht, .lp-knop, .lp-socials a { transition: none; }
  .lp-uitgelicht:hover, .lp-knop:hover, .lp-socials a:hover { transform: none; }
}