/* ==========================================================================
   Home page "From the Blog" slider (template-parts/home/home-blog-preview.php).
   Loaded on the front page only (see sty_enqueue_assets() in inc/setup.php);
   behaviour in assets/js/blog-slider.js.
   The track is a native horizontal scroller with scroll-snap, so swiping on
   phones/trackpads works even before (or without) JavaScript. Cards keep
   their .blog-grid hover colours from assets/css/pages/blog.css.
   ========================================================================== */
.blog-slider { --slide-gap: 28px; --per-view: 3; position: relative; }

.blog-slider-track {
	display: flex;
	gap: var(--slide-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for the cards' hover lift + shadow without clipping. */
	padding: 12px 4px 34px;
	margin: -12px -4px -18px;
	scrollbar-width: none;
}
.blog-slider-track::-webkit-scrollbar { display: none; }
.blog-slider-track:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 6px; border-radius: var(--radius-md); }

.blog-slider-track > .card {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
	min-width: 0;
	scroll-snap-align: start;
}

/* ---- Controls: ← dots → ---- */
.blog-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}
.blog-slider-controls[hidden] { display: none; }
.blog-slider-btn {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-primary-dark);
	font-size: 1.2rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.blog-slider-btn:hover:not(:disabled),
.blog-slider-btn:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #f4d9a8;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(47, 93, 80, 0.3);
	outline: none;
}
.blog-slider-prev:hover:not(:disabled) { transform: translate(-3px, -2px); }
.blog-slider-next:hover:not(:disabled) { transform: translate(3px, -2px); }
.blog-slider-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

.blog-slider-dots { display: flex; align-items: center; gap: 8px; }
.blog-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--color-border);
	cursor: pointer;
	transition: width 300ms ease, background var(--transition), transform var(--transition);
}
.blog-slider-dot:hover,
.blog-slider-dot:focus-visible { background: var(--color-primary-light); transform: scale(1.2); outline: none; }
.blog-slider-dot[aria-current="true"] { width: 30px; background: var(--color-secondary); transform: none; }

.blog-slider-more { margin-top: 30px; text-align: center; }

/* ---- Cards per view ---- */
@media (max-width: 1024px) {
	.blog-slider { --per-view: 2; --slide-gap: 22px; }
}
@media (max-width: 640px) {
	.blog-slider { --per-view: 1.15; --slide-gap: 16px; }  /* next card peeks in */
	.blog-slider-btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-slider-track { scroll-behavior: auto; }
	.blog-slider-btn, .blog-slider-dot { transition: none; }
}