/* artikel.css — opmaak voor de blokken die agent_daily in een pagina zet.
 * ---------------------------------------------------------------------------
 * Alleen de k-klassen: deze site draait de LICHTE vorm, dus geen keuzehulp en
 * geen spec-tabel. Overgezet uit het bestand van tuinmeubelen, maar op de tokens
 * van DEZE site — paars accent, goud als tweede accent. De bestaande opmaak van
 * sextoygids is verder niet aangeraakt: dit bestand voegt alleen klassen toe die
 * hier nog niet bestonden.
 * ---------------------------------------------------------------------------
 * De koffiesite heeft hier editorial.css voor; die kon niet mee, want hij draagt
 * de koffie-tokens (--cream, --accent-ink, roomwit/terracotta) en zou de tuinstijl
 * overschrijven. Dit bestand doet hetzelfde werk in de palet van deze site:
 * groen accent, wit papier, --border als lijn. Alleen k-*-klassen, zodat het
 * niets raakt aan de pagina's die er al staan.
 */

.k-callout{
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:12px;
  padding:16px 20px;
  margin:0 0 24px;
  line-height:1.55;
}

/* De aanbeveling: het zwaartepunt van een vraag-pagina. */
.k-pick{
  background:var(--paper);
  border:1px solid var(--border);
  border-top:3px solid var(--accent);
  border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05), 0 18px 40px -24px rgba(0,0,0,.25);
  padding:26px 24px 24px;
  margin:20px 0 8px;
  text-align:center;
}
/* Alternatieven: zelfde bouw, rustiger. */
.k-alt{
  background:var(--paper-alt);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
  margin:16px 0 6px;
  text-align:center;
}
.k-badge{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
/* mix-blend-mode:multiply haalt de witte rand van bol-productfoto's weg. */
.k-img{max-width:230px;max-height:230px;width:auto;height:auto;margin:0 auto;
  object-fit:contain;mix-blend-mode:multiply}
.k-alt .k-img{max-width:150px;max-height:150px}
.k-name{font-weight:600;font-size:1.06rem;margin:12px 0 2px}
.k-alt .k-name{font-size:.98rem}
.k-price{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin:4px 0 16px;line-height:1.1}
.k-alt .k-price{font-size:1.35rem;margin-bottom:12px}

/* De site-CSS zet '.content a' op groen met onderstreping. Dat is specifieker dan
 * een kale .k-cta en maakte de knoptekst groen op groen — onzichtbaar. Daarom hier
 * dezelfde specificiteit in plaats van !important. */
.k-cta,
.content a.k-cta{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:13px 26px;
  line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.06);
}
.k-cta:hover,
.content a.k-cta:hover{filter:brightness(1.06);text-decoration:none;color:#fff}
.k-cta:active,
.content a.k-cta:active{transform:translateY(1px);filter:brightness(.96)}

.k-note{color:var(--muted);font-size:.78rem;margin-top:10px}
.k-disclosure{
  background:var(--paper-alt);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 18px;
  margin:26px 0 0;
  font-size:.88rem;
  color:var(--muted);
}
.k-disclosure a{color:var(--accent)}

@media (max-width:640px){
  .k-pick{padding:20px 20px 18px;margin:16px 0 6px}
  .k-alt{padding:14px 14px 12px;margin:12px 0 4px}
  .k-price{margin:2px 0 12px}
  .k-callout{padding:14px 17px;margin-bottom:18px}
}

/* Twee blokken die alleen de lichte vorm kent. */

/* De uitleg dat dit een redactionele selectie is en geen test. Die hoort op te
 * vallen zonder te schreeuwen: hij is het verschil tussen een eerlijke lijst en
 * een lijst die zich voordoet als onderzoek. */
.k-methode{
  background:var(--accent2-soft,var(--paper-alt));
  border-left-color:var(--accent2,var(--accent));
  font-size:.94rem;
}

/* Kenmerken die de WINKEL opsomt. Bewust rustiger gezet dan onze eigen tekst:
 * het is een citaat, geen bevinding van ons. */
.k-bron-claim{
  font-size:.9rem;
  color:var(--muted);
  border-left:2px solid var(--border);
  padding-left:12px;
  margin:10px 0 16px;
}