/* ==============================================================
   Study Hub — Coding Notes: language picker + language pages
   --------------------------------------------------------------
   Loaded AFTER coding-notes.css on every coding page.

   22. Layout hardening — stops the horizontal blow-out on phones
   23. Language picker cards + language page hero/chips

   Everything here is namespaced `cn-` and additive.
   ============================================================== */

/* ==============================================================
   22. Layout hardening — no horizontal blow-out on phones
   --------------------------------------------------------------
   A grid item defaults to min-width:auto, so one wide child
   (a <pre> with a long code line, a 520px table) can drag a whole
   chapter wider than the screen while everything else looks
   squashed, and the phone ends up with a page wider than itself.
   Pinning min-width:0 lets the inner scroll containers
   (.cn-code pre, .cn-table-wrap) scroll instead.
   ============================================================== */

.cn-shell > *,
.cn-main,
.cn-rail,
.cn-chapter,
.cn-fig,
.cn-cards,
.cn-lang-grid,
.cn-glossary,
.cn-roadmap,
.cn-boxes,
.cn-strip-grid { min-width: 0; }

.cn-chapter { overflow-wrap: break-word; }

.cn-code,
.cn-code pre,
.cn-table-wrap,
.cn-fig,
.cn-window,
.cn-quiz,
.cn-callout,
.cn-switch-inner { max-width: 100%; }

/* a more opaque bar, so page content never shows through it */
.cn-topbar { background: rgba(4, 6, 15, 0.95); }

/* anchor jumps land clear of the sticky bar */
html { scroll-padding-top: 88px; }

/* pill rail: fade the right edge instead of chopping a pill in half */
@media (max-width: 1039px) {
  .cn-toc {
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    mask-image: linear-gradient(90deg, #000 84%, transparent);
    padding-right: 30px;
  }
}

/* ==============================================================
   23a. Language picker grid
   ============================================================== */

.cn-lang-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 22px;
}

@media (min-width: 620px) {
  .cn-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .cn-lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cn-lang-card {
  position: relative;
  display: block;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-sm);
  background: rgba(148, 163, 184, 0.045);
  padding: 19px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.cn-lang-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.9);
}

.cn-lang-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cn-lang-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  font-family: var(--cn-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.cn-lang-card h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.cn-lang-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cn-faint);
}

.cn-lang-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--cn-dim);
}

.cn-lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.cn-lang-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--cn-dim);
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--cn-line);
  border-radius: 9999px;
  padding: 4px 10px;
}

.cn-lang-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cn-blue);
}

.cn-lang-foot svg { width: 15px; height: 15px; transition: transform 0.25s; }
.cn-lang-card:hover .cn-lang-foot svg { transform: translateX(3px); }

.cn-lang-card.is-soon { opacity: 0.6; }
.cn-lang-card.is-soon .cn-lang-foot { color: var(--cn-faint); }

/* ==============================================================
   23b. Language page hero + key/value chips
   ============================================================== */

.cn-lang-hero {
  position: relative;
  z-index: 1;
  padding: 46px 0 34px;
  overflow: hidden;
}

.cn-lang-mark {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 18px;
}

.cn-lang-mark .cn-lang-logo {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  font-size: 18px;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.9);
}

.cn-lang-mark h1 {
  margin: 0;
  font-size: clamp(1.85rem, 6.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.05;
}

.cn-lang-mark h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #7dd3fc, #a78bfa 55%, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.cn-meta-item {
  font-size: 12.5px;
  color: var(--cn-dim);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--cn-line);
  border-radius: 10px;
  padding: 8px 12px;
}

.cn-meta-item b { color: var(--cn-ink-soft); font-weight: 700; }

/* ---------- "switch language" row at the end of each page ---------- */

.cn-switch {
  position: relative;
  z-index: 1;
  padding: 6px 0 0;
}

.cn-switch-inner {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: rgba(6, 10, 22, 0.7);
  padding: clamp(20px, 3.4vw, 30px);
}

.cn-switch h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.cn-switch p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--cn-dim);
}

/* ==============================================================
   24. Small phones
   ============================================================== */

@media (max-width: 560px) {
  .cn-lang-hero { padding: 34px 0 26px; }
  .cn-lang-mark { gap: 12px; }
  .cn-lang-mark .cn-lang-logo { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
  .cn-lang-card { padding: 16px; }
}

/* ==============================================================
   25. Coding hub — hero extras, language picker, diagrams
   --------------------------------------------------------------
   Everything here is additive and only uses `cn-` classes.
   ============================================================== */

/* A hard safety net: no image on any coding page may overflow its box.
   (Horizontal page overflow was the one visible layout fault.) */
.cn-page img { max-width: 100%; height: auto; }

.cn-title-accent {
  background: linear-gradient(100deg, #7dd3fc, #a78bfa 55%, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- hero action row + small stat row ---------- */

.cn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.cn-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cn-line);
}

.cn-stat {
  font-size: 12.5px;
  color: var(--cn-faint);
}

.cn-stat b {
  margin-right: 5px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #dbeafe;
}

/* ---------- language picker block on the hub page ---------- */

.cn-picker {
  position: relative;
  z-index: 1;
  padding: 32px 0 6px;
}

.cn-picker-title {
  margin: 17px 0 0;
  font-size: clamp(1.45rem, 4.3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.cn-picker-lede { max-width: 660px; }

/* ---------- photo figures: caption in normal flow ----------------
   The caption used to be absolutely positioned over the photo, which
   collided with the picture and the next card on narrow screens.
   It now sits in its own bar underneath. */

.cn-figure {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cn-figure img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cn-figure figcaption {
  position: static;
  inset: auto;
  padding: 12px 14px 14px;
  background: rgba(5, 9, 18, 0.72);
}

.cn-figure figcaption b {
  display: block;
  margin-bottom: 2px;
}

/* ---------- inline SVG diagrams ---------------------------------
   The box scrolls on its own, so a wide diagram can never drag the
   whole page sideways - and the labels stay readable on a phone. */

.cn-fig {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-sm);
  background: rgba(148, 163, 184, 0.045);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cn-fig svg {
  display: block;
  width: 100%;
  min-width: 500px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 620px) {
  .cn-hero-actions .cn-btn { width: 100%; justify-content: center; }
  .cn-hero-actions { gap: 10px; }
  .cn-figure img { aspect-ratio: 16 / 10; }
}