/*
 * OD blog-post template v1 (Resources). Loaded ONLY on posts the
 * od-blog-post-template.php mu-plugin gates on. Every rule is scoped under
 * .od-bp (tokens included; nothing on :root). Source of truth for the look:
 * content/new-era-minipc-2026-10/blog-post-template-pilot-mockup.html.
 * Media queries sit at the end of each section, written by hand (no scoper).
 */

.od-bp {
	--od-green: #1a7d2e;
	--od-green-dk: #13611f;
	--od-green-darker: #0e4a18;
	--od-accent-soft: #e9f4ec;
	--od-ink: #1a2230;
	--od-ink-soft: #4a5568;
	--od-line: #e2e7ee;
	--od-bg-soft: #f5f7fa;
	--od-bg-panel: #eef2f7;
	--od-ne: #2b4c7e;
	--od-ne-soft: #e8eef7;
	--od-radius: 10px;
	color: var(--od-ink);
}
.od-bp *, .od-bp *::before, .od-bp *::after { box-sizing: border-box; }
.od-bp .od-bp-wrap { max-width: var(--wd-container-w, 1222px); margin: 0 auto; padding: 0 15px; }

/* ---- post header (replaces the black Woodmart title band) ---- */
.od-bp.od-bp-head { background: linear-gradient(180deg, #fff 0%, var(--od-bg-soft) 100%); border-bottom: 1px solid var(--od-line); padding: 26px 0 0; }
.od-bp .od-bp-crumb { font-size: 13.5px; color: var(--od-ink-soft); }
.od-bp .od-bp-crumb a { color: var(--od-ink-soft); text-decoration: none; }
.od-bp .od-bp-crumb a:hover { color: var(--od-ink); }
.od-bp .od-bp-eyebrow { display: inline-block; margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--od-green); }
.od-bp h1.od-bp-title { margin: 8px 0 0; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; max-width: 820px; color: var(--od-ink); }
.od-bp .od-bp-dek { font-size: 17px; line-height: 1.6; color: var(--od-ink-soft); max-width: 760px; margin: 12px 0 0; }
.od-bp .od-bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; padding: 16px 0; border-top: 1px solid var(--od-line); font-size: 13.5px; color: var(--od-ink-soft); }
.od-bp .od-bp-who { display: flex; align-items: center; gap: 10px; }
.od-bp .od-bp-avs { display: flex; flex: none; }
.od-bp .od-bp-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; line-height: 1; border: 2px solid #fff; }
.od-bp .od-bp-av.od { background: var(--od-accent-soft); color: var(--od-green); }
.od-bp .od-bp-av.ne { background: var(--od-ne-soft); color: var(--od-ne); margin-left: -8px; }
.od-bp .od-bp-who b, .od-bp .od-bp-dates b { color: var(--od-ink); font-weight: 600; }
.od-bp .od-bp-dates span { display: inline-block; margin-right: 14px; }
.od-bp .od-bp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.od-bp .od-bp-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; }
.od-bp .od-bp-tag.topic { color: var(--od-green); background: var(--od-accent-soft); }
.od-bp .od-bp-tag.type { color: var(--od-ink-soft); background: var(--od-bg-panel); }
@media (max-width: 600px) {
	.od-bp h1.od-bp-title { font-size: 28px; }
	.od-bp .od-bp-dek { font-size: 16px; }
}

/* ---- layout: TOC rail + readable column ---- */
.od-bp .od-bp-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; margin: 34px 0 0; align-items: start; }
.od-bp .od-bp-toc { position: sticky; top: 24px; border: 1px solid var(--od-line); border-radius: 8px; padding: 14px 16px; font-size: 13px; }
.od-bp .od-bp-th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--od-ink-soft); font-weight: 700; margin: 0 0 8px; }
.od-bp .od-bp-toc a { display: block; color: var(--od-ink-soft); text-decoration: none; padding: 4px 0 4px 10px; border-left: 2px solid transparent; line-height: 1.4; }
.od-bp .od-bp-toc a:hover { color: var(--od-ink); }
.od-bp .od-bp-toc a.active { color: var(--od-green); border-left-color: var(--od-green); font-weight: 600; }
.od-bp .od-bp-toc-m { display: none; }
@media (max-width: 900px) {
	.od-bp .od-bp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; }
	.od-bp .od-bp-toc { display: none; }
	.od-bp .od-bp-toc-m { display: block; margin: 0 0 22px; border: 1px solid var(--od-line); border-radius: 8px; padding: 0 16px; }
	.od-bp .od-bp-toc-m summary { cursor: pointer; font-weight: 600; padding: 12px 0; font-size: 14px; color: var(--od-ink); }
	.od-bp .od-bp-toc-m nav { padding: 0 0 10px; }
	.od-bp .od-bp-toc-m a { display: block; color: var(--od-ink-soft); text-decoration: none; padding: 6px 0; font-size: 14.5px; }
}

/* ---- article body (core blocks, styled by block class only) ---- */
.od-bp .od-bp-article { max-width: 720px; min-width: 0; font-size: 17px; line-height: 1.65; color: var(--od-ink); }
.od-bp .od-bp-article p { margin: 0 0 16px; }
.od-bp .od-bp-article h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 42px 0 12px; line-height: 1.25; color: var(--od-ink); scroll-margin-top: 24px; }
.od-bp .od-bp-article h3 { color: var(--od-ink); }
.od-bp .od-bp-article a { color: var(--od-green); text-decoration: none; border-bottom: 1px solid #bfdcc6; }
.od-bp .od-bp-article a:hover { border-bottom-color: var(--od-green); }
.od-bp .od-bp-article ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.od-bp .od-bp-article li { margin-bottom: 8px; }
.od-bp .od-bp-article strong { color: var(--od-ink); }
.od-bp .od-bp-article .od-partner { font-size: 14px; color: var(--od-ink-soft); margin: 0 0 18px; padding: 0 0 0 12px; border-left: 3px solid var(--od-ne); }
.od-bp .od-bp-article .od-lead { font-size: 18.5px; line-height: 1.6; }

/* key takeaways (wp:group.od-takeaways) */
.od-bp .od-takeaways { border: 1px solid #cfe5d5; border-left: 4px solid var(--od-green); background: var(--od-accent-soft); border-radius: var(--od-radius); padding: 18px 22px 6px; margin: 26px 0 8px; }
.od-bp .od-bp-article .od-takeaways h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--od-green-dk); }
.od-bp .od-takeaways ul { padding-left: 20px; font-size: 16px; }

/* figures (wp:image.od-fig) */
.od-bp .od-bp-article figure.od-fig { margin: 28px 0; border: 1px solid var(--od-line); border-radius: var(--od-radius); overflow: hidden; background: #fff; }
.od-bp .od-bp-article figure.od-fig img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 6px; }
.od-bp .od-bp-article figure.od-fig-small img { width: calc(100% - 48px); max-width: 349px; }
.od-bp .od-bp-article figure.od-fig-mid img { width: calc(100% - 48px); max-width: 520px; }
.od-bp .od-bp-article figure.od-fig figcaption { margin: 0; padding: 11px 16px; font-size: 14px; line-height: 1.5; color: var(--od-ink-soft); border-top: 1px solid var(--od-line); background: var(--od-bg-soft); text-align: left; }
.od-bp .od-bp-article figure.od-fig figcaption strong { color: var(--od-ink); font-weight: 600; }
@media (max-width: 600px) {
	.od-bp .od-bp-article figure.od-fig img { margin: 16px auto; }
	.od-bp .od-bp-article figure.od-fig-small img, .od-bp .od-bp-article figure.od-fig-mid img { width: calc(100% - 32px); }
}

/* spec table (wp:table.od-spectable); labelled cards under 760px */
.od-bp .od-bp-article figure.od-spectable { margin: 22px 0; border: 1px solid var(--od-line); border-radius: 12px; background: #fff; overflow: hidden; }
.od-bp .od-spectable table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; table-layout: fixed; }
.od-bp .od-spectable th:nth-child(1) { width: 19%; }
.od-bp .od-spectable th:nth-child(2) { width: 31%; }
.od-bp .od-spectable th:nth-child(3) { width: 20%; }
.od-bp .od-spectable th:nth-child(4) { width: 30%; }
.od-bp .od-spectable th, .od-bp .od-spectable td { padding: 11px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--od-line); color: var(--od-ink); overflow-wrap: anywhere; }
.od-bp .od-spectable thead th { background: var(--od-bg-panel); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.od-bp .od-spectable tbody tr:last-child td { border-bottom: 0; }
.od-bp .od-spectable tbody tr:hover td { background: var(--od-bg-soft); }
.od-bp .od-spectable td:first-child { font-weight: 700; }
.od-bp .od-bp-article .od-spectable a { border-bottom: 0; font-weight: 600; }
/* classic-body tables (od_blogtpl_normalize_body): header row may be <td>, column count varies */
.od-bp .od-bp-autotable table { table-layout: auto; }
.od-bp .od-spectable thead td { background: var(--od-bg-panel); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.od-bp .od-bp-article .od-bp-tscroll { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--od-line); border-radius: 12px; }
.od-bp .od-bp-tscroll table { margin: 0; border: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 100%; }
.od-bp .od-bp-tscroll td, .od-bp .od-bp-tscroll th { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--od-line); vertical-align: top; text-align: left; }
@media (max-width: 760px) {
	.od-bp .od-bp-article figure.od-spectable { border: 0; background: transparent; overflow: visible; }
	.od-bp .od-spectable thead { display: none; }
	.od-bp .od-spectable table, .od-bp .od-spectable tbody, .od-bp .od-spectable tr, .od-bp .od-spectable td { display: block; width: 100%; }
	.od-bp .od-spectable tr { border: 1px solid var(--od-line); border-radius: 12px; margin: 0 0 12px; background: #fff; overflow: hidden; }
	.od-bp .od-spectable td { padding: 9px 14px; }
	.od-bp .od-spectable td:first-child { background: var(--od-bg-panel); font-size: 15px; }
	.od-bp .od-spectable td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--od-ink-soft); margin-bottom: 2px; }
	.od-bp .od-spectable tr td:last-child { border-bottom: 0; }
	.od-bp .od-spectable tbody tr:hover td { background: inherit; }
	.od-bp .od-spectable tbody tr:hover td:first-child { background: var(--od-bg-panel); }
}

/* FAQ accordion (wp:group.od-faq > wp:details) */
.od-bp .od-faq { border-top: 1px solid var(--od-line); margin: 8px 0 0; }
.od-bp .od-faq details { border-bottom: 1px solid var(--od-line); margin: 0; }
.od-bp .od-faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-size: 16.5px; font-weight: 600; position: relative; line-height: 1.4; color: var(--od-ink); }
.od-bp .od-faq summary::-webkit-details-marker { display: none; }
.od-bp .od-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--od-green); font-size: 24px; font-weight: 400; }
.od-bp .od-faq details[open] summary::after { content: "\2212"; }
.od-bp .od-bp-article .od-faq details p { color: var(--od-ink-soft); font-size: 16px; margin: 0 0 16px; }

/* about the authors (wp:group.od-authors > wp:group.od-acard) */
.od-bp .od-authors { margin: 44px 0 0; border-top: 1px solid var(--od-line); padding: 26px 0 0; scroll-margin-top: 24px; }
/* The header is not sticky on template posts (rule at the end), so offsets are the same 24px at every width. */
@media (max-width: 1024px) {
	.od-bp .od-bp-article h2, .od-bp .od-authors { scroll-margin-top: 24px; }
	.od-bp .od-bp-toc { top: 24px; }
}
.od-bp .od-bp-article .od-authors .od-th { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--od-ink-soft); font-weight: 700; margin: 0 0 14px; }
.od-bp .od-acard { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--od-line); border-radius: var(--od-radius); padding: 18px 20px; margin: 0 0 12px; }
.od-bp .od-bp-article .od-acard .od-av { width: 48px; height: 48px; flex: none; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; line-height: 1; }
.od-bp .od-acard .od-av-od { background: var(--od-accent-soft); color: var(--od-green); }
.od-bp .od-acard .od-av-ne { background: var(--od-ne-soft); color: var(--od-ne); }
.od-bp .od-acard-body { min-width: 0; }
.od-bp .od-bp-article .od-acard h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.od-bp .od-bp-article .od-acard p { margin: 0; font-size: 15px; color: var(--od-ink-soft); }
@media (max-width: 600px) {
	.od-bp .od-acard { flex-direction: column; gap: 10px; }
}

@media (max-width: 600px) {
	.od-bp .od-bp-article { font-size: 16.5px; }
	.od-bp .od-bp-article .od-lead { font-size: 17.5px; }
	.od-bp .od-bp-article h2 { font-size: 21px; margin-top: 36px; }
}

/* ---- related reading ---- */
.od-bp .od-bp-related { border-top: 1px solid var(--od-line); margin-top: 40px; padding: 26px 0; }
.od-bp .od-bp-related h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--od-ink-soft); font-weight: 700; margin: 0 0 16px; }
.od-bp .od-bp-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.od-bp .od-bp-rel { border: 1px solid var(--od-line); border-radius: 8px; padding: 16px 18px; text-decoration: none; color: inherit; display: block; }
.od-bp .od-bp-rel:hover { border-color: #c9d3de; }
.od-bp .od-bp-rt { font-size: 11px; color: var(--od-green); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.od-bp .od-bp-rel h3 { margin: 6px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--od-ink); }
@media (max-width: 720px) {
	.od-bp .od-bp-relgrid { grid-template-columns: 1fr; }
}

/* ---- CTA band (full-bleed) ---- */
.od-bp .od-bp-band { width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(135deg, #1f2937, var(--od-green-darker) 135%); color: #fff; }
.od-bp .od-bp-band-inner { padding-top: 44px; padding-bottom: 44px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.od-bp .od-bp-band h2 { margin: 0; font-size: 24px; color: #fff; }
.od-bp .od-bp-band p { margin: 6px 0 0; color: #d7e3d9; font-size: 15px; max-width: 560px; }
.od-bp .od-bp-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.od-bp .od-bp-btn { display: inline-block; border-radius: 9px; padding: 12px 22px; font-size: 14.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.od-bp .od-bp-btn.primary { background: #fff; color: var(--od-green-darker); }
.od-bp .od-bp-btn.ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
@media (max-width: 600px) {
	.od-bp .od-bp-acts { width: 100%; }
	.od-bp .od-bp-btn { flex: 1; text-align: center; }
}
/* Woodmart's off-canvas sidebar opener floats over the article on mobile; the template has no sidebar */
body.od-bp-on .wd-sidebar-opener { display: none !important; }

/* Woodmart's sticky header re-sticks on scroll-up and covers the post hero (and at
   1025-1270px its nav overflows). On template posts it scrolls away with the page
   instead, same as the BBT pages; the 24px offsets above assume no fixed header. */
body.od-bp-on .whb-main-header { position: static !important; }