/* Blog cards — the Home carousel (3 per view, native scroll-snap) and the Blog page grid.
   Both layouts come out of `[bp_blog_posts]` and share `.bp-carousel-card`; the filename keeps
   the carousel name because renaming it would leave a stale sheet in the bp-* enqueue glob.
   Arrows in bp-blog-carousel.js.
   Card chrome is repeated here, not borrowed from the `card-no-padding` global class: Elementor
   only emits a global class's CSS on pages where an Elementor element uses it, and nothing on
   Home does. Values track the `card` design tokens.

   Fonts are declared explicitly rather than inherited: Hello Elementor's theme.css prints after
   bp-base.css and re-sets `h3`, so a bare card title falls back to the body sans. Title matches
   the site's card-h3 ramp (Nunito 500 / 26px / 1.25); the arrows carry `btn-secondary`'s
   anatomy written out, not the class itself — bp-home.css appends an `::after` icon chip to
   every `.btn-secondary`, which would stack a second glyph on an arrow button.

   The arrow rules are scoped `.bp-carousel .bp-carousel-btn` on purpose: Hello Elementor's
   reset.css prints after every bp-* sheet and styles `[type="button"]`, which is an attribute
   selector — the same 0,1,0 specificity as a bare class, so it won on later-wins and reset the
   radius to 3px, the font to 1rem/400 and the border to its own pink. Two classes clear it. */

.s-blog-inner,
.s-blog-list-inner{display:flex;flex-direction:column;gap:var(--space-md,40px);}

.bp-carousel{width:100%;}

/* Blog page grid — same card, no track, no arrows. */
/* 14 Sep 2026 audit P3: flex, not grid, so five posts fill the second row instead of leaving an empty cell. */
.bp-postgrid{display:flex;flex-wrap:wrap;gap:var(--space-sm,24px);width:100%;}
.bp-postgrid > .bp-carousel-card{flex:1 1 calc((100% - 2 * var(--space-sm,24px)) / 3);}
.bp-carousel-track{
	display:grid;grid-auto-flow:column;
	grid-auto-columns:calc((100% - 2 * var(--space-sm,24px)) / 3);
	gap:var(--space-sm,24px);
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-behavior:smooth;
	scrollbar-width:none;
}
.bp-carousel-track::-webkit-scrollbar{display:none;}
.bp-carousel-card{
	scroll-snap-align:start;display:flex;flex-direction:column;
	background:var(--card,#FFFFFF);border:1px solid var(--border,#DFD9D4);
	border-radius:var(--radius-md,16px);overflow:hidden;
}

.bp-carousel-media{display:block;aspect-ratio:3 / 2;overflow:hidden;background:var(--band-tan,#FAF5EB);}
/* Two classes on purpose: Elementor's frontend.min.css sets `.elementor img{height:auto}`
   (0,1,1), which outranked a bare `.bp-carousel-img` and let portrait thumbnails render at
   their intrinsic height instead of filling the 3:2 box - the uneven card images. */
.bp-carousel-media .bp-carousel-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

.bp-carousel-body{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;padding:var(--space-sm,24px);}
.bp-carousel-date{margin:0;font-family:"Nunito",sans-serif;font-weight:400;font-size:14px;color:var(--body,#604327);}
.bp-carousel-title{margin:0;font-family:Nunito, sans-serif;font-weight:500;font-size:26px;line-height:1.25;}
.bp-carousel-title a{color:var(--ink,#52815F);text-decoration:none;}
.bp-carousel-title a:hover{color:var(--label-green,#4B5F4F);}
.bp-carousel-excerpt{margin:0;font-family:"Nunito",sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:var(--body,#604327);}
.bp-carousel-more{margin-top:auto;align-self:flex-start;font-family:"Nunito",sans-serif;font-weight:600;font-size:16px;color:var(--label-green,#4B5F4F);text-decoration:none;}
.bp-carousel-more:hover{color:var(--accent-hover,#604327);text-decoration:underline;}

.bp-carousel-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:var(--space-sm,24px);}
.bp-carousel .bp-carousel-btn{
	width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
	background:var(--card,#FFFFFF);color:var(--ink,#52815F);
	border:1px solid var(--border,#DFD9D4);border-radius:var(--radius-pill,50px);
	font-family:"Nunito",sans-serif;font-weight:600;font-size:18px;line-height:1;
	cursor:pointer;
}
.bp-carousel .bp-carousel-btn:hover{background:var(--band-sage,#EEF2EF);}
.bp-carousel .bp-carousel-btn[disabled]{opacity:.4;cursor:default;}

@media (max-width:1024px){
	.bp-carousel-track{grid-auto-columns:calc((100% - var(--space-sm,24px)) / 2);}
	.bp-postgrid > .bp-carousel-card{flex-basis:calc((100% - var(--space-sm,24px)) / 2);}
}
@media (max-width:767px){
	.bp-carousel-track{grid-auto-columns:100%;}
	.bp-postgrid > .bp-carousel-card{flex-basis:100%;}
	.bp-carousel-title{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
	.bp-carousel-track{scroll-behavior:auto;}
}