/* templates/archive-insights.html + the editorial Insights landing page — styling for the pieces
   shared across those surfaces (eyebrow chip badges, the card grid's taxonomy-chip/date meta row,
   and the media-banner video). Gated to category/tag archives plus the "insights"
   page (functions.php, is_category() || is_tag() || is_page('insights')) since it's surface-specific,
   same lazy-loading reasoning already used for homepage.css.

   The filter Select, pill row, and pagination pill are NOT here: Our Work carried or would have
   carried an identical copy of all three, so they live in filter-pagination.css, enqueued as this
   stylesheet's dependency (functions.php). */

/* Eyebrow chip badge — used by podcast-feature, event-promo-band, feature-band-dark, and the card
   Border color is the Figma frame's text-active-variable binding, which
   renders as blue-300 (#b5bec9) here (the documented M1 drift) — mapped by rendered hex, not the
   semantic token, matching the same call already made for the other bands' eyebrow badges. */
.bpd-eyebrow {
	display: inline-block;
	margin: 0;
	padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--300);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text-default);
	line-height: 1.3;
}

.bpd-eyebrow-invert {
	border-color: var(--wp--preset--color--blue-300);
	color: var(--wp--preset--color--neutral-100);
}

/* Query Loop's post-terms block (category chip) reuses the same eyebrow look, uppercase per Figma. */
.bpd-insight-card .wp-block-post-terms {
	display: inline-block;
	padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--300);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--body-xs);
	text-transform: uppercase;
}

.bpd-insight-card .wp-block-post-terms a {
	text-decoration: none;
}

/* Card heading links on the Insights landing page (2026-09-02, Russell). Same call already made for
   the homepage's three cards (homepage.css) — theme.json's elements.link underline is right for a
   link inline in body copy, wrong for a whole card heading whose image above it links to the same
   place. Keyed off the eyebrow the client's baked cards already carry, so it needs no markup change
   and survives the client editing the section in wp-admin. Hover/focus treatments are unchanged. */
.wp-block-group:has(> .bpd-eyebrow) h3 a {
	text-decoration: none;
}

/* The No Normal Show podcast video (bpd-two/media-banner, bpd-media-banner-video) reuses
   hero-video-controls, same as bpd-two/hero-fullbleed and growth-in-action-grid's card videos — and
   needs the same two fixes those already carry in homepage.css (not loaded here, this page isn't
   is_front_page()): stretch the Cover's shrink-wrapped inner-container to the full card height so
   the absolutely-positioned controls anchor bottom-right of the card instead of mid-card, and swap
   the controls' page-gutter right offset (sized for hero-fullbleed's full-bleed edge) for the same
   narrow-column offset growth-in-action-grid's cards use. */
.bpd-media-banner-video .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
}

.bpd-media-banner-video .bpd-hero-video-controls {
	right: var(--wp--preset--spacing--500);
}

/* Sits beside the desktop offset it corrects: the block's own (0,1,0) mobile rule loses to this
   selector's (0,2,0). */
@media (max-width: 781px) {
	.bpd-media-banner-video .bpd-hero-video-controls {
		right: var(--wp--preset--spacing--300);
	}
}

/* ---------------------------------------------------------------------------------------------
   Insights category landing pages (L2) — /insights/{category}/
   Figma section 4788:33025. Shared hero chrome + the per-category card variants.
   --------------------------------------------------------------------------------------------- */

/* Banner height. Figma draws the "News & Insights Banners" component as a fixed-height frame:
   L2 (5425:6355) 400px at 1440 / 300px at 375, L3 (6498:32988) 340 / 250. Inside it the breadcrumb
   is pinned to the top and the "Headline + tabs" block is bottom-anchored (justify-end), so the
   extra height opens up above the eyebrow rather than around it — hence flex-end plus the auto
   margin below, not a min-height alone. min-height rather than height so a long category name grows
   the band instead of spilling out of it. Fluid between the two anchors per the theme's clamp
   convention; the two clamps are tokens (theme.json custom.banner).

   Second selector: the six /insights/{category}/ landing Pages carry this same band as baked
   post_content (architecture rule 2's baked-markup debt), so they have no class to hook. It is the
   first block of their content and this stylesheet only loads on those pages, the insights
   archives, search, and single posts — none of which put a surface-subtle full-bleed band first
   inside .entry-content. */
.bpd-insights-banner,
.entry-content > .wp-block-group.alignfull.has-surface-subtle-background-color:first-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--wp--custom--banner--height-category);

	/* Core's constrained layout gives every child `margin-inline: auto !important`, and a flex item
	   with an auto cross-axis margin doesn't stretch — it would size to max-content and push the
	   page 19px wide at 375. width:100% restores the stretch; the max-width and auto margins core
	   already set then centre it exactly as they did in normal flow. */
	> * {
		width: 100%;
	}

	/* The crumb stays at the top of the band while the rest of the column sits at the bottom. */
	> .bpd-breadcrumb {
		margin-bottom: auto;
	}
}

.bpd-insights-banner--article {
	min-height: var(--wp--custom--banner--height-article);
}

/* Guide covers are portrait, so they never fill the card's 3/2 frame and the frame colour shows
   behind them — every other insight type ships a photo that fills it, which is why only guides
   carry one. Keyed on the post's own category so it reaches the ajax-appended cards too: those are
   built by bpd_render_insight_page_card() in inc/pattern-helpers.php, which emits no background
   class, so the second page of cards used to come in with a transparent frame (issue #251).

   #4C576E is not a palette token — it sits between blue-800 and blue-700. It is here rather than in
   the markup so the colour has one home; if it is ever wanted in the editor it needs a theme.json
   entry instead. */
.category-guides .bpd-photo-frame {
	background-color: #4c576e;
}

/* Breadcrumb sits left in a centred hero. Its links keep the global underline, so the trail reads as
   navigable rather than as one line of text — the slashes alone were not enough (issue #298). */
.bpd-breadcrumb {
	padding-bottom: var(--wp--preset--spacing--100);
	text-transform: capitalize;
}

.bpd-breadcrumb a {
	text-decoration: underline;
}

/* The player sits on a white card (Figma 4788:33050's "Banner" node — surface/level-1, 16px
   radius, 20px padding) so the Cohost embed reads as a proper player against the navy band.
   Cohost still ships its own controls/surface; this card just frames it. The white maps to the
   theme's surface-canvas (#fff), and padding/radius are space-500 / radius-xlg per the Figma card. */
.bpd-podcast-player {
	background-color: var(--wp--preset--color--surface-canvas);
	border-radius: var(--wp--custom--radius--xlg);
	padding: var(--wp--preset--spacing--500);
}

.bpd-podcast-player iframe {
	display: block;
	width: 100%;
}

/* Platform links sit on the navy band, so they take the band's own text colour rather than the
   global link colour, and drop the underline until hover. */
.bpd-podcast-platforms p a {
	color: inherit;
	text-decoration: none;
}

.bpd-podcast-platforms p a:hover {
	text-decoration: underline;
}

/* speaker-cards.php's headshots (bpd-two/speaker-cards, "Book a healthcare industry leader" on the
   Insights landing page): the <img> is a plain theme asset file, not a media-library attachment,
   so it carries no srcset/sizes and no CSS gives it a width — it renders at its own intrinsic
   ~298px regardless of its column's actual width. That happens to nearly match the 299px desktop
   grid column (patterns/speaker-cards.php's `minimumColumnWidth`), masking the gap there, but at
   narrower widths (single-column mobile, ~343px card) it leaves a visible margin instead of
   filling the card. `object-fit:cover` + `aspect-ratio:1` (both already inline on the element)
   only crop/shape a box that's already sized — they don't establish that size themselves, so
   `width: 100%` is what was actually missing. */
.bpd-speaker-photo img {
	width: 100%;
}