/*
 * Beautyforest, The Journal (blog) template furniture.
 * Loaded on single posts, the posts page (home) and post archives via inc/assets.php.
 * Per-article furniture (byline, takeaways, sources, shop cards) lives in the
 * bf/article-header and bf/article-footer block stylesheets. This file covers the
 * hub, archive intros and the post-grid cards shared by home.html + archive.html.
 * Palette: tokens.css (theme.json presets).
 */

/* ===== Hub (home.html) + Archive (archive.html) intros ===== */
.bf-journal-hub__intro,
.bf-journal-archive__intro{ text-align:center; max-width:var(--bf-container-narrow); margin:0 auto 2rem; }
.bf-journal-hub__tagline{ color:var(--bf-stone-deep); margin:.5rem auto 0; max-width:60ch; }
.bf-journal-archive__intro .wp-block-query-title{ margin:0 0 .5rem; }
.bf-journal-archive__desc{ color:var(--bf-stone-deep); max-width:65ch; margin:0 auto; line-height:1.6; }

/* ===== "Browse by topic", categories as chips ===== */
.bf-journal-hub__pillars{ text-align:center; margin:0 auto 2.5rem; }
.bf-journal-hub__pillars > h2{ margin-bottom:1rem; }
.bf-journal-hub__cats{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.bf-journal-hub__cats li{ margin:0; }
.bf-journal-hub__cats a{
	display:inline-block; padding:.5em 1em; border:1px solid var(--bf-green-line); border-radius:var(--bf-radius-pill);
	background:var(--bf-green-chip); color:var(--bf-green-ink); font-weight:600; font-size:14px; text-decoration:none;
	transition:background var(--bf-transition), border-color var(--bf-transition), color var(--bf-transition), transform var(--bf-transition);
}
.bf-journal-hub__cats a:hover{ background:var(--bf-forest); border-color:var(--bf-forest); color:var(--bf-white); transform:translateY(-1px); }

/* ===== Shared post grid (home + archive) ===== */
.bf-post-grid{ gap:28px 24px; }
.bf-post-grid li.wp-block-post{ display:flex; flex-direction:column; }
.bf-post-grid .wp-block-post-featured-image{ margin:0 0 .85rem; overflow:hidden; border-radius:var(--bf-radius); }
.bf-post-grid .wp-block-post-featured-image img{ transition:transform .35s ease; }
.bf-post-grid li.wp-block-post:hover .wp-block-post-featured-image img{ transform:scale(1.04); }
.bf-post-grid .wp-block-post-terms{ text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:11.5px !important; color:var(--bf-green-deep); margin:0 0 .35rem; }
.bf-post-grid .wp-block-post-terms a{ color:var(--bf-green-deep); text-decoration:none; }
.bf-post-grid .wp-block-post-title{ font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); line-height:var(--bf-lh-head); margin:0 0 .5rem; }
.bf-post-grid .wp-block-post-title a{ color:var(--bf-green-ink); text-decoration:none; }
.bf-post-grid .wp-block-post-title a:hover{ color:var(--bf-green-deep); }
.bf-post-grid .wp-block-post-excerpt{ color:var(--bf-stone-deep); font-size:14px; line-height:1.55; margin:0; }
.bf-post-grid .wp-block-post-excerpt__more-link{ display:inline-block; margin-top:.5rem; font-weight:700; font-size:13px; color:var(--bf-green-deep); }

/* Pagination spacing */
.bf-journal-hub__feed .wp-block-query-pagination,
.bf-journal-archive__feed .wp-block-query-pagination{ margin-top:2.5rem; gap:.5rem; }

/* Responsive: core grid columnCount doesn't auto-collapse. */
@media (max-width:900px){ .bf-post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:600px){ .bf-post-grid{ grid-template-columns:1fr !important; } }

/* ===== Journal hub page (/journal) — styled hero ===== */
.bf-journal__hero{ position:relative; overflow:hidden; text-align:center; margin:0 0 2rem; padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem); background:radial-gradient(circle at 50% -15%, rgba(47,170,90,.16), transparent 48%), linear-gradient(165deg, var(--bf-white) 0%, var(--bf-paper) 60%, var(--bf-mint) 100%); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); box-shadow:0 14px 40px -26px rgba(20,58,36,.4); }
.bf-journal__eyebrow{ margin:0 0 .7rem; color:var(--bf-forest); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.bf-journal__title{ margin:0 auto; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); color:var(--bf-graphite); font-size:clamp(2.2rem,5.5vw,3.6rem); line-height:1; letter-spacing:-.02em; }
.bf-journal__tagline{ max-width:60ch; margin:1rem auto 0; color:var(--bf-stone-deep); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.6; }
/* "Browse by topic" spacing on the page */
.bf-journal-page .bf-journal-hub__pillars{ margin-bottom:2.5rem; }

/* ===== Single article: full 1280 container (matches the category & product pages) =====
   The post title, article header, featured image, post content and article footer all
   inherit the 1280 article container from single.html, so every section's left/right
   edges line up with the site's category/shop pages (var(--bf-container)). */
/* Boxed article hero: title + meta/byline/takeaways in a card, echoing the
   category hero (white surface · hairline border · radius · generous padding). */
.single-post .bf-article-hero{
	margin:0;
	padding:clamp(1.5rem,4vw,2.5rem);
	background:var(--bf-white);
	border:1px solid var(--bf-hairline);
	border-radius:var(--bf-radius);
	box-shadow:var(--bf-shadow-panel);
}
.single-post .bf-article-hero .wp-block-post-title{ margin:0; }

.single-post .wp-block-post-featured-image{ margin-block:0; }
.single-post .wp-block-post-featured-image img{ border-radius:var(--bf-radius); display:block; width:100%; height:auto; }

/* ===== Article body (.bf-prose): editorial typography at the full container width =====
   Content fills the same 1280 article container as the hero and featured image
   (no narrow measure), so nothing reads as a shrunken column. */
.single-post .bf-prose{ color:var(--bf-graphite); font-size:var(--bf-fs-body); line-height:1.75; }
.single-post .bf-prose > p{ margin-top:0; margin-bottom:1.35em; }
.single-post .bf-prose > h2{ font-family:var(--bf-font-head); margin:2.4rem 0 .7rem; }
.single-post .bf-prose > h3{ font-family:var(--bf-font-head); margin:1.9rem 0 .5rem; }
.single-post .bf-prose > ul,
.single-post .bf-prose > ol{ margin:0 0 1.35em; padding-left:1.4rem; }
.single-post .bf-prose > ul li,
.single-post .bf-prose > ol li{ margin-bottom:.5em; line-height:1.7; }
.single-post .bf-prose > ul li::marker,
.single-post .bf-prose > ol li::marker{ color:var(--bf-green-deep); }
/* Links/strong scoped to top-level copy so the format modules' own links
   (product chips, CTAs) keep their styling. */
.single-post .bf-prose > :is(p,ul,ol,blockquote,.wp-block-quote) a{ color:var(--bf-green-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.single-post .bf-prose > :is(p,ul,ol,blockquote,.wp-block-quote) a:hover{ color:var(--bf-forest); }
.single-post .bf-prose > :is(p,ul,ol) strong{ color:var(--bf-green-ink); }
.single-post .bf-prose > blockquote,
.single-post .bf-prose > .wp-block-quote{
	margin-block:1.6rem; padding:.35rem 0 .35rem 1.25rem;
	border-left:3px solid var(--bf-forest);
	color:var(--bf-stone-deep); font-style:italic;
}
/* Lead paragraph (standfirst): sets the tone under the title */
.single-post .bf-prose > p:first-of-type{ font-size:1.2rem; line-height:1.65; color:var(--bf-stone-deep); }