/* ============================================================================
   EUX Blocks — Integration CTA (Mosaic)
   ----------------------------------------------------------------------------
   Closing CTA section. Cream backdrop, four hairline corner brackets, two-
   column grid (editable copy on the left, 4×3 mosaic of integrated-tool
   tiles on the right). Tiles cycle through connecting → integrated states
   driven by frontend.js while the section is in view.

   Defensive scoping — every selector starts with `.eux-block--integration-cta`,
   both to beat Salient's blanket column / paragraph / heading defaults on
   specificity, and to stop our rules leaking onto other parts of the page.

   Layout note — !important on a handful of layout-critical properties
   (display, flex, grid) defends against Salient's high-specificity
   column-system CSS, which otherwise turns flex/grid contexts into block
   layouts. Same defensive pattern used elsewhere in eux-blocks.
   ============================================================================ */

.eux-block--integration-cta { display: block; }

/* ==========================================================================
   Section padding + cream backdrop
   --------------------------------------------------------------------------
   Background is set as a class default. Editors who change it from the
   sidebar produce an inline `style="background:..."` on the wrapper,
   which wins over this rule via inline-style specificity — so the
   default doesn't need !important and won't fight editor choices.
   ========================================================================== */
.eux-block--integration-cta {
	padding: 88px 0;
	background: var(--eux-cream);
	color: var(--eux-black);
	position: relative;
}
@media (max-width: 720px) {
	.eux-block--integration-cta {
		padding: 64px 0;
	}
}

/* ==========================================================================
   Inner container — relative positioning so the corner brackets anchor
   to the container, not the alignfull section. This keeps the brackets
   aligned with the readable column even when the section spans the
   viewport.
   ========================================================================== */
.eux-block--integration-cta .eux-icta {
	position: relative;
}

/* ==========================================================================
   Corner brackets — four hairline L-shapes pinned to the inner container's
   corners. Pure CSS, no SVG. Border colour comes from the ink-300 token
   so it reads as a subtle frame rather than a hard line.
   ========================================================================== */
.eux-block--integration-cta .eux-icta__bracket {
	position: absolute;
	width: 32px;
	height: 32px;
	border-color: var(--eux-ink-300);
	pointer-events: none;
	/* Each bracket draws two of its four borders — corner-specific rules below. */
}
.eux-block--integration-cta .eux-icta__bracket--tl {
	top: 0; left: 0;
	border-top: 1px solid;
	border-left: 1px solid;
}
.eux-block--integration-cta .eux-icta__bracket--tr {
	top: 0; right: 0;
	border-top: 1px solid;
	border-right: 1px solid;
}
.eux-block--integration-cta .eux-icta__bracket--bl {
	bottom: 0; left: 0;
	border-bottom: 1px solid;
	border-left: 1px solid;
}
.eux-block--integration-cta .eux-icta__bracket--br {
	bottom: 0; right: 0;
	border-bottom: 1px solid;
	border-right: 1px solid;
}

/* ==========================================================================
   Two-column grid wrap
   --------------------------------------------------------------------------
   Source design uses 1fr / 1.1fr — the mosaic is slightly wider than the
   copy so the 4-column tile grid breathes. At <880px we stack and the
   mosaic moves under the copy.

   v0.17.0 note — TWO layout structures in play:
     - Legacy (pre-v0.17.0): .eux-icta__grid > .eux-icta__copy + .eux-icta__mosaic
     - New (v0.17.0+):       .wp-block-columns.eux-icta__cols >
                              .eux-icta__col-copy + .eux-icta__col-mockup
   ========================================================================== */

/* --- LEGACY layout (pre-v0.17.0) --- */
.eux-block--integration-cta .eux-icta__grid {
	display: grid !important;
	grid-template-columns: 1fr 1.1fr;
	gap: 64px;
	align-items: center;
	padding: 36px 36px 0;
}
@media (max-width: 880px) {
	.eux-block--integration-cta .eux-icta__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
@media (max-width: 720px) {
	.eux-block--integration-cta .eux-icta__grid {
		padding: 32px 16px 0;
	}
}

/* --- NEW layout (v0.17.0+): core/columns reshape --- */
.eux-block--integration-cta .wp-block-columns.eux-icta__cols {
	gap: 64px;
	align-items: center;
	margin: 0;
	padding: 36px 36px 0;
}
.eux-block--integration-cta .wp-block-columns.eux-icta__cols > .wp-block-column.eux-icta__col-copy {
	flex: 0 0 calc(47.6% - 32px); /* 1 / (1 + 1.1) ≈ 47.6% */
}
.eux-block--integration-cta .wp-block-columns.eux-icta__cols > .wp-block-column.eux-icta__col-mockup {
	flex: 0 0 calc(52.4% - 32px); /* 1.1 / (1 + 1.1) ≈ 52.4% */
}
@media (max-width: 880px) {
	.eux-block--integration-cta .wp-block-columns.eux-icta__cols {
		flex-direction: column;
		gap: 40px;
	}
	.eux-block--integration-cta .wp-block-columns.eux-icta__cols > .wp-block-column.eux-icta__col-copy,
	.eux-block--integration-cta .wp-block-columns.eux-icta__cols > .wp-block-column.eux-icta__col-mockup {
		flex: 1 1 auto;
		width: 100%;
	}
}
@media (max-width: 720px) {
	.eux-block--integration-cta .wp-block-columns.eux-icta__cols {
		padding: 32px 16px 0;
	}
}

/* The new copy column needs the same vertical-stack treatment as
   legacy .eux-icta__copy below. */
.eux-block--integration-cta .wp-block-column.eux-icta__col-copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 12px;
}

/* ==========================================================================
   LEFT column — copy stack
   ========================================================================== */
.eux-block--integration-cta .eux-icta__copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 12px;
}

/* H2 — large display weight 400 with negative tracking. The 18ch max-width
   keeps "Planning an integration project?" on two lines at the design
   reference's font size; longer custom headings naturally wrap further.
   Same Salient `word-break: normal` defence as the other section h2s. */
.eux-block--integration-cta .wp-block-heading.eux-icta__title,
.eux-block--integration-cta .eux-icta__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.06;
	letter-spacing: -0.024em;
	margin: 0;
	color: var(--eux-black);
	text-wrap: balance;
	max-width: 18ch;
	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}
/* Purple <em> accent for editors who select part of the heading and
   apply the eux/accent rich-text format. Matches the convention used
   in service-hero and daas-slack. */
.eux-block--integration-cta .eux-icta__title em,
.eux-block--integration-cta .eux-icta__title .eux-accent {
	color: var(--eux-woo-purple);
	font-style: normal;
}

/* Sub paragraph — single line of supporting copy. Capped at 50ch so
   long sentences wrap reasonably regardless of column width. */
.eux-block--integration-cta .eux-icta__sub,
.eux-block--integration-cta p.eux-icta__sub {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	max-width: 50ch;
	margin: 0;
}

/* CTAs — single button by default, but the buttons block can hold more.
   We override WP's default `width: 100%` on .wp-block-button__link so a
   long label sizes to content rather than stretching across the column. */
.eux-block--integration-cta .wp-block-buttons.eux-icta__ctas {
	gap: 12px;
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
}
.eux-block--integration-cta .wp-block-buttons.eux-icta__ctas .wp-block-button {
	margin: 0;
	width: auto !important;
	max-width: 100%;
}
.eux-block--integration-cta .wp-block-buttons.eux-icta__ctas .wp-block-button .wp-block-button__link {
	width: auto !important;
}

/* ==========================================================================
   RIGHT column — 4×3 mosaic of tiles
   --------------------------------------------------------------------------
   Tiles are aspect-ratio: 1 squares so the mosaic stays a clean 4×3
   regardless of container width. Gap of 10px matches the design ref.
   At narrow widths the grid drops to 3 columns then 2 so individual
   tiles don't squeeze below their badge + name height.
   ========================================================================== */
.eux-block--integration-cta .eux-icta__mosaic {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
@media (max-width: 720px) {
	.eux-block--integration-cta .eux-icta__mosaic {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 480px) {
	.eux-block--integration-cta .eux-icta__mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Individual tile — white card with a hairline border. The transform/
   shadow/border colour all transition together so the is-active state
   reads as a coherent lift, not three separate property changes. */
.eux-block--integration-cta .eux-icta__tile {
	aspect-ratio: 1 / 1;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 12px;
	padding: 10px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	position: relative;
	transition:
		border-color var(--eux-dur-base) var(--eux-ease-out),
		background   var(--eux-dur-base) var(--eux-ease-out),
		box-shadow   var(--eux-dur-base) var(--eux-ease-out),
		transform    var(--eux-dur-base) var(--eux-ease-out);
}

/* Coloured badge — fixed-size rounded square with the brand monogram.
   `flex: 0 0 auto` is the standard Salient defence so the parent's
   flex-grow doesn't stretch the badge vertically. */
.eux-block--integration-cta .eux-icta__mark {
	flex: 0 0 auto !important;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	display: grid !important;
	place-items: center;
	color: var(--eux-white);
	font-family: var(--eux-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	transition: transform var(--eux-dur-base) var(--eux-ease-out);
}

/* Tile name — small display text under the badge. The Salient defence
   below stops `flex-grow: 1` from blowing up the line-box. */
.eux-block--integration-cta .eux-icta__name {
	flex: 0 0 auto !important;
	font-family: var(--eux-font-display);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--eux-ink-700);
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

/* Tile status — monospace caption beneath the name. Empty by default
   (renders an &nbsp; so its line still reserves height); JS swaps in
   "· connecting" or "✓ Integrated" as the cycle advances. */
.eux-block--integration-cta .eux-icta__status {
	flex: 0 0 auto !important;
	font-family: var(--eux-font-mono);
	font-size: 10px;
	line-height: 1;
	color: var(--eux-ink-400);
	letter-spacing: 0.04em;
	min-height: 10px;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   ACTIVE state — tile is "currently connecting" in the cycle.
   --------------------------------------------------------------------------
   Purple outline + soft 2px glow + small upward lift. The badge nudges
   up 8% to telegraph "this is the focal point right now". Status text
   recolours to purple to match the outline.

   Why box-shadow ring instead of outline:
   outline doesn't transition in older browsers and doesn't follow
   border-radius reliably; a wide box-shadow with 0 spread renders as
   a halo that respects the tile's rounded corners and animates cleanly.
   ========================================================================== */
.eux-block--integration-cta .eux-icta__tile.is-active {
	border-color: var(--eux-woo-purple);
	box-shadow: 0 0 0 2px rgba(166, 89, 248, 0.18);
	transform: translateY(-2px);
}
.eux-block--integration-cta .eux-icta__tile.is-active .eux-icta__mark {
	transform: scale(1.08);
}
.eux-block--integration-cta .eux-icta__tile.is-active .eux-icta__status {
	color: var(--eux-woo-purple);
}

/* --------------------------------------------------------------------------
   DONE state — tile has finished integrating in the current cycle pass.
   --------------------------------------------------------------------------
   Soft green background tint with a green-bordered card and bold green
   status text. We avoid going too saturated so the row of "Integrated"
   tiles doesn't drown out the active one — the active tile should
   still be the focal point even when most tiles are already done.
   ========================================================================== */
.eux-block--integration-cta .eux-icta__tile.is-done {
	background: #f7fbf6;
	border-color: #c8e6c1;
}
.eux-block--integration-cta .eux-icta__tile.is-done .eux-icta__status {
	color: #2e7d32;
	font-weight: 600;
}

/* ==========================================================================
   PAUSE-ON-OFFSCREEN
   --------------------------------------------------------------------------
   We don't need a CSS pause rule for the JS-driven cycle (frontend.js
   handles its own pause-on-offscreen via the same IntersectionObserver
   that gates the reveal). But we DO want the tile-state CSS transitions
   to stay calm when the user scrolls back into view after the section
   has cycled — no rule needed; transitions only fire when classes
   change, which only happens while the cycle is running.
   ========================================================================== */

/* ==========================================================================
   PURPLE BUTTON STYLE — `eux-icta-purple`, registered in eux-blocks.php.
   --------------------------------------------------------------------------
   Solid purple pill, right-arrow that nudges on hover. Visually identical
   to `eux-slack-purple` but scoped to this block so the two stay
   independently styleable if the design diverges later.
   ========================================================================== */
.eux-block--integration-cta .wp-block-button.is-style-eux-icta-purple .wp-block-button__link {
	background: var(--eux-woo-purple);
	color: var(--eux-white);
	border: 1px solid var(--eux-woo-purple);
	border-radius: 999px;
	padding: 14px 22px;
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	transition:
		background-color var(--eux-dur-base) var(--eux-ease-out),
		border-color     var(--eux-dur-base) var(--eux-ease-out),
		color            var(--eux-dur-base) var(--eux-ease-out),
		transform        var(--eux-dur-base) var(--eux-ease-out);
}
.eux-block--integration-cta .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:hover,
.eux-block--integration-cta .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:focus-visible {
	background: var(--eux-woo-700);
	border-color: var(--eux-woo-700);
	transform: translateY(-1px);
}
/* Right-pointing arrow appended via ::after — same SVG-mask technique
   used by eux-daas-cream and eux-slack-purple so the icon tracks
   currentColor on hover. */
.eux-block--integration-cta .wp-block-button.is-style-eux-icta-purple .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	transition: transform var(--eux-dur-base) var(--eux-ease-out);
}
.eux-block--integration-cta .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* ==========================================================================
   Editor preview tweaks
   --------------------------------------------------------------------------
   Inside Gutenberg the tiles render at rest — no cycling animation in
   the canvas. We also defang the section's negative-margin full-width
   behaviour so the editor canvas doesn't horizontal-scroll while
   authors edit.
   ========================================================================== */
.editor-styles-wrapper .eux-block--integration-cta {
	padding: 56px 0;
	/* Editor-only affordance: a minimum height + visible dashed outline
	   so the section is unambiguously present on the canvas even when
	   the inner template (heading + paragraph + button + mosaic) hasn't
	   populated yet. Without this, a freshly-inserted or migration-empty
	   instance can look like a blank gap between sibling blocks. Hidden
	   on the front-end automatically — the `.editor-styles-wrapper`
	   prefix scopes this to Gutenberg only. */
	min-height: 220px;
	outline: 1px dashed rgba(0, 0, 0, 0.08);
	outline-offset: -2px;
}
.editor-styles-wrapper .eux-block--integration-cta[data-align="full"] {
	margin-left: 0;
	margin-right: 0;
}
/* Make focus outlines visible on the cream backdrop while editing. */
.editor-styles-wrapper .eux-block--integration-cta .wp-block-heading:focus,
.editor-styles-wrapper .eux-block--integration-cta .wp-block-paragraph:focus {
	outline: 1px dashed rgba(0, 0, 0, 0.18);
	outline-offset: 4px;
}