/* Home page: [jnr_home] (functions.php). Site tokens from design.css. */

:root { --jbh-end: 112px; --jbh-gutter: 0px; } /* extra side gutter on top of the theme container's own padding */
.home .entry-content > .jbh.jbh { max-width: none; }
.jbh {
	width: min(var(--jb-cw, 1270px), 100%);
	margin: 0 auto calc(var(--jbh-end) - 64px); /* the container adds 64px below; total matches the 112/80/56 page-end gap */
	display: grid;
	gap: 64px;
	color: var(--cream-100);
}
.entry-content .jbh p { margin: 0; }
.entry-content .jbh ul, .entry-content .jbh ol { margin: 0; padding: 0; list-style: none; }
.entry-content .jbh li { margin: 0; }
.jbh a { color: inherit; text-decoration: none; }
.jbh a:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }
.jbh-tag, .jbh-eyebrow { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }

/* section headings */
.jbh-sec { display: grid; gap: 20px; }
.jbh-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.entry-content .jbh .jbh-sec-h h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 34px)/1.2 'Lora', serif; color: var(--cream-100); }
.jbh-sec-h a { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--glow-300) !important; }

/* six steps */
.jbh-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); overflow: hidden; }
.jbh-steps li + li { border-left: 1px solid var(--ink-border); }
.jbh-steps a { display: grid; gap: 4px; height: 100%; padding: 20px; transition: background-color .15s ease-out; }
.jbh-steps a:hover { background: var(--wash); }
.jbh-step-n { font: 400 13px/1.4 'Space Mono', monospace; color: var(--glow-300); }
.jbh-step-t { font-size: 17px; font-weight: 600; line-height: 1.3; }
.jbh-step-m { font-size: 13.5px; color: var(--cream-400); }

/* featured guides */
.jbh-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jbh-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); transition: border-color .15s ease-out; }
.jbh-cards li:first-child .jbh-card { border-color: var(--glow-border); }
.jbh-cards li:first-child .jbh-tag { color: var(--glow-300); }
.jbh-card:hover { border-color: var(--glow-500); }
.jbh-card-t { font: 400 22px/1.25 'Lora', serif; text-wrap: balance; }
.jbh-card-x { font-size: 15px; line-height: 1.55; color: var(--cream-400); }

/* answers + forum */
.jbh-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: stretch; }
.jbh-answers { display: grid; gap: 20px; align-content: start; }
.jbh-qa { border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.jbh-qa a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.jbh-qa a:hover .jbh-q { color: var(--glow-300); }
.jbh-q { font-weight: 600; font-size: 16px; line-height: 1.4; }
.jbh-a { font-size: 14.5px; line-height: 1.5; color: var(--cream-400); }
.jbh-forum { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); transition: border-color .15s ease-out; }
.jbh-forum:hover { border-color: var(--glow-500); }
.jbh-forum-t { font: 400 30px/1.2 'Lora', serif; }
.jbh-forum-d { font-size: 16px; line-height: 1.55; color: var(--cream-400); }
.jbh-btn { align-self: flex-start; margin-top: 8px; padding: 11px 22px; font-weight: 600; font-size: 15px; color: var(--ink-950); background: var(--glow-500); border-radius: var(--r-pill); }

@media (max-width: 1000px) {
	.jbh-split { grid-template-columns: minmax(0, 1fr); }
	.jbh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jbh-steps li + li { border-left: 0; }
	.jbh-steps li { border-right: 1px solid var(--ink-border); border-bottom: 1px solid var(--ink-border); }
	.jbh-steps li:nth-child(3n) { border-right: 0; }
	.jbh-steps li:nth-child(n+4) { border-bottom: 0; }
	.jbh-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { :root { --jbh-end: 80px; --jbh-gutter: 32px; } .jbh { gap: 48px; } }
@media (max-width: 560px) {
	:root { --jbh-end: 56px; --jbh-gutter: 24px; }
	.jbh { gap: 40px; }
	.jbh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jbh-steps li:nth-child(3n) { border-right: 1px solid var(--ink-border); }
	.jbh-steps li:nth-child(2n) { border-right: 0; }
	.jbh-steps li:nth-child(n+4) { border-bottom: 1px solid var(--ink-border); }
	.jbh-steps li:nth-child(n+5) { border-bottom: 0; }
	.jbh-steps a { padding: 14px; }
	.jbh-qa { grid-template-columns: minmax(0, 1fr); }
	.jbh-forum, .jbh-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .jbh-card, .jbh-forum, .jbh-steps a { transition: none; } }
