/* ==========================================================================
   pages/markt.css — de pagina's per markt (public/for-*.html)
   Gemaakt door scripts/markten.js uit de templates van de tool. De kop met
   het grote woord, het team als kaarten met hun bolletje, de groepen naast
   een echt scherm, wat het template meebrengt en de andere markten.
   Nieuwe klassen beginnen met mk-.
   ========================================================================== */

/* de kop: klein "an ai team for", groot de markt */
.mk-title { font-size: clamp(46px, 10.5vw, 168px); }
.mk-pre {
  display: block;
  margin-bottom: .35em;
  color: var(--ink-2);
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.mk-big { display: block; }

/* een rij bolletjes: het team in één oogopslag */
.mk-orbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.mk-hero-orbs { gap: 4px; }

/* ---------- #team ---------- */

.mk-agent .orb { --s: 56px; margin-bottom: 6px; }
.mk-agent .fx-kicker { margin-top: auto; }

/* ---------- #groups ---------- */

.mk-groups { align-items: start; }
.mk-group { gap: 8px; }
.mk-group .mk-orbs { margin-bottom: 6px; }
.mk-group .tags { font-size: 14px; }

/* ---------- #ready ---------- */

.mk-pills,
.mk-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-ready .fx-list { gap: 4px; }

/* ---------- #more ---------- */

.mk-more .pill { font-size: 15px; min-height: 40px; padding: 8px 16px; }

/* smal: het team twee aan twee, de bolletjes in de kop op één regel */
@media (max-width: 599px) {
  .mk-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-agent { padding: 16px; }
  .mk-agent .orb { --s: 44px; }
  .mk-agent h3 { font-size: 18px; }
  .mk-agent p { font-size: 14px; }
  .mk-hero-orbs .orb { --s: 34px; }
}