/* ============================================================
   SECTION: KNOWLEDGE — guides & articles row right under the hero.
   Same media-first card grid as higgsfield featured rows:
   4 cols → 2 (≤1100px) → 1 (≤760px), title UNDER media.
   Cards are CMS-fed (knowledge.js) with a static fallback.
   ============================================================ */

.sec-knowledge .knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap-featured);
}

/* ---------- Card ----------
   Transition list includes opacity so the shared .reveal fade
   keeps working when this rule wins the cascade over .reveal.in. */
.sec-knowledge .knowledge-card {
  display: block;
  background: transparent;
  transition:
    opacity 0.5s var(--ease-pop),
    transform var(--dur-med) var(--ease-pop);
}
.sec-knowledge .knowledge-card:hover {
  transform: translateY(-2px) scale(1.02);
}
.sec-knowledge .knowledge-card:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

/* ---------- Cover (16:9, clipped) ---------- */
.sec-knowledge .knowledge-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--inset-highlight);
}
.sec-knowledge .knowledge-cover img,
.sec-knowledge .knowledge-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-glide);
}
.sec-knowledge .knowledge-img-top { object-position: top; }
.sec-knowledge .knowledge-card:hover .knowledge-cover img,
.sec-knowledge .knowledge-card:hover .knowledge-cover video { transform: scale(1.06); }

/* kind chip pinned to the cover: Guide / News */
.sec-knowledge .knowledge-kind {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: var(--radius-badge);
  background: var(--bg-overlay-glass);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- generated cover for CMS articles without a photo ----------
   hue comes from the article slug (set inline as --kh), motif svg from icons.js —
   never a grey placeholder box */
.sec-knowledge .knowledge-art-gen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 72% -6%, hsl(var(--kh, 78) 70% 24% / 0.75), transparent 62%),
    linear-gradient(160deg, hsl(var(--kh, 78) 42% 14%), hsl(var(--kh, 78) 52% 7%));
  transition: transform var(--dur-slow) var(--ease-glide);
}
.sec-knowledge .knowledge-card:hover .knowledge-art-gen { transform: scale(1.06); }
.sec-knowledge .knowledge-art-motif {
  width: 46px;
  height: 46px;
  color: hsl(var(--kh, 78) 88% 64% / 0.9);
}

/* ---------- CSS-art cover: wallet scanner (static fallback card) ---------- */
.sec-knowledge .knowledge-art {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-slow) var(--ease-glide);
}
.sec-knowledge .knowledge-card:hover .knowledge-art { transform: scale(1.06); }

.sec-knowledge .knowledge-art-scanner {
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(209, 254, 23, 0.07), transparent 55%),
    repeating-linear-gradient(
      to bottom,
      rgba(209, 254, 23, 0.06) 0px,
      rgba(209, 254, 23, 0.06) 1px,
      transparent 1px,
      transparent 5px
    ),
    #0C1210;
}

/* moving scan sweep */
.sec-knowledge .knowledge-art-scanner::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -18%;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(209, 254, 23, 0.10), transparent);
  animation: knowledge-sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes knowledge-sweep {
  from { transform: translateY(0); }
  to   { transform: translateY(680%); }
}

/* ghosted big mono word */
.sec-knowledge .knowledge-scan-word {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 64px);
  letter-spacing: 0.08em;
  line-height: 1;
  color: rgba(209, 254, 23, 0.10);
  white-space: nowrap;
  user-select: none;
}

/* tiny mono status line, top-right (kind chip owns the top-left corner) */
.sec-knowledge .knowledge-scan-status {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(209, 254, 23, 0.55);
  white-space: nowrap;
}

/* crosshair ring, retargeted by knowledge.js via --cx / --cy */
.sec-knowledge .knowledge-crosshair {
  position: absolute;
  left: var(--cx, 62%);
  top: var(--cy, 42%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  transition:
    left var(--dur-slow) var(--ease-glide),
    top var(--dur-slow) var(--ease-glide);
}
.sec-knowledge .knowledge-crosshair svg {
  width: 46px;
  height: 46px;
}
.sec-knowledge .knowledge-scan-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--bg-overlay-glass);
  border-radius: var(--radius-badge);
  padding: 2px 5px;
  white-space: nowrap;
}

/* ---------- Text under media ---------- */
.sec-knowledge .knowledge-body {
  padding: 10px 2px;
}
.sec-knowledge .knowledge-title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-card-title);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: 1.25;
  color: var(--text-primary);
}
.sec-knowledge .knowledge-desc {
  margin-top: 2px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--text-muted);
}
/* date · read time under CMS-fed cards */
.sec-knowledge .knowledge-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sec-knowledge .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-knowledge .knowledge-scan-word { font-size: clamp(40px, 7.4vw, 76px); }
}
@media (max-width: 760px) {
  .sec-knowledge .knowledge-grid { grid-template-columns: 1fr; }
  .sec-knowledge .knowledge-scan-word { font-size: clamp(44px, 12.5vw, 88px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sec-knowledge .knowledge-art-scanner::after { animation: none; opacity: 0; }
  .sec-knowledge .knowledge-crosshair { transition: none; }
  .sec-knowledge .knowledge-card:hover { transform: none; }
  .sec-knowledge .knowledge-card:hover .knowledge-cover img,
  .sec-knowledge .knowledge-card:hover .knowledge-art,
  .sec-knowledge .knowledge-card:hover .knowledge-art-gen { transform: none; }
}