/* Group
--------------------------------------------- */

/* Parallax Background */
.wp-block-group[class*="is-style-parallax-"] {
	overflow-y: visible;
	padding-bottom: var(--wp--preset--spacing--80) !important;
	padding-top: var(--wp--preset--spacing--80) !important;
	position: relative;
	z-index: 0;
}

.wp-block-group[class*="is-style-parallax-"]::before,
.wp-block-group[class*="is-style-parallax-"]::after {
	background-repeat: no-repeat;
	content: "";
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

@media screen and (max-width: 960px) {
	.wp-block-group[class*="is-style-parallax-"]::before,
	.wp-block-group[class*="is-style-parallax-"]::after {
		opacity: 0.25;
	}
}

.wp-block-group.is-style-parallax-tangerine::before,
.wp-block-group.is-style-parallax-silver::before {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-left-tangerine.svg");
	background-position: center left -13px;
	background-size: 106px auto;
}

.wp-block-group.is-style-parallax-silver::before {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-left-silver.svg");
}

.wp-block-group.is-style-parallax-tangerine::after,
.wp-block-group.is-style-parallax-silver::after {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-right-tangerine.svg");
	background-position: bottom right -97px;
	background-size: 288px auto;
}

.wp-block-group.is-style-parallax-silver::after {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-right-silver.svg");
}

.wp-block-group.is-style-parallax-malibu::before {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-left-malibu.svg");
	background-position: center left -65px;
	background-size: 120px auto;
}

.wp-block-group.is-style-parallax-malibu::after {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-right-malibu.svg");
	background-position: bottom -150px right -47px;
	background-size: 224px auto;
}

.wp-block-group.is-style-parallax-shocking::before {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-left-shocking.svg");
	background-position: center left -60px;
	background-size: 120px auto;
}

.wp-block-group.is-style-parallax-shocking::after {
	background-image: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/parallax-bg/parallax-bg-right-shocking.svg");
	background-position: center right -65px;
	background-size: 224px auto;
}

@supports (animation-timeline: scroll()) {
	.wp-block-group.is-style-parallax-tangerine:not(
			.block-editor-block-list__block
		)::before,
	.wp-block-group.is-style-parallax-silver:not(.block-editor-block-list__block)::before,
	.wp-block-group.is-style-parallax-malibu:not(.block-editor-block-list__block)::before,
	.wp-block-group.is-style-parallax-shocking:not(
			.block-editor-block-list__block
		)::before {
		animation: parallaxSlow ease-out both;
		animation-range: cover;
		animation-timeline: scroll(root);
	}

	.wp-block-group.is-style-parallax-tangerine:not(.block-editor-block-list__block)::after,
	.wp-block-group.is-style-parallax-silver:not(.block-editor-block-list__block)::after,
	.wp-block-group.is-style-parallax-malibu:not(.block-editor-block-list__block)::after,
	.wp-block-group.is-style-parallax-shocking:not(.block-editor-block-list__block)::after {
		animation: parallaxFast ease-out both;
		animation-range: cover;
		animation-timeline: scroll(root);
	}

	@keyframes parallaxSlow {
		from {
			transform: translateY(-25%);
		}
		to {
			transform: translateY(25%);
		}
	}

	@keyframes parallaxFast {
		from {
			transform: translateY(-35%);
		}
		to {
			transform: translateY(35%);
		}
	}
}

.wp-block-group.is-style-poly-mesh-bg {
	overflow: hidden;
	position: relative;
}

.wp-block-group.is-style-poly-mesh-bg > *:not(.wp-block-gtt-poly-mesh) {
	position: relative;
	z-index: 5;
}

.wp-block-group.is-style-poly-mesh-bg > .wp-block-gtt-poly-mesh {
	left: 0;
	position: absolute;
	right: 0;
}

@media screen and (max-width: 600px) {
	.wp-block-group.is-position-sticky {
		position: static;
	}
}

.wp-block-group.is-sticky-page-nav .wp-block-navigation {
	row-gap: var(--wp--preset--spacing--12);
}

/* Rounded, semi-transparent overlay surface. */
.wp-block-group.is-style-halo-surface {
	backdrop-filter: blur(var(--wp--custom--blur--surface));
	background-color: var(--wp--preset--color--deep-purple-10-trn);
	border-radius: 24px;
}

/* Gradient hairline border, for translucent halo panels where a solid border
reads too flat. Drawn as a masked pseudo-element so the panel keeps its own
(semi-transparent) background. */
.wp-block-group.is-style-halo-gradient-border {
	position: relative;
}

.wp-block-group.is-style-halo-gradient-border::after {
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	background: linear-gradient(155deg, var(--wp--preset--color--emerald) 10%, var(--wp--preset--color--malibu) 60%, var(--wp--preset--color--electric-violet) 100%);
	border-radius: inherit;
	content: "";
	inset: 0;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	padding: 1px;
	pointer-events: none;
	position: absolute;
}

/* Statistics grid: WP's fixed-columnCount grid layout has no built-in
responsive fallback (unlike the auto-fill/minimumColumnWidth grid variant), so
the 3-up card grid needs an explicit collapse to one column on phones. */
@media screen and (max-width: 600px) {
	.wp-block-group.gtt-halo-stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Dark section: flips text to read on a dark ground. The white text colour
itself lives in theme.json (styles.blocks.variations.dark) and travels by plain
inheritance, so any descendant that pins its own colour — a white callout card
sitting inside a dark section, say — stops it cleanly.

Links and link-styled buttons cannot rely on that, because theme.json pins both
to shark with a rule of their own. Resolving them to `inherit` rather than to
white keeps them correct in every nesting: white inside a dark section, shark
inside a light card within that same section. A hardcoded white would leak into
the light card and disappear against it.

Accent card surfaces need nothing — every -trn preset is a 10% alpha tint, so
cards adapt to whichever ground they sit on. A card using an opaque light
surface only needs to pin its own text colour, as gtt/card-callout does. */
.wp-block-group.is-style-dark a:where(:not(.wp-element-button)),
.wp-block-group.is-style-dark .wp-block-button.is-style-link .wp-block-button__link {
	color: inherit;
}

/* Headings need the same treatment, against a different offender. Astra's dynamic
customizer CSS emits a bare `h1, h2, … { color: <heading base colour> }`, and a
rule set directly on the element beats an inherited value outright, whatever the
specificity of the rule the value came from — so where that stylesheet loads,
every plain heading in a dark section renders in the site's near-black heading
grey, on a near-black ground.

Pages on page-templates/blocks.php dequeue Astra and never see this. The rule is
here for the places that do not: a pattern dropped into a classic-editor post,
an Astra archive, or any template still on the theme's own rendering path during
the Elementor migration. Keeping it means a dark section is self-contained,
rather than correct only where something else happens to be switched off.

`inherit` again rather than white, for the same nesting reason as the links
above, and it is safe here because no section-level pattern puts a plain heading
on an opaque light card without pinning that card's text colour (the white cards
in gtt/card-grid-pillars set `has-shark-color`, and their titles are paragraphs
in any case). Headings that declare a colour of their own are untouched: the
preset class carries !important, as does the gradient-text style's transparent
fill. */
.wp-block-group.is-style-dark :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Comparison cards. The surface is CSS rather than a background attribute so an
ancestor can override it: a declared preset carries !important, which nothing
above the card can beat. Each card keeps its own accent as the fallback, so the
pattern still reads correctly on a light page.

--gtt-card-bg is set by the Card BG styles below, applied to any ancestor — in
practice the pattern's root group, which is selectable on the page without
detaching. */
.gtt-comparison-card--electric-violet {
	background-color: var(--gtt-card-bg, var(--wp--preset--color--electric-violet-trn));
}

.gtt-comparison-card--emerald {
	background-color: var(--gtt-card-bg, var(--wp--preset--color--emerald-trn));
}

.wp-block-group.is-style-card-bg-shark {
	--gtt-card-bg: var(--wp--preset--color--shark);
}

.wp-block-group.is-style-card-bg-black {
	--gtt-card-bg: var(--wp--preset--color--black);
}

.wp-block-group.is-style-card-bg-deep-purple {
	--gtt-card-bg: var(--wp--preset--color--deep-purple);
}

/* Gated media
--------------------------------------------- */

/*
 * Held back until src/frontend/gated-media.js sees the neighbouring form report a
 * submission. Hiding it here rather than from the script means a script that never runs
 * keeps the media gated instead of exposing it. The editor is exempt: a slot nobody can
 * see is a slot nobody can fill.
 */
.wp-block-group.is-style-gated-media:not(.block-editor-block-list__block) {
	display: none;
}

.wp-block-group.is-style-gated-media.is-revealed:not(.block-editor-block-list__block) {
	display: block;
}

/* Gartner Peer Insights embed. The vendor widget sizes itself from its own stylesheet and
centres nothing, so the only thing needed here is to centre the card it draws and stop it
running wider than the column it sits in. */
.gtt-gartner-rating {
	display: flex;
	justify-content: center;
}

.gtt-gartner-rating > div {
	max-width: 100%;
}

/*
 * Where a recording is published in several languages the gated media holds one embed per
 * language and the download button's dropdown chooses between them. A single language —
 * which is every resource in the corpus today — is emitted bare, with no wrapper at all.
 */
.wp-block-group.gtt-media-locale:not(.is-active):not(.block-editor-block-list__block) {
	display: none;
}

/* Migrated Elementor sections carried a full-bleed background, but they land in the
article column of a resource template — off-centre, so the usual `50% - 50vw` trick puts
them half a page to the left.

The geometry is deterministic, though, and derivable from the band's own width. The band
fills its column, so `100%` is the column width W, and for a two-column body inside a
centred container:

    distance to the page's left edge   = pageWidth/2 - W - gap/2
    distance to the page's right edge  = pageWidth/2 + gap/2

Measured against the rendered page at 1440 and 1280 those give 72.5 / 23.5 and 720.5 /
632.5, matching the real offsets. `min()` clamps each side so a band can never pull
further than the column's own offset once the container stops centring.

--gtt-band-gap must match the columns block's gap; it is the one value CSS cannot read
back off an ancestor. */
.wp-block-group.gtt-section-bleed {
	--gtt-band-gap: var(--wp--preset--spacing--16, 16px);

	margin-left: calc(-1 * max(0px, 50vw - 100% - var(--gtt-band-gap) / 2));
	margin-right: calc(-1 * max(0px, 50vw + var(--gtt-band-gap) / 2));
	/* Re-centre the content on the page's own measure: the band is now the full width, so
	its padding is what puts the text back where the column had it. 1260px is the theme's
	wideSize — global-settings values are not exposed as custom properties, so it is stated
	rather than read. */
	padding-inline: max(var(--wp--preset--spacing--32), calc(50vw - 1260px / 2));
}


/* Hero highlights panel
--------------------------------------------- */

/*
 * The "Highlights at a glance" list in a resource hero sits on the Halo Surface block
 * style, which carries the translucent fill, the blur and the radius. Only the padding is
 * added here: it belongs to this use of the surface rather than to the surface itself,
 * which is also used on pill-shaped and full-width panels that set their own.
 */
.wp-block-cover .wp-block-group.left-wrap-mobile {
	padding: var(--wp--preset--spacing--24);
}

/* Resources hub: outcome tiles
--------------------------------------------- */

.gtt-outcome-tile {
	position: relative;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.gtt-outcome-tile.has-atomic-tangerine-border-color {
	--gtt-outcome-accent: var(--wp--preset--color--atomic-tangerine);
}

.gtt-outcome-tile.has-malibu-border-color {
	--gtt-outcome-accent: var(--wp--preset--color--malibu);
}

.gtt-outcome-tile.has-shocking-border-color {
	--gtt-outcome-accent: var(--wp--preset--color--shocking);
}

.gtt-outcome-tile:hover,
.gtt-outcome-tile:focus-within {
	box-shadow: var(--wp--preset--shadow--small-dark);
	transform: translateY(-2px);
}

/* Hovered, focused or active, the tile fills with its accent and the title and the
   icon's accent strokes reverse out to white. The tint is a preset background class,
   which carries !important. The icon is inlined by Blocks\inline_outcome_tile_icons();
   its outline is the black path, and every other path is the accent. */
.gtt-outcome-tile__icon path {
	transition: fill 0.15s ease;
}

.gtt-outcome-tile .wp-block-heading a {
	transition: color 0.15s ease;
}

.gtt-outcome-tile:is(:hover, :focus-within, :has(a.is-active)) {
	background-color: var(--gtt-outcome-accent) !important;
}

.gtt-outcome-tile:is(:hover, :focus-within, :has(a.is-active)) .wp-block-heading a {
	color: var(--wp--preset--color--white);
}

.gtt-outcome-tile:is(:hover, :focus-within, :has(a.is-active)) .gtt-outcome-tile__icon path:not([fill="#000"]) {
	fill: var(--wp--preset--color--white);
}

/* The heading carries the link; stretch it over the whole tile. */
.gtt-outcome-tile .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gtt-outcome-tile .wp-block-heading a {
	text-decoration: none;
}

/* The tile whose outcome is filtering the list below: raised as on hover, with its
   accent border thickened. The width is set inline by the pattern, hence !important. */
.gtt-outcome-tile:has(a.is-active) {
	border-width: 3px !important;
	box-shadow: var(--wp--preset--shadow--small-dark);
	transform: translateY(-2px);
}

/* Three tiles in a 1280px row. Core's grid layout uses auto-fill, which at this
width lays out four 280px tracks and leaves the fourth empty, so three tiles
only reach three quarters of the way across. auto-fit collapses the empty track
and lets the three stretch, and still wraps to fewer columns on narrow screens. */
.wp-block-group.gtt-outcome-tiles,
.wp-block-group.gtt-intent-tiles {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Link card
--------------------------------------------- */

/*
 * A card that is a single link, for destinations hm/post-link cannot reach. The
 * card's link — it should have exactly one — is stretched over the whole card,
 * so its text stays the link's accessible name while the card is the target.
 * The hover matches the resource cards in the post grid. Cards set their
 * resting shadow inline, hence !important.
 */
.wp-block-group.is-style-link-card {
	position: relative;
	transition:
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

.wp-block-group.is-style-link-card a {
	text-decoration: none;
}

.wp-block-group.is-style-link-card a::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

.wp-block-group.is-style-link-card:hover,
.wp-block-group.is-style-link-card:focus-within {
	box-shadow: var(--wp--preset--shadow--large-dark) !important;
	transform: translateY(-2px);
}

.wp-block-group.is-style-link-card:hover a,
.wp-block-group.is-style-link-card:focus-within a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* The whole card shows focus, rather than the link's text alone. */
.wp-block-group.is-style-link-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--emerald);
	outline-offset: 2px;
}

.wp-block-group.is-style-link-card a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-link-card {
		transition: none;
	}

	.wp-block-group.is-style-link-card:hover,
	.wp-block-group.is-style-link-card:focus-within {
		transform: none;
	}
}

/* Gartner reviews card
--------------------------------------------- */

/*
 * Gartner's widget, reduced to its reviews. Its own card repeats the rating
 * cards beside it, so it is hidden, and the fixed 300px box the vendor sets on
 * its root (with !important on the background) is undone so the reviews fill
 * the card.
 */
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"] {
	background-color: transparent !important;
	border: 0;
	color: inherit;
	display: block;
	width: auto;
}

.gtt-gartner-reviews__widget .gartner-pi-card {
	display: none;
}

/*
 * The card sets the reviews' width, not their content. Gartner's hidden data
 * iframe keeps its default 300px, which would otherwise hold the container
 * open past the card on phones; it is taken out of the layout at no size
 * rather than hidden, so it still loads.
 */
.gtt-gartner-reviews__widget {
	min-width: 0;
}

.gtt-gartner-reviews__widget iframe[id^="gartner-pi-widget-data"] {
	border: 0;
	height: 0;
	position: absolute;
	width: 0;
}

/* Gartner sets its own navy, light weight and typeface on every element in the
   widget; the card's are used instead. Its per-element sizes are kept. */
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"] * {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

/*
 * The card's own padding and text colour, in place of the widget's inset, blue
 * rule, navy type and clipped 98% list. Gartner's stylesheet loads after this
 * one and scopes its rules to the widget root's id and size, so these repeat
 * that scope to outrank them.
 */
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-link,
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews,
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews li {
	border: 0;
	color: inherit;
	padding: 0;
}

.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews {
	max-height: none;
	width: auto;
}

.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews .gartner-pi-quote,
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews .gartner-pi-datestamp {
	font-family: inherit;
}

/* The review is the card's content, so it is set large enough to fill it. The
   longest of the current reviews still fits the row the other cards set. */
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews .gartner-pi-quote {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--snug);
}

.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews .gartner-pi-datestamp,
.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews .gartner-pi-quote a {
	font-size: var(--wp--preset--font-size--3-x-small);
}

.gtt-gartner-reviews__widget [id^="gartner-pi-widget"][data-size] .gartner-pi-quote {
	margin-bottom: 0;
}

.gtt-gartner-reviews__widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * One review at a time, faded in as it takes its turn. The reviews share one
 * grid cell rather than taking turns in the flow, so the card is always as
 * tall as the longest of them and the row does not jump as they change.
 */
.gtt-gartner-reviews__widget.is-rotating ul {
	display: grid;
}

.gtt-gartner-reviews__widget.is-rotating li {
	grid-area: 1 / 1;
	opacity: 0;
	transition:
		opacity 0.6s ease,
		visibility 0s linear 0.6s;
	visibility: hidden;
}

.gtt-gartner-reviews__widget.is-rotating li.is-active {
	opacity: 1;
	transition: opacity 0.6s ease;
	visibility: visible;
}

/* With reduced motion every review is listed, and the list scrolls in place. */
.gtt-gartner-reviews__widget.is-static [id^="gartner-pi-widget"][data-size] .gartner-pi-reviews {
	max-height: 20rem;
	overflow-y: auto;
}

/*
 * Share links at the foot of a resource hero.
 *
 * Centre the "Share" label on its capitals, level with the icons. Founders Grotesk
 * sits its capitals about 0.245em high in the line box; text-box trims the box to the
 * capitals so the flex row centres them, and without it the label is moved down by
 * the measured offset instead. See the same correction in core_button.css.
 */
.gtt-share-links > p {
	translate: 0 0.245em;
}

@supports (text-box: trim-both cap alphabetic) {
	.gtt-share-links > p {
		text-box: trim-both cap alphabetic;
		translate: none;
	}
}

/* On a gated resource the form column is pinned on the right as the page scrolls, so the
   share links move to the left, out from under it. */
.wp-block-cover__inner-container:has(.is-style-sticky-form) > .gtt-share-links {
	justify-content: flex-start;
}