/**
 * Espy Blog — scroll-along presentation (front-end).
 * Styled from the theme design tokens, so it matches every reader theme.
 * @package EspyBlogCore
 */
.espy-scrollp {
	position: -webkit-sticky; position: sticky; top: var(--sticky, 90px);
	background: var(--surface, #fff); color: var(--text, #24211f);
	border: 1px solid var(--border, #e4e1dd); border-radius: var(--r-lg, 18px);
	padding: 16px; margin-bottom: 18px;
	box-shadow: var(--e1, 0 6px 20px rgba(0,0,0,.06));
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.espy-scrollp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.espy-scrollp-label {
	font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--primary, #DC7454);
}
.espy-scrollp-count { font-size: 12px; font-weight: 700; color: var(--muted, #8a8580); }

.espy-scrollp-slide { transition: opacity .28s ease; }
.espy-scrollp-slide.is-fading { opacity: .15; }

.espy-scrollp-media {
	border-radius: var(--r-md, 12px); overflow: hidden;
	background: var(--surface-2, #f4efe9); margin-bottom: 10px;
}
.espy-scrollp-media img,
.espy-scrollp-media video { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.espy-scrollp-media audio { width: 100%; display: block; }
.espy-scrollp-media:has(audio) { background: transparent; }

.espy-scrollp-title { font-family: var(--font-display, inherit); font-weight: 700; font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
.espy-scrollp-body { font-size: 13.5px; line-height: 1.5; color: var(--text, #24211f); opacity: .88; }

.espy-scrollp-dots { display: flex; gap: 6px; margin: 12px 0 8px; flex-wrap: wrap; }
.espy-scrollp-dot {
	width: 7px; height: 7px; border-radius: 999px; background: var(--border, #e4e1dd);
	transition: background .2s ease, transform .2s ease;
}
.espy-scrollp-dot.is-on { background: var(--primary, #DC7454); transform: scale(1.35); }

.espy-scrollp-bar { height: 4px; border-radius: 999px; background: var(--surface-2, #f0ece6); overflow: hidden; }
.espy-scrollp-fill { display: block; height: 100%; width: 0; background: var(--primary, #DC7454); transition: width .1s linear; }

/* On phones the theme hides the sidebar, so the script relocates the panel to
   the top of the reading column (adding .is-inline). Pin it there as a compact
   "scroll-along" band that still advances with the article's sections. */
@media (max-width: 1000px) {
	.espy-scrollp.is-inline {
		position: -webkit-sticky; position: sticky; top: 8px;
		margin: 0 0 22px; padding: 14px 16px;
	}
	.espy-scrollp.is-inline .espy-scrollp-media { margin-bottom: 8px; }
	.espy-scrollp.is-inline .espy-scrollp-media img,
	.espy-scrollp.is-inline .espy-scrollp-media video { aspect-ratio: auto; height: 120px; }
	/* Keep the pinned band short: clamp the blurb to two lines. */
	.espy-scrollp.is-inline .espy-scrollp-body {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.espy-scrollp.is-inline .espy-scrollp-dots { margin: 10px 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.espy-scrollp-slide, .espy-scrollp-dot, .espy-scrollp-fill { transition: none !important; }
}