/* =====================================================================
   Infinity Rise — Blog details (single post)
   Reuses home.css .lp-blog for the Related Posts row. Uses design tokens.
   ===================================================================== */

.blog-single { background: var(--color-bg-2); }
.blog-single__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) 400px; gap: 64px; align-items: start; }

/* ---------- MAIN ---------- */
.blog-main__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; margin: 0 0 14px; color: var(--color-black); }
.blog-main__meta { font-size: 16px; color: #3a3a3a; margin: 0 0 28px; }
.blog-main__sep { color: #b3a98f; }
.blog-main__media { margin: 0 0 32px; }
.blog-main__media img { display: block; width: 100%; height: auto; border-radius: 4px; }
.blog-main__content p { color: #4a4a4a; font-size: var(--fs-p); line-height: 1.75; margin: 0 0 20px; }
.blog-main__content > *:last-child { margin-bottom: 0; }
.blog-main__content > *:first-child { margin-top: 0; }
/* Editor (WYSIWYG) content — proportional heading hierarchy so headings added in
   the backend render correctly *below* the H1 post title, plus rich-text basics.
   SEO: the post title is the page's only H1 — use H2/H3… for subheadings. */
.blog-main__content h1, .blog-main__content h2, .blog-main__content h3,
.blog-main__content h4, .blog-main__content h5, .blog-main__content h6 {
	color: var(--color-black); font-weight: 600; line-height: 1.28; margin: 34px 0 14px; }
/* Token-based so the whole hierarchy scales with the H1 title (var(--fs-h3))
   and stays below it at every breakpoint: title > h2 > h3 > h4 > h5 > h6. */
.blog-main__content h1, .blog-main__content h2 { font-size: var(--fs-h4); }
.blog-main__content h3 { font-size: var(--fs-h5); }
.blog-main__content h4 { font-size: var(--fs-h6); }
.blog-main__content h5 { font-size: 16px; }
.blog-main__content h6 { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.blog-main__content ul, .blog-main__content ol { margin: 0 0 20px; padding-left: 24px; color: #4a4a4a; font-size: var(--fs-p); line-height: 1.75; }
.blog-main__content li { margin: 0 0 8px; }
.blog-main__content li::marker { color: var(--color-secondary); }
.blog-main__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-main__content a:hover { color: var(--color-secondary); }
.blog-main__content img { max-width: 100%; height: auto; border-radius: 4px; }
.blog-main__content figure { margin: 20px 0; }
.blog-main__content figcaption { font-size: 14px; color: #6a6a6a; margin-top: 8px; }
.blog-main__content blockquote { margin: 24px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--color-secondary); color: #333; font-style: italic; }
.blog-main__content blockquote p { color: inherit; }
.blog-main__content strong, .blog-main__content b { font-weight: 700; }
.blog-main__content hr { border: 0; border-top: 1px solid #e0dccf; margin: 32px 0; }

/* Checklist blocks */
.blog-list { margin-top: 44px; }
.blog-list__heading { font-size: var(--fs-h5); font-weight: 500; line-height: 1.2; margin: 0 0 24px; color: var(--color-black); }
.blog-list__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.blog-list__grid li { position: relative; padding-left: 32px; font-size: var(--fs-p); font-weight: 400; line-height: 1.4; color: var(--color-black); }
.blog-list__grid li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' rx='3' stroke='%23a97f2d' stroke-width='1.2'/%3E%3Cpath d='M4.3 8.2l2.5 2.5L11.8 5.2' stroke='%23a97f2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* "Why Infinity Rise" — checkmark only (no box). */
.blog-list--check .blog-list__grid li::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.7' stroke='%23a97f2d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center / contain no-repeat; }

/* ---------- SIDEBAR ---------- */
.blog-side { display: flex; flex-direction: column; gap: 40px; }
.blog-side__title { font-size: var(--fs-h6); font-weight: 500; margin: 0 0 22px; color: var(--color-black); }

/* Recent posts */
.blog-recent__item { display: flex; gap: 18px; align-items: stretch; text-decoration: none; margin: 0 0 22px; }
.blog-recent__item:last-child { margin-bottom: 0; }
.blog-recent__media { flex: 0 0 108px; align-self: stretch; min-height: 92px; background: #dcd7cd center / cover no-repeat; border-radius: 3px; }
.blog-recent__body { display: flex; flex-direction: column; justify-content: center; }
.blog-recent__meta { font-size: 13px; color: #3a3a3a; margin: 0 0 6px; }
.blog-recent__title { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--color-black); margin: 0 0 8px; transition: color .2s ease; }
.blog-recent__item:hover .blog-recent__title { color: var(--color-secondary); }
.blog-recent__more { font-size: 14px; color: var(--color-black); text-decoration: underline; text-underline-offset: 3px; }

/* Categories + Tags panel */
.blog-side__panel { background: var(--color-bg-1); padding: 32px 30px; }
.blog-cats ul { list-style: none; margin: 0 0 8px; padding: 0; }
.blog-cats li { border-bottom: 1px solid rgba(0,0,0,.12); }
.blog-cats li:last-child { border-bottom: 0; }
.blog-cats li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--color-black); text-decoration: none; font-size: 17px; }
.blog-cats li:first-child a, .blog-cats li a:hover { color: var(--color-secondary); }
.blog-cats__arrow { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1l5 5-5 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 10px no-repeat; }

.blog-tags { margin-top: 28px; }
.blog-tags__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-tags__chip { display: inline-block; padding: 9px 16px; font-size: 14px; color: var(--color-black); background: var(--color-white); border: 1px solid #e0dccf; border-radius: 3px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.blog-tags__chip.is-active, .blog-tags__chip:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); }

/* ---------- RELATED POSTS (reuses .lp-blog from home.css) ---------- */
.blog-related { background: var(--color-white); }

/* Related Posts typography. This section is .blog-related (not .lp-blog), so the
   home.css .lp-blog rules don't reach it — set them here, scoped and responsive:
   heading = section h2 style (52/500), card meta 16px, title 28px/500, Read More 16px. */
.blog-related .lp-heading { font-size: 52px; font-weight: 500; }
.blog-related .lp-blog__meta { font-size: 16px; }
.blog-related .lp-blog__title { font-size: 28px; font-weight: 500; }
.blog-related .lp-blog__more { font-size: 16px; }
@media (max-width: 1536px) { .blog-related .lp-heading { font-size: 44px; } }
@media (max-width: 1280px) { .blog-related .lp-heading { font-size: 38px; } }
@media (max-width: 1024px) { .blog-related .lp-heading { font-size: 32px; } }
@media (max-width: 600px)  { .blog-related .lp-heading { font-size: 28px; } .blog-related .lp-blog__title { font-size: 22px; } }

/* NOTE: dev's blog-listing/archive styles (.blog-hero / .blog-archive) were
   removed here — this project keeps its own listing (page-blog.php + blog.css).
   This file styles the single blog post only (loaded on is_singular('post')). */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.blog-single__grid { grid-template-columns: minmax(0, 1.6fr) 360px; gap: 48px; }
}
@media (max-width: 1024px) {
	.blog-single__grid { grid-template-columns: 1fr; gap: 56px; }
	.blog-side { max-width: 680px; }
}
@media (max-width: 600px) {
	.blog-list__grid { grid-template-columns: 1fr; gap: 14px; }
	.blog-recent__media { flex-basis: 88px; min-height: 76px; }
}

/* Mobile: normalize the article + Related Posts sections to the site's 24px rhythm
   and align the Related Posts heading to the site scale (22). */
@media (max-width: 600px) {
	.blog-single { padding-top: 24px !important; padding-bottom: 24px !important; }
	.blog-related { padding-top: 24px !important; padding-bottom: 24px !important; }
	.blog-related .lp-heading { font-size: 22px !important; }
}