/* =============================================================
   StageHub /new — Connect (verejný board + detail). Teplá paleta.
   Načíta sa po tokens.css a base.css. Žiadny inline štýl.
   ============================================================= */

/* Odznak typu (hľadám / ponúkam) */
.sh-cn-kind {
  display: inline-block; padding: 2px 10px; border-radius: var(--sh-radius-pill);
  font-size: var(--sh-text-xs); font-weight: var(--sh-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sh-cn-kind-hladam { background: color-mix(in srgb, var(--sh-amber) 20%, var(--sh-cream-2)); color: var(--sh-amber-text); }
.sh-cn-kind-ponukam { background: color-mix(in srgb, var(--sh-coral) 24%, var(--sh-cream-2)); color: var(--sh-ink); }
.sh-cn-role { font-size: var(--sh-text-sm); font-weight: var(--sh-weight-medium); color: var(--sh-ink-70); }

/* Mriežka kariet */
.sh-cn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sh-space-5); }
.sh-cn-card {
  background: var(--sh-surface-raised); border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow-sm);
  transition: transform var(--sh-transition), box-shadow var(--sh-transition);
}
.sh-cn-card:hover { transform: translateY(-2px); box-shadow: var(--sh-shadow-lg); }
.sh-cn-link { display: block; padding: var(--sh-space-5); color: inherit; }
.sh-cn-link:hover { color: inherit; }
.sh-cn-top { display: flex; align-items: center; gap: var(--sh-space-3); margin-bottom: var(--sh-space-3); }
.sh-cn-title { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); margin: 0 0 var(--sh-space-2); color: var(--sh-ink); }
.sh-cn-meta { margin: 0; font-size: var(--sh-text-sm); color: var(--sh-ink-70); display: flex; align-items: center; flex-wrap: wrap; }
.sh-cn-artist { font-weight: var(--sh-weight-medium); color: var(--sh-ink); }

/* Detail */
.sh-cnd { padding-block: clamp(var(--sh-space-10), 6vw, var(--sh-space-16)); }
.sh-cnd-inner { max-width: var(--sh-container-narrow); }
.sh-cnd-back { margin: 0 0 var(--sh-space-6); }
.sh-cnd-top { display: flex; align-items: center; gap: var(--sh-space-3); margin-bottom: var(--sh-space-4); }
.sh-cnd-title { font-size: var(--sh-text-3xl); margin: 0 0 var(--sh-space-3); letter-spacing: -0.01em; }
.sh-cnd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15em; margin: 0 0 var(--sh-space-8); font-size: var(--sh-text-lg); color: var(--sh-ink-70); }
.sh-cnd-artist { color: var(--sh-ink); font-weight: var(--sh-weight-medium); }
.sh-cnd-body { margin-bottom: var(--sh-space-10); }

/* Kontakt (odhaľuje sa server-side) */
.sh-cnd-contact {
  background: var(--sh-surface-raised); border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-lg); padding: var(--sh-space-6);
}
.sh-cnd-h2 { font-size: var(--sh-text-xl); margin: 0 0 var(--sh-space-4); }
.sh-cnd-note { color: var(--sh-ink-70); margin: 0 0 var(--sh-space-4); }
.sh-cnd-contactlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sh-space-3); }
.sh-cnd-contactlist li { font-size: var(--sh-text-lg); }
.sh-cnd-clabel { display: inline-block; min-width: 90px; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--sh-text-xs); font-weight: var(--sh-weight-semibold); color: var(--sh-amber-text); }
.sh-cnd-contact .sh-btn + .sh-btn { margin-left: var(--sh-space-3); }

@media (max-width: 720px) {
  .sh-cn-grid { grid-template-columns: 1fr; }
  .sh-cnd-title { font-size: var(--sh-text-2xl); }
}