/* =========================================================
   Section tone and width.

   Loaded on the front end AND inside the block editor via
   add_editor_style(), which is why it holds no page-frame
   rules — no .bv-dash grid, no .bv-hero, no sticky rail.
   Anything added here has to be safe in both places.

   Design: docs/superpowers/specs/
           2026-08-03-section-tone-width-and-vocabulary-design.md
   ========================================================= */

/* Tokens. Section renderers consume these rather than palette
   slugs directly, which is what lets one tone flip restyle
   every child without a rule per child. */
.bv-block-section {
	--bv-sec-bg: transparent;
	--bv-sec-text: var(--wp--preset--color--text);
	--bv-sec-muted: var(--wp--preset--color--text-soft);
	--bv-sec-rule: var(--wp--preset--color--rule);
	--bv-sec-accent: var(--wp--preset--color--accent);

	background: var(--bv-sec-bg);
	color: var(--bv-sec-text);
}

.bv-sec--tone-tinted {
	--bv-sec-bg: var(--wp--preset--color--bg-alt);
}

/* THE load-bearing rule of this feature: dark is a set of token
   flips, not a pile of ".bv-sec--tone-dark .bv-card" overrides.
   Children inherit. Add a per-child dark rule here and every
   section type built afterwards needs one too — which is the
   mechanism that made .bv-prose do two jobs. */
.bv-sec--tone-dark {
	--bv-sec-bg: var(--wp--preset--color--vault);
	--bv-sec-text: var(--wp--preset--color--surface);
	--bv-sec-muted: var(--wp--preset--color--border-strong);
	--bv-sec-rule: rgb(255 255 255 / 0.14);
	/* Copper fails contrast on vault (3.75:1). */
	--bv-sec-accent: var(--wp--preset--color--accent-on-dark);
}

.bv-sec--tone-dark a:not(.bv-btn__link),
.bv-sec--tone-tinted a:not(.bv-btn__link) {
	color: var(--bv-sec-accent);
}

/* Toned sections need breathing room; an untoned one keeps the
   spacing rhythm .bv-block-section + .bv-block-section sets. */
.bv-sec--tone-tinted,
.bv-sec--tone-dark {
	padding-block: clamp(2rem, 4vw, 3.25rem);
}

/* ----- Width -----
   The content column already sits flush with the page frame's
   LEFT edge, so bleeding left means escaping .bv-hub__inner's
   centring margin out to the viewport edge. This is NOT the
   .alignfull mechanism, which escapes RIGHTWARD over the rail.

   The negative margin and the padding are the same value, so
   they cancel: text stays exactly on the column grid even
   though 100vw overcounts by the scrollbar width. Only the
   background overshoots, and .bv-hub's overflow-x: clip
   absorbs that. */
.bv-sec--bleed {
	margin-left: calc(-1 * var(--bv-frame-pad, 0px));
	padding-left: var(--bv-frame-pad, 0px);
	/* No padding-right. The section already stops short of the rail, so text
	   must end exactly where it ends in the sections above and below —
	   inset here and a bleeding section's paragraphs are 852px against
	   their neighbours' 878px, which reads as a wobble down the page. */
}

/* Media fills the widened box; text keeps the column inset.
   This IS what bleed means: a band whose picture runs off the edge of the
   screen and whose sentences stay where the eye expects them. The section
   pads its children back onto the grid, so anything meant to be edge-to-edge
   has to cancel that padding — it cannot simply be "wider".

   A '>' combinator on purpose: only a section's own top-level media escapes,
   never an image nested inside prose or a column. New section types that
   introduce a top-level media container belong in this list. */
.bv-sec--bleed > .bv-band,
.bv-sec--bleed > .bv-gallery {
	margin-left: calc(-1 * var(--bv-frame-pad, 0px));
}

/* The feature band has no styling of its own anywhere in the theme — its
   markup ships from the plugin's render.php and no stylesheet ever claimed
   it, so its <img> inherits only a global max-width: 100%.

   max-width CAPS but never FILLS. On a narrow window the column is smaller
   than the image file, the cap bites, and the band looks full width; widen
   the window past the file's own pixel size and the image just stops,
   leaving a gap to the edge of its own band. That is a bug you can only see
   at some viewport widths, which is exactly how it survived a round of
   verification at 1280px.

   The anchor and the image are both inline by default, so they need block
   display before a width means anything. Upscaling a small file will soften
   it — acceptable, because choosing a feature band is choosing a picture
   that spans the page, and a ragged right edge is the worse failure. */
.bv-band__media,
.bv-band__media a {
	display: block;
}

.bv-band__media img {
	display: block;
	width: 100%;
	height: auto;
	/* Full width, but bounded in height. Without this a portrait file spanning
	   the page is taller than the window and the band becomes a wall — the
	   reader scrolls through one picture wondering where the page went.
	   object-fit crops rather than squashes once the cap bites.
	   Override --bv-band-max-h to taste; it is the only knob here. */
	max-height: var(--bv-band-max-h, clamp(320px, 60vh, 640px));
	object-fit: cover;
}

/* Below 1000px .bv-dash collapses to one column and the rail becomes a
   horizontal chip bar, so the band becomes symmetric. Must stay in step with
   that breakpoint in single-asset.css — bleed switching to symmetric at a
   different width than the grid collapses is a visible seam. */
@media (max-width: 1000px) {
	.bv-sec--bleed {
		margin-right: calc(-1 * var(--bv-frame-pad, 0px));
		padding-right: var(--bv-frame-pad, 0px);
	}
	.bv-sec--bleed > .bv-band,
	.bv-sec--bleed > .bv-gallery {
		margin-right: calc(-1 * var(--bv-frame-pad, 0px));
	}
}

/* =========================================================
   Stage 2/3 section content — lockups, typefaces, contacts.

   These live here rather than in single-asset.css because
   the editor loads this file, so a slot preview looks like
   the section it previews. Everything consumes --bv-sec-*
   so a dark or tinted band restyles them for free.
   ========================================================= */

.bv-lockups,
.bv-typefaces,
.bv-contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.bv-lockups {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.bv-lockup {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}

/* The stage is the point of a lockup tile: a logo approved for a dark
   background has to be SHOWN on one, or the tile is not evidence of
   anything. Fixed aspect so a row of them lines up regardless of the
   proportions of each file. */
.bv-lockup__stage {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	padding: clamp(1rem, 3vw, 2rem);
	border: 1px solid var(--bv-sec-rule);
	border-radius: 6px;
}

.bv-lockup__stage--light {
	background: var(--wp--preset--color--surface);
}

.bv-lockup__stage--dark {
	background: var(--wp--preset--color--vault);
	border-color: transparent;
}

.bv-lockup__stage img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bv-lockup__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.bv-lockup__name {
	font-weight: 600;
	color: var(--bv-sec-text);
}

.bv-lockup__dl,
.bv-typeface__dl {
	font-size: 0.85rem;
	color: var(--bv-sec-accent);
	white-space: nowrap;
}

/* ----- Typefaces ----- */
.bv-typefaces {
	grid-template-columns: 1fr;
}

.bv-typeface {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--bv-sec-rule);
}

.bv-typeface:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* aria-hidden in the markup: the sample is a picture of the typeface, and
   a screen reader announcing "Aa" adds nothing the name beside it does not
   already say. */
.bv-typeface__sample {
	margin: 0;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--bv-sec-text);
}

.bv-typeface__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.25rem;
}

.bv-typeface__name {
	font-weight: 600;
	color: var(--bv-sec-text);
}

.bv-typeface__weights,
.bv-typeface__usage,
.bv-contact__role {
	font-size: 0.9rem;
	color: var(--bv-sec-muted);
}

/* ----- Contacts ----- */
.bv-contacts {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bv-contact {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--bv-sec-rule);
	border-radius: 6px;
	min-width: 0;
}

.bv-contact__photo {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.bv-contact__meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.bv-contact__name {
	font-weight: 600;
	color: var(--bv-sec-text);
}

.bv-contact__email {
	font-size: 0.9rem;
	color: var(--bv-sec-accent);
	overflow-wrap: anywhere;
}

/* =========================================================
   Stage 3/4 blocks — download strip, split, related links.
   ========================================================= */

.bv-dlstrip,
.bv-linkcards {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ----- Download strip -----
   A row, not a tile. The name carries the meaning and the format and size
   are the decision; a thumbnail of a PDF is a picture of a rectangle. */
.bv-dlrow {
	display: flex;
	align-items: baseline;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--bv-sec-rule);
}

.bv-dlrow:first-child {
	border-top: 1px solid var(--bv-sec-rule);
}

.bv-dlrow__name {
	flex: 1 1 16rem;
	min-width: 0;
	font-weight: 600;
	color: var(--bv-sec-text);
}

.bv-dlrow__meta {
	display: flex;
	gap: 0.75rem;
	flex: none;
	font-size: 0.85rem;
	color: var(--bv-sec-muted);
}

.bv-dlrow__fmt {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

.bv-dlrow__action {
	flex: none;
	color: var(--bv-sec-accent);
	font-size: 0.9rem;
	/* 44px touch target without changing the row's visual rhythm. */
	padding-block: 0.6rem;
}

/* ----- Split -----
   One ratio, on purpose. Core's Media & Text offers a slider; the whole
   point of this block is that every split on the site is the same split. */
.bv-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
}

.bv-split--media-right .bv-split__media {
	order: 2;
}

.bv-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.bv-split__copy {
	min-width: 0;
}

.bv-split__heading {
	margin: 0 0 0.6rem;
	color: var(--bv-sec-text);
}

.bv-split__body p {
	margin: 0 0 0.75rem;
	color: var(--bv-sec-text);
}

.bv-split__body p:last-child {
	margin-bottom: 0;
}

.bv-split__action {
	margin: 1rem 0 0;
}

.bv-split__action a {
	color: var(--bv-sec-accent);
	font-weight: 600;
}

@media (max-width: 680px) {
	.bv-split {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Picture first regardless of side, so the reading order matches the
	   visual order once they stack. */
	.bv-split--media-right .bv-split__media {
		order: 0;
	}
}

/* ----- Related links ----- */
.bv-linkcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.bv-linkcard {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem;
	border: 1px solid var(--bv-sec-rule);
	border-radius: 6px;
	min-width: 0;
}

.bv-linkcard__link {
	font-weight: 600;
	color: var(--bv-sec-accent);
	overflow-wrap: anywhere;
}

.bv-linkcard__desc {
	font-size: 0.9rem;
	color: var(--bv-sec-muted);
}

/* ----- Hub cards -----
   The doorway grid — the categorical hub the brand-book references lean on.
   Image-forward where related-links is a text list. Tone-aware through the
   --bv-sec-* tokens, so dark and tinted flip with no per-card override, the
   same discipline the tone system depends on. */
.bv-hubcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(0.85rem, 2vw, 1.5rem);
	/* Base is responsive on its own; the --N modifier fixes a column count on
	   wide screens and the media queries below reflow it down. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.bv-hubcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bv-hubcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bv-hubcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bv-hubcard {
	min-width: 0;
}

.bv-hubcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--bv-sec-rule);
	border-radius: 10px;
	overflow: clip;
	color: var(--bv-sec-text);
	text-decoration: none;
	transition: border-color var(--transition-fast, 0.15s ease),
		transform var(--transition-fast, 0.15s ease);
}

.bv-hubcard__link:hover,
.bv-hubcard__link:focus-visible {
	border-color: var(--bv-sec-accent);
	transform: translateY(-2px);
}

.bv-hubcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--bv-sec-rule);
	overflow: clip;
}

.bv-hubcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bv-hubcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: clamp(0.85rem, 2vw, 1.15rem);
	flex: 1 1 auto;
}

.bv-hubcard__title {
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--bv-sec-text);
}

.bv-hubcard__desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--bv-sec-muted);
}

/* Pushed to the card foot so cards of uneven copy still align their cue. */
.bv-hubcard__cue {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--bv-sec-accent);
	font-weight: 600;
}

@media (max-width: 680px) {
	.bv-hubcards--3,
	.bv-hubcards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.bv-hubcards--2,
	.bv-hubcards--3,
	.bv-hubcards--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ----- Section hero -----
   A chapter opener. The heading is an <h2> like every other section title, so
   it inherits the serif heading style; this only sizes it up into a display
   statement. Left-aligned to keep the page's dashboard rhythm — tone: dark
   turns the whole thing into a band, which is the references' favourite move. */
.bv-sectionhero {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.bv-sectionhero__copy {
	max-width: 46rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bv-sectionhero__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: var(--track-label, 0.08em);
	text-transform: uppercase;
	color: var(--bv-sec-accent);
}

.bv-sectionhero__heading {
	margin: 0;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.05;
	color: var(--bv-sec-text);
}

.bv-sectionhero__lead {
	margin: 0;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	color: var(--bv-sec-muted);
}

.bv-sectionhero__action {
	margin: 0.4rem 0 0;
}

.bv-sectionhero__media {
    margin: 0;
    height: 400px;
    overflow: hidden;
    	border-radius: 10px;

}

.bv-sectionhero__media img {
    width: 100%;
    height: auto;
    	display: block;
}


/* ----- Gallery: strip layout -----
   A single horizontal row that scrolls — a filmstrip. The default grid is
   styled by single-asset.css on the front end (the imagery slot shares it);
   this variant is self-contained so it also holds up in the editor preview,
   where only sections.css is loaded. It overrides the grid's display, and both
   selectors are single-class, so this must stay loaded after single-asset.css
   (it is — see functions.php's dependency chain). */
.bv-gallery--strip {
	display: flex;
	gap: clamp(0.75rem, 1.5vw, 1.15rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

.bv-gallery--strip .bv-gallery__item {
	flex: 0 0 min(78%, 22rem);
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
	overflow: clip;
	border-radius: var(--radius-md, 10px);
	background: var(--bv-sec-rule);
}

.bv-gallery--strip .bv-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}