/* ============================================================================
   EUX Blocks — Split Feature (Tiles)
   ----------------------------------------------------------------------------
   v0.16.1 — Supports two layout structures simultaneously:

     - LEGACY (v0.15.0) — section > inner > grid > [copy, figure.media]
       Used by instances saved before the v0.16.1 upgrade, until they're
       edited and re-saved. Renders identically to v0.15.0 visually.

     - NEW (v0.16.1+) — section > inner > core/columns > [copy column,
       media column with core/image]
       Used by fresh inserts and migrated instances. Image is editor-
       controlled, draggable, has the full core/image toolbar.

   Common bits (theme rules, eyebrow, title, lede, tile list, button
   styles) are shared between both structures — those selectors don't
   care whether the elements sit inside .eux-split__copy (legacy) or
   .eux-split__col-copy (new). Layout-specific selectors are explicitly
   versioned in the section comments below.

   Defensive scoping — every selector starts with `.eux-block--split-feature`
   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.
   ============================================================================ */

.eux-block--split-feature { display: block; }

/* ==========================================================================
   THEME — background + base text colour (applies to both structures)
   --------------------------------------------------------------------------
   Editor sidebar overrides (background-color set via the sidebar) emit
   inline `style="..."` on the wrapper, which wins by specificity. Don't
   use !important here — that would block the override.
   ========================================================================== */
.eux-block--split-feature.eux-split--cream {
	background: var(--eux-cream);
	color: var(--eux-black);
}
.eux-block--split-feature.eux-split--white {
	background: var(--eux-white);
	color: var(--eux-black);
}
.eux-block--split-feature.eux-split--dark {
	background: #060606;
	color: var(--eux-cream);
}

/* ==========================================================================
   Section padding (both structures)
   ========================================================================== */
.eux-block--split-feature {
	padding: 96px 0;
	position: relative;
}
@media (max-width: 720px) {
	.eux-block--split-feature {
		padding: 64px 0;
	}
}

.eux-block--split-feature .eux-split__inner {
	position: relative;
}

/* ==========================================================================
   LAYOUT — LEGACY v0.15.0 structure
   --------------------------------------------------------------------------
   Two-column CSS grid with .eux-split__copy and figure.eux-split__media
   as direct children. Used by un-migrated instances until they're
   re-saved through the editor.
   ========================================================================== */
.eux-block--split-feature .eux-split__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 880px) {
	.eux-block--split-feature .eux-split__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
/* Reversed (legacy): swap columns via explicit grid-column. */
@media (min-width: 881px) {
	.eux-block--split-feature.eux-split--reversed .eux-split__copy  { grid-column: 2; }
	.eux-block--split-feature.eux-split--reversed .eux-split__media { grid-column: 1; grid-row: 1; }
}

/* Legacy copy column — vertical stack. */
.eux-block--split-feature .eux-split__copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 22px;
}

/* ==========================================================================
   LAYOUT — NEW v0.16.1+ structure
   --------------------------------------------------------------------------
   core/columns ships its own flex CSS (display: flex, equal-width
   columns). We just add the gap, vertical alignment, and the
   reversed-flip rule. At core/columns' built-in mobile-stack
   breakpoint (<781px) reversed no-ops because flex-direction:
   row-reverse only affects horizontal layouts.
   ========================================================================== */
.eux-block--split-feature .wp-block-columns.eux-split__cols {
	gap: 64px;
	align-items: center;
	margin: 0;
}
@media (min-width: 782px) {
	.eux-block--split-feature.eux-split--reversed .wp-block-columns.eux-split__cols {
		flex-direction: row-reverse;
	}
}

/* New copy column — same vertical stack as legacy. */
.eux-block--split-feature .wp-block-column.eux-split__col-copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 22px;
}

/* ==========================================================================
   SHARED — eyebrow / title / lede / tiles / CTAs styling
   --------------------------------------------------------------------------
   These selectors don't reference a parent column, so they work in
   both legacy (.eux-split__copy) and new (.eux-split__col-copy)
   structures. No duplication needed.
   ========================================================================== */

/* Eyebrow — small purple uppercase with a short horizontal line prefix. */
.eux-block--split-feature .eux-split__eyebrow,
.eux-block--split-feature p.eux-split__eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eux-woo-purple);
	margin: 0;
	background: transparent !important;
}
.eux-block--split-feature .eux-split__eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}
.eux-block--split-feature.eux-split--dark .eux-split__eyebrow {
	color: var(--eux-woo-200);
}

/* H2 title — display 400 with negative tracking. */
.eux-block--split-feature .wp-block-heading.eux-split__title,
.eux-block--split-feature .eux-split__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 42px);
	line-height: 1.06;
	letter-spacing: -0.024em;
	margin: 0;
	color: var(--eux-ink-900);
	text-wrap: balance;
	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}
.eux-block--split-feature .eux-split__title em,
.eux-block--split-feature .eux-split__title .eux-accent {
	color: var(--eux-woo-purple);
	font-style: normal;
}
.eux-block--split-feature.eux-split--dark .eux-split__title {
	color: var(--eux-cream);
}
.eux-block--split-feature.eux-split--dark .eux-split__title em,
.eux-block--split-feature.eux-split--dark .eux-split__title .eux-accent {
	color: var(--eux-woo-300);
	font-style: italic;
	font-weight: 300;
}

/* Lede paragraph. */
.eux-block--split-feature .eux-split__lede,
.eux-block--split-feature p.eux-split__lede {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--eux-ink-700);
	max-width: 56ch;
	margin: 0;
	background: transparent !important;
}
.eux-block--split-feature.eux-split--dark .eux-split__lede {
	color: rgba(244, 240, 236, 0.72);
}

/* ==========================================================================
   TILES — core/list reshaped into a 2-column tile grid (both structures)
   ========================================================================== */
.eux-block--split-feature .wp-block-list.eux-split__tiles,
.eux-block--split-feature ul.eux-split__tiles,
.eux-block--split-feature .eux-split__tiles {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
@media (max-width: 540px) {
	.eux-block--split-feature .eux-split__tiles {
		grid-template-columns: 1fr;
	}
}
.eux-block--split-feature .eux-split__tiles > li {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 10px;
	padding: 14px 16px 14px 34px;
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--eux-ink-800);
	position: relative;
	margin: 0;
	list-style: none;
}
.eux-block--split-feature .eux-split__tiles > li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 22px;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--eux-woo-purple);
}
.eux-block--split-feature .eux-split__tiles > li::marker {
	content: "";
}
.eux-block--split-feature.eux-split--dark .eux-split__tiles > li {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(244, 240, 236, 0.88);
}
.eux-block--split-feature.eux-split--dark .eux-split__tiles > li::before {
	background: var(--eux-woo-300);
}
.eux-block--split-feature.eux-split--white .eux-split__tiles > li {
	border-color: var(--eux-ink-100);
}

/* ==========================================================================
   CTAs — primary button (both structures)
   ========================================================================== */
.eux-block--split-feature .wp-block-buttons.eux-split__ctas {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
}
.eux-block--split-feature .wp-block-buttons.eux-split__ctas .wp-block-button {
	margin: 0;
	width: auto !important;
	max-width: 100%;
}
.eux-block--split-feature .wp-block-buttons.eux-split__ctas .wp-block-button .wp-block-button__link {
	width: auto !important;
}

/* Reuse the integration-cta purple button style. */
.eux-block--split-feature .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 24px;
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 500;
	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--split-feature .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:hover,
.eux-block--split-feature .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);
}
.eux-block--split-feature .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--split-feature .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:hover::after {
	transform: translateX(3px);
}
.eux-block--split-feature.eux-split--dark .wp-block-button.is-style-eux-icta-purple .wp-block-button__link {
	background: var(--eux-cream);
	color: #060606;
	border-color: var(--eux-cream);
}
.eux-block--split-feature.eux-split--dark .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:hover,
.eux-block--split-feature.eux-split--dark .wp-block-button.is-style-eux-icta-purple .wp-block-button__link:focus-visible {
	background: var(--eux-white);
	border-color: var(--eux-white);
}

/* ==========================================================================
   MEDIA — LEGACY v0.15.0 figure-based image card
   ========================================================================== */
.eux-block--split-feature .eux-split__media {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--eux-cream-100);
	min-height: 420px;
	max-height: 620px;
	display: block;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}
.eux-block--split-feature .eux-split__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	max-height: inherit;
	object-fit: cover;
	object-position: center;
}
.eux-block--split-feature.eux-split--dark .eux-split__media {
	background: rgba(255, 255, 255, 0.04);
	box-shadow: none;
}

/* Legacy placeholder (when no media was uploaded yet). */
.eux-block--split-feature .eux-split__media--placeholder {
	background: linear-gradient(135deg, var(--eux-woo-50) 0%, #EEE3FB 35%, var(--eux-cream) 100%);
	border: 1px dashed var(--eux-ink-200);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.eux-block--split-feature .eux-split__placeholder {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: 32px;
	text-align: center;
}
.eux-block--split-feature .eux-split__placeholder-label {
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eux-woo-700);
}
.eux-block--split-feature.eux-split--dark .eux-split__media--placeholder {
	background: linear-gradient(135deg, #1a1024 0%, #2a153e 60%, #060606 100%);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--split-feature.eux-split--dark .eux-split__placeholder-label {
	color: var(--eux-woo-200);
}

/* ==========================================================================
   MEDIA — NEW v0.16.1+ core/image inside .eux-split__col-media
   --------------------------------------------------------------------------
   Any core/image dropped into the media column gets the rounded-corners
   + soft-shadow card treatment. `:where()` keeps specificity low so
   user customisations from the image-block sidebar (custom border-
   radius, padding, etc.) win cleanly without !important fights.
   ========================================================================== */
.eux-block--split-feature .wp-block-column.eux-split__col-media {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center;
	gap: 12px;
}
.eux-block--split-feature .wp-block-column.eux-split__col-media :where( .wp-block-image ) {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--eux-cream-100);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
	min-height: 420px;
	max-height: 620px;
	width: 100%;
}
.eux-block--split-feature .wp-block-column.eux-split__col-media :where( .wp-block-image img ) {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	max-height: inherit;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
}
.eux-block--split-feature.eux-split--dark .wp-block-column.eux-split__col-media :where( .wp-block-image ) {
	background: rgba(255, 255, 255, 0.04);
	box-shadow: none;
}

/* ==========================================================================
   Editor preview tweaks
   ========================================================================== */
.editor-styles-wrapper .eux-block--split-feature {
	padding: 56px 0;
}
.editor-styles-wrapper .eux-block--split-feature[data-align="full"] {
	margin-left: 0;
	margin-right: 0;
}
.editor-styles-wrapper .eux-block--split-feature .wp-block-heading:focus,
.editor-styles-wrapper .eux-block--split-feature .wp-block-paragraph:focus {
	outline: 1px dashed rgba(0, 0, 0, 0.18);
	outline-offset: 4px;
}
.editor-styles-wrapper .eux-block--split-feature.eux-split--dark .wp-block-heading:focus,
.editor-styles-wrapper .eux-block--split-feature.eux-split--dark .wp-block-paragraph:focus {
	outline-color: rgba(244, 240, 236, 0.3);
}