/* Going Raw listing (SSG) — complements Bootstrap; skills.sh-style hook + readable cards */
:root {
  --cd-hero-fg: #a3e635;
  --cd-hero-bg: #0f172a;
}

.cd-hero {
  background: var(--cd-hero-bg);
  color: #e2e8f0;
  border-bottom: 1px solid #334155;
  overflow-x: hidden;
}

/* Narrow viewports: shrink monospace ASCII so full width fits (no horizontal scroll). */
.cd-hero > .container {
  container-type: inline-size;
}

.cd-hero pre.cd-ascii {
  color: var(--cd-hero-fg);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  max-width: 100%;
  overflow-x: hidden;
  white-space: pre;
  /* ~72 glyph row (GOING + RAW inline banner): scale with hero content box; cap for large screens */
  font-size: clamp(0.32rem, 2.35cqi, 0.85rem);
}

/* Browsers without container query length units: vw fallback (slightly conservative). */
@supports not (font-size: 1cqi) {
  .cd-hero pre.cd-ascii {
    font-size: clamp(0.32rem, 2.05vw, 0.85rem);
  }
}

/* Do not override with a fixed rem at Bootstrap sm — keep clamp+cqi/vw so ~72 glyphs
   fit the hero container at all viewport widths (avoids half-clipped trailing glyphs). */

.cd-lesson {
  background-color: rgba(13, 110, 253, 0.08);
  border-left: 4px solid var(--bs-primary);
}

/* Top-of-card thumbnail: fixed visual height, full width */
.cd-card-img {
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.cd-skip-link {
  z-index: 2000;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}