/*
 * Homepage-only layout CSS (bpd-two/hero-fullbleed, bpd-two/insights-cards-static). Gated to
 * is_front_page() in functions.php. All values reference theme.json tokens, no hardcoded design
 * values.
 */
.bpd-hero-fullbleed__arrow {
	display: block;
	width: var(--wp--preset--spacing--800);
	height: auto;
	margin-inline: auto;
	transform: rotate(90deg);
}

/* Core's .wp-block-cover centers .wp-block-cover__inner-container (shrink-wrapped to its content
   height) via flex, and that inner-container is position:relative (needed for it to stack above
   the absolutely-positioned background image/overlay). bpd-two/hero-video-controls is
   position:absolute + bottom/right, so without this it anchors to the small centered inner-container
   instead of the full-height cover, landing mid-hero instead of pinned to the true bottom-right.
   Stretching the inner-container to the cover's full height (and re-centering its own content
   ourselves) fixes the anchor without touching core's stacking-order fix. Same fix applies to
   bpd-two/growth-in-action-grid's two video cards (bpd-growth-card-video), which reuse this same
   hero-video-controls block. */
.bpd-hero-fullbleed .wp-block-cover__inner-container,
.bpd-growth-card-video .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
}

/* hero-video-controls's right offset uses the page gutter, sized for the full-bleed hero's edge-to-
   viewport spacing. These grid cards are narrow columns, not full-bleed, so that offset reads as a
   big empty margin pushing the buttons off the card's right edge — match the bottom offset instead. */
.bpd-growth-card-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-growth-card-video .bpd-hero-video-controls {
		right: var(--wp--preset--spacing--300);
	}
}

/* core/paragraph is block-level by default, so its border/padding box stretches to the full column
   width. Figma shows this chip shrink-wrapped to its own text — same inline-block fix as
   .bpd-eyebrow in archive-insights.css, kept as a separate homepage-scoped rule since that
   stylesheet only loads on category/tag archives. The chip's actual border/radius/padding (same
   values as .bpd-eyebrow) are authored as inline block styles on the paragraph in
   patterns/insights-cards-static.php rather than restated as a CSS rule here, so there's no
   duplicated rule content at the stylesheet level to consolidate. */
.bpd-insight-chip {
	display: inline-block;
}



/* "See around corners" (bpd-two/insights-cards-static): drop the underline from the three card
   heading links. theme.json's elements.link sets text-decoration: underline globally, which is the
   right sitewide default for links sitting inline in body copy but wrong here — each of these is a
   whole card heading, and the card's image above it is a second link to the same place, so the
   underline reads as noise rather than as an affordance. WCAG 1.4.1 is satisfied without it: these
   aren't links embedded in a block of text needing to be distinguished from it, and the global
   :hover / :focus-visible treatments (blue-700, green-700 outline) still apply unchanged.

   Keyed off .bpd-insight-chip rather than a new class so it needs no markup change: that means it
   still applies if the client edits this section in the editor and core silently detaches it from
   the pattern into baked markup. (Only on the homepage — this file is gated to is_front_page(). The
   Insights page carries its own baked copy of these three cards under a different heading, which
   this rule deliberately does not reach; it renders no underline there anyway.) It scopes itself
   correctly because the chip label is what distinguishes an insights card from the
   audience card that shares bpd_render_static_card() — and audience cards carry no links at all.
   No @supports guard (unlike problem-details.css): where :has() is unsupported the underline simply
   remains, which is the pre-existing appearance, not a broken state. */
.wp-block-group:has(> .bpd-insight-chip) h3 a {
	text-decoration: none;
}