/* Group block styles (inc/block-styles.php). */

/* Feature grid: thin lines between the items, and a ripple of dots behind an
   item on hover (assets/js/block-styles.js). Set the columns in the block's
   Layout settings and keep its block spacing at 0 so the lines meet. Each
   item draws the line on its right and bottom; the lines past the grid's
   edge are clipped, and the grid draws its own top and bottom lines. */
.is-style-feature-grid {
	overflow: hidden;
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.is-style-feature-grid > * {
	position: relative;
	box-shadow: 1px 1px 0 0 var(--wp--preset--color--border-light);
}
.is-style-feature-grid > * > * { position: relative; z-index: 1; }
.is-style-feature-grid > * > .cb-dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }

/* Logos behind a card: a Group with two Scrolling Logo Rows blocks and a card
   (a Group) between them. Phones: the rows sit above and below the card.
   1024px and up: the rows fill each half of the section, behind the card. */
.is-style-logo-band { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.is-style-logo-band > #integrations-scroll--plugins,
.is-style-logo-band > #integrations-scroll--platforms { max-width: none; }
.is-style-logo-band > .wp-block-group { order: 2; position: relative; z-index: 10; margin-block: 2rem; }
.is-style-logo-band .logo-scroll-tile { width: 120px; height: 68px; }
.is-style-logo-band .logo-scroll-tile img { max-width: 90px; max-height: 54px; object-fit: contain; }
@media (min-width: 1024px) {
	.is-style-logo-band { display: block; }
	.is-style-logo-band > .wp-block-group { margin-block: 0; }
}

/* Logo strip: a row of linked logos, grey until hovered. On phones the row
   scrolls sideways on its own (assets/js/block-styles.js repeats the logos
   so the loop has no gap). */
.is-style-logo-strip img { filter: grayscale(1); opacity: 0.6; transition: filter 0.2s, opacity 0.2s; }
.is-style-logo-strip a:hover img { filter: none; opacity: 1; }
.is-style-logo-strip .wp-block-image { margin: 0; }
.is-style-logo-strip .wp-block-image a { display: block; }
@media (max-width: 782px) {
	.is-style-logo-strip { flex-wrap: nowrap !important; justify-content: flex-start !important; width: max-content; animation: cb-logo-strip 30s linear infinite; }
	.is-style-logo-strip:hover { animation-play-state: paused; }
	.is-style-logo-strip img { max-width: none; }
}
@media (min-width: 783px) {
	.is-style-logo-strip > .cb-logo-strip-copy { display: none; }
}
@media (max-width: 782px) {
	:where(.wp-block-group):has(> .is-style-logo-strip) { overflow: hidden; }
}
@keyframes cb-logo-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.is-style-logo-strip { animation: none; }
}

/* Dotted background: a fine dot grid that fades out at the top and bottom
   edges. */
.is-style-dotted {
	position: relative;
	background-color: var(--grey-50);
	background-image:
		radial-gradient(var(--accent-tint-18) 1px, transparent 1px),
		radial-gradient(var(--accent-tint-18) 1px, transparent 1px);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}
.is-style-dotted::before,
.is-style-dotted::after { content: ""; position: absolute; left: 0; right: 0; height: 6rem; z-index: 1; pointer-events: none; }
.is-style-dotted::before { top: 0; background: linear-gradient(to bottom, var(--wp--preset--color--base), transparent); }
.is-style-dotted::after { bottom: 0; background: linear-gradient(to top, var(--wp--preset--color--base), transparent); }
.is-style-dotted > * { position: relative; z-index: 2; }

/* Glow: a soft blue-green light rising from the bottom of a dark section. */
.is-style-glow { position: relative; overflow: hidden; }
.is-style-glow::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: 120%;
	height: 75%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(67, 206, 162, .5), rgba(24, 90, 157, .4) 55%, transparent);
	filter: blur(30px);
	pointer-events: none;
}
.is-style-glow > * { position: relative; }