/**
 * MF Post-Header variant: series-poster (ported from demo MFV9, Netflix-Stil).
 * Loaded only when a post's header variant is `series-poster`.
 *
 * Title sits on the darkened hero image with an embedded progress bar; the
 * parts list reveals below via native details.mfr-reveal. System fonts +
 * base.css colour vars only — no Google Fonts, no remote assets.
 */

.mfph-series-poster {
	color: var(--mf-ink);
	background: var(--mf-paper);
	margin-bottom: 14px;
}

.mfph-series-poster__poster {
	position: relative;
}

.mfph-series-poster__fig {
	margin: 0;
	position: relative;
	overflow: hidden;
}

/* Crop-free: the image keeps its natural aspect (height:auto), so the poster
   block is exactly as tall as the image and the overlay pins to the real image
   bottom — no dark filler band below it. */
.mfph-series-poster__fig img {
	display: block;
	width: 100%;
	height: auto;
}

.mfph-series-poster__fig::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 17, 22, 0.1) 0%, rgba(14, 17, 22, 0.9) 100%);
}

.mfph-series-poster__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(20px, 4vw, 44px);
	z-index: 2;
}

/* No featured image: the poster block is a flat dark panel and the overlay
   flows in normally instead of being pinned to the bottom of an image. */
.mfph-series-poster__poster--noimage {
	background: var(--mf-ink);
}

.mfph-series-poster__poster--noimage .mfph-series-poster__overlay {
	position: static;
	padding: clamp(24px, 4vw, 44px) 24px 4px;
}

.mfph-series-poster__series {
	font: 700 11px/1 var(--mf-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-lime);
	margin: 0 0 10px;
}

.mfph-series-poster__title {
	font-family: var(--mf-serif);
	font-weight: 900;
	font-size: clamp(24px, 3.6vw, 42px);
	line-height: 1.05;
	margin: 0 0 14px;
	color: #fff;
}

.mfph-series-poster__track {
	height: 5px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 4px;
}

.mfph-series-poster__track-fill {
	display: block;
	height: 100%;
	background: var(--mf-magenta);
	border-radius: 4px;
	transition: width 0.4s ease;
}

.mfph-series-poster__tracklabel {
	font: 700 11.5px/1.3 var(--mf-mono);
	color: #cfd6e2;
	margin: 0;
}

.mfph-series-poster__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 24px 40px;
	color: var(--mf-ink);
	background: var(--mf-paper);
}

/* Reveal container (native <details>; JS adds hover-open — see series.js). */
.mfph-series-poster__reveal {
	border: none;
	padding: 0;
	margin: 0;
}

.mfph-series-poster__hint {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--mf-magenta);
	margin-bottom: 6px;
}

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

.mfph-series-poster__hint:focus-visible {
	outline: 2px solid var(--mf-magenta);
	outline-offset: 4px;
	border-radius: 8px;
}

.mfph-series-poster .mfr-panel-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s ease;
}

.mfph-series-poster__reveal[open] .mfr-panel-wrap {
	grid-template-rows: 1fr;
}

.mfph-series-poster .mfr-panel-inner {
	overflow: hidden;
}

.mfph-series-poster .mfph-series-parts {
	list-style: none;
	margin: 0;
	padding: 6px 0 0;
	max-height: 260px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mfph-series-poster .mfph-series-parts__item {
	display: flex;
	gap: 8px;
	font-size: 13.5px;
	padding: 5px 0;
	color: var(--mf-muted);
}

.mfph-series-poster .mfph-series-parts__num {
	font: 700 12.5px/1.4 var(--mf-mono);
	color: var(--mf-magenta);
	flex: 0 0 auto;
}

.mfph-series-poster .mfph-series-part {
	color: inherit;
	text-decoration: none;
}

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

.mfph-series-poster .mfph-series-part--current {
	color: var(--mf-ink);
	font-weight: 700;
	scroll-margin: 12px;
}

/* The "+N more" indicator is shared (see base.css); poster's paper body uses the
   light pill, themed to the poster magenta accent. */
.mfph-series-poster {
	--mfph-more-fg: var(--mf-magenta);
}

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

.mfph-series-poster__slot {
	color: var(--mf-magenta);
}