/**
 * Cover Carousel — frontend styles.
 *
 * The track is a single-cell grid and every slide occupies that same cell.
 * This is deliberate: the usual absolute-positioning approach to a fade
 * collapses the container's height, which is fatal here because a Cover's
 * height comes from its own min-height and content. With grid stacking the
 * track sizes itself to its tallest slide, no JS measurement is needed, and
 * grid's default stretch makes every slide render at that same height.
 */

.cover-carousel__track {
	display: grid;
}

.cover-carousel__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	/* Delay the visibility flip until the fade finishes, so the outgoing slide
	   stays painted while it fades out. */
	transition:
		opacity var(--cc-speed, 600ms) ease,
		visibility 0s linear var(--cc-speed, 600ms);
}

.cover-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--cc-speed, 600ms) ease,
		visibility 0s linear 0s;
}

/* Stretch each Cover to the full height of the grid row, so a short slide
   matches the tallest one rather than sitting at its own min-height. */
.cover-carousel__slide > .wp-block-cover {
	flex: 1 0 auto;
}

/* Arrows */

.cover-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
}

.cover-carousel__arrow--prev {
	left: 1rem;
}

.cover-carousel__arrow--next {
	right: 1rem;
}

/* `background-color` is declared explicitly here to override the theme's
   global `button:hover, button:focus { background-color: var(--wp--color--light-gray) }`
   in style.css (0-1-1), which would otherwise paint a #EAEAEA panel behind
   the arrow. This rule is 0-2-0, so it wins without needing !important. */
.cover-carousel__arrow:hover,
.cover-carousel__arrow:focus {
	background-color: #000;
	color: #fff;
}

/* Dim the icon rather than the button. `opacity` composites the whole box,
   including the outline — dimming the button itself would drag the
   focus-visible ring below its required contrast. The button has no
   background or border, so this is visually identical. */
.cover-carousel__arrow:hover .cover-carousel__arrow-icon,
.cover-carousel__arrow:focus .cover-carousel__arrow-icon {
	opacity: 0.7;
}

/* Focus ring — a deliberate exception to the site-wide
   `:focus { outline: #f4af00 solid 1px !important; }` rule in style.css.
   These arrows sit on top of hero imagery, where a 1px gold ring is too
   faint to locate reliably. `!important` is required to beat that rule;
   specificity alone (0-2-0 vs 0-1-0) is not enough, because the site rule
   is itself !important.

   The ring is what carries WCAG 2.4.7 conformance. The opacity shift
   matches the hover treatment so focus and hover feel consistent, but
   opacity cannot serve as the focus indicator on its own: it dims the
   control rather than marking it, and fails the 3:1 non-text contrast
   requirement for focus indicators. The dimming is applied to the icon,
   not the button, so it cannot drag the ring's own contrast down with it. */
.cover-carousel__arrow:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px;
}

/* The source chevron points down; rotate it per direction. */
.cover-carousel__arrow-icon {
	width: 40px;
	height: 40px;
}

.cover-carousel__arrow--prev .cover-carousel__arrow-icon {
	transform: rotate(90deg);
}

.cover-carousel__arrow--next .cover-carousel__arrow-icon {
	transform: rotate(-90deg);
}

/* Mobile: move the arrows out of the vertical middle, where they collide with
   the hero copy at narrow widths, and anchor them to the bottom corners.
   `top: auto` releases the 50% anchor and `transform: none` drops the paired
   centring offset — both are required, or the button is pulled half its own
   height below the bottom edge. */
@media only screen and (max-width: 781px) {
	.cover-carousel__arrow {
		top: auto;
		bottom: 1rem;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cover-carousel__slide,
	.cover-carousel__slide.is-active {
		transition: none;
	}
}

/**
 * Inheritance resets.
 *
 * The wrapper carries `wp-block-cover` on purpose (see cover-carousel.php), so
 * every existing Cover rule in style.css applies to it. That is what we want
 * for min-height, position, overflow, and outer margins — but core's flex box
 * model and the theme's inner padding have to be neutralised, and outer margins
 * have to be stripped from the individual slides.
 *
 * The theme's hero rules are !important at specificity 0-4-1
 * (`.page div.lp-hero-title.wp-block-cover.homepage-hero`), so these selectors
 * are written to reach 0-5-1 and win on specificity rather than source order.
 *
 * MAINTENANCE: if a new hero class with !important box properties is added to
 * style.css, it may need appending to the wrapper selector list below.
 */

.wp-block-critical-hit-cover-carousel.cover-carousel.wp-block-cover,
.page div.wp-block-critical-hit-cover-carousel.cover-carousel.wp-block-cover,
.page div.lp-hero-title.wp-block-critical-hit-cover-carousel.cover-carousel.wp-block-cover {
	display: block !important;
	padding: 0 !important;
	align-items: normal;
	justify-content: normal;
	/* Restated, not reset: the absolutely-positioned arrows anchor to this.
	   The value already cascades from core's .wp-block-cover, but the
	   dependency is load-bearing, so it is declared explicitly here. */
	position: relative;
}

/* Outer margin belongs to the wrapper, never to a slide inside the track. */
.cover-carousel__slide > .wp-block-cover,
.page .cover-carousel__slide > div.lp-hero-title.wp-block-cover,
.page .cover-carousel__slide > div.lp-hero-title.wp-block-cover.homepage-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/**
 * Re-applied hero inner padding.
 *
 * The wrapper reset above zeroes the wrapper's own padding (`padding: 0
 * !important`), which is required: padding on the wrapper would inset the
 * slides and their background images, breaking full-bleed hero media. But
 * that leaves nothing to give the slides' inner Covers the hero padding they
 * need — the theme's hero padding rules in style.css are compound selectors
 * that require the hero class (`lp-hero-title`, `homepage-hero`, `alignfull`)
 * on the element carrying `.wp-block-cover` itself, and editors only ever add
 * those classes to the carousel wrapper (via Advanced → Additional CSS
 * classes), never to the individual slide Covers. Without this section, slide
 * Covers fall back to core's `.wp-block-cover { padding: 1em }`, sitting
 * noticeably closer to the edges than an identical standalone hero.
 *
 * These rules read the hero class from the wrapper and re-apply the matching
 * padding to `.cover-carousel__slide > .wp-block-cover` so slides inherit
 * correct padding automatically. Values and media queries are mirrored
 * verbatim from style.css — see the line references in each block below so a
 * future maintainer can resync if the source rules change.
 *
 * Specificity: every selector below carries 5 classes (0-5-0), or 5 classes
 * plus 2 type selectors for the alignfull case (0-5-2). Both comfortably beat
 * core's `.wp-block-cover { padding: 1em }` (0-1-0) without needing
 * `!important`.
 *
 * Case-1-over-case-2 precedence: a homepage-hero wrapper always also carries
 * lp-hero-title, so both the "homepage-hero" and "lp-hero-title-only" rule
 * sets below can match the same slide simultaneously. Both sets resolve to
 * 0-5-0, so the cascade falls to source order — this is why the
 * "lp-hero-title (without homepage-hero)" rules are written FIRST and the
 * "homepage-hero" rules SECOND: at equal specificity the later rule wins, so
 * homepage-hero's padding always overrides lp-hero-title's. This was verified
 * against computed styles in the browser, not assumed from source order alone.
 */

/* Case 2: `lp-hero-title` without `homepage-hero`.
   Mirrors style.css lines 743-753 (base), 10264-10267 (max-width:1079px),
   989-991 (max-width:781px, the generic `.lp-hero-title { padding: 27px 16px
   !important }` rule — included per the "any .lp-hero-title rule that
   applies" instruction), 10369-10371 (max-width:500px). Note: style.css
   never sets padding-top for the `.lp-hero-title.wp-block-cover` selector
   at the base/1079/500 breakpoints (it's left to core's default 1em), so no
   padding-top rule is mirrored at those breakpoints either — the slide Cover
   already carries `.wp-block-cover` and inherits core's 1em top padding on
   its own. The 781px breakpoint is the one exception: the generic
   `.lp-hero-title` rule (line 989-991) sets top AND bottom to 27px via
   `!important`, and — being a bare `.lp-hero-title` selector with no
   `.wp-block-cover` requirement — it is NOT scoped to elements that also
   carry `.wp-block-cover`, so it is mirrored here as its own top/bottom-only
   declaration rather than folded into the shorthand. Its left/right (16px)
   is NOT mirrored, because the more specific `!important` rule at line
   10266-10267 (mirrored below in the max-width:1079px block, which still
   applies at ≤781px) already wins over it in style.css for those two sides —
   verified against computed styles in the browser. */
.page .wp-block-critical-hit-cover-carousel.lp-hero-title .cover-carousel__slide > .wp-block-cover,
.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.lp-hero-title) .cover-carousel__slide > .wp-block-cover {
	padding-bottom: 4rem;
	padding-left: calc(4rem + 6px);
	padding-right: calc(4rem + 6px);
}

@media only screen and (max-width: 1079px) {
	.page .wp-block-critical-hit-cover-carousel.lp-hero-title .cover-carousel__slide > .wp-block-cover,
	.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.lp-hero-title) .cover-carousel__slide > .wp-block-cover {
		padding-left: calc(2rem + 8px);
		padding-right: calc(2rem + 8px);
	}
}

@media only screen and (max-width: 781px) {
	.page .wp-block-critical-hit-cover-carousel.lp-hero-title .cover-carousel__slide > .wp-block-cover,
	.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.lp-hero-title) .cover-carousel__slide > .wp-block-cover {
		padding-top: 27px;
		padding-bottom: 27px;
	}
}

@media only screen and (max-width: 500px) {
	.page .wp-block-critical-hit-cover-carousel.lp-hero-title .cover-carousel__slide > .wp-block-cover,
	.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.lp-hero-title) .cover-carousel__slide > .wp-block-cover {
		padding-left: calc(1rem + 8px);
		padding-right: calc(1rem + 8px);
	}
}

/* Case 1: `homepage-hero` (always paired with `lp-hero-title` in practice).
   Mirrors style.css lines 16936-16939 (base), 17141-17144
   (min-width:1800px), 17271-17274 (max-width:781px). Placed after the Case 2
   block above so it wins the equal-specificity (0-5-0) tie described above. */
.page .wp-block-critical-hit-cover-carousel.homepage-hero .cover-carousel__slide > .wp-block-cover,
.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.homepage-hero) .cover-carousel__slide > .wp-block-cover {
	padding: 2em 5.25em;
}

@media only screen and (min-width: 1800px) {
	.page .wp-block-critical-hit-cover-carousel.homepage-hero .cover-carousel__slide > .wp-block-cover,
	.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.homepage-hero) .cover-carousel__slide > .wp-block-cover {
		padding: 3.75em 4em;
	}
}

@media only screen and (max-width: 781px) {
	.page .wp-block-critical-hit-cover-carousel.homepage-hero .cover-carousel__slide > .wp-block-cover,
	.page .wp-block-critical-hit-cover-carousel:has(.cover-carousel__slide > .wp-block-cover.homepage-hero) .cover-carousel__slide > .wp-block-cover {
		padding: 16px;
	}
}

/* Case 3: plain `alignfull` carousel with no hero classes.
   Mirrors style.css lines 1398-1401 (`div.entry-content > div.wp-block-cover.alignfull`).
   No responsive overrides exist for this rule in style.css, so none are
   mirrored here. Scoped with :not() rather than relying on specificity or
   source order: the wrapper's real class list is `... alignfull lp-hero-title
   homepage-hero`, so an unscoped `.alignfull` rule would also match hero
   carousels — and its selector below is structurally more specific (0-5-2,
   from the two type selectors) than the Case 1/2 rules above, so it would
   incorrectly win over them. Excluding `.lp-hero-title` and `.homepage-hero`
   keeps this rule limited to carousels that carry neither, matching the
   "no hero classes" case exactly, so it never competes with Case 1 or 2. */
div.entry-content > div.wp-block-critical-hit-cover-carousel.alignfull:not(.lp-hero-title):not(.homepage-hero):not(:has(.cover-carousel__slide > .wp-block-cover.lp-hero-title)):not(:has(.cover-carousel__slide > .wp-block-cover.homepage-hero)) .cover-carousel__slide > .wp-block-cover {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

/**
 * H2 heading sizing parity with the hero H1.
 *
 * Why this duplication exists: a Cover Carousel slide is not required to
 * carry the hero classes (`lp-hero-title`, `homepage-hero`) — a non-hero
 * slide's Cover can be a plain `wp-block-cover` using an `<h2>` instead of
 * the hero's `<h1>`. Editors expect every slide's heading to read at the
 * same size as the hero heading regardless of which slide happens to be
 * active, but style.css's heading-size rules are keyed off the hero classes
 * (`.lp-hero-title.homepage-hero h1`) and, for the nested `strong`, off the
 * `.home` body class (`.home h1 strong`) — neither of which a non-hero
 * slide, or a carousel appearing off the homepage, is guaranteed to carry.
 * This section mirrors those rules onto `h2` / `h2 strong` inside any
 * carousel slide, unconditionally, so the two headings always match.
 *
 * Only `font-size` and `line-height` are mirrored — the two properties the
 * hero and non-hero headings are required to match. Other h1-only
 * declarations (margin-bottom, color, display, text-transform, etc.) are
 * intentionally left alone; mirroring them was out of scope.
 *
 * Values and media queries are mirrored verbatim from style.css — see the
 * line reference in each comment below so a future maintainer can resync if
 * the source rules change. Two source declarations are commented out in
 * style.css and are skipped here to match, since a commented-out
 * declaration contributes nothing to the cascade: the h1 font-size at
 * max-width:600px (line 17357-17359) and the h1 font-size at
 * max-width:470px (line 17460-17462).
 *
 * Selector specificity is built to mirror the source relationships exactly,
 * so identical-breakpoint overrides resolve the same way:
 *   - h2 rules use `.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2`
 *     (2 classes + 1 element = specificity 0-2-1) — the same specificity as
 *     source's `.lp-hero-title.homepage-hero h1` (2 classes + 1 element =
 *     0-2-1).
 *   - fr-ca h2 rules prepend `html[lang="fr-ca"]`, giving 0-3-2 (adds the
 *     `html` element and the `[lang]` attribute selector) — the same
 *     specificity as source's `html[lang="fr-ca"] .lp-hero-title.homepage-hero h1`
 *     (0-3-2). Since 0-3-2 is higher than the plain h2 rules' 0-2-1, the
 *     fr-ca rule always outranks the non-fr-ca breakpoint rules below it
 *     regardless of source order, exactly as in style.css.
 *   - `strong` rules are all written against one selector,
 *     `.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 strong`,
 *     rather than reproducing source's two different specificities
 *     (`.home h1 strong` at 0-1-2 vs the `.lp-hero-title.homepage-hero h1
 *     strong` override at 429px, 0-2-2) — source's `.home` body-class scoping
 *     cannot be mirrored here, since a carousel isn't guaranteed to sit on
 *     the home page (see the scoping note above). With one selector shared
 *     across all `strong` breakpoints, the cascade instead resolves by
 *     source order, which is preserved below in the same widest-to-narrowest
 *     sequence as style.css, so the result is identical.
 *   - No `!important` is used or required anywhere in this section.
 */

/* Base h1 font-size/line-height. Source: style.css lines 16964-16967. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
	font-size: calc(3.375em * var(--fs-scale, 1));
	line-height: 1.05;
}

/* fr-ca base override. Source: style.css lines 16971-16973. */
html[lang="fr-ca"] .wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
	font-size: calc(3rem * var(--fs-scale, 1));
}

/* Base h1 strong. Source: style.css lines 461-470. The effective value is
   the second, non-calc `font-size: 1.5rem` declaration (line 468), which
   overrides the calc() on line 464 later in the same rule. `line-height` is
   intentionally not set here: style.css never sets an explicit line-height
   on `strong` either — it inherits the unitless `1.05` from the h1 rule
   above and is recomputed against strong's own font-size. This section
   reproduces that by relying on the same inheritance path, and matches the
   base h2 rule appearing earlier in this file so line-height:1.05 is
   already in effect. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 strong {
	/* Source: style.css lines 461-470. Note that block declares `font-size` and
	   `text-transform` twice each; the later declaration wins, so the effective
	   values are 1.5rem and `none` — not .75rem and `uppercase`. */
	font-size: 1.5rem;
	text-transform: none;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	/* Source: style.css line 16874-16876. Overrides the UA/theme `b, strong`
	   bold, which an h2's strong would otherwise keep. */
	font-weight: 400;
	/* The h1's strong renders in the primary face; an h2's strong otherwise
	   inherits the secondary ('Eurostile Extended') from the heading defaults. */
	font-family: var(--wp--font--primary);
}

@media only screen and (min-width: 1800px) {
	/* Source: style.css lines 17155-17157. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(4.375rem * var(--fs-scale, 1));
	}

	/* Source: style.css lines 17159-17161. */
	html[lang="fr-ca"] .wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(4rem * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 1620px) {
	/* Source: style.css lines 17196-17199. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(3em * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 1600px) {
	/* Source: style.css lines 472-478. Effective value is the second,
	   non-calc `font-size: 1.25rem` on line 476, which overrides the
	   calc() on line 475. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 strong {
		font-size: 1.25rem;
	}
}

@media only screen and (max-width: 1520px) {
	/* Source: style.css lines 17202-17205. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(2.75em * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 1360px) {
	/* Source: style.css lines 17208-17211. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(2.25em * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 1200px) {
	/* Source: style.css lines 486-491. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 strong {
		font-size: calc(1rem * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 781px) {
	/* Source: style.css lines 17307-17309 (font-size declaration only;
	   margin-bottom is out of scope, see note above). */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(2rem * var(--fs-scale, 1));
	}

	/* Source: style.css lines 17312-17314. */
	html[lang="fr-ca"] .wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(2.5rem * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 600px) {
	/* Source: style.css lines 17361-17363. The equivalent non-fr-ca h1
	   font-size rule in this same style.css media block (lines 17357-17359)
	   is commented out in the source, so it is skipped here too. */
	html[lang="fr-ca"] .wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(2.125rem * var(--fs-scale, 1));
	}
}

/* max-width:470px is skipped: style.css lines 17459-17462 contain only a
   commented-out font-size declaration at this breakpoint, so there is
   nothing to mirror. */

@media only screen and (max-width: 429px) {
	/* Source: style.css lines 17476-17478. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 strong {
		font-size: calc(0.75rem * var(--fs-scale, 1));
	}

	/* Source: style.css lines 17479-17481. */
	html[lang="fr-ca"] .wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(1.875rem * var(--fs-scale, 1));
	}
}

@media only screen and (max-width: 360px) {
	/* Source: style.css lines 17485-17487. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide h2 {
		font-size: calc(1.625em * var(--fs-scale, 1));
	}
}

/**
 * Re-applied hero button-row styling.
 *
 * The theme styles the hero's button row via `.homepage-hero .home-button-wrap`.
 * That needs `.homepage-hero` in the ancestry, which only the slide acting as the
 * "real" hero carries — so a second slide can use the same `.home-button-wrap`
 * class and get none of the treatment: its buttons stay block-level with no gap,
 * and it inherits the generic `.wp-block-group { margin-top: 7.5rem }` instead of
 * the hero's 1rem/3rem.
 *
 * These rules read `.home-button-wrap` from inside any carousel slide and apply
 * the same treatment. Selectors are 0-3-0, which beats both `.wp-block-group`
 * (0-1-0) and `.homepage-hero .home-button-wrap` (0-2-0), so no `!important` is
 * needed except where the source itself used it.
 *
 * Mirrored verbatim from style.css — resync these if the source changes:
 *   17010-17013  base margins
 *   17015-17018  base flex row
 *   17294-17296  max-781  order
 *   17298-17301  max-781  wrap + gap
 *   17418-17420  max-600  margin-bottom
 *   17464-17467  max-470  wrap, gap 0
 *   17469-17471  max-470  full-width buttons
 */

/* Source: style.css lines 17010-17013. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap {
	margin-top: 1rem;
	margin-bottom: 3rem;
}

/* When the button row is the last thing in the slide there is nothing below it
   to space away from, so the trailing margin only pushes the slide taller.
   The `:last-child` pseudo-class takes this to 0-4-0, so it beats both the base
   rule above and the max-600 override below on specificity, regardless of
   source order. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap:last-child {
	margin-bottom: 0;
}

/* Source: style.css lines 17015-17018. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap > div {
	display: flex;
	gap: .75rem;
}

@media only screen and (max-width: 781px) {
	/* Source: style.css lines 17294-17296. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap {
		order: 2;
	}

	/* Source: style.css lines 17298-17301. The source uses !important on gap; kept
	   so the two slides resolve identically. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap > div {
		flex-wrap: wrap;
		gap: .75rem !important;
	}
}

@media only screen and (max-width: 600px) {
	/* Source: style.css lines 17418-17420. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap {
		margin-bottom: 1rem;
	}
}

@media only screen and (max-width: 470px) {
	/* Source: style.css lines 17464-17467. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap > div {
		flex-wrap: wrap;
		gap: 0;
	}

	/* Source: style.css lines 17469-17471. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .home-button-wrap > div > div {
		flex-basis: 100%;
	}
}

/**
 * Re-applied hero button styling (`.wp-block-buttons`).
 *
 * The hero's button row is styled through two different class hooks, not one:
 * `.home-button-wrap` (mirrored above) and `.wp-block-buttons` nested inside it.
 * Both need `.homepage-hero` in the ancestry, so both are missing on a
 * non-hero-classed slide. Mirroring only the first leaves the buttons ungapped
 * and not full-width on mobile.
 *
 * Mirrored verbatim from style.css — resync these if the source changes:
 *   16911-16913  base    button link margin
 *   16975-16978  base    margin + gap
 *   17303-17305  max-781 full-width buttons
 */

/* Source: style.css lines 16975-16978. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide .wp-block-buttons {
	margin-bottom: 0;
	gap: 1em;
}

/* Source: style.css lines 16911-16913. */
.wp-block-critical-hit-cover-carousel .cover-carousel__slide .wp-block-buttons a.wp-block-button__link {
	margin-bottom: 0;
}

@media only screen and (max-width: 781px) {
	/* Source: style.css lines 17303-17305. */
	.wp-block-critical-hit-cover-carousel .cover-carousel__slide .wp-block-buttons {
		flex-basis: 100%;
	}
}