/**
 * MF Post-Header variant: series-overlay (ported from demo MFV10).
 * Loaded only when a post's header variant is `series-overlay`.
 *
 * A progress ring badge sits on the hero image; the parts list reveals as a
 * darkened overlay directly over the image via native details.mfr-reveal.
 * System fonts + base.css colour vars only — no Google Fonts, no remote assets.
 */

.mfph-series-overlay {
	margin-bottom: 14px;
}

.mfph-series-overlay__reveal {
	border: none;
	padding: 0;
	margin: 0;

	/* Positioning context + clip for the reveal panel, which now lives as
	   <details> content after </summary> (not inside it, for a11y). */
	position: relative;
	overflow: hidden;
}

.mfph-series-overlay__fig {
	display: block;
	position: relative;
	margin: 0;
	cursor: pointer;
	list-style: none;
	overflow: hidden;
}

.mfph-series-overlay__fig::-webkit-details-marker {
	display: none;
}

.mfph-series-overlay__reveal summary:focus-visible {
	outline: 2px solid var(--mf-cyan);
	outline-offset: -4px;
}

.mfph-series-overlay__fig img {
	display: block;
}

/* No featured image: give the trigger a dark panel with height so the badge and
   hint stay usable and the reveal still has a surface to overlay. */
.mfph-series-overlay__reveal--noimage .mfph-series-overlay__fig {
	background: var(--mf-ink);
	min-height: 200px;
}

.mfph-series-overlay__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(14, 17, 22, 0.55);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.mfph-series-overlay__ringsvg {
	position: absolute;
	inset: 4px;
	transform: rotate(-90deg);
}

.mfph-series-overlay__ringtrack {
	stroke: rgba(255, 255, 255, 0.3);
}

.mfph-series-overlay__ringval {
	stroke: var(--mf-lime);
	transition: stroke-dashoffset 0.4s ease;
}

.mfph-series-overlay__badge-num {
	position: relative;
	font: 800 12px/1 var(--mf-mono);
	color: #fff;
}

.mfph-series-overlay__hint {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	font: 700 12px/1 var(--mf-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(14, 17, 22, 0.55);
	backdrop-filter: blur(4px);
	padding: 8px 12px;
	border-radius: 8px;
}

/* Reveal panel: absolutely positioned over the image region (its offset parent
   is .mfph-series-overlay__reveal). Closed = fully out of interaction
   (visibility:hidden removes the part links from the tab order, not just
   opacity); open = darkened overlay on the image. base.css guards the
   transition under prefers-reduced-motion. */
.mfph-series-overlay__panel {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 16, 0.82);
	color: #fff;
	padding: clamp(20px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 3;
}

.mfph-series-overlay__reveal[open] .mfph-series-overlay__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mfph-series-overlay__panel-title {
	font: 700 12px/1 var(--mf-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-lime);
	margin: 0 0 16px;
}

.mfph-series-overlay .mfph-series-parts {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mfph-series-overlay .mfph-series-parts__item {
	display: flex;
	gap: 12px;
	font-size: 16px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mfph-series-overlay .mfph-series-parts__num {
	font: 700 15px/1.3 var(--mf-mono);
	color: rgba(255, 255, 255, 0.6);
	flex: 0 0 auto;
}

.mfph-series-overlay__panel .mfph-series-part {
	color: #fff;
	text-decoration: none;
}

.mfph-series-overlay__panel .mfph-series-part:hover,
.mfph-series-overlay__panel .mfph-series-part:focus-visible {
	text-decoration: underline;
}

.mfph-series-overlay__panel .mfph-series-part--current {
	color: var(--mf-lime);
	font-weight: 700;
	scroll-margin: 16px;
}

/* "More parts" indicator (see series.js): fade + counter over the dark overlay
   panel list, fading to the panel's dark background. */
.mfph-series-overlay .mfph-series-scroll {
	position: relative;
}

.mfph-series-overlay .mfph-series-more {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	pointer-events: none;
	padding: 20px 0 2px;
	text-align: center;
	font: 700 11px/1 var(--mf-mono);
	letter-spacing: 0.06em;
	color: var(--mf-lime);
	background: linear-gradient(180deg, rgba(10, 8, 16, 0) 0%, rgba(10, 8, 16, 0.95) 72%);
}

.mfph-series-overlay .mfph-series-scroll.is-more .mfph-series-more {
	display: block;
}

/* Readable measure: the body keeps a centred max-width (full-page width reads
   terribly). Sits a touch narrower than the full-bleed hero image above it. */
.mfph-series-overlay__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 24px 40px;
}

.mfph-series-overlay__series {
	font: 700 12px/1 var(--mf-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-muted);
	margin: 0 0 12px;
}

.mfph-series-overlay__title {
	font-family: var(--mf-serif);
	font-weight: 900;
	font-size: clamp(26px, 3.8vw, 42px);
	line-height: 1.08;
	margin: 0 0 12px;
}

.mfph-series-overlay__progress {
	font: 700 13px/1.3 var(--mf-mono);
	color: var(--mf-violet);
	margin: 0 0 16px;
}

.mfph-series-overlay__lead {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.mfph-series-overlay__slot {
	color: var(--mf-violet);
}