/* templates/single.html — layout-only CSS for the long-form article (Insights L3) template.
   Figma "Desktop L3 Long" 5470:17715 and "375 L3 Long" 5470:17671. Loaded alongside
   archive-insights.css (which supplies .bpd-breadcrumb and .bpd-pill-row) for every single post that
   is not a Case Study — see the enqueue gate in functions.php.

   Everything here is a layout proportion or an asset-shape rule that block attributes cannot carry:
   the two hero aspect ratios, the share-icon circle, and the mobile horizontal floor for loose
   post_content children. Colours, spacing and type all come from tokens. */

/* Featured-image hero: two aspect ratios, one block. Figma 5470:17718 (1440x500) and 5470:17674
   (375x243). The block deliberately carries no aspectRatio attribute — that emits an inline style
   CSS cannot override without !important (rule 6). */
.bpd-article-hero-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 375 / 243;
	object-fit: cover;
}

@media (min-width: 782px) {
	.bpd-article-hero-media img {
		aspect-ratio: 1440 / 500;
	}
}

/* The banner's category heading is core/post-terms, not a heading block, so it inherits the body
   line-height where the equivalent L2 h1 gets the heading one — 11.5px taller at display-lg, which
   is what held the L3 banner above its 340px Figma height (6498:32988). */
.bpd-article-category {
	line-height: var(--wp--custom--line-height--heading-lg);
}

/* Date eyebrow reads "JANUARY 22, 2025" in both frames; core/post-date has no case control, and the
   format string cannot produce an uppercase month name. */
.bpd-article-date {
	text-transform: uppercase;
}

/* Share row: fixed 32px circles with a 16px gap, matching Figma 5575:71120. Keep the
   figures from participating in the core image block's intrinsic-width rules so the icons
   cannot stretch or collapse when the post content is rendered. */
.bpd-share-row {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--400);
}

.bpd-share-row .wp-block-image {
	flex: 0 0 var(--wp--preset--spacing--800);
	inline-size: var(--wp--preset--spacing--800);
	block-size: var(--wp--preset--spacing--800);
	margin: 0;
}

.bpd-share-row .wp-block-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--surface-canvas);
}

/* Size each glyph by height and preserve its native aspect ratio. Explicit width/height
   declarations override core's image defaults without distorting the Facebook mark. */
.bpd-share-row .wp-block-image img {
	display: block;
	inline-size: auto;
	block-size: var(--wp--preset--spacing--400);
	max-inline-size: none;
	max-block-size: none;
	object-fit: contain;
}

/* These exported SVGs use percentage width/height attributes and preserveAspectRatio="none";
   give each mark its Figma box explicitly so the source metadata cannot stretch it. */
.bpd-share-row .wp-block-image img[src$="facebook-navy.svg"] {
	inline-size: 9px;
	block-size: 16px;
}

.bpd-share-row .wp-block-image img[src$="linkedin-navy.svg"] {
	inline-size: 16px;
	block-size: 16px;
}

/* The top share row is desktop-only — the 375 frame 5470:17671 shows the pair in the purple
   conclusion band only. */
@media (max-width: 781px) {
	.bpd-article-header .bpd-share-row {
		display: none;
	}
}

/* Horizontal floor for bare post_content children on mobile, mirroring the floor
   section-spacing.css gives alignfull sections. Banded sections set their own gutter padding and are
   alignfull, so this only ever catches loose imported paragraphs sitting at the 748px measure. */
@media (max-width: 781px) {
	.wp-block-post-content > :not(.alignfull) {
		padding-inline: var(--wp--preset--spacing--400);
	}

	/* Not when the body renders inside a banner column (guides, podcast episodes): the band already
	   pads to the gutter, so the floor would inset the copy past the title and meta beside it. */
	.wp-block-column .wp-block-post-content > :not(.alignfull) {
		padding-inline: 0;
	}
}

/* Vertical floor, same idea. Neither template gives post-content padding of its own — the article
   one zeroes it deliberately, so a body opening with its own surface-subtle band continues the
   header's gray field unbroken — but imported bodies are bare paragraphs, which then start and end
   flush against the bands above and below (issues #261, #262). The margin sits on the child, not
   the parent, so it never has to fight the article template's inline padding, and a body built from
   its own full-width bands pads itself and opts out. Events are the same shape, same fix. */
.bpd-article-header + .wp-block-post-content > :first-child:not( .wp-block-group ),
.bpd-event-header + .wp-block-post-content > :first-child:not( .wp-block-group ) {
	margin-block-start: var( --wp--preset--spacing--2500 );
}

.bpd-article-header + .wp-block-post-content > :last-child:not( .wp-block-group ),
.bpd-event-header + .wp-block-post-content > :last-child:not( .wp-block-group ) {
	margin-block-end: var( --wp--preset--spacing--2500 );
}

/* Bare imported <img> tags (Elementor-conversion leftovers that never became a wp:image block —
   e.g. an event's "Add to Calendar" paragraph pairing a speaker photo with a link) carry their
   original pixel width/height as HTML attributes and sit outside .wp-block-image, so core's own
   `.wp-block-image img { max-width: 100% }` reset never reaches them — confirmed as real mobile
   overflow (Phase 6 sweep, 2026-08-19: post 1048 at 1040px scrollWidth on a 375px viewport).
   Scoped to .wp-block-post-content so it only ever catches loose content images, never a
   deliberately unconstrained image elsewhere in the theme. */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}