/* ============================================================================
   EUX Blocks — Problem Trio Section
   Three-column "where things break down" section with three theme variants:

     .eux-block--problem-trio--light  — white bg, dark cards (B1 pattern)
     .eux-block--problem-trio--dark   — ink bg, glass cards w/ light mockup (B2)
     .eux-block--problem-trio--cream  — cream bg, dark cards (B1 pattern)

   Light and cream variants share the B1 card chrome (dark card with light
   mockup-area inside). Dark variant uses B2 chrome (glass card, mockup
   spans the top, body below). Markup is uniform across all three; the
   per-theme styling is what changes.

   Visual reference: exports/3-card-columns/Gutenberg Block - 3 card columns.html
   (uploaded design package, parsed to inform every value here).

   Defensive scoping: every selector starts with `.eux-block--problem-trio`
   (or a theme modifier on the same wrapper) to beat Salient's broad
   defaults. See salient-coexistence.md.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Section defaults shared across all three themes
   -------------------------------------------------------------------------- */
.eux-block--problem-trio {
	padding-block: 96px;
}

@media (max-width: 720px) {
	.eux-block--problem-trio {
		padding-block: 64px;
	}
}

.eux-block--problem-trio .eux-problem-section__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

@media (max-width: 980px) {
	.eux-block--problem-trio .eux-problem-section__inner {
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   Section header — eyebrow / h2 / sub
   -------------------------------------------------------------------------- */
.eux-block--problem-trio .eux-problem-section__hdr.wp-block-group {
	max-width: 760px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eux-block--problem-trio .eux-eyebrow {
	display: inline-flex;
	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;
}

/* Small purple bar before the eyebrow text — matches design reference. */
.eux-block--problem-trio .eux-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
}

.eux-block--problem-trio .eux-problem-section__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;
	color: var(--eux-black);
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}

/* Italic <em> inside the heading ("break down") — purple, italic. */
.eux-block--problem-trio .eux-problem-section__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--eux-woo-500);
}

.eux-block--problem-trio .eux-problem-section__sub {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   3-column grid — desktop 3 equal columns, mobile stacks
   -------------------------------------------------------------------------- */
.eux-block--problem-trio .eux-problem-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
	margin: 0;
}

@media (max-width: 900px) {
	.eux-block--problem-trio .eux-problem-grid.wp-block-group {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Kill core/group's default vertical flex behaviour on grid children — they
   shouldn't gain auto margins or wrapper padding. */
.eux-block--problem-trio .eux-problem-grid.wp-block-group > * {
	margin: 0;
}

/* ==========================================================================
   THEME: LIGHT — white bg, dark cards (image 3 + design HTML)
   ========================================================================== */
.eux-block--problem-trio--light {
	background: var(--eux-white);
	color: var(--eux-black);
}

/* ==========================================================================
   THEME: CREAM — cream bg, dark cards (image 1)
   Shares card chrome with light, only the section bg differs.
   ========================================================================== */
.eux-block--problem-trio--cream {
	background: var(--eux-cream-100);
	color: var(--eux-black);
}

/* ==========================================================================
   THEME: DARK — ink bg with light text and glass cards (image 2)
   ========================================================================== */
.eux-block--problem-trio--dark {
	background: var(--eux-ink-900);
	color: var(--eux-cream-100);
}

.eux-block--problem-trio--dark .eux-eyebrow {
	color: var(--eux-woo-200);
}
.eux-block--problem-trio--dark .eux-eyebrow::before {
	background: var(--eux-woo-200);
}
.eux-block--problem-trio--dark .eux-problem-section__title {
	color: var(--eux-cream-100);
}
.eux-block--problem-trio--dark .eux-problem-section__title em {
	color: var(--eux-woo-300);
}
.eux-block--problem-trio--dark .eux-problem-section__sub {
	color: rgba(244, 240, 236, 0.7);
}

/* ==========================================================================
   CARD — base structure shared across themes
   Markup is uniform; theme modifiers below restyle.
   --------------------------------------------------------------------------
   Structure (rendered by problem-card/render.php):
     <article.eux-problem-card>
       <span.eux-problem-card__num>01 / 03</span>   ← optional, B1-themes only
       <div.eux-problem-card__inner>
         [eux/problem-mockup]   ← :first-child gets media styling
         <p.eux-problem-card__eyebrow>...</p>
         <h3.eux-problem-card__title>...</h3>
         <ul.eux-problem-card__list>...</ul>
       </div>
     </article>
   ========================================================================== */
.eux-block--problem-trio .eux-problem-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	margin: 0;
}

.eux-block--problem-trio .eux-problem-card__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* The mockup is the first child inside __inner. CSS treats it as the
   "media slot" — different padding, aspect, background per theme. */
.eux-block--problem-trio .eux-problem-card__inner > .eux-block--problem-mockup,
.eux-block--problem-trio .eux-problem-card__inner > :first-child {
	margin: 0;
}

/* ==========================================================================
   CARD — B1 chrome (used for CREAM theme only)
   Dark card with cream-50 mockup region inside, dark body below.
   --------------------------------------------------------------------------
   v0.36.34 — Light theme moved OUT of this rule into its own B0 block
   below. Adrian's design reference (screenshot 3 in his v0.36.34 message)
   shows the light variant should be WHITE cards on a white section bg —
   not the dark cards we shared with cream. The B1 dark-on-cream pattern
   was correct for the cream theme (which keeps it), but read as wrong on
   light bg since the section number and card chrome both became dark
   blocks on a near-white page.
   ========================================================================== */
.eux-block--problem-trio--cream .eux-problem-card {
	background: #0e0e0e;
	color: var(--eux-cream-100);
	padding: 20px;
}

/* Card number — absolute, top-right (cream/B1 only) */
.eux-block--problem-trio--cream .eux-problem-card__num {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--eux-font-display);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: rgba(244, 240, 236, 0.4);
	pointer-events: none;
	z-index: 2;
}

/* Mockup region — rounded interior card with cream-50 fill */
.eux-block--problem-trio--cream .eux-problem-card__inner > .eux-block--problem-mockup,
.eux-block--problem-trio--cream .eux-problem-card__inner > :first-child {
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	margin-bottom: 22px;
	background: var(--eux-cream-50);
	overflow: hidden;
}

/* ==========================================================================
   CARD — B0 chrome (used for LIGHT theme)
   White card on white section bg, thin grey border, dark text.
   --------------------------------------------------------------------------
   v0.36.34 — Split from B1. The light variant now uses a clean light-on-
   light treatment that matches the design reference's "Light · 02 Three
   problems" screen but with white cards instead of the design package's
   dark b1-card fill — Adrian's call for a softer light-theme treatment.
   Mockup region keeps the cream-50 fill so the WP-themed mockups read the
   same across all three themes (light/cream/dark) — only the surrounding
   card chrome changes.
   ========================================================================== */
.eux-block--problem-trio--light .eux-problem-card {
	background: #ffffff;
	color: var(--eux-ink-800);
	padding: 20px;
	border: 1px solid var(--eux-ink-100);
}

/* Card number — absolute, top-right (light/B0). Muted ink grey since the
   card itself is white, not dark like the cream variant. */
.eux-block--problem-trio--light .eux-problem-card__num {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--eux-font-display);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: var(--eux-ink-300);
	pointer-events: none;
	z-index: 2;
}

/* Mockup region — same cream-50 fill as cream/dark variants, but with a
   thin inner border because there's no contrasting dark card around it
   to give it edge definition on the white card. */
.eux-block--problem-trio--light .eux-problem-card__inner > .eux-block--problem-mockup,
.eux-block--problem-trio--light .eux-problem-card__inner > :first-child {
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	margin-bottom: 22px;
	background: var(--eux-cream-50);
	border: 1px solid var(--eux-ink-100);
	overflow: hidden;
}

/* ==========================================================================
   Card body items — eyebrow / title / list / (paragraph)
   --------------------------------------------------------------------------
   v0.36.31 — Typography is now THEME-AGNOSTIC. Only colours vary per theme
   (defined in the theme-specific blocks further down). Earlier versions
   had the dark theme using `--eux-font-display` + letter-spacing 0.14em on
   the eyebrow while light/cream used `--eux-font-mono` + 0.08em, plus a
   400 vs 500 title weight split. Both differences caused horizontal width
   to shift by a few pixels when switching themes, which tipped short
   strings like "Built For Today, Not Tomorrow" from one line to two.
   Editors saw this as the layout "jumping around" between themes —
   confusing because the content was identical.

   The unified spec below uses the light/cream values (mono eyebrow at
   0.08em + 400-weight title) because they give the widest text rendering
   headroom, so any string that fits on one line under any theme will now
   fit under all of them.
   ========================================================================== */
.eux-block--problem-trio .eux-problem-card__eyebrow {
	font-family: var(--eux-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
	/* v0.36.42 — Salient applies an unscoped `p { padding-bottom: 1.5em }`
	   (~24px) to every paragraph in content areas, which lands on top of
	   our 10px margin and gives the eyebrow far too much air below. Zero
	   the padding so only our margin controls the gap. Same defensive
	   pattern used on bento paragraphs in v0.36.23. */
	padding-bottom: 0;
	/* Colour set per theme below */
}

.eux-block--problem-trio .eux-problem-card__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.012em;
	margin: 0 0 14px;
	/* Colour set per theme below */
}

/* Body items — eyebrow / title / list (theme-specific COLOURS only).
   v0.36.34 — Split light from cream. Light has dark text on white cards;
   cream keeps the cream-tinted text on dark cards. */

/* Eyebrow colour */
.eux-block--problem-trio--light .eux-problem-card__eyebrow {
	color: var(--eux-woo-purple);
}
.eux-block--problem-trio--cream .eux-problem-card__eyebrow {
	color: var(--eux-woo-200);
}

/* Title colour */
.eux-block--problem-trio--light .eux-problem-card__title {
	color: var(--eux-black);
}
.eux-block--problem-trio--cream .eux-problem-card__title {
	color: var(--eux-cream-100);
}

.eux-block--problem-trio--light .eux-problem-card__list,
.eux-block--problem-trio--light .eux-problem-card__list.wp-block-list,
.eux-block--problem-trio--cream .eux-problem-card__list,
.eux-block--problem-trio--cream .eux-problem-card__list.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 9px;
}
/* v0.36.52 — light-theme card lists use a tighter 6px gap to balance
   against the lighter visual weight of ink-700 bullets on a white card.
   The cream-theme rule above stays at 9px because it sits on a darker
   card background where the bullets need more breathing room.
   Declared AFTER the combined rule so the cascade resolves correctly:
   identical specificity (0,3,0 / 0,4,0 for the .wp-block-list compound),
   later wins. */
.eux-block--problem-trio--light .eux-problem-card__list,
.eux-block--problem-trio--light .eux-problem-card__list.wp-block-list {
	gap: 6px;
}

/* List item base — only theme-agnostic structure here. Text colour split per theme. */
.eux-block--problem-trio--light .eux-problem-card__list li,
.eux-block--problem-trio--cream .eux-problem-card__list li {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	padding-left: 18px;
	position: relative;
	list-style: none;
}
.eux-block--problem-trio--light .eux-problem-card__list li {
	color: var(--eux-ink-700);
}
.eux-block--problem-trio--cream .eux-problem-card__list li {
	color: rgba(244, 240, 236, 0.75);
}
.eux-block--problem-trio--light .eux-problem-card__list li::marker,
.eux-block--problem-trio--cream .eux-problem-card__list li::marker { content: ''; }

.eux-block--problem-trio--light .eux-problem-card__list li::before,
.eux-block--problem-trio--cream .eux-problem-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 2px;
	background: var(--eux-woo-300);
}

/* ==========================================================================
   CARD — B2 chrome (used for DARK theme)
   Glass card with cream mockup region spanning the top, dark body below.
   ========================================================================== */
.eux-block--problem-trio--dark .eux-problem-card {
	background: rgba(244, 240, 236, 0.03);
	border: 1px solid rgba(244, 240, 236, 0.08);
	padding: 0;
}

/* The card number is hidden in B2 — design reference doesn't show it
   inside the dark variant cards. */
.eux-block--problem-trio--dark .eux-problem-card__num {
	display: none;
}

/* Mockup region. Background is cream-50 to match the light/cream theme
   variants — so the diagrams sit on a bright surface inside the dark
   card chrome.
   --------------------------------------------------------------------
   Inset 20px top + 20px sides so the mockup region has the SAME visible
   width as the B1 cards (light/cream themes). Without this, the dark
   card's `padding: 0` lets the mockup span the full card width and the
   diagram inside ends up visually wider than the same diagram in the
   sibling themes — design wants all three themes to match width.
   --------------------------------------------------------------------
   Achieved by giving the wrapper transparent padding (which inherits
   the card's glass background) and the cream-50 fill on an inner box.
   Easier: just give the mockup region a top + side margin and let
   border-radius round it like the B1 mockup. */
.eux-block--problem-trio--dark .eux-problem-card__inner > .eux-block--problem-mockup,
.eux-block--problem-trio--dark .eux-problem-card__inner > :first-child {
	aspect-ratio: 16 / 10;
	background: var(--eux-cream-50);
	margin: 20px 20px 0;
	border-radius: 12px;
	overflow: hidden;
}

/* Body content — needs its own padding since the card has none */
.eux-block--problem-trio--dark .eux-problem-card__eyebrow {
	/* Typography now inherits from the shared rule above —
	   only colour and box-model differ on dark. */
	color: var(--eux-woo-200);
	margin: 22px 20px 0;
}

.eux-block--problem-trio--dark .eux-problem-card__title {
	color: var(--eux-cream-100);
	margin: 12px 20px 0;
}

.eux-block--problem-trio--dark .eux-problem-card__list,
.eux-block--problem-trio--dark .eux-problem-card__list.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 16px 20px 26px;
	display: grid;
	gap: 9px;
}

.eux-block--problem-trio--dark .eux-problem-card__list li {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(244, 240, 236, 0.72);
	padding-left: 18px;
	position: relative;
	list-style: none;
}
.eux-block--problem-trio--dark .eux-problem-card__list li::marker { content: ''; }

.eux-block--problem-trio--dark .eux-problem-card__list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--eux-woo-300);
}

/* ==========================================================================
   DIAGRAM PRIMITIVES — used by problem-mockup SVGs
   --------------------------------------------------------------------------
   The mockup SVGs use a shared set of classes (.pipe, .node-box, .pulse--ring
   etc). Colors are driven by CSS custom properties on the mockup wrapper,
   defaulting to the light/cream-bg palette. Dark theme overrides these
   variables to swap to the ink palette.
   ========================================================================== */
.eux-block--problem-trio .eux-block--problem-mockup {
	--diag-line:       var(--eux-ink-300);
	--diag-live:       var(--eux-woo-500);
	--diag-err:        #B0321A;
	--diag-node-bg:    #FFFFFF;
	--diag-node-stroke: var(--eux-ink-300);
	--diag-node-text:  var(--eux-ink-800);
	--diag-rule-text:  var(--eux-ink-700);
	--diag-budget:     var(--eux-woo-500);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dark theme intentionally does NOT override the diagram variables —
   we want the SAME light/cream diagram palette across all three themes.
   Per design: the dark card's mockup region sits on a cream-50 surface
   (set below), so the diagrams read as bright "light interactive mockups"
   floating against the dark card chrome — visually consistent with the
   light and cream themes. */

.eux-block--problem-trio .eux-block--problem-mockup svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Pipe primitives — dashed lines with optional flow animation */
.eux-block--problem-trio .eux-block--problem-mockup .pipe {
	fill: none;
	stroke: var(--diag-line);
	stroke-width: 1.6;
	stroke-dasharray: 6 4;
}
.eux-block--problem-trio .eux-block--problem-mockup .pipe--live {
	stroke: var(--diag-live);
	animation: euxProblemPipeFlow 1.4s linear infinite;
}
.eux-block--problem-trio .eux-block--problem-mockup .pipe--broken {
	stroke: var(--diag-err);
	stroke-dasharray: 5 3;
}

/* Node boxes (ERP / POS / WOO / etc) */
.eux-block--problem-trio .eux-block--problem-mockup .node-box {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1.2;
}
.eux-block--problem-trio .eux-block--problem-mockup .node-box--hub {
	fill: var(--diag-live);
	stroke: var(--diag-live);
}
.eux-block--problem-trio .eux-block--problem-mockup .node-lbl {
	font-family: var(--eux-font-display);
	font-size: 10px;
	font-weight: 600;
	fill: var(--diag-node-text);
	letter-spacing: 0.04em;
}
.eux-block--problem-trio .eux-block--problem-mockup .node-lbl--inv {
	fill: #FFFFFF;
}

/* Error markers — circle with X */
.eux-block--problem-trio .eux-block--problem-mockup .err-bdg {
	font-family: var(--eux-font-mono);
	font-size: 9.5px;
	fill: var(--diag-err);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--problem-trio .eux-block--problem-mockup .err-circle {
	fill: var(--diag-node-bg);
	stroke: var(--diag-err);
	stroke-width: 1.5;
}
.eux-block--problem-trio .eux-block--problem-mockup .err-x {
	stroke: var(--diag-err);
	stroke-width: 2;
	stroke-linecap: round;
}
.eux-block--problem-trio .eux-block--problem-mockup .err-dot {
	fill: var(--diag-err);
}
.eux-block--problem-trio .eux-block--problem-mockup .err-vline {
	stroke: var(--diag-err);
	stroke-width: 1;
	stroke-dasharray: 2 3;
	fill: none;
	opacity: 0.7;
}
.eux-block--problem-trio .eux-block--problem-mockup .err-text {
	font-family: var(--eux-font-mono);
	font-size: 9px;
	fill: var(--diag-err);
}

/* Pulse ring (expanding circle around error markers) */
.eux-block--problem-trio .eux-block--problem-mockup .pulse--ring {
	fill: none;
	stroke: var(--diag-err);
	stroke-width: 1.4;
	transform-origin: center;
	animation: euxProblemPipeRing 1.8s ease-out infinite;
}

/* Rule boxes (IF role=B2B, etc.) */
.eux-block--problem-trio .eux-block--problem-mockup .rule-box {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .rule-text {
	font-family: var(--eux-font-mono);
	font-size: 9px;
	fill: var(--diag-rule-text);
}

/* Performance chart elements */
.eux-block--problem-trio .eux-block--problem-mockup .axis-line {
	stroke: var(--diag-line);
	stroke-width: 1;
	fill: none;
}
.eux-block--problem-trio .eux-block--problem-mockup .budget-line {
	stroke: var(--diag-budget);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	fill: none;
}
.eux-block--problem-trio .eux-block--problem-mockup .budget-text {
	font-family: var(--eux-font-mono);
	font-size: 9px;
	fill: var(--diag-budget);
}

/* ==========================================================================
   v2 SOLUTION-STATE PRIMITIVES (v0.34.0)
   --------------------------------------------------------------------------
   Three additional preset diagrams (conversion-funnel, signal-hub,
   pipeline-health) introduced shapes that don't exist in the v1 problem-
   state diagrams. New classes only — never reused names from v1 so a
   trio can mix problem and solution cards in any order without cascade
   surprises. All driven by the same --diag-* custom properties as the
   v1 primitives above so theming stays consistent.
   ========================================================================== */

/* Funnel bars — used by `conversion-funnel`. Base bars in the line color
   (subdued), accent bars in the live color (purple) to draw the eye to
   the conversion-lift zone. */
.eux-block--problem-trio .eux-block--problem-mockup .funnel-bar {
	fill: var(--diag-line);
	opacity: 0.85;
}
.eux-block--problem-trio .eux-block--problem-mockup .funnel-bar--accent {
	fill: var(--diag-live);
	opacity: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .funnel-pct {
	font-family: var(--eux-font-mono);
	font-size: 9px;
	fill: var(--diag-node-text);
	letter-spacing: 0.06em;
}
.eux-block--problem-trio .eux-block--problem-mockup .funnel-label {
	font-family: var(--eux-font-display);
	font-size: 9.5px;
	font-weight: 600;
	fill: var(--diag-node-text);
	letter-spacing: 0.04em;
}
.eux-block--problem-trio .eux-block--problem-mockup .funnel-uplift {
	font-family: var(--eux-font-mono);
	font-size: 9.5px;
	fill: var(--diag-live);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* OK badge — solution-state counterpart of `.err-bdg`. Same font/sizing,
   but uses the live color instead of the error color. */
.eux-block--problem-trio .eux-block--problem-mockup .ok-bdg {
	font-family: var(--eux-font-mono);
	font-size: 9.5px;
	fill: var(--diag-live);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--problem-trio .eux-block--problem-mockup .ok-check {
	fill: var(--diag-live);
}
/* Pulse ring in live color — analogue of v1 `.pulse--ring` but green/live
   instead of error red. Used to mark "success" seams in the pipeline-
   health and conversion-funnel diagrams. */
.eux-block--problem-trio .eux-block--problem-mockup .ok-ring {
	fill: none;
	stroke: var(--diag-live);
	stroke-width: 1.4;
	transform-origin: center;
	animation: euxProblemOkRing 2s ease-out infinite;
}

/* Live event packet riding along an offset-path. Used by pipeline-health
   to show 2 packets travelling the bottom pipe on staggered delays. */
.eux-block--problem-trio .eux-block--problem-mockup .packet {
	fill: var(--diag-live);
	animation: euxProblemPacket 2.4s linear infinite;
}

/* Live counter line — small mono text used for "next run · 14s · 312
   events / hr · 99.99% uptime" type readouts inside the mockup. */
.eux-block--problem-trio .eux-block--problem-mockup .live-line {
	font-family: var(--eux-font-mono);
	font-size: 9px;
	fill: var(--diag-rule-text);
	letter-spacing: 0.04em;
}

/* ============================================================================
   WordPress-themed mockup helper classes (v0.36.29)
   ----------------------------------------------------------------------------
   These were added when 9 new WP-specific problem-mockup presets shipped:
   wp-theme-pile, wp-competition, wp-scale-limits, wp-seo, wp-paid-acq,
   wp-tracking, wp-nurture, wp-automation, wp-reporting.

   They mirror the helper classes in the design package's breakdowns-
   standalone.css (under `.brk-diag`), scoped to our
   `.eux-block--problem-mockup` wrapper so they don't leak.

   All values drive off the same --diag-* token scale the rest of the
   mockup primitives use, so dark theme + accent toggle both work
   automatically — no per-class theme/accent overrides needed.
   ============================================================================ */

/* Plugin tile — rounded rectangle background for each plugin pill in the
   `wp-theme-pile` mockup. Default is the cream-50 surface with the
   neutral node stroke; the --err variant tints red for conflict markers. */
.eux-block--problem-trio .eux-block--problem-mockup .plg-tile {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .plg-tile--err {
	fill: rgba(176, 50, 26, 0.06);
	stroke: var(--diag-err);
}
/* Plugin tile label — small uppercase plugin name (YOAST, Elementor, etc). */
.eux-block--problem-trio .eux-block--problem-mockup .plg-icon {
	font-family: var(--eux-font-display);
	font-weight: 700;
	font-size: 9px;
	fill: var(--diag-node-text);
}
/* Letter mark inside each plugin's brand-coloured circle (Y, E, B, etc).
   Always white so it reads regardless of brand colour. */
.eux-block--problem-trio .eux-block--problem-mockup .plg-logo-letter {
	font-family: var(--eux-font-display);
	font-weight: 800;
	font-size: 7px;
	fill: #fff;
}

/* Twin frame — site-thumbnail rectangle for the `wp-competition` mockup.
   Shows fanned, near-identical site clones radiating off a source theme. */
.eux-block--problem-trio .eux-block--problem-mockup .twin-frame {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1;
}
/* Skeleton bars inside each thumbnail — soft-edged, low-opacity. */
.eux-block--problem-trio .eux-block--problem-mockup .twin-bar {
	fill: var(--diag-line);
	opacity: 0.55;
}
/* CTA-shaped bar — slightly higher opacity to imply emphasis. */
.eux-block--problem-trio .eux-block--problem-mockup .twin-cta {
	fill: var(--diag-line);
	opacity: 0.85;
}
/* Tag/label text under each twin frame ("your site", "competitor a", etc). */
.eux-block--problem-trio .eux-block--problem-mockup .twin-tag {
	font-family: var(--eux-font-mono);
	font-size: 7.5px;
	fill: var(--eux-ink-500);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   WP capability mockups (wp-seo, wp-paid-acq, wp-tracking, wp-nurture,
   wp-automation, wp-reporting) use a common `.wp-*` set:
   - wp-skeleton    : neutral filler bar inside a card mockup
   - wp-row-fill    : data fill bar (search ranking, etc.)
   - wp-bar--*      : metric bars
   - wp-stamp       : accent-coloured rectangular badge
   - wp-success-*   : green-tinted badge for completion / conversion
   - wp-text-tag    : uppercase mono accent text
   - wp-text-strong : bold display text inside cards
   ---------------------------------------------------------------------------- */
.eux-block--problem-trio .eux-block--problem-mockup .wp-skeleton {
	fill: var(--eux-ink-100);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-skeleton--alt {
	fill: var(--eux-ink-200);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-row-fill {
	fill: var(--diag-line);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-row-fill--accent {
	fill: var(--diag-live);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-row-bg {
	fill: var(--eux-cream-50);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-bar {
	fill: var(--diag-live);
	opacity: 0.85;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-bar--muted {
	fill: var(--diag-line);
	opacity: 0.4;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-bar--accent {
	fill: var(--diag-live);
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-chip {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-chip-text {
	font-family: var(--eux-font-display);
	font-size: 9px;
	font-weight: 600;
	fill: var(--diag-node-text);
	letter-spacing: 0.03em;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-chip-text--sub {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: var(--eux-ink-500);
	letter-spacing: 0.04em;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-stamp {
	fill: var(--eux-woo-50);
	stroke: var(--eux-woo-purple);
	stroke-width: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-stamp-text {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: var(--eux-woo-purple);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-success-stamp {
	fill: rgba(31, 138, 91, 0.10);
	stroke: #1F8A5B;
	stroke-width: 1;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-success-text {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: #1F8A5B;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-text-tag {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: var(--eux-woo-purple);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--problem-trio .eux-block--problem-mockup .wp-text-strong {
	font-family: var(--eux-font-display);
	font-size: 10.5px;
	font-weight: 600;
	fill: var(--diag-node-text);
}

@keyframes euxProblemPipeFlow {
	to { stroke-dashoffset: -20; }
}
@keyframes euxProblemPipeRing {
	0%   { r: 6;  opacity: 0.9; }
	100% { r: 22; opacity: 0; }
}
@keyframes euxProblemOkRing {
	0%   { r: 6;  opacity: 0.9; }
	100% { r: 18; opacity: 0; }
}
@keyframes euxProblemPacket {
	0%   { offset-distance: 0%;   opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Pause continuous animations when the parent card is off-screen.
   `eux-is-in-view` is added to .eux-problem-card by frontend.js. When
   absent, freeze all internal animations to save CPU. See motion-and-
   reveal.md "pause-rule trap".
   -------------------------------------------------------------------------- */
.eux-block--problem-trio .eux-problem-card:not(.eux-is-in-view) .eux-block--problem-mockup * {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.eux-block--problem-trio .eux-block--problem-mockup .pipe--live,
	.eux-block--problem-trio .eux-block--problem-mockup .pulse--ring,
	.eux-block--problem-trio .eux-block--problem-mockup .ok-ring,
	.eux-block--problem-trio .eux-block--problem-mockup .packet {
		animation: none !important;
	}
}