/* Newsroom hero — patterns/newsroom-hero.php.
 *
 * Figma node 2104:1563 ("1. Hero"), handoff §2. A single left-aligned copy
 * column on the page ground: H1, lede, two pill CTAs. No media layer at all —
 * the comp's hero image, search field and third CTA are hidden version-history
 * layers (handoff §2), so unlike solutions-hero.css this file has no artwork,
 * scrim or glow to carry, and the whole hero is type plus two buttons. */

.infinitus-section--newsroom-hero {
	/* Shared with .btn.btn-lg and every other native-block CTA, so the two
	   implementations cannot drift — same name solutions-hero.css uses. */
	--newsroom-hero-button-border-width: var(--btn-border-width);

	/* The theme header is position:fixed, so the hero's top padding has to
	   clear it before the section rhythm starts (patterns/hero.php's own
	   note). Bottom is section-md rather than the grid band's section-xl: the
	   comp's 200px X-Large token is the page's BOTTOM rhythm, under the last
	   band, not the gap between hero and grid. */
	padding-block-start: calc(var(--navbar-height) + var(--wp--preset--spacing--section-md));
	padding-block-end: var(--wp--preset--spacing--section-md);
}

.infinitus-section--newsroom-hero .container {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	/* The comp's raw 28px H1→lede gap, snapped to Spacing/24 per the handoff's
	   own flag. One gap for the whole column: the CTA row's own 20px is set on
	   .newsroom-hero__actions below, and the 24px here is what sits above it. */
	gap: var(--wp--preset--spacing--sp-6);
	text-align: left;
}

/* The group carries only core's `is-layout-flow` class — this column's flex
   behavior is this file, not a block `layout` attribute — so core's flow
   block-gap fallback (`:where(.is-layout-flow) > * { margin-block: 24px 0 }`)
   still stacks a margin on top of the `gap` above. Zero it so `gap` alone sets
   the rhythm. Same trap as resources-hub-hero.css. */
.infinitus-section--newsroom-hero .container > * {
	margin-block: 0;
}

.newsroom-hero__title {
	color: var(--wp--preset--color--gray-900);
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: var(--lh-h1);
	margin: 0;
}

.newsroom-hero__lede {
	color: var(--wp--preset--color--gray-600);
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);
}

/* The lede spans 9 of the DS grid's 12 columns from the Desktop breakpoint up,
 * and the full column below it — handoff §2 gives tablet and mobile as "full
 * width". BugHerd #160.
 *
 * This REPLACES the handoff's "~923px comp reference", and the number must not
 * come back: 923px is the measured width of the placeholder copy in the 1440
 * comp, not a column span. Nine of twelve columns is 952.5px at the 1280
 * content max, and at any narrower desktop a fixed 923px cap is a width the
 * fluid grid never reaches, which is precisely the too-narrow hero #160
 * reports.
 *
 *   content = 12c + 11g            (12 columns, 11 gutters)
 *   span(9) = 9c + 8g = 0.75 x content - 0.25 x gutter
 *
 * The gutter is 30px across the whole >= 1025 range (handoff, Grid &
 * Breakpoints), so 0.25 x gutter is a constant 7.5px and ONE percentage
 * expression covers Desktop and Wide both — no second query, and it stays
 * exact as .container's own padding steps 100px -> 80px.
 *
 * 1025px, not Tailwind's lg (1024px): the DS Desktop breakpoint is where the
 * grid becomes 12 columns. Below it the grid is 6 columns and a 9/12 span has
 * nothing to measure against, so there is no cap at all there.
 *
 * The cap is on the lede alone. .container IS the copy column and carries the
 * section's edge padding, so capping it would break that contract; the H1 and
 * the hugging CTA row cannot reach 9/12 on their own. */
@media (min-width: 1025px) {
	.newsroom-hero__lede {
		max-width: calc(75% - 7.5px);
	}
}

.newsroom-hero__actions {
	/* The comp's 20px CTA gap. Set here rather than as a blockGap attribute so
	   it is one value in one place, next to the 24px column gap it pairs with. */
	gap: var(--wp--preset--spacing--sp-5);
	/* margin-block-END only — zeroing both would also cancel the column gap's
	   contribution above. */
	margin-block-end: 0;
}

/* Both buttons, shared geometry. Metrics come from the --btn-* custom
 * properties .btn.btn-lg consumes, so the native-block CTA and the theme's own
 * button class cannot drift. Colours stay palette presets on the block, except
 * the outlined variant's, which core has no style for (see below). */
.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link {
	border: var(--newsroom-hero-button-border-width) solid var(--wp--preset--color--gray-900);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--fs-body-lg);
	font-weight: 400;
	line-height: var(--lh-body-lg);
	padding: var(--btn-padding-block-lg) var(--btn-padding-inline-lg);
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
		color var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}

/* !important is required, not cosmetic: the buttons' rest colours come from
   WP's preset classes, which the global stylesheet emits WITH !important.
   Without matching it here the rule loses silently and the button never changes
   state. */
.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link:hover,
.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link:focus-visible {
	background-color: transparent !important;
	color: var(--wp--preset--color--gray-900) !important;
}

/* :active after :hover on purpose — both match while the button is pressed and
   this is the one that should win. Mirrors .btn-primary. */
.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link:active {
	background-color: var(--wp--preset--color--gray-900) !important;
	box-shadow: var(--btn-shadow-active);
	color: var(--wp--preset--color--white) !important;
}

.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cerulean-400);
	outline-offset: 2px;
}

/* The outlined secondary. The block carries a text preset but NO background
 * preset — this theme registers no outline button style, so the transparent
 * ground is declared here, and its hover is the primary's states swapped: the
 * fill arrives instead of leaving. No !important on the rest background because
 * there is no preset class to beat; the hover/active fills DO need it, for the
 * same reason the rules above do. */
.infinitus-section--newsroom-hero .newsroom-hero__button--outline .wp-block-button__link {
	background-color: transparent;
}

.infinitus-section--newsroom-hero .newsroom-hero__button--outline .wp-block-button__link:hover,
.infinitus-section--newsroom-hero .newsroom-hero__button--outline .wp-block-button__link:focus-visible,
.infinitus-section--newsroom-hero .newsroom-hero__button--outline .wp-block-button__link:active {
	background-color: var(--wp--preset--color--gray-900) !important;
	color: var(--wp--preset--color--white) !important;
}

@media (prefers-reduced-motion: reduce) {
	.infinitus-section--newsroom-hero .newsroom-hero__button .wp-block-button__link {
		transition: none;
	}
}

/* MOBILE — the CTAs stack and keep hugging their labels; they do NOT go
 * full-width. The handoff asks for that confirmation (§2, "confirm whether CTAs
 * go full-width — standard DS mobile pattern"); decided against, because
 * "Press and speaking inquiries" is long enough that two full-width pills make
 * a very tall stack at 320px, and no other hero in this theme
 * (contact-hero.css, solutions-hero.css) goes full-width either. The stack
 * itself is core's own wrap; only the alignment is stated, so a wrapped row
 * lines up with the copy above it. */
@media (max-width: 767.98px) {
	.newsroom-hero__actions {
		align-items: flex-start;
		flex-direction: column;
	}
}