/* Aanvullingen bovenop de huisstijl. styles.css blijft ongewijzigd.

   Twee dingen:
   1. De <figure> in het over-blok had een inline style="margin:0". Inline
      styles vragen 'unsafe-inline' in de CSP, dus staat de regel nu hier.
   2. De taalknoppen zijn <a> geworden in plaats van <button>. Dezelfde
      vormgeving als .langs button, met dezelfde variabelen. */

.about__figure {
  margin: 0;
}

.langs a {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: normal;
  padding: 6px 11px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.langs a:hover { color: var(--green); }
.langs a[aria-current="page"] {
  background: var(--green);
  color: var(--paper);
}

/* Honeypot — buiten beeld geschoven in plaats van display:none, zodat een bot
   die verborgen velden overslaat er tóch intrapt. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- instapblok sudoku op de homepage -------------------------------- */

.puzzles__invite {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.puzzles__eigen {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 40em;
  margin: 0 0 26px;
}
.puzzles__cta { margin: 0; }

.puzzles__schets {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.schets {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background-color: var(--card);
  background-repeat: no-repeat;
}
/* Drie roosters, alleen met lijnen getekend — geen cijfers, geen kleur. */
.schets--klassiek {
  background-image:
    linear-gradient(to right, var(--line-3) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
  background-size: 30px 30px;
}
.schets--krul {
  background-image:
    linear-gradient(to right, var(--line-3) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-3) 1px, transparent 1px),
    conic-gradient(from 45deg at 50% 50%, var(--paper-2) 0 25%, transparent 0 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
}
.schets--hex {
  background-image: radial-gradient(var(--line-3) 32%, transparent 33%);
  background-size: 24px 24px;
  background-position: 6px 6px;
}

@media (max-width: 980px) {
  .puzzles__invite { grid-template-columns: 1fr; gap: 28px; }
  .puzzles__schets { justify-content: flex-start; }
}