/* ============================================================================
   EUX Blocks — Pro Partner
   ----------------------------------------------------------------------------
   "Authority" section with two columns:
     LEFT  — eyebrow + title + sub + stats grid
     RIGHT — partnership rows (each with copy + badge image)

   Theme cascades from the section wrapper into stats and rows via the
   `eux-block--pro-partner--{theme}` modifier class. Badge images come in
   two variants (light-background, dark-background); CSS shows/hides the
   right one based on the section theme — no JS swap needed.

   Visual reference: exports/pro-partner/pro-partner-standalone.css
   Defensive scoping per salient-coexistence.md.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Section base
   -------------------------------------------------------------------------- */
.eux-block--pro-partner {
	padding-block: 96px;
}
@media (max-width: 720px) {
	.eux-block--pro-partner {
		padding-block: 64px;
	}
}

/* Two-column wrap — copy left, rows right. 1fr 1.15fr because the rows
   side has badge images that need a bit more breathing room. */
.eux-block--pro-partner .eux-pro-partner__wrap {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 980px) {
	.eux-block--pro-partner .eux-pro-partner__wrap {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ==========================================================================
   LEFT COLUMN — eyebrow, title, sub, stats
   --------------------------------------------------------------------------
   Prose (eyebrow, title, sub) is LEFT-aligned by default — reads naturally
   from the left edge of the column. The stats cards alone are right-
   justified so they sit visually adjacent to the partnership rows on
   the right rather than floating in the column's bottom-left corner.
   ========================================================================== */
.eux-block--pro-partner .eux-pro-partner__copy.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: none;
	margin: 0;
}

/* Eyebrow — inline-flex so the purple line + text sit together at the
   start of the line. `align-self: flex-start` keeps it tight to the
   left edge so the line-break after doesn't leave empty space. */
.eux-block--pro-partner .eux-pro-partner__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 12px;
	font-family: var(--eux-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eux-woo-500);
	margin: 0;
}
.eux-block--pro-partner .eux-pro-partner__eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
}

.eux-block--pro-partner .eux-pro-partner__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--eux-ink-900);
	text-wrap: balance;
	max-width: 18ch;
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.eux-block--pro-partner .eux-pro-partner__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--eux-woo-500);
}

.eux-block--pro-partner .eux-pro-partner__sub {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	max-width: 56ch;
}

/* Stats wrapper — sits inside the left copy column, adjacent to the
   partnership rows on the right at >=980px.
   --------------------------------------------------------------------------
   v0.32.2 — RESPECT the editor's Justify Items dropdown choice. Previously
   this rule force-pushed the stats to the right edge with `margin: 0 auto`,
   which overrode whatever `is-content-justification-*` class the editor
   added in the sidebar (e.g. "Justify items left"). The default for this
   block remains right-aligned (matches the design reference), but editors
   can now choose left/center/right and have it actually take effect.

   Implementation: use flex with `justify-content` driven by the WordPress
   `is-content-justification-*` modifier class. The wrapper IS a
   `.wp-block-group` and Gutenberg's layout system will inject its own
   flex/grid rules — we beat them by being more specific
   (.eux-block--pro-partner ... .wp-block-group).

   Default (no justification class set in the editor): LEFT-aligned. The
   stats sit at the left edge of the copy column, in line with the eyebrow,
   title, and sub-copy above. Editor's choice in the sidebar still WINS if
   they pick something else.

   Tested editor classes:
     - is-content-justification-left   → left edge of column (default)
     - is-content-justification-center → center of column
     - is-content-justification-right  → right edge of column
   -------------------------------------------------------------------------- */
.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	padding: 0;
	max-width: 100%;
	/* Default = LEFT-aligned. Stats sit at the start of the column,
	   visually anchored under the headline/sub-copy. Editor's "Justify
	   items" choice in the sidebar overrides this via the explicit rules
	   below. */
	justify-content: flex-start;
}

/* Explicit editor choices — beat Gutenberg's own layout rules with extra
   specificity. */
.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-left {
	justify-content: flex-start;
}
.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-center {
	justify-content: center;
}
.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-right {
	justify-content: flex-end;
}
.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-space-between {
	justify-content: space-between;
}

/* Individual stat card */
.eux-block--pro-partner .eux-pro-stat {
	border: 1px solid var(--eux-ink-100);
	border-radius: 14px;
	padding: 18px 24px;
	min-width: 140px;
	background: var(--eux-white);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.eux-block--pro-partner .eux-pro-stat__num {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--eux-woo-500);
	font-variant-numeric: tabular-nums;
}

.eux-block--pro-partner .eux-pro-stat__lbl {
	font-family: var(--eux-font-body);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--eux-ink-700);
	margin-top: 6px;
}

/* ==========================================================================
   RIGHT COLUMN — partnership rows
   ========================================================================== */
.eux-block--pro-partner .eux-pro-partner__rows.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: none;
	margin: 0;
}

/* Each partnership row */
.eux-block--pro-partner .eux-pro-row {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 28px;
	align-items: center;
	padding: 24px 28px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 14px;
	transition:
		transform var(--eux-dur-base, 220ms) var(--eux-ease-out, ease),
		box-shadow var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--pro-partner .eux-pro-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.06);
}

/* When the row has no badge, the copy spans the full width */
.eux-block--pro-partner .eux-pro-row--badge-none {
	grid-template-columns: 1fr;
}

.eux-block--pro-partner .eux-pro-row__copy {
	min-width: 0;
}

.eux-block--pro-partner .eux-pro-row__heading {
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--eux-ink-900);
	margin: 0 0 6px;
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}

.eux-block--pro-partner .eux-pro-row__body {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
}

/* Badge images — two variants emitted; CSS shows the right one per theme.
   Default behavior: light-background variant is visible, dark-background
   variant is hidden. Dark theme flips this. */
.eux-block--pro-partner .eux-pro-row__badge {
	width: 100%;
	max-width: 220px;
	height: auto;
	justify-self: end;
	display: block;
}
.eux-block--pro-partner .eux-pro-row__badge--dark {
	display: none; /* default: cream/light theme uses light-bg badge */
}

/* Mobile — stack copy above badge */
@media (max-width: 980px) {
	.eux-block--pro-partner .eux-pro-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.eux-block--pro-partner .eux-pro-row__badge {
		justify-self: start;
		max-width: 280px;
	}

	/* Below 980px the two columns stack vertically. The stats no longer
	   have partnership rows beside them to align with, so let the wrapper
	   sit naturally on the left edge of the column regardless of the
	   editor's desktop alignment choice. */
	.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group,
	.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-right,
	.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-center,
	.eux-block--pro-partner .eux-pro-partner__stats.wp-block-group.is-content-justification-space-between {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   THEME: CREAM (default) — cream-50 section, white cards/rows
   ========================================================================== */
.eux-block--pro-partner--cream {
	background: var(--eux-cream-50);
}

/* ==========================================================================
   THEME: LIGHT — pure white section
   ========================================================================== */
.eux-block--pro-partner--light {
	background: var(--eux-white);
}

/* ==========================================================================
   THEME: DARK — ink section, glass-effect cards
   ========================================================================== */
.eux-block--pro-partner--dark {
	background: var(--eux-ink-900);
	color: var(--eux-cream-100);
}

.eux-block--pro-partner--dark .eux-pro-partner__eyebrow         { color: var(--eux-woo-200); }
.eux-block--pro-partner--dark .eux-pro-partner__eyebrow::before { background: var(--eux-woo-200); }
.eux-block--pro-partner--dark .eux-pro-partner__title           { color: var(--eux-cream-100); }
.eux-block--pro-partner--dark .eux-pro-partner__title em        { color: var(--eux-woo-300); }
.eux-block--pro-partner--dark .eux-pro-partner__sub             { color: rgba(244, 240, 236, 0.7); }

/* Stat cards — glass */
.eux-block--pro-partner--dark .eux-pro-stat {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}
.eux-block--pro-partner--dark .eux-pro-stat__num { color: var(--eux-woo-300); }
.eux-block--pro-partner--dark .eux-pro-stat__lbl { color: rgba(244, 240, 236, 0.7); }

/* Partnership rows — glass */
.eux-block--pro-partner--dark .eux-pro-row {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--pro-partner--dark .eux-pro-row:hover {
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}
.eux-block--pro-partner--dark .eux-pro-row__heading { color: var(--eux-cream-100); }
.eux-block--pro-partner--dark .eux-pro-row__body    { color: rgba(244, 240, 236, 0.7); }

/* DARK THEME — swap badge image variants */
.eux-block--pro-partner--dark .eux-pro-row__badge--light { display: none; }
.eux-block--pro-partner--dark .eux-pro-row__badge--dark  { display: block; }

/* ==========================================================================
   REDUCED MOTION — disable row hover lift
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eux-block--pro-partner .eux-pro-row {
		transition: none !important;
	}
	.eux-block--pro-partner .eux-pro-row:hover {
		transform: none !important;
	}
}