/* ============================================================================
   Pentagon Response Series — additions on top of podcast.css.
   Loaded only on page-templates/template-pentagon.php, after podcast.css
   (whose .lv-podcast design system this page shares).
   ============================================================================ */

/* Coming-soon ghost cards: same footprint as a real episode card, visibly
   inert - dashed border, muted body, no hover lift, no pointer. */
.lv-pentagon .lv-episode-card.lvp-coming {
	border: 1px dashed rgba(21, 36, 63, 0.28);
	background: rgba(240, 244, 248, 0.55);
	box-shadow: none;
	cursor: default;
}
.lv-pentagon .lv-episode-card.lvp-coming:hover {
	transform: none;
	box-shadow: none;
}
.lv-pentagon .lvp-coming .lv-placeholder.lvp-coming-number {
	background: rgba(21, 36, 63, 0.06);
	display: flex;
	/* Top-aligned so the label and the centered play icon don't overlap. */
	align-items: flex-start;
	justify-content: center;
	padding-top: 26px;
}
.lv-pentagon .lvp-coming .lvp-coming-number span {
	color: rgba(21, 36, 63, 0.45);
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	font-size: 22px;
	font-weight: 700;
	position: static;
	transform: none;
	margin: 0;
	padding: 0;
	background: none;
}
.lv-pentagon .lvp-coming-chip {
	background: rgba(21, 36, 63, 0.55);
}
.lv-pentagon .lvp-coming .lv-episode-title {
	color: rgba(21, 36, 63, 0.55);
}
.lv-pentagon .lvp-coming-link {
	color: rgba(21, 36, 63, 0.4);
}

/* Hero fallback card when no parts are published yet - looks like the video
   card but is not clickable. */
.lv-pentagon .lvp-video-card-static {
	cursor: default;
}

/* Play affordance on non-playable cards (trailer placeholder, coming-soon
   parts): present so every card reads as video, muted so it doesn't promise
   a click. */
.lv-pentagon .lvp-video-card-static .lv-play,
.lv-pentagon .lvp-coming .lv-play {
	opacity: 0.45;
	filter: grayscale(1);
}

/* Hero credit line: one line on desktop (the shared 720px cap wraps it
   mid-phrase); wraps normally again below 992px where one line can't fit. */
@media (min-width: 992px) {
	.lv-pentagon .lv-hero-caption {
		max-width: none;
		white-space: nowrap;
	}
}

/* Hero title: one line without going small. The intro column is widened from
   the shared 920px to 1080px (this page only), which lifts the measured
   one-line ceiling (~12.6px of set width per font px for this title) to
   ~85px - the 82px cap keeps a safety margin. The 7vw slope tracks the
   padded container below the cap so it stays one line down to tablet;
   phones wrap normally, as intended. */
.lv-pentagon .lv-hero-intro {
	max-width: 1080px;
	width: min(1080px, 100%);
}
.lv-pentagon .lv-hero h1 {
	font-size: clamp(34px, 7vw, 82px);
}

/* Hero subtitle: smaller than the podcast scale and freed from its 820px cap
   so it sets as (at most) two balanced lines instead of three gappy ones. A
   true single line would need ~16px type for this sentence length - below
   readable hierarchy, so two lines is the design floor. */
.lv-pentagon .lv-civic {
	font-size: clamp(17px, 1.5vw, 26px);
	line-height: 1.35;
	max-width: none;
}

/* About band: series narrative (left) + filmmaker dossier (right) in one
   row. The aside reads like a magazine sidebar: small eyebrow, editorial
   portrait, name, role, compact bio. */
.lv-pentagon .lvp-dossier-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}
.lv-pentagon .lvp-dossier-fm .lv-eyebrow {
	display: block;
	font-size: 13px;
	margin-bottom: 18px;
}

/* Star separator inside eyebrows - mirrors curriculum.css's
   .cl-eyebrow-star (steel, small, non-tracked) for the lv- context. */
.lv-pentagon .lvp-eyebrow-star {
	color: var(--lv-steel, #5980a6);
	display: inline-block;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1;
	vertical-align: middle;
	/* vertical-align: middle still sits ~2px low against the 20px caps
	   (measured); lift to the optical center of the cap height. */
	position: relative;
	top: -0.15em;
}

/* The two columns read as near-equals: one shared heading size for "About
   the Series" and the filmmaker's name. */
.lv-pentagon .lvp-dossier-grid .lv-section-head h2,
.lv-pentagon .lvp-fm-name {
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	color: var(--lv-navy, #15243f);
	font-size: clamp(30px, 2.8vw, 42px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 10px;
}

/* Editorial portrait: floated inside the bio so the copy wraps around it,
   with the offset tan backdrop + thin navy keyline of a print inset. */
.lv-pentagon .lvp-fm-portrait {
	position: relative;
	float: right;
	width: min(46%, 230px);
	margin: 6px 0 18px 22px;
	shape-outside: margin-box;
}
.lv-pentagon .lvp-fm-portrait::before {
	content: "";
	position: absolute;
	inset: 10px -10px -10px 10px;
	background: rgba(152, 125, 84, 0.18);
	z-index: 0;
}
.lv-pentagon .lvp-fm-portrait img,
.lv-pentagon .lvp-fm-portrait .lv-placeholder {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid rgba(21, 36, 63, 0.25);
	background: #e6ecf2;
}
.lv-pentagon .lvp-fm-portrait .lv-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.lv-pentagon .lvp-fm-bio::after {
	content: "";
	display: block;
	clear: both;
}
.lv-pentagon .lvp-dossier-fm .lv-role {
	margin-bottom: 16px;
}
.lv-pentagon .lvp-fm-bio p {
	color: #2c3a45;
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 14px;
	text-wrap: pretty;
}
.lv-pentagon .lvp-fm-bio p:last-child {
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.lv-pentagon .lvp-dossier-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}

/* Phones: the eyebrow can't hold one line, and a natural wrap orphans the
   star at the end of line one. Break it deliberately instead - phrase, star
   centered on its own line as a divider, phrase. */
@media (max-width: 780px) {
	.lv-pentagon .lv-hero .lv-eyebrow .lvp-eyebrow-star {
		display: block;
		top: 0;
		margin: 7px auto 5px;
	}
}

/* Phones: the floated portrait would squeeze the bio to a few words per
   line - stack it above the copy instead. */
@media (max-width: 600px) {
	.lv-pentagon .lvp-fm-portrait {
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 4px auto 22px;
	}
}

/* "The Footage" head: two columns at desktop - heading left, intro right -
   mirroring the curriculum landing's section-head pattern, with a hairline
   divider between them broken by a small camera mark. Below 900px the head
   stacks and the same divider lies flat between heading and copy.
   One spacing value (--lvp-head-gap) drives both axes so the rhythm reads
   identically at every width. */
.lv-pentagon .lv-episodes .lv-section-head {
	--lvp-head-gap: 40px;
}

.lv-pentagon .lvp-head-divider {
	display: block;
	position: relative;
	width: 100%;
	max-width: 300px;
	height: 1px;
	margin: var(--lvp-head-gap) auto;
	background: rgba(21, 36, 63, 0.16);
}
.lv-pentagon .lvp-head-divider svg {
	position: absolute;
	top: 50%;
	left: 50%;
	/* +1px optically centers the mark on the rule: the body is the heavy
	   mass and the lens is light, so geometric centre reads slightly left. */
	transform: translate(calc(-50% + 1px), -50%);
	width: 22px;
	height: 22px;
	padding: 7px 12px;
	box-sizing: content-box;
	background: #fff;
	color: rgba(21, 36, 63, 0.42);
}

/* Stacked: the divider's own margins are the only spacing, so the gap above
   and below it is identical. */
@media (max-width: 899px) {
	.lv-pentagon .lv-episodes .lv-section-head,
	.lv-pentagon .lv-episodes .lv-section-head p {
		max-width: 880px;
	}
	.lv-pentagon .lv-episodes .lv-section-head h2 {
		margin-bottom: 0;
	}
	.lv-pentagon .lv-episodes .lv-section-head p {
		margin-top: 0;
	}
}

@media (min-width: 900px) {
	.lv-pentagon .lv-episodes .lv-section-head {
		display: grid;
		/* Column 1 is sized to the heading's TEXT (max-content), not a
		   fraction of the row - a fractional column is wider than the words,
		   which pushes the rule far from the heading while it stays tight to
		   the paragraph. Sizing to content puts the same gap either side.
		   ONE row: the title block, rule, and copy are each a single grid
		   item, so align-items centres them against each other. (With the
		   eyebrow and h2 as separate items the grid gained a second row and
		   centred the heading inside row 1 - i.e. against the top of the
		   copy, not its middle.) */
		grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
		gap: var(--lvp-head-gap);
		align-items: center;
		max-width: none;
		text-align: left;
	}
	.lv-pentagon .lvp-head-title {
		grid-column: 1;
		/* Caps how far a long editor-entered title can push the rule. */
		max-width: 560px;
	}
	.lv-pentagon .lv-episodes .lv-section-head h2 {
		margin: 0;
	}

	/* Column 2: the same rule stood on end, spanning the head's height. */
	.lv-pentagon .lvp-head-divider {
		grid-column: 2;
		align-self: stretch;
		width: 1px;
		max-width: none;
		height: auto;
		min-height: 104px;
		margin: 0;
	}
	.lv-pentagon .lvp-head-divider svg {
		padding: 12px 7px;
	}

	.lv-pentagon .lv-episodes .lv-section-head p {
		grid-column: 3;
		margin: 0;
		/* 690px is the measured width where this paragraph sets in three
		   lines instead of four; 760 leaves headroom without letting the
		   measure get long. */
		max-width: 760px;
	}
}

/* Widow/orphan control, same convention as curriculum.css's balanced section
   headings: balance multi-line headings, avoid single-word last lines in the
   longer prose. */
.lv-pentagon h1,
.lv-pentagon h2,
.lv-pentagon .lvp-fm-name,
.lv-pentagon .lv-civic {
	text-wrap: balance;
}
.lv-pentagon .lv-lede,
.lv-pentagon .lvp-prose p,
.lv-pentagon .lv-section-head p,
.lv-pentagon .lvp-fm-bio p {
	text-wrap: pretty;
}

/* About the Series: prose band on the ice background for rhythm between the
   white videos band and the host band. */
.lv-pentagon .lvp-about {
	background: var(--lv-ice, #eff4f8);
}
.lv-pentagon .lvp-prose {
	max-width: 780px;
}
.lv-pentagon .lvp-prose p {
	color: #2c3a45;
	font-size: 16px;
	line-height: 1.85;
	margin-bottom: 18px;
}
.lv-pentagon .lvp-prose p:last-child {
	margin-bottom: 0;
}

/* Playlist band: centered replacement for the podcast's Listen Everywhere. */
.lv-pentagon .lvp-playlist .lv-section-head {
	margin-bottom: 28px;
}
.lv-pentagon .lvp-playlist-action {
	text-align: left;
}

/* Coming Soon stub for the playlist button until the URL is set - same
   language as the curriculum pages' stub badges. */
.lv-pentagon .lvp-stub {
	border: 1px dashed rgba(21, 36, 63, 0.35);
	border-radius: 3px;
	color: rgba(21, 36, 63, 0.55);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 14px 22px;
	text-transform: uppercase;
	cursor: default;
}
.lv-pentagon .lvp-stub i {
	background: rgba(180, 84, 84, 0.12);
	border-radius: 2px;
	color: #b45454;
	font-family: "IBM Plex Mono", monospace;
	font-size: 9px;
	font-style: normal;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	text-transform: uppercase;
}