/* Guitar Buddha — User Guide styles
   Always load after site.css. Built on journal.css's article pattern
   (.article-wrap, .breadcrumb, .art-eye/.art-title/.art-lede, .art-body,
   .art-callout, .art-table, .art-related) — reuse those classes directly on
   guide pages. This file only adds what guide pages need beyond an article:
   a bigger, inline-capable screenshot figure (legibility matters here, these
   aren't decorative hero shots), an in-page "on this page" jump nav, and a
   hub-grid variant of journal's card grid. */

/* ── On this page (jump nav) ─────────────────────────────
   Sits right after the lede, before the body starts. Deliberately NOT a
   sticky sidebar — guide pages are single-column like journal articles, and
   a sidebar would break that rhythm (and mobile) for a modest length gain. */
.guide-toc {
  margin: 8px 0 52px;
  padding: 20px 24px;
  background: var(--glass-1);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.guide-toc-eye {
  font-family: var(--f-m);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ch-500);
  margin-bottom: 14px;
}
.guide-toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide-toc-links a {
  font-family: var(--f-m);
  font-size: 13px;
  color: var(--ch-200);
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 7px 14px;
  border-bottom: none;
}
.guide-toc-links a:hover { color: var(--ru-400); border-color: rgba(184,100,62,0.3); }

/* ── Guide screenshot figures ─────────────────────────────
   Bigger than journal's .art-phone (220px) — these carry real instructional
   detail (chord grids, tab text, settings rows), not decoration, so they
   need to actually be readable. A rounded-rect card nods at the phone-frame
   language used elsewhere on the site without a full device bezel eating
   space. Sits inline within .art-body at the point the copy references it,
   not forced into a single top-of-page hero the way journal articles do. */
.guide-figure {
  margin: 8px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.guide-shot {
  width: 100%;
  max-width: 360px;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0807;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.guide-shot img { width: 100%; height: auto; display: block; }
/* Landscape captures (Jam Performance Mode, iPad split view) — wider frame,
   smaller corner radius reads better on a horizontal image. */
.guide-shot.is-landscape { max-width: 100%; border-radius: 16px; }
.guide-caption {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ch-500);
  text-align: center;
  max-width: 46ch;
}

/* Two figures side by side on wide viewports (e.g. a before/after or two
   related states) — opt in per-instance, most figures stay full-width. */
.guide-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 8px 0 40px;
}
.guide-figure-pair .guide-figure { margin: 0; }

/* ── Section tags (Known limitation / Coming soon) ────────
   A small inline label, distinct from .art-callout's full-width box, for a
   short one-line flag inside a paragraph or figure caption. */
.guide-tag {
  display: inline-block;
  font-family: var(--f-m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber, var(--ru-400));
  background: rgba(184,100,62,0.12);
  border-radius: 6px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Guide hub grid ────────────────────────────────────────
   Same shape as .journal-grid/.journal-card (journal.css) — reused verbatim
   on guide/index.html. One addition: journal's card image is a decorative
   inline SVG icon, but the guide hub uses a real cropped screenshot per
   card instead (more informative for a product guide than an abstract
   icon — shows the reader what the page is actually about). */
.journal-card-img-wrap.has-shot { display: block; overflow: hidden; }
.guide-hub-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Sand theme overrides ─────────────────────────────────
   Sand inverts the ch scale (ch-900 = near-white bg, ch-300 = espresso
   text) — see journal.css's own sand block for the full rationale. */
html[data-theme="sand"] .guide-toc { background: rgba(255,255,255,0.5); border-color: rgba(93,65,40,0.10); }
html[data-theme="sand"] .guide-toc-eye { color: var(--ch-500); }
html[data-theme="sand"] .guide-toc-links a { color: var(--ch-300); background: rgba(255,255,255,0.6); border-color: rgba(93,65,40,0.12); }
html[data-theme="sand"] .guide-caption { color: var(--ch-500); }
html[data-theme="sand"] .guide-tag { color: var(--ru-600); background: rgba(181,80,44,0.12); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .guide-figure-pair { grid-template-columns: 1fr; }
  .guide-toc { padding: 16px 18px; }
}