/* ============================================================
   BIX GUIDEN — redaktionella sidor (/guide + /guide/<slug>).
   Laddas EFTER theme.css + home.css (nav/footer/tokens därifrån).
   Ärlighetsregler och arkitektur: se skissen 2026-08-13 och
   docs-kommentaren i web/guide/index.html.
   ============================================================ */

.g-wrap { max-width: 900px; margin: 0 auto; padding: 140px 20px 64px; }
.g-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 14px; }
.g-h1 { font-size: clamp(38px, 7vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1; margin: 0 0 14px; }
.g-h1 .d { color: var(--text-secondary); }
.g-intro { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 56ch; margin: 0 0 40px; }
.g-cat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin: 34px 0 10px; }
.g-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.g-list li { border-bottom: 1px solid var(--border); background: var(--surface); }
.g-list li:last-child { border-bottom: 0; }
.g-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 16px 18px; text-decoration: none; }
.g-list a:hover { background: var(--surface-card); }
.g-q { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.g-q span { display: block; font-size: 13px; font-weight: 400; color: var(--text-tertiary); margin-top: 3px; letter-spacing: -.005em; }
.g-min { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-coming { font-size: 13px; color: var(--text-tertiary); margin-top: 28px; }

/* ── Bilder: sajtens egna fotografi (samma filer som startsidans Problemet-band),
   16:9, Bix-radien. Diskret, aldrig dekor för dekorens skull. ── */
.g-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; align-self: center; border: 1px solid var(--border); }
.g-list a { align-items: center; }
.g-q { flex: 1; min-width: 0; }
.a-hero { margin: 0 0 30px; }
/* height:auto krävs: annars vinner höjd-ATTRIBUTET (816) över aspect-ratio och bilden blir stående */
.a-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; }

/* ── Artikel ── */
.a-wrap { max-width: 660px; margin: 0 auto; padding: 140px 20px 64px; }
.a-crumb { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 26px; }
.a-crumb a { text-decoration: none; color: var(--text-secondary); }
.a-crumb span { margin: 0 7px; color: var(--text-tertiary); }
.a-h1 { font-size: clamp(30px, 5.4vw, 42px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 10px; text-wrap: balance; }
.a-meta { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 26px; }
/* Snabbt svar: formatet Google lyfter till utvald snippet. Sage-markören är
   sidans ENDA sage-användning (en-per-sida-regeln). */
.a-quick { border: 1px solid var(--border); border-left: 2px solid var(--sage); border-radius: 14px; background: var(--surface); padding: 18px 20px; margin-bottom: 34px; }
.a-quick .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 8px; }
.a-quick p { font-size: 15px; line-height: 1.6; color: var(--text-primary); margin: 0; }
.a-wrap h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 32px 0 10px; }
.a-wrap > p, .a-body p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; }
.a-wrap p strong { color: var(--text-primary); font-weight: 600; }
.a-wrap ul { margin: 0 0 14px 18px; padding: 0; }
.a-wrap ul li { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 6px; }
.a-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
@media (max-width: 620px) { .a-cmp { grid-template-columns: 1fr; } }
.a-cmp .c { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px; }
.a-cmp .c h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.a-cmp .c ul { margin: 0 0 0 16px; }
.a-cmp .c li { font-size: 13.5px; margin-bottom: 5px; }
.a-faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 8px; }
.a-faq summary { font-size: 14.5px; font-weight: 600; padding: 14px 16px; cursor: pointer; list-style: none; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq details p { padding: 0 16px 14px; margin: 0; font-size: 14px; }
.a-bridge { margin-top: 38px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-card); padding: 22px 22px 20px; }
.a-bridge h2 { margin: 0 0 6px; font-size: 18px; }
.a-bridge p { font-size: 14px; margin: 0 0 14px; }
.a-bridge .row { display: flex; flex-wrap: wrap; gap: 8px; }
.a-bridge .row a { font-size: 13px; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; }
.a-bridge .row a.first { background: var(--accent); color: var(--accent-text); font-weight: 600; border-color: var(--accent); }
.a-src { margin-top: 26px; font-size: 12.5px; color: var(--text-tertiary); }