/* kalling-kard.css — Reusable Katalyst K brand mark system
 * Internal doctrine name: "Kalling Kard". Public-facing name: Katalyst mark.
 * Canonical K asset: /assets/katalyst-k-logo.png
 *
 * Classes:
 *   .kalling-kard-mark       — visible, crisp logo mark (default display)
 *   .kalling-kard-watermark   — low-opacity subtle background mark, aria-hidden
 *   .kalling-kard-badge       — small icon mark paired with a section label
 *   .kalling-kard-preview-cover — document preview shell / card cover
 *   .kalling-kard-doc-mark    — document header or cover mark
 *   .kalling-kard-cta-mark    — used sparingly in major conversion blocks
 */

/* ─── Brand token layer ─── */
:root {
  --kk-teal:        #00d4c8;
  --kk-purple:      #7c3aed;
  --kk-gradient:    linear-gradient(135deg, #00d4c8 0%, #7c3aed 100%);
  --kk-glow-teal:   rgba(0,212,200,0.18);
  --kk-glow-purple: rgba(124,58,237,0.14);
  --kk-surface:     rgba(18,18,26,0.85);
  --kk-glass:       rgba(255,255,255,0.04);
  --kk-border:      rgba(255,255,255,0.08);
  --kk-border-glow: rgba(0,212,200,0.25);
}

/* ─── .kalling-kard-mark — visible, crisp K mark ─── */
.kalling-kard-mark {
  display: inline-block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 0 18px var(--kk-glow-teal)) drop-shadow(0 0 40px var(--kk-glow-purple));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.kalling-kard-mark:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 24px var(--kk-glow-teal)) drop-shadow(0 0 52px var(--kk-glow-purple));
}
/* Size variants */
.kalling-kard-mark--sm  { width: 36px; height: 36px; border-radius: 8px; }
.kalling-kard-mark--md  { width: 56px; height: 56px; border-radius: 12px; }
.kalling-kard-mark--lg  { width: 80px; height: 80px; border-radius: 16px; }
.kalling-kard-mark--xl  { width: 120px; height: 120px; border-radius: 20px; }
.kalling-kard-mark--hero { width: 96px; height: 96px; border-radius: 18px; }

/* ─── .kalling-kard-watermark — low-opacity subtle mark ─── */
.kalling-kard-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  width: 220px;
  height: 220px;
  object-fit: contain;
  z-index: 0;
  user-select: none;
}
.kalling-kard-watermark--right {
  right: -30px;
  bottom: -30px;
}
.kalling-kard-watermark--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ─── .kalling-kard-badge — small icon + label pair ─── */
.kalling-kard-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--kk-glass);
  border: 1px solid var(--kk-border-glow);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--kk-teal);
  text-transform: uppercase;
}
.kalling-kard-badge img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
}

/* ─── .kalling-kard-preview-cover — document preview shell ─── */
.kalling-kard-preview-cover {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--kk-surface) 0%, rgba(12,12,18,0.95) 100%);
  border: 1px solid var(--kk-border);
  border-radius: 16px;
  padding: 32px;
  min-height: 180px;
}
.kalling-kard-preview-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kk-gradient);
  border-radius: 16px 16px 0 0;
}

/* ─── .kalling-kard-doc-mark — document header/cover mark ─── */
.kalling-kard-doc-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.kalling-kard-doc-mark img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--kk-glow-teal));
}
.kalling-kard-doc-mark span {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── .kalling-kard-cta-mark — major conversion block mark ─── */
.kalling-kard-cta-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.kalling-kard-cta-mark img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--kk-glow-teal));
}

/* ─── Utility: glass card surface ─── */
.kk-glass-card {
  background: var(--kk-glass);
  border: 1px solid var(--kk-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .kalling-kard-mark--hero { width: 72px; height: 72px; border-radius: 14px; }
  .kalling-kard-mark--xl   { width: 88px; height: 88px; border-radius: 16px; }
  .kalling-kard-watermark   { width: 140px; height: 140px; }
}