/* =========================================================
   Single asset templates (default, story, video, template).

   Split out of single-asset.css (2026-10). Every rule here only
   ever matches markup on these pages, so it loads only there —
   see bv_style_bundles() in functions.php. Loads straight after
   single-asset.css (handle bv-pages), the position these rules
   held inside it, so the cascade is unchanged.
   ========================================================= */

/* Header */
.bv-slice__head {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.bv-slice__video :is(iframe, video, embed, object) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Keyword pills */
.bv-slice-keywords {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: var(--border-subtle);
}
.bv-slice-keywords .bv-badge {
	align-self: auto !important;
}

/* Related */
.bv-slice-related {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
.bv-slice-section-title,
.bv-slice-related h2 {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

/* =========================================================
   READING LAYOUT — .bv-slice--read
   Worn by the Video and Story singles alongside their own
   modifier. One centred column, two widths:

     measure  48rem    breadcrumbs, title, byline, standfirst, prose,
                       actions, keywords, details
     media    64rem    video, poster, hero — one step wider than
                       the text, so a picture leads without
                       dwarfing what follows it

   Related stays on the 1280px frame: it is a grid of cards, not
   part of the read.

   Every block in the column shares one left edge. That is the
   rule this section exists to keep: when the title sat flush left
   at 54rem while the prose was centred at 768px, the page read
   as two layouts stacked on each other (2026-10 review). Add a
   new block to these templates by adding it to the measure list
   below, not by giving it its own width.

   Everything below is scoped to .bv-slice--read. The artifact
   single (.bv-slice--default) must not move.
   ========================================================= */

.bv-slice--read {
	/* rem, NOT ch: ch resolves against each element's own font-size,
	   so one shared value gives a different width per element. */
	--bv-read-measure: 48rem;
	--bv-read-media: 64rem;
}

/* The two-column grid stops applying; the column does the work. */
.bv-slice--read .bv-slice__layout {
	display: block;
}

.bv-slice--read .bv-breadcrumbs,
.bv-slice--read .bv-slice__head,
.bv-slice--read .bv-slice__byline,
.bv-slice--read .bv-slice__desc,
.bv-slice--read .bv-slice__body,
.bv-slice--read .bv-slice__actions,
.bv-slice--read .bv-downloads,
.bv-slice--read .bv-slice-keywords,
.bv-slice--read .bv-meta-panel {
	width: min(var(--bv-read-measure), 100%);
	max-width: none; /* .bv-slice__desc carries 60ch for the rail layout */
	margin-inline: auto;
}

.bv-slice--read .bv-slice__video,
.bv-slice--read .bv-slice__poster,
.bv-slice--read .bv-slice__hero {
	width: min(var(--bv-read-media), 100%);
	margin: clamp(1.75rem, 4vw, 2.75rem) auto;
}

/* ---- Head and byline ---------------------------------------------- */

.bv-slice--read .bv-slice__head {
	margin-bottom: 0;
}

.bv-slice--read .bv-slice__title {
	text-wrap: balance;
}

/* Brand, and one thing more. The rule under it is the article tell. */
.bv-slice--read .bv-slice__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 0;
	padding-bottom: 1rem;
	border-bottom: var(--border-subtle);
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}

.bv-slice--read .bv-slice__byline-brand {
	color: var(--color-text-muted);
	text-decoration: none;
}

.bv-slice--read .bv-slice__byline-brand:hover {
	color: var(--color-accent);
}

.bv-slice--read .bv-slice__byline-sep {
	color: var(--color-border-strong);
}

/* ---- Media ---------------------------------------------------------- */

/* The story hero gets the poster's treatment — same radius, same two-layer
   shadow — so the two pages open on the same object. Capped in height:
   a portrait photo at media width would otherwise push the story itself
   below the fold. */
.bv-slice--read .bv-slice__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(70vh, 640px);
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 3px rgba(9, 9, 11, 0.08),
		0 8px 24px rgba(9, 9, 11, 0.06);
}

/* ---- Type ----------------------------------------------------------- */

/* The standfirst must sit a full step above the body, or it and the
   first paragraph read as one block: lg serif in the muted colour
   (the rail's own .bv-slice__desc styling) against md body text.
   Three classes deep on purpose: the standfirst also wears .bv-prose,
   and .bv-slice--read .bv-prose below would otherwise win on order. */
.bv-slice--read .bv-slice__desc.bv-prose {
	margin-top: 0;
	font-size: var(--font-size-lg);
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* With no story body, the excerpt IS the text (asset-story.php drops
   --lead), so it reads at body size in the body colour. */
.bv-slice--read .bv-slice__desc.bv-prose:not(.bv-prose--lead) {
	font-size: var(--font-size-md);
	color: var(--color-text);
}

.bv-slice--read .bv-prose {
	font-size: var(--font-size-md);
	line-height: 1.7;
}

.bv-slice--read .bv-slice__body {
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.bv-slice--read .bv-prose :is(h2, h3, h4, h5, h6) {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text);
	margin: 1.8em 0 0.5em;
}

.bv-slice--read .bv-prose :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* One rung above the body per level: body md, h3-h6 lg, h2 xl,
   page title 3xl above all of it. */
.bv-slice--read .bv-prose h2 {
	font-size: var(--font-size-xl);
	margin-top: 2em;
}

.bv-slice--read .bv-prose :is(h3, h4, h5, h6) {
	font-size: var(--font-size-lg);
}

.bv-slice--read .bv-prose blockquote {
	margin: 1.75em 0;
	padding-left: 1.25em;
	border-left: 2px solid var(--color-accent);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	line-height: 1.45;
	color: var(--color-text);
}

.bv-slice--read .bv-prose blockquote p {
	margin: 0;
}

.bv-slice--read .bv-prose a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bv-slice--read .bv-prose a:hover {
	color: var(--color-accent);
}

/* Inline images stay inside the measure: breaking them out to media
   width would make the story's left edge jump mid-read. */
.bv-slice--read .bv-prose :is(img, figure) {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2em 0;
	border-radius: var(--radius-lg);
}

.bv-slice--read .bv-prose figcaption {
	margin-top: 0.6em;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	text-align: center;
}

/* ---- Actions, keywords, details -------------------------------------- */

.bv-slice--read .bv-slice__actions {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* Details, rotated. In the rail these are label-left rows in 320px; in
   the column the label goes above the value and the rows become a field
   grid that reflows from three columns to one without a breakpoint. */
.bv-slice--read .bv-meta-panel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 1.25rem 2rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	background: none;
	border: 0;
	border-top: var(--border-subtle);
	border-radius: 0;
}

.bv-slice--read .bv-meta-panel__title {
	grid-column: 1 / -1;
	margin-bottom: 0;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-soft);
}

.bv-slice--read .bv-meta-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.4rem;
	padding-block: 0;
	border-top: 0;
	border-bottom: 0;
}

.bv-slice--read .bv-meta-row__label {
	margin-right: 0;
}

.bv-slice--read .bv-meta-row__value {
	max-width: 100%;
	margin-left: 0; /* the rail pushes values to the right edge */
	justify-content: flex-start;
	text-align: left;
}