.is-style-column-rules,
.wp-block-columns.is-style-column-rules {
	--kbd-column-rule-gap: var(
		--wp--style--block-gap,
		var(--wp--preset--spacing--30, 1.5rem)
	);
	overflow: visible;

	> .wp-block-column {
		position: relative;
		overflow: visible;
	}

	> .wp-block-column:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 0;
		right: calc(var(--kbd-column-rule-gap) / -2);
		bottom: 0;
		width: 1px;
		transform: translateX(50%);
		background-color: var(
			--kbd-column-rule-color,
			var(--wp--preset--color--contrast, currentColor)
		);
		pointer-events: none;
		z-index: 2;
	}

	@media (max-width: 781px) {
		&:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:last-child) {
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom: none;

			&::after {
				display: block;
				top: calc(100% + var(--kbd-column-rule-gap) / 2);
				right: 0;
				bottom: auto;
				left: 0;
				width: auto;
				height: 1px;
				transform: translateY(-50%);
			}
		}
	}
}

.editor-styles-wrapper .block-editor-block-list__block.wp-block-columns.is-style-column-rules,
.block-editor-iframe__body .wp-block-columns.is-style-column-rules {
	overflow: visible !important;
}

.editor-styles-wrapper .wp-block-group:has(.wp-block-columns.is-style-column-rules),
.block-editor-iframe__body .wp-block-group:has(.wp-block-columns.is-style-column-rules) {
	overflow: visible !important;
}

.is-style-sticky-left-columns {
	position: relative;
  & > .wp-block-column:first-child {
    position: relative;
      & > .child-container {
        position: sticky;
        top: calc(80px + var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px));
        z-index: 10;
        height: 300px;
          /* height: calc(100vh - var(--wp-admin--admin-bar--height) - var(--header-height)); */
        & > * {
          position: absolute;
          top: 0;
          width: 100%;
          border-radius: 30px;
          overflow: clip;
          /* transform: translateY(-50%); */
          &:not(:first-child) {
            transition: opacity 0.3s ease;
            opacity: 0;
              &.is-active {
              opacity: 1;
            }
          }
        }
        
    }
  }
  & > .wp-block-column:last-child {
    padding-top: calc(80px + var(--wp-admin--admin-bar--height, 0px) + var(--header-height, 0px));
  }
}

.wp-block-post-content:has(.is-style-post-article) {
	overflow: visible;
}

/*
 * Single post article (templates/single.html). Figma at 1440: 933px article
 * column, 40px gap, 311px Written by sidebar. Article type and spacing are
 * template-wide in paragraph.css, heading.css, list.css and below.
 */
.wp-block-columns.is-style-post-article {
	align-items: stretch;
	overflow: visible;
	gap: var(--wp--preset--spacing--40);

	> .wp-block-column {
		min-width: 0;
		overflow: visible;
	}

	> .wp-block-column:first-child > .wp-block-post-content {
		margin: 0;
	}

	.wp-block-post-featured-image,
	.wp-block-image img,
	.wp-block-video video,
	.wp-block-embed .wp-block-embed__wrapper {
		overflow: clip;
		border-radius: calc(20px * var(--kbd-scale, 1));
	}

	/* Not sticky: the sidebar scrolls with the article. JS (postSidebarOffset)
	   drops it to the top of the header image so it lines up beside it. */
	> .wp-block-column:last-child {
		padding-top: var(--kbd-post-sidebar-offset, 0px);
	}

	@media screen and (min-width: 782px) {
		> .wp-block-column:first-child {
			flex: 0 1 calc(1036px * var(--kbd-scale, 1)) !important;
		}

		> .wp-block-column:last-child {
			flex: 0 0 calc(345.6px * var(--kbd-scale, 1)) !important;
		}
	}
}

/*
 * Single post content flow (frontend and the post editor): one blank line
 * between blocks, subheads sit tight on their text but lists keep the blank
 * line, extra room around quotes and callouts.
 */
:where(.single-post, .post-type-post.editor-styles-wrapper) .wp-block-post-content.is-layout-flow {
	& > * + * {
		margin-block-start: 1lh;
	}

	& > :is(h2, h3, h4) + :not(.wp-block-list) {
		margin-block-start: 0;
	}

	& > * + :is(.wp-block-quote, .is-style-callout),
	& > :is(.wp-block-quote, .is-style-callout) + * {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/*
 * Post header: plain blocks at the top of the post content, no wrapper, so
 * they can be moved or copied freely (patterns/post-header.php inserts them).
 * The H1 is the title, a paragraph in the Subtitle style follows it, and an
 * Image or Featured Image right after either one is the header image.
 * Figma at 1440 (x1.111): 100px title, 30px subtitle, 22px between them,
 * 106px to the image, 49px from the header to the intro.
 */
:where(.single-post, .post-type-post.editor-styles-wrapper) .wp-block-post-content.is-layout-flow {
	& > h1.wp-block-heading {
		max-width: calc(1036px * var(--kbd-scale, 1));
		color: var(--wp--preset--color--contrast, #101617);
		font-size: var(--wp--custom--font-size--article-title);
		font-weight: var(--wp--custom--font-weight--medium);
		letter-spacing: -0.02em;
		line-height: 1;
		text-wrap: pretty;
	}

	& > h1.wp-block-heading:first-child {
		margin-block-start: 0;
	}

	& > p.is-style-subtitle {
		font-size: var(--wp--custom--font-size--article-intro);
		font-weight: var(--wp--custom--font-weight--regular);
		letter-spacing: 0;
		line-height: calc(34 / 30);
		text-wrap: pretty;
	}

	/* Header image: an Image or Featured Image right after the title or subtitle */
	& > :is(h1.wp-block-heading, p.is-style-subtitle) + :is(.wp-block-post-featured-image, .wp-block-image) {
		overflow: clip;
		border-radius: calc(44.44px * var(--kbd-scale, 1));

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 934 / 600;
			object-fit: cover;
			border-radius: inherit;
		}
	}

	/* No featured image set: the block renders nothing on the frontend. */
	& > .wp-block-post-featured-image:not(:has(img, .components-placeholder, .wp-block-post-featured-image__placeholder)) {
		display: none;
	}

	/* Spacing, in order of precedence: after the header, then inside it. */
	& > h1.wp-block-heading + *,
	& > p.is-style-subtitle + *,
	& > :is(h1.wp-block-heading, p.is-style-subtitle) + :is(.wp-block-post-featured-image, .wp-block-image) + * {
		margin-block-start: calc(clamp(32px, 3.78vw, 54.44px) * var(--kbd-scale, 1));
	}

	& > h1.wp-block-heading + p.is-style-subtitle {
		margin-block-start: calc(clamp(12px, 1.7vw, 24.44px) * var(--kbd-scale, 1));
	}

	& > :is(h1.wp-block-heading, p.is-style-subtitle) + :is(.wp-block-post-featured-image, .wp-block-image) {
		margin-block-start: calc(clamp(32px, 8.18vw, 117.78px) * var(--kbd-scale, 1));
	}
}

.wp-block-columns.is-style-case-study-columns {
	--kbd-case-study-gallery-gap: var(--wp--style--block-gap, min(4vw, 46px));
	margin-block: var(--kbd-case-study-gallery-gap);
	gap: var(--kbd-case-study-gallery-gap);

	> .wp-block-column {
		min-width: 0;
	}

	> .wp-block-column > .wp-block-cover {
		width: 100%;
		min-height: unset !important;
		overflow: clip;
		border-radius: calc(clamp(15px, 2vw, 30px) * var(--kbd-scale, 1));

		& > img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&:has(
		.wp-block-column:nth-child(1)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:436'],
				[style*='aspect-ratio: 436']
			)
	):has(
		.wp-block-column:nth-child(2)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:647'],
				[style*='aspect-ratio: 647']
			)
	) {
		> .wp-block-column:nth-child(1) {
			flex: 436 1 0%;
		}

		> .wp-block-column:nth-child(2) {
			flex: 647 1 0%;
		}
	}

	&:has(
		.wp-block-column:nth-child(1)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:647'],
				[style*='aspect-ratio: 647']
			)
	):has(
		.wp-block-column:nth-child(2)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:436'],
				[style*='aspect-ratio: 436']
			)
	) {
		> .wp-block-column:nth-child(1) {
			flex: 647 1 0%;
		}

		> .wp-block-column:nth-child(2) {
			flex: 436 1 0%;
		}
	}

	&:has(
		.wp-block-column:nth-child(1)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:378'],
				[style*='aspect-ratio: 378']
			)
	):has(
		.wp-block-column:nth-child(2)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:707'],
				[style*='aspect-ratio: 707']
			)
	) {
		> .wp-block-column:nth-child(1) {
			flex: 378 1 0%;
		}

		> .wp-block-column:nth-child(2) {
			flex: 707 1 0%;
		}
	}

	&:has(
		.wp-block-column:nth-child(1)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:707'],
				[style*='aspect-ratio: 707']
			)
	):has(
		.wp-block-column:nth-child(2)
			.wp-block-cover.has-aspect-ratio:is(
				[style*='aspect-ratio:378'],
				[style*='aspect-ratio: 378']
			)
	) {
		> .wp-block-column:nth-child(1) {
			flex: 707 1 0%;
		}

		> .wp-block-column:nth-child(2) {
			flex: 378 1 0%;
		}
	}

	&:not(.block-editor-block-list__block) {
		/* Same fade-up as .is-style-fade-up; JS adds .in-viewport. */
		> .wp-block-column {
			opacity: 0;
			translate: 0 40px;
			transition:
				opacity 0.33s ease-in-out,
				translate 0.33s ease-in-out;
		}

		&.in-viewport > .wp-block-column {
			translate: 0 0 !important;
			opacity: 1 !important;
		}
	}
}

.is-style-quote-with-headshot {
  & > .wp-block-column:first-child { 
    aspect-ratio: 1 / 1;
    max-width: 300px;
    position: relative;
    --animation-degree: 0deg;
    & > figure {
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: clip;
      border-radius: 50%;
    }
    &:before {
      content: '';
      position: absolute;
      inset: calc(-45px * (1 - pow(abs(var(--center-percentage) ), .5)) );
      border-radius: 50%;
      z-index: -1;
      background: linear-gradient(calc(var(--center-percentage) * 720deg + 180deg), var(--wp--preset--color--stroke) 0%, transparent 90%);
      mask-image: radial-gradient(transparent calc(71% - 4px), black 71%, black 100%)
    }

    &:after {
      content: '';
      position: absolute;
     
      inset: calc(-90px * (1 - pow(abs(var(--center-percentage) ), .5)) );
      border-radius: 50%;
      z-index: -1;
      background: linear-gradient(calc(var(--center-percentage) * 720deg), var(--wp--preset--color--stroke) 0%, transparent 90%);
      mask-image: radial-gradient(transparent calc(71% - 4px), black 71%, black 100%)
    }
  }
}

/* Sing-along dot hopping across the column headings (utils/bouncingDot.js). */
/*
 * The dot enters and exits past the ends of the columns. Clip it at the
 * surrounding section (full width) instead of the columns, so it comes in
 * from the screen edge without widening the page.
 */
:has(> .wp-block-columns.is-style-bouncing-dot) {
	overflow-x: clip;
}

.wp-block-columns.is-style-bouncing-dot {
	position: relative;
	overflow: visible;

	> .kbd-bouncing-dot {
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: var(--wp--preset--color--accent, #49d31b);
		opacity: 0;
		pointer-events: none;
		z-index: 5;
		will-change: transform;
	}

	/* Each column fades in as the dot lands on its heading (bouncingDot.js). */
	&.is-dot-pending > .wp-block-column {
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	&.is-dot-pending > .wp-block-column.is-dot-landed {
		opacity: 1;
	}

	@media (max-width: 781px) {
		> .kbd-bouncing-dot {
			display: none;
		}
	}
}

/* Column headings underlined in green one after another (utils/underlineSweep.js). */
.wp-block-columns.is-style-underline-sweep {
	&.is-sweep-pending > .wp-block-column {
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	&.is-sweep-pending > .wp-block-column.is-swept {
		opacity: 1;
	}

	/*
	 * Draw each line at the pace of the sweep, not the default 1s. Starts empty:
	 * the global heading rule in style.css would otherwise show it at full width.
	 */
	.wp-block-heading span.kbd-underline {
		--kbd-underline-transition-duration: 0.3s;
		background-size: 0 max(4%, 2px);
	}

	.wp-block-heading span.kbd-underline.kbd-underline--visible {
		background-size: 100% max(4%, 2px);
	}
}

/* Editor: show the finished state. */
.editor-styles-wrapper .wp-block-columns.is-style-underline-sweep :is(h1, h2, h3, h4, h5, h6) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: max(0.04em, 2px);
	text-underline-offset: 0.15em;
}