/**
 * MF Post-Header variant: series-bento (ported from demo MFV6).
 * Loaded only when a post's header variant is `series-bento`.
 *
 * Bento grid: crop-free hero image + light title card + a lead card under the
 * image + dark ring card + light parts card, all permanently visible (no
 * reveal). System fonts + base.css colour vars only — no Google Fonts, no
 * remote assets. The image stays crop-free (never object-fit:cover), so the
 * layout is balanced with a lead card under the image rather than by stretching
 * the image to fill the column.
 */

.mfph-series-bento {
	background: #eef0f3;
	padding: clamp(24px, 4vw, 44px) 24px;
	margin-bottom: 14px;
}

/* Two paired columns: left = image + lead card, right = title, ring, parts;
   the ad slot spans both. Named areas keep placement independent of DOM. */
.mfph-series-bento__grid {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: 16px;
	grid-template-areas:
		"image title"
		"lead  ring"
		"lead  parts"
		"slot  slot";
}

/* No excerpt → no lead card: the image spans the left column and the parts card
   runs full width beneath. */
.mfph-series-bento__grid--noexcerpt {
	grid-template-areas:
		"image title"
		"image ring"
		"parts parts"
		"slot  slot";
}

.mfph-series-bento__fig {
	grid-area: image;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
}

/* Crop-free: natural aspect (height:auto), never cover-cropped. overflow:hidden
   on the figure keeps the rounded corners clipping the image on all sides. */
.mfph-series-bento__fig img {
	display: block;
	width: 100%;
	height: auto;
}

.mfph-series-bento__titlecard {
	grid-area: title;
	background: var(--mf-paper);
	border-radius: 18px;
	padding: clamp(20px, 2.6vw, 30px);
}

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

.mfph-series-bento__title {
	font-family: var(--mf-serif);
	font-weight: 900;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.1;
	margin: 0;
}

.mfph-series-bento__leadcard {
	grid-area: lead;
	background: var(--mf-paper);
	border-radius: 18px;
	padding: clamp(18px, 2.2vw, 24px);
}

.mfph-series-bento__lead {
	font-size: 14.5px;
	line-height: 1.55;
	color: #39404c;
	margin: 0;
}

.mfph-series-bento__ringcard {
	grid-area: ring;
	background: var(--mf-ink);
	color: #fff;
	border-radius: 18px;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.mfph-series-bento__ring {
	width: 56px;
	height: 56px;
	position: relative;
	flex: 0 0 auto;
}

.mfph-series-bento__ringsvg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.mfph-series-bento__ringtrack {
	stroke: #2a2e39;
}

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

.mfph-series-bento__ringval-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 var(--mf-mono);
	color: var(--mf-lime);
}

.mfph-series-bento__progress {
	font: 700 13px/1.3 var(--mf-mono);
	color: #c7cdd8;
	margin: 0;
}

.mfph-series-bento__partscard {
	grid-area: parts;
	background: var(--mf-paper);
	border-radius: 18px;
	padding: 18px 20px;
}

/* Parts list. The <ol> scrolls inside a capped box so long series never break
   the card; short lists (≤ ~5) sit under the cap and look unchanged. A "more"
   fade + counter (see series.js) appears only when it overflows. */
.mfph-series-bento .mfph-series-parts {
	list-style: none;
	margin: 0;
	padding: 0;

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

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

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

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

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

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

/* The "+N more" overflow indicator is shared (see base.css); bento's paper card
   uses the light defaults, so no per-variant override is needed here. */

.mfph-series-bento__slot {
	grid-area: slot;
	background: var(--mf-paper);
	border-radius: 18px;
	overflow: hidden;
	padding: 18px 20px;
	margin-top: 0;
}

@media (max-width: 760px) {

	.mfph-series-bento__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"title"
			"lead"
			"ring"
			"parts"
			"slot";
	}

	.mfph-series-bento__grid--noexcerpt {
		grid-template-areas:
			"image"
			"title"
			"ring"
			"parts"
			"slot";
	}
}