/**
 * core/group and core/column style variations.
 */

.wp-block-group.is-style-gc-card,
.wp-block-column.is-style-gc-card,
.wp-block-group.is-style-gc-card-hover,
.wp-block-column.is-style-gc-card-hover {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	box-shadow: var( --wp--preset--shadow--card );
	padding: var( --wp--preset--spacing--40 );
	height: 100%;
}

.wp-block-group.is-style-gc-card-hover,
.wp-block-column.is-style-gc-card-hover {
	transition: transform 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), border-color 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wp-block-group.is-style-gc-card-hover:hover,
.wp-block-column.is-style-gc-card-hover:hover {
	transform: translateY( -4px );
	border-color: rgba( 11, 95, 88, 0.32 );
	box-shadow: var( --wp--preset--shadow--raised );
}

.wp-block-group.is-style-gc-outline,
.wp-block-column.is-style-gc-outline {
	background: transparent;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg );
	padding: var( --wp--preset--spacing--40 );
	height: 100%;
}

.wp-block-group.is-style-gc-panel {
	background: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--xl );
	padding: var( --wp--preset--spacing--50 );
}

/* Glass reads correctly only on a dark or image background. */

.wp-block-group.is-style-gc-glass {
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: var( --wp--custom--radius--lg );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	padding: var( --wp--preset--spacing--40 );
	color: #fff;
	height: 100%;
}

.wp-block-group.is-style-gc-glass :where( h1, h2, h3, h4, h5, h6 ) {
	color: #fff;
}

.wp-block-group.is-style-gc-glass p {
	color: rgba( 255, 255, 255, 0.82 );
}

/* Backdrops --------------------------------------------------------------- */

.wp-block-group.is-style-gc-dot-grid,
.wp-block-group.is-style-gc-grid-lines {
	position: relative;
	isolation: isolate;
}

.wp-block-group.is-style-gc-dot-grid::before,
.wp-block-group.is-style-gc-grid-lines::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Fade the texture out towards the edges so it never fights the content. */
	-webkit-mask-image: radial-gradient( ellipse at center, #000 35%, transparent 78% );
	mask-image: radial-gradient( ellipse at center, #000 35%, transparent 78% );
}

.wp-block-group.is-style-gc-dot-grid::before {
	background-image: radial-gradient( circle, rgba( 7, 49, 47, 0.07 ) 1px, transparent 1px );
	background-size: 24px 24px;
}

.wp-block-group.is-style-gc-grid-lines::before {
	background-image:
		linear-gradient( rgba( 7, 49, 47, 0.05 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 7, 49, 47, 0.05 ) 1px, transparent 1px );
	background-size: 44px 44px;
}

/* Sticky sidebar ---------------------------------------------------------- */

.wp-block-group.is-style-gc-sticky {
	position: sticky;
	top: calc( var( --wp--custom--header--height ) + 1.5rem );
}

@media ( max-width: 781px ) {
	.wp-block-group.is-style-gc-sticky {
		position: static;
	}
}

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

	.wp-block-group.is-style-gc-card-hover:hover,
	.wp-block-column.is-style-gc-card-hover:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Phone layout
   ---------------------------------------------------------------------- */

/* Everything below is scoped to phones and tablets unless a comment says why it
   is not. 781px is where core stacks its columns; 600px is where a card or a
   heading actually runs out of width. Sizes are changed by re-pointing the
   preset token on the element, never by fighting the `has-*-font-size` classes,
   which WordPress prints with !important. */

@media ( max-width: 600px ) {
	.wp-block-group.is-style-gc-card,
	.wp-block-column.is-style-gc-card,
	.wp-block-group.is-style-gc-card-hover,
	.wp-block-column.is-style-gc-card-hover,
	.wp-block-group.is-style-gc-outline,
	.wp-block-column.is-style-gc-outline,
	.wp-block-group.is-style-gc-glass {
		padding: var( --wp--preset--spacing--30 ); /* 32 -> 24: same inset as the query cards and FAQ rows */
	}
	.wp-block-group.is-style-gc-panel {
		padding: 1.75rem var( --wp--preset--spacing--30 ); /* 48 -> 28 / 24 */
	}
	/* Instances that carry padding inline (contact form card, tool-page panel). */
	.wp-block-group.is-style-gc-card[style*="padding"],
	.wp-block-group.is-style-gc-card-hover[style*="padding"] {
		padding: var( --wp--preset--spacing--30 ) !important;
	}
	.wp-block-group.is-style-gc-panel[style*="padding"] {
		padding: 1.75rem var( --wp--preset--spacing--30 ) !important;
	}
}

@media ( max-width: 781px ) {
	/* An arrow link that closes a card keeps its 44px hit area but stops adding 13px of invisible bottom padding. */
	:is(.is-style-gc-card, .is-style-gc-card-hover, .is-style-gc-outline) > .wp-block-buttons:last-child > .wp-block-button.is-style-gc-arrow {
		margin-bottom: -0.8125rem;
	}
}