/* Guide posts (single.php): article + side rail. Site tokens from design.css. */

.jbp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 48px;
	align-items: start;
	width: min(1270px, var(--jb-cw, 100%));
	margin: 0 auto;
	padding: 48px 0 0;
}
:root { --jbp-gutter: 32px; --jbp-end: 112px; } /* page-end gap matches the forum, builder, topics and FAQ */
.jbp-wide { display: block; }
.jbp-wide .jb-entry-content { max-width: none; }

/* article: readable measure, filling its column */
.jbp .jbp-article { max-width: none; margin: 0; }
.jbp-article > :first-child { margin-top: 0; }
.jbp-article p,
.jbp-article li { font-size: 17.5px; line-height: 1.7; color: var(--cream-100); }
.jbp-article > p:first-child { font-size: 19.5px; line-height: 1.6; }
.jbp-article > p:first-child strong { font-weight: 400; }
.jbp-article h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 44px 0 14px; scroll-margin-top: 24px; }
.jbp-article h3 { margin: 32px 0 10px; }
.jbp-article a { color: var(--glow-300); }
.jbp-article .wp-block-quote { margin: 24px 0; }

/* rail */
.jbp-rail { position: sticky; top: 24px; display: grid; gap: 16px; }
.jbp-box { padding: 20px 22px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbp .jbp-box-h { margin: 0 0 10px; font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.jbp-toc { margin: 0; padding: 0; list-style: none; counter-reset: jbp; }
.jbp-toc li { margin: 0; border-top: 1px solid var(--hairline); counter-increment: jbp; }
.jbp-toc li:first-child { border-top: 0; }
.jbp-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 9px 0; font-size: 15px; line-height: 1.4; color: var(--cream-100); text-decoration: none; }
.jbp-toc a::before { content: counter(jbp, decimal-leading-zero); font: 400 12px/1.9 'Space Mono', monospace; color: var(--cream-400); }
.jbp-toc a:hover { color: var(--glow-300); }
.jbp-facts { margin: 0; display: grid; gap: 10px; }
.jbp-facts div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; }
.jbp-facts dt { color: var(--cream-400); }
.jbp-facts dd { margin: 0; color: var(--cream-100); }
.jbp-facts a { color: var(--glow-300); text-decoration: none; }
.jbp-facts a:hover { text-decoration: underline; }
.jbp-cta { display: grid; gap: 4px; padding: 18px 22px; border: 1px solid var(--ink-border); border-radius: var(--r-card); text-decoration: none; transition: border-color .15s ease-out; }
.jbp-cta-main { border-color: var(--glow-border); }
.jbp-cta:hover { border-color: var(--glow-500); }
.jbp-cta-t { font: 400 20px/1.3 'Lora', serif; color: var(--cream-100); }
.jbp-cta-d { font-size: 14.5px; line-height: 1.5; color: var(--cream-400); }
.jbp a:focus-visible, .jbp-related a:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }

/* related guides: full content width */
.jbp-related { width: min(1270px, var(--jb-cw, 100%)); margin: 64px auto var(--jbp-end); padding-top: 40px; border-top: 1px solid var(--hairline); }
.jbp-related .jbp-related-h { margin: 0 0 20px; font: 400 28px/1.2 'Lora', serif; }
.jbp-related-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jbp-related-list li { margin: 0; }
.jbp-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 24px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); text-decoration: none; transition: border-color .15s ease-out; }
.jbp-card:hover { border-color: var(--glow-700); }
.jbp-card-tag { font: 400 11.5px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-400); }
.jbp-card-t { font: 400 20px/1.3 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.jbp-card-x { font-size: 14.5px; line-height: 1.55; color: var(--cream-400); }

@media (max-width: 1100px) {
	.jbp { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
}
@media (max-width: 900px) {
	:root { --jbp-gutter: 64px; --jbp-end: 80px; }
	.jbp { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
	.jbp .jbp-article { max-width: none; }
	.jbp-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jbp-rail > nav, .jbp-rail > .jbp-box { grid-column: 1 / -1; }
	.jbp-related-list { grid-template-columns: minmax(0, 1fr); }
	.jbp-related { margin-top: 48px; }
}
@media (max-width: 560px) {
	:root { --jbp-gutter: 32px; --jbp-end: 56px; }
	.jbp-rail { grid-template-columns: minmax(0, 1fr); }
	.jbp-article p, .jbp-article li { font-size: 16.5px; }
	.jbp-article > p:first-child { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .jbp-cta, .jbp-card { transition: none; } }