/* =============================================================================
   ArneIron — "Scroll Story" post template (templates/single-scroll-story.html).
   Loaded only on posts that use it (inc/scroll-story.php). Theme tokens only,
   so every style variation (Old Arnie, ArneIron Light, …) restyles it.
   ========================================================================== */

/* Head: category pill, title, short description, meta row — one reading column. */
.scroll-story__head {
	max-width: 860px;
	margin-inline: auto;
	padding-block: var(--space-6, 24px) var(--space-5, 16px);
}
.scroll-story__head > * + * { margin-block-start: var(--space-4, 12px); }
.scroll-story__cat {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	font-size: var(--wp--preset--font-size--xs, .75rem);
}
.scroll-story__cat .wp-block-post-terms__separator { display: none; }
.scroll-story__cat a {
	display: inline-block;
	padding: .3em .9em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-weight: 600;
	text-decoration: none;
}
.scroll-story__cat a:hover,
.scroll-story__cat a:focus-visible { background: var(--c-accent-strong); color: #fff; }
.scroll-story__title.wp-block-post-title {
	margin-block: var(--space-4, 12px) 0;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
	line-height: 1.12;
	overflow-wrap: break-word;
}
.scroll-story__desc {
	color: var(--c-ink-2);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	line-height: 1.6;
}
.scroll-story__desc p { margin: 0; }
.scroll-story__desc .wp-block-post-excerpt__more-text { display: none; }
.scroll-story__meta {
	gap: var(--space-4, 12px);
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--sm, .875rem);
}
.scroll-story__meta a { color: inherit; }
.scroll-story__author::after { content: "·"; margin-inline-start: var(--space-4, 12px); }

/* Share: outline circles in the main colour, filled + white on hover/focus. */
.scroll-story__meta .arneiron-share.wp-block-social-links {
	gap: var(--space-2, 8px);
	margin: 0;
}
.scroll-story__meta .arneiron-share .wp-social-link {
	margin: 0;
	background: none;
	color: var(--c-accent);
	border: 1px solid var(--c-border);
	border-radius: 50%;
}
.scroll-story__meta .arneiron-share .wp-social-link a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: inherit;
}
.scroll-story__meta .arneiron-share .wp-social-link svg { width: 16px; height: 16px; }
.scroll-story__meta .arneiron-share .wp-social-link:hover,
.scroll-story__meta .arneiron-share .wp-social-link:focus-within {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}
.scroll-story__meta .arneiron-share .is-copied { outline: 2px solid var(--c-accent); border-radius: 50%; }

/* Featured image: the layout's WIDE size, a cinematic strip like VNM's. */
.scroll-story__feat.wp-block-post-featured-image {
	margin-block: var(--space-6, 24px);
}
.scroll-story__feat img {
	display: block;
	width: 100%;
	height: clamp(220px, 28vw, 420px);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 6px);
}

/* Body: one reading column until the script lays out the sticky panel. */
.scroll-story__body {
	margin-block-start: var(--space-6, 24px);
}
.scroll-story__content {
	max-width: 760px;
	margin-inline: auto;
}
.scroll-story__content > * { max-width: 100%; }
.scroll-story__content img { max-width: 100%; height: auto; }

.scroll-story__body.is-scroll-story-ready {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: stretch;
}
.is-scroll-story-ready .scroll-story__content {
	max-width: none;
	margin: 0;
	align-self: start;
}
.is-scroll-story-ready .scroll-story__src {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* The rail is the whole height of the text column; the stage inside it is
   sticky at --scroll-story-stick, which the script sets so the stage sits in
   the middle of the visible window below the sticky header and admin bar. It
   starts below the featured image, stays centred while the text scrolls, and
   is released at the end of the text, before the section below. Images are
   capped to the visible height, so a tall one is scaled down, never cut. */
.scroll-story__rail {
	position: relative;
	min-width: 0;
}
.scroll-story__stage {
	position: sticky;
	top: var(--scroll-story-stick, var(--scroll-story-top, 0px));
	display: grid;
}
.scroll-story__frame {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity .45s ease;
}
.scroll-story__frame.is-active { opacity: 1; }
.scroll-story__frame img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100svh - var(--scroll-story-top, 0px) - 96px);
	object-fit: contain;
	object-position: center;
	border-radius: var(--wp--custom--radius--md, 6px);
}
.scroll-story__frame figcaption {
	margin-top: var(--space-2, 8px);
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--xs, .75rem);
	line-height: 1.5;
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.scroll-story__frame { transition: none; }
}

/* Bottom: two columns like the vania-novikau.me post, on the same 2fr / 1fr grid
   as the scroll part. Left: previous / next, "Leave a Reply", the comments.
   Right: the "Post · Subscribe" part, then related posts. Stacks below 900px:
   left first, then subscribe, then related. */
.scroll-story__bottom {
	margin-block: var(--space-8, 48px) var(--space-6, 24px);
	padding-block-start: var(--space-6, 24px);
	border-top: 1px solid var(--c-border);
}
@media (min-width: 900px) {
	.scroll-story__bottom.scroll-story__bottom {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: clamp(24px, 4vw, 48px);
		align-items: start;
	}
}
.scroll-story__bottom > * { margin-block: 0; min-width: 0; }
@media (max-width: 899.98px) {
	.scroll-story__bottom-rail { margin-block-start: var(--space-8, 48px); }
}

/* Previous / next: two cells, small label over the title, arrow at the edge. */
.scroll-story__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5, 16px);
	margin-block-end: var(--space-6, 24px);
}
.scroll-story__nav > * { margin: 0; }
/* Each cell is one non-wrapping row: arrow + link, aligned on the first
   baseline so the arrow sits beside the small label. In plain inline flow a
   long title made the link (inline-flex) wider than the room left beside the
   arrow, so it dropped under it: "←" / "previous" / title on three lines, the
   title no longer indented (next: its "→" fell to a line of its own). */
.scroll-story__nav-prev,
.scroll-story__nav-next {
	display: flex;
	align-items: baseline;
	gap: 0 .5em;
}
.scroll-story__nav-next { grid-column: 2; justify-content: flex-end; text-align: end; }
.scroll-story__nav a {
	flex: 0 1 auto;
	min-width: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .5em;
	color: var(--c-ink);
	font-weight: 600;
	text-decoration: none;
}
.scroll-story__nav-next a { justify-content: flex-end; }
.scroll-story__nav a:hover { color: var(--c-accent-strong); }
.scroll-story__nav .post-navigation-link__label {
	flex-basis: 100%;
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--xs, .75rem);
	font-weight: 400;
	text-transform: lowercase;
}
.scroll-story__nav .wp-block-post-navigation-link__arrow-previous,
.scroll-story__nav .wp-block-post-navigation-link__arrow-next { color: var(--c-accent); }
@media (max-width: 599.98px) {
	.scroll-story__nav { grid-template-columns: 1fr; }
	.scroll-story__nav-next { grid-column: 1; }
}

/* Leave a Reply, then the comments. */
.scroll-story__comments.wp-block-comments { margin: 0; }
.scroll-story__comments .comment-reply-title {
	margin-block: 0 var(--space-3, 10px);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}
.scroll-story__comments .wp-block-comments-title {
	margin-block: var(--space-7, 32px) var(--space-4, 12px);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}
.scroll-story__comment {
	gap: var(--space-5, 12px);
	padding-block: var(--space-5, 12px);
}
.scroll-story__comment-body { flex: 1 1 auto; min-width: 0; }
.scroll-story__comment-head { gap: var(--space-2, 8px) var(--space-4, 12px); }
.scroll-story__comment-head .wp-block-comment-author-name { font-weight: 600; }
.scroll-story__comment-when {
	gap: var(--space-3, 10px);
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--xs, .75rem);
}
.scroll-story__comment-when > * { margin: 0; }
.scroll-story__comment .wp-block-comment-content p { margin-block: var(--space-2, 8px) 0; }
.scroll-story__comments .wp-block-comment-template ol { padding-inline-start: var(--space-7, 32px); }

/* Right column: subscribe box, then related posts as a list. */
.arneiron-subscribe {
	margin-block-end: var(--space-7, 32px);
}
.arneiron-subscribe__title.wp-block-heading {
	margin-block: 0 var(--space-2, 8px);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}
.arneiron-subscribe__text {
	margin-block: 0 var(--space-4, 12px);
	color: var(--c-ink-2);
}
.arneiron-subscribe__actions .wp-block-button,
.arneiron-subscribe__actions .wp-block-button__link { width: 100%; }
.scroll-story__related-title.wp-block-heading {
	margin-block: 0 var(--space-4, 12px);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}
.arneiron-related-posts .wp-block-post-template {
	display: grid;
	gap: var(--space-5, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.arneiron-related-posts .wp-block-post { display: grid; gap: var(--space-2, 8px); }
.arneiron-related-posts .wp-block-post-featured-image { margin: 0; }
.arneiron-related-posts .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--md, 6px); }
.arneiron-related-posts .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--md, 1rem); }
.arneiron-related-posts .wp-block-post-title a { color: var(--c-ink); text-decoration: none; }
.arneiron-related-posts .wp-block-post-title a:hover { color: var(--c-accent-strong); }
.arneiron-related-posts .wp-block-post-date {
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--xs, .75rem);
}
@media (min-width: 600px) and (max-width: 899.98px) {
	.arneiron-related-posts .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}