/* =========================================================================
   GameWise — Article / long-read & stub  ·  «Сапфир» dark
   Breadcrumb · article hero · prose system · tables · code · stub · related.
   Reusable widgets (Callout, Accordion/FAQ, StoryCard, …) live in components.css,
   which article & stub layouts also load.
   ========================================================================= */

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.gw-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
.gw-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.gw-breadcrumb a:hover { color: var(--accent); }
.gw-breadcrumb__sep { color: var(--text-faint); }
.gw-breadcrumb [aria-current="page"] { color: var(--text-body); }

/* ── Article hero ───────────────────────────────────────────────────── */
.gw-article { padding-block: var(--space-8) var(--space-9); }
.gw-articlehero { padding: var(--space-5) 0 var(--space-7); border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--space-8); }
.gw-articlehero .gw-overline { display: inline-flex; margin-bottom: var(--space-4); }
.gw-articlehero .gw-h1 { margin: 0; max-width: 20ch; text-wrap: balance; }
.gw-articlehero .gw-lede { margin: var(--space-5) 0 0; max-width: 56ch; }
.gw-articlehero__meta { margin: var(--space-5) 0 0; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* ── Prose (long-form reading) ──────────────────────────────────────── */
.gw-prose { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); max-width: var(--measure-prose); }
.gw-prose > * + * { margin-top: var(--space-5); }
.gw-prose p { margin: 0 0 var(--space-5); }
.gw-prose p:last-child { margin-bottom: 0; }

.gw-prose h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--display-m); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-strong); margin: var(--space-10) 0 var(--space-4); }
.gw-prose h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--text-strong); margin: var(--space-8) 0 var(--space-3); }
.gw-prose h4 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--text-strong); margin: var(--space-6) 0 var(--space-2); }

.gw-prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--copper-700); text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out-soft), text-decoration-color var(--dur-fast) var(--ease-out-soft); }
.gw-prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }
.gw-prose strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.gw-prose em { font-style: italic; color: var(--accent-tint); }

.gw-prose ul, .gw-prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.gw-prose li { margin: 0 0 var(--space-2); }
.gw-prose li::marker { color: var(--accent); }

.gw-prose blockquote { margin: var(--space-6) 0; padding: var(--space-2) 0 var(--space-2) var(--space-5); border-left: 2px solid var(--copper-600); color: var(--text-body); font-style: italic; }
.gw-prose blockquote cite { display: block; margin-top: var(--space-3); font-style: normal; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }

.gw-prose hr { border: none; border-top: 1px solid var(--border-hairline); margin: var(--space-9) 0; }

/* numbers / inline code / formulas */
.gw-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); padding: 0.1em 0.4em; color: var(--text-strong); }
.gw-prose pre { background: var(--bg-canvas); border: 1px solid var(--border-hairline); border-left: 2px solid var(--copper-600); border-radius: var(--radius-md); padding: var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.6; color: var(--text-body); }
.gw-prose pre code { background: none; border: none; padding: 0; color: inherit; }

/* tables */
.gw-prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-family: var(--font-body); font-size: var(--text-base); }
.gw-prose th, .gw-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-hairline); }
.gw-prose thead th { background: var(--bg-raised); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium); color: var(--text-strong); border-bottom: 1px solid var(--copper-700); }
.gw-prose tbody tr:hover { background: var(--bg-raised); }
.gw-prose td.num, .gw-prose th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* figures */
.gw-prose figure { margin: var(--space-6) 0; }
.gw-prose figure img { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.gw-prose figcaption { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }

/* ── Stub ("Скоро") ─────────────────────────────────────────────────── */
.gw-stubpage { padding-block: var(--space-8) var(--space-10); }
.gw-stub { text-align: center; max-width: 52ch; margin: var(--space-4) auto 0; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: clamp(40px, 7vw, 96px) var(--space-8); position: relative; overflow: hidden; }
.gw-stub__icon { display: inline-flex; color: var(--accent); margin-bottom: var(--space-5); }
.gw-stub__icon svg { width: 40px; height: 40px; }
.gw-stub__h { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); color: var(--text-strong); margin: 0 0 var(--space-3); }
.gw-stub__p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--text-body); margin: 0 auto var(--space-6); }
.gw-stub__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Related ────────────────────────────────────────────────────────── */
.gw-related { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-hairline); }
.gw-related__h { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); margin: 0 0 var(--space-4); }
.gw-related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gw-related__link { display: flex; align-items: center; gap: 12px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-card); text-decoration: none; color: var(--text-strong); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft); }
.gw-related__link span { flex: 1; }
.gw-related__link:hover { border-color: var(--border-accent); transform: translateX(2px); }
.gw-related__link > .gw-icon:first-child { color: var(--accent); }
.gw-related__link > .gw-icon:last-child { color: var(--text-faint); }

@media (max-width: 560px) { .gw-stub { padding: var(--space-8) var(--space-5); } }

/* ── Vertical hub (landing) ─────────────────────────────────────────── */
.gw-hub { padding-bottom: var(--space-9); }
.gw-hubhero { position: relative; overflow: hidden; padding: var(--space-9) 0 var(--space-8); border-bottom: 1px solid var(--border-hairline); }
.gw-hubhero__in { position: relative; z-index: 2; }
.gw-hubhero__glow { position: absolute; right: -5%; top: -30%; width: 45vw; height: 45vw; background: radial-gradient(circle, var(--copper-glow), transparent 60%); filter: blur(40px); opacity: .5; z-index: 0; pointer-events: none; }
.gw-hubhero__h { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.25rem, 5vw, 4rem); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--text-strong); margin: var(--space-4) 0 0; max-width: 16ch; text-wrap: balance; }
.gw-hubhero__lede { margin: var(--space-5) 0 0; max-width: 56ch; }
.gw-hubhero__stat { margin: var(--space-6) 0 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.gw-hubhero__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); font-size: clamp(2.5rem, 6vw, 4rem); line-height: .9; letter-spacing: -.03em; color: var(--text-strong); }
.gw-hubhero__num--loss { color: var(--signal-loss); }
.gw-hubhero__num--accent { color: var(--accent); }
.gw-hubhero__lab { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); max-width: 30ch; }
.gw-hubhero__note { margin: var(--space-6) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 10px; }
.gw-hubhero__note::before { content: ""; width: 28px; height: 1px; background: var(--copper-600); }

.gw-hub__body { margin-top: var(--space-8); }
.gw-hub-sec { margin-top: var(--space-9); }
.gw-hub-sec > .gw-overline { display: inline-flex; margin-bottom: var(--space-5); }

.gw-tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .gw-tilegrid { grid-template-columns: 1fr; } }
.gw-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-card); text-decoration: none; position: relative; transition: border-color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft); }
.gw-tile:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.gw-tile__t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); font-weight: var(--weight-medium); }
.gw-tile__d { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.gw-tile__arr { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft); }
.gw-tile:hover .gw-tile__arr { color: var(--accent); transform: translateX(2px); }

.gw-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .gw-cardgrid { grid-template-columns: 1fr; } }

.gw-hub-cta { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-hairline); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.gw-hub-cta__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.gw-hub-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }