/**
 * MF Post-Header variant: series-diagonal (ported from demo MFQ7
 * "Diagonal-Split"). Loaded only when a post's header variant is
 * `series-diagonal`.
 *
 * A diagonal clip-path cuts the SQUARE featured image (cropped to fill via the
 * higher-specificity override — a conscious exception to the crop-free rule for
 * this square-format round) out of the left edge of a floating white card; a
 * pure-CSS conic-gradient progress ring sits at the cut, and the text block
 * (series eyebrow, title, parts list, lead, ad slot) sits to the right. System
 * fonts + base.css colour vars only; no Google Fonts, no inline SVG, no remote
 * assets.
 */

.mfph-series-diagonal {

	/* Magenta accent for the shared "+N more" pill (base.css). */
	--mfph-more-fg: var(--mf-magenta);

	position: relative;
	max-width: 1080px;
	margin: 20px auto;
	min-height: 340px;
	overflow: hidden;
	background: var(--mf-paper);
	border: 1px solid var(--mf-line);
	border-radius: 16px;
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.35);
}

/* The image fills the left edge and is clipped to a NARROW diagonal wedge (≤40%
   at the top) so the text column to its right stays entirely on the white card —
   no text ever overlaps the image, so legibility never depends on the photo. */
.mfph-series-diagonal__fig {
	position: absolute;
	inset: 0;
	margin: 0;
	clip-path: polygon(0 0, 40% 0, 24% 100%, 0 100%);
}

/* Deliberate square crop: three classes (0,3,0) override base.css
   `.mfph-header .mf-uncropped { height:auto }` (0,2,0) for THIS variant only, so
   the featured image fills the clipped wedge via object-fit:cover. */
.mfph-header .mfph-series-diagonal__fig .mf-uncropped {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Progress ring: a pure-CSS conic-gradient donut. The magenta arc sweeps
   `--p`% of the circle; a semi-dark inner disc (::before) punches the hole and
   keeps the centred "X/Y" label readable over any image behind it. */
.mfph-series-diagonal__ring {
	position: absolute;
	top: 24px;
	left: 34%;
	z-index: 3;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--mf-magenta) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.3) 0);
}

.mfph-series-diagonal__ring::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: rgba(14, 17, 22, 0.55);
	backdrop-filter: blur(2px);
}

.mfph-series-diagonal__ringval {
	position: relative;
	z-index: 1;
	font: 700 11px/1 var(--mf-mono);
	color: #fff;
}

.mfph-series-diagonal__text {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 4vw, 48px);
	margin-left: 44%;
	max-width: 600px;
}

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

.mfph-series-diagonal__title {
	font-family: var(--mf-serif);
	font-weight: 900;
	font-size: clamp(24px, 3.2vw, 36px);
	line-height: 1.1;
	margin: 0 0 18px;
}

/* Parts list (markup from series_parts_html()): capped to ~4 parts and scrollable;
   the shared "+N more" pill + fade (base.css) appear when it overflows. The bottom
   margin lives on the wrapper (the inner <ol> resets it) so the gap before the lead
   is kept whether or not the list overflows. */
.mfph-series-diagonal .mfph-series-parts {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;

	/* ~4 parts visible before the fade + "+N more" (rows are ~28px). */
	max-height: 120px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mfph-series-diagonal .mfph-series-scroll {
	margin: 0 0 16px;
}

.mfph-series-diagonal .mfph-series-scroll .mfph-series-parts {
	margin: 0;
}

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

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

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

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

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

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

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

/* No featured image: no wedge to anchor the ring to, so drop it and let the
   text block use the full card width. */
.mfph-series-diagonal--noimage {
	min-height: 0;
}

.mfph-series-diagonal--noimage .mfph-series-diagonal__ring {
	display: none;
}

.mfph-series-diagonal--noimage .mfph-series-diagonal__text {
	margin-left: 0;
	max-width: none;
}

@media (max-width: 760px) {

	/* Stack: the image becomes a plain banner strip, the ring is dropped and the
	   text spans the full width. */
	.mfph-series-diagonal__fig {
		position: static;
		height: 220px;
		clip-path: none;
	}

	.mfph-series-diagonal__ring {
		display: none;
	}

	.mfph-series-diagonal__text {
		margin-left: 0;
		max-width: none;
	}
}