/* ============================================================================
   EUX Blocks — Bento Box
   ----------------------------------------------------------------------------
   Bento-style multi-row card grid. Three theme variants on the section,
   N-column grid per row, and per-card mockup position (top/left/right).

   Visual reference: exports/bento-box/Gutenberg Block - Bento Box.html
   from the design package.

   Architecture:
     - Section (.eux-block--bento-box) carries the theme modifier class.
       That cascades into rows and cards via descendant selectors here.
     - Row (.eux-bento-row) carries a `--cols-N` modifier for grid.
     - Card (.eux-bento-card) carries a position modifier for flex-direction.

   Defensive scoping per salient-coexistence.md.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Section base — shared across all themes
   -------------------------------------------------------------------------- */
.eux-block--bento-box {
	padding-block: 96px;
}

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

.eux-block--bento-box .eux-bento-section__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

@media (max-width: 980px) {
	.eux-block--bento-box .eux-bento-section__inner {
		gap: 32px;
	}
}

/* --------------------------------------------------------------------------
   Section header (eyebrow + h2 + sub)
   -------------------------------------------------------------------------- */
.eux-block--bento-box .eux-bento-section__hdr.wp-block-group {
	max-width: 760px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eux-block--bento-box .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;
}
.eux-block--bento-box .eux-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
}

.eux-block--bento-box .eux-bento-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;
}

.eux-block--bento-box .eux-bento-section__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--eux-woo-500);
}

.eux-block--bento-box .eux-bento-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;
}

/* --------------------------------------------------------------------------
   ROW — 60-column grid with per-card width spans (v0.32.0+)
   --------------------------------------------------------------------------
   Architecture (v0.32.0+):
     Row inner is a 60-column grid (chosen because 60 is the LCM of every
     denominator we want to support: 2, 3, 4, 5, 6 — so every supported
     fraction lands on an integer span). Each card claims a span via either:

       a) An explicit `width` attribute on the card. Card emits
          `.eux-bento-card--w-<frac>` and the CSS rules below set
          `grid-column: span N` to the matching count of 60. Available
          fractions: 1/4, 1/3, 2/5, 1/2, 3/5, 2/3, 3/4, 1/1.

       b) `width: 'auto'` (default — back-compat for pre-v0.32 saves).
          The card falls back to the row's `columns` attribute and spans
          60/columns. So a row with `columns=2` and two auto-width cards
          gets the old 50/50 behaviour (30+30).

   Cards with explicit widths and auto-width cards can coexist in the same
   row (auto cards eat whatever 60-count remains).

   At ≤820px every card collapses to a single column row (mobile).

   The legacy `.eux-bento-row--cols-N` modifier class is retained only so
   the `auto`-width fallback below can compute its span — we no longer use
   `grid-template-columns: repeat(N, 1fr)` directly. Old saved pages with
   no width attribute on any card continue rendering exactly as before.
   -------------------------------------------------------------------------- */
.eux-block--bento-box .eux-bento-row__inner {
	display: grid;
	/* `minmax(0, 1fr)` instead of plain `1fr` — `1fr` is implicitly
	   `minmax(auto, 1fr)`, where the `auto` minimum lets each column
	   grow to fit content's intrinsic min-content. With 60 columns,
	   any unshrinkable content inside the cards (long titles, KPI
	   text, chart SVG intrinsic widths) forces the entire grid
	   wider than the viewport. On mobile that pushed cards to
	   ~1000px wide on a 480px viewport — visible as the bento
	   section's right edge being cut off by horizontal overflow.
	   `minmax(0, 1fr)` lets columns shrink to 0, so the grid
	   respects its parent's width and clips overflowing content
	   via the card's `overflow: hidden` instead of expanding to
	   accommodate it. */
	grid-template-columns: repeat(60, minmax(0, 1fr));
	gap: 18px;
}

/* AUTO-WIDTH FALLBACK — span derived from the row's `columns` attribute.
   Selectors target only cards WITHOUT a `--w-*` modifier so explicit widths
   on the same row aren't overridden. */
.eux-block--bento-box .eux-bento-row--cols-1 .eux-bento-row__inner > :not([class*="eux-bento-card--w-"]) { grid-column: span 60; }
.eux-block--bento-box .eux-bento-row--cols-2 .eux-bento-row__inner > :not([class*="eux-bento-card--w-"]) { grid-column: span 30; }
.eux-block--bento-box .eux-bento-row--cols-3 .eux-bento-row__inner > :not([class*="eux-bento-card--w-"]) { grid-column: span 20; }
.eux-block--bento-box .eux-bento-row--cols-4 .eux-bento-row__inner > :not([class*="eux-bento-card--w-"]) { grid-column: span 15; }

/* EXPLICIT WIDTHS. Each card sets its own modifier; row column count is
   ignored for these (they consume the literal fraction of 60). */
.eux-block--bento-box .eux-bento-card--w-1-4  { grid-column: span 15; }  /* 1/4 = 15/60 */
.eux-block--bento-box .eux-bento-card--w-1-3  { grid-column: span 20; }  /* 1/3 = 20/60 */
.eux-block--bento-box .eux-bento-card--w-2-5  { grid-column: span 24; }  /* 2/5 = 24/60 */
.eux-block--bento-box .eux-bento-card--w-1-2  { grid-column: span 30; }  /* 1/2 = 30/60 */
.eux-block--bento-box .eux-bento-card--w-3-5  { grid-column: span 36; }  /* 3/5 = 36/60 */
.eux-block--bento-box .eux-bento-card--w-2-3  { grid-column: span 40; }  /* 2/3 = 40/60 */
.eux-block--bento-box .eux-bento-card--w-3-4  { grid-column: span 45; }  /* 3/4 = 45/60 */
.eux-block--bento-box .eux-bento-card--w-1-1  { grid-column: span 60; }  /* full */

@media (max-width: 820px) {
	/* On mobile, every card claims a full row regardless of width. */
	.eux-block--bento-box .eux-bento-row__inner > * {
		grid-column: span 60 !important;
	}

	/* v0.36.9 — Critical fix: the 60-column grid has 18px gaps between
	   tracks. Even with `minmax(0, 1fr)` (v0.36.7), the gaps themselves
	   are an irreducible minimum width: 59 gaps × 18px = 1062px. On a
	   mobile viewport (e.g. 400px), the grid container is ~352px wide,
	   but the gaps demand 1062px, so the grid (and every card inside it)
	   inflates to 1062px and horizontally overflows the section. This
	   was reproduced and measured in puppeteer at every viewport from
	   400px to 820px.

	   Fix: abandon the 60-column grid below 820px and switch to a
	   single-column flex layout. Cards are all full-width on mobile
	   anyway (see the `grid-column: span 60 !important` above, which
	   becomes a no-op on flex items but is left in place so this
	   refactor is non-destructive to the other styles). The `gap: 18px`
	   carries over to flex-column and now applies vertically between
	   stacked cards — exactly the spacing we want. */
	.eux-block--bento-box .eux-bento-row__inner {
		display: flex;
		flex-direction: column;
	}
}

/* v0.36.9 — Tablet (821-1158px): the same gap-overflow bug exists in
   this range. At 1024px viewport the bento-row inner is ~928px wide
   but the 60-track grid with 18px column-gap demands 1062px. Cards
   inside still horizontally overflow.

   Below the flex-column breakpoint, the design wants side-by-side
   cards (2-up, 3-up) on tablet. So we can't just stack everything.
   The fix is to tighten the column-gap on tablet so the grid's
   irreducible minimum (59 × column-gap) fits inside the container.

   At 821px viewport the container inner is ~725px → max column-gap
   that fits = 725 / 59 = 12.3px. We use 8px which gives 472px gap-
   total — comfortably fits even the narrowest container in this
   range. The row-gap stays at the desktop 18px since vertical
   stacking between rows is unaffected by horizontal width.

   Adjacent cards on tablet now have 8px between them (vs. 18px on
   desktop). It's a deliberate compromise — visually tighter at
   tablet, but the layout actually fits the viewport. Above 1158px,
   the desktop 18px column-gap takes over and there's plenty of
   room. */
@media (min-width: 821px) and (max-width: 1158px) {
	.eux-block--bento-box .eux-bento-row__inner {
		column-gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   CARD — base structure shared across themes and positions
   --------------------------------------------------------------------------
   Markup contract (set by editor.js + render.php):
     <article.eux-bento-card.eux-bento-card--{top|left|right}>
       <div.eux-bento-card__inner>
         <span.eux-bento-card__num>01</span>     ← editable number (inline)
         <h3.eux-bento-card__title>…</h3>        ← heading
         <div.eux-bento-mockup>…</div>           ← mockup (or core/image)
         <ul.eux-bento-card__list>…</ul>         ← bullet list
       </div>
     </article>

   The class names on the four key elements are what CSS targets — NOT
   :nth-child positions. That way, users can reorder InnerBlocks freely
   in the editor and the layout still works.
   -------------------------------------------------------------------------- */
.eux-block--bento-box .eux-bento-card {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	margin: 0;
	/* Grid items have an implicit `min-width: auto` which prevents
	   them from shrinking below content's intrinsic min-content.
	   Without this, the parent grid (`.eux-bento-row__inner`) is
	   pushed wider than the viewport by long titles, KPI text,
	   etc. Combined with the parent's `minmax(0, 1fr)` columns,
	   `min-width: 0` here completes the chain that lets the grid
	   honour viewport width and clip overflowing content via the
	   card's own `overflow: hidden`. */
	min-width: 0;
}

.eux-block--bento-box .eux-bento-card__inner {
	flex: 1;
	min-width: 0;
	/* Layout (flex column vs. CSS grid) set per-position below. */
}

/* CARD NUMBER — inline flow at the top of the body column. Italic, small,
   purple. Sits naturally before the title in every position variant. */
.eux-block--bento-box .eux-bento-card__num {
	font-family: var(--eux-font-display);
	font-style: italic;
	font-weight: 300;
	font-size: 13px;
	color: var(--eux-woo-500);
	letter-spacing: 0.02em;
	display: block;
	margin: 0;
}

/* ==========================================================================
   POSITION: TOP — title above, mockup in middle, list below
   --------------------------------------------------------------------------
   Inner is a flex column. Body items (number, title, list) get horizontal
   padding ON THE INNER container; the mockup uses negative horizontal
   margins to break out to the card edges. This is more robust than
   per-item padding because there's a single source of truth for body
   indentation, and Salient overrides on individual `<ul>`/`<li>` elements
   can't get in the way.
   ========================================================================== */
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner {
	display: flex;
	flex-direction: column;
	padding: 28px 28px 30px;
}

/* Body items — natural block flow with margin gaps */
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__num {
	margin: 0 0 6px;
}
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__title {
	margin: 0 0 14px;
}

/* Mockup — escape the inner's horizontal padding via negative margins so
   it spans the full card width edge-to-edge, with proper vertical gaps. */
.eux-block--bento-box .eux-bento-card--top .eux-block--bento-mockup,
.eux-block--bento-box .eux-bento-card--top .wp-block-image,
.eux-block--bento-box .eux-bento-card--top .eux-bento-mockup {
	width: auto;
	margin: 0 -28px;
	aspect-ratio: 16 / 10;
	min-height: 180px;
	background: var(--eux-cream-50);
	overflow: hidden;
}

/* List — sits below mockup, takes its natural height. Reset wp-block-list
   default padding so the bullets align with the title above. */
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--top ul.eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--top ul.eux-bento-card__list.wp-block-list {
	margin: 14px 0 0;
	padding: 0;
}

/* ==========================================================================
   POSITION: LEFT — mockup on left, body on right
   --------------------------------------------------------------------------
   The mockup is ABSOLUTELY POSITIONED to fill 44% of the card's left side.
   The inner container has padding-left = 44% + 36px to leave room for the
   mockup and an additional 36px of body padding. Body items flow naturally
   as block elements in the remaining space.
   --------------------------------------------------------------------------
   Why absolute positioning instead of CSS Grid (0.20.1's approach):
   Grid auto-rows were sizing each body item into its own row, and the
   mockup's `grid-row: 1 / span 100` produced unpredictable vertical
   alignment in browsers (visible as awkward centered/spaced content).
   Absolute positioning is simpler, more reliable, and gives the mockup
   guaranteed full-card-height coverage.
   ========================================================================== */
.eux-block--bento-box .eux-bento-card--left .eux-bento-card__inner {
	position: relative;
	padding: 36px 36px 38px calc(44% + 36px);
	min-height: 280px;
}

.eux-block--bento-box .eux-bento-card--left .eux-block--bento-mockup,
.eux-block--bento-box .eux-bento-card--left .wp-block-image,
.eux-block--bento-box .eux-bento-card--left .eux-bento-mockup {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44%;
	margin: 0;
	background: var(--eux-cream-50);
	overflow: hidden;
}

/* Body items — natural block flow inside the inner's padding */
.eux-block--bento-box .eux-bento-card--left .eux-bento-card__num {
	display: block;
	margin: 0 0 6px;
}
.eux-block--bento-box .eux-bento-card--left .eux-bento-card__title {
	margin: 0 0 12px;
}
.eux-block--bento-box .eux-bento-card--left .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--left ul.eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--left ul.eux-bento-card__list.wp-block-list {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   POSITION: RIGHT — body on left, mockup on right (mirror of left)
   ========================================================================== */
.eux-block--bento-box .eux-bento-card--right .eux-bento-card__inner {
	position: relative;
	padding: 36px calc(44% + 36px) 38px 36px;
	min-height: 280px;
}

.eux-block--bento-box .eux-bento-card--right .eux-block--bento-mockup,
.eux-block--bento-box .eux-bento-card--right .wp-block-image,
.eux-block--bento-box .eux-bento-card--right .eux-bento-mockup {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 44%;
	margin: 0;
	background: var(--eux-cream-50);
	overflow: hidden;
}

.eux-block--bento-box .eux-bento-card--right .eux-bento-card__num {
	display: block;
	margin: 0 0 6px;
}
.eux-block--bento-box .eux-bento-card--right .eux-bento-card__title {
	margin: 0 0 12px;
}
.eux-block--bento-box .eux-bento-card--right .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--right ul.eux-bento-card__list,
.eux-block--bento-box .eux-bento-card--right ul.eux-bento-card__list.wp-block-list {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   MOBILE COLLAPSE — left/right become top layout below 820px
   --------------------------------------------------------------------------
   Side-by-side text+image cards become unreadable on narrow screens.
   Below 820px, all three position variants render identically as a
   vertical stack: number → title → mockup → list.
   ========================================================================== */
@media (max-width: 820px) {
	.eux-block--bento-box .eux-bento-card--left .eux-bento-card__inner,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-card__inner {
		position: static;
		padding: 28px 28px 30px;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.eux-block--bento-box .eux-bento-card--left .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--left .wp-block-image,
	.eux-block--bento-box .eux-bento-card--left .eux-bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .wp-block-image,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-mockup {
		/* v0.36.10 — `position: relative` (NOT `position: static`).
		   The previous `position: static` here let `.eux-mk` inside escape
		   containment: `.eux-mk` is `position: absolute; inset: 0`, which
		   needs a positioned ancestor to size against. When the mockup
		   wrapper is `static`, `.eux-mk` walks up the DOM and finds the
		   CARD (`position: relative` from the base rule). It then fills
		   the entire card with `background: var(--eux-cream-50)`, hiding
		   the `__num` and `__title` siblings underneath. The `__list`
		   appears OK because it comes after the mockup in DOM order and
		   stacks on top.

		   Setting the wrapper to `position: relative` here re-establishes
		   the containing block so `.eux-mk` correctly sizes to the wrapper
		   (350×197 at 400px viewport, matching the 16/9 aspect ratio) and
		   the num/title/white-background area becomes visible again. */
		position: relative;
		width: auto;
		margin: 0 -28px;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	/* v0.36.6 — the `--top` variant uses the desktop 16/10 ratio
	   from its own (non-mobile-scoped) rule above. Override it on
	   mobile so it matches `--left` / `--right` here.
	   v0.36.8 — ratio is 16/9, not the v0.36.6 16/8. The reference
	   mobile mock (bento-standalone.css) uses 16/9 for all card
	   variants on mobile because the v0.36.8-aligned per-preset
	   content tightening (hiding install bars, version chips, the
	   live KPI on tiny phones, limiting logic to 3-2 visible rules)
	   fits the densest preset in that ratio without overflow.
	   `min-height: 0` overrides the desktop floor so on tiny
	   phones (<320px viewport) the aspect ratio drives the box
	   instead of getting padded out to 180px. */
	.eux-block--bento-box .eux-bento-card--top .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--top .wp-block-image,
	.eux-block--bento-box .eux-bento-card--top .eux-bento-mockup {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.eux-block--bento-box .eux-bento-card--left .eux-bento-card__title,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-card__title {
		margin: 0 0 14px;
	}
	/* v0.36.11 — Match the specificity of the desktop list rule so this
	   mobile override actually wins. The desktop rule uses the compound
	   selector `ul.eux-bento-card__list.wp-block-list` (specificity 0,4,1)
	   while a plain `.eux-bento-card__list` here is only 0,3,0 — so even
	   inside the media query, the desktop `margin: 0` was winning and
	   the list sat flush against the mockup. Repeating the same compound
	   form here brings the mobile rule to 0,4,1 which beats desktop by
	   media-query order (last wins on equal specificity). */
	.eux-block--bento-box .eux-bento-card--left .eux-bento-card__list,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-card__list,
	.eux-block--bento-box .eux-bento-card--left ul.eux-bento-card__list.wp-block-list,
	.eux-block--bento-box .eux-bento-card--right ul.eux-bento-card__list.wp-block-list {
		margin: 14px 0 0;
	}
}

/* ==========================================================================
   v0.36.8 — phone card chrome tightening
   --------------------------------------------------------------------------
   Ported from the reference standalone mock (bento-standalone.css). Tightens
   the card's outer shell (border-radius, padding, title size, list size) at
   phone widths so the chrome doesn't dominate the now-properly-sized mockup.
   The 820px layout block above handles the structural collapse (side-by-side
   variants becoming stacked); these two blocks polish the visual proportions.
   ========================================================================== */
@media (max-width: 560px) {
	.eux-block--bento-box .eux-bento-card {
		border-radius: 16px;
	}
	.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner,
	.eux-block--bento-box .eux-bento-card--left .eux-bento-card__inner,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-card__inner {
		padding: 22px 22px 24px;
	}
	/* Mockup uses negative horizontal margins to break out to the card
	   edges — keep the magnitude in sync with the new inner padding so
	   it still hits the card edge cleanly. */
	.eux-block--bento-box .eux-bento-card--top .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--top .eux-bento-mockup,
	.eux-block--bento-box .eux-bento-card--top .wp-block-image,
	.eux-block--bento-box .eux-bento-card--left .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--left .eux-bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-mockup {
		margin: 0 -22px;
	}
	.eux-block--bento-box .eux-bento-card__title {
		font-size: 20px;
		line-height: 1.22;
	}
	.eux-block--bento-box .eux-bento-card__list {
		gap: 7px;
	}
	.eux-block--bento-box .eux-bento-card__list li {
		font-size: 13px;
		line-height: 1.45;
		padding-left: 16px;
	}
}

@media (max-width: 400px) {
	/* Tiny phones — last-resort padding/title trim. The mockup chrome
	   tightening at 400px lives in bento-mockup/style.css (hide version
	   chip, drop to 2 logic rules, hide live KPI). */
	.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner,
	.eux-block--bento-box .eux-bento-card--left .eux-bento-card__inner,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-card__inner {
		padding: 20px 18px 22px;
	}
	.eux-block--bento-box .eux-bento-card--top .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--top .eux-bento-mockup,
	.eux-block--bento-box .eux-bento-card--top .wp-block-image,
	.eux-block--bento-box .eux-bento-card--left .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--left .eux-bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .eux-block--bento-mockup,
	.eux-block--bento-box .eux-bento-card--right .eux-bento-mockup {
		margin: 0 -18px;
	}
	.eux-block--bento-box .eux-bento-card__title {
		font-size: 18px;
	}
}

/* Title + list — body content typography */
.eux-block--bento-box .eux-bento-card__title {
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.014em;
	color: var(--eux-black);
	margin: 0;
	text-wrap: balance;
}

.eux-block--bento-box .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card__list.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}

.eux-block--bento-box .eux-bento-card__list li {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--eux-ink-700);
	padding-left: 18px;
	position: relative;
	list-style: none;
}
.eux-block--bento-box .eux-bento-card__list li::marker { content: ''; }
.eux-block--bento-box .eux-bento-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 2px;
	background: var(--eux-woo-500);
}


/* ==========================================================================
   PARAGRAPH (body text) — unstyled core/paragraph blocks inside cards.
   --------------------------------------------------------------------------
   When editors add a core/paragraph between the title and the mockup (or
   anywhere inside the card body), it's unstyled by default. Two compounding
   problems if we don't intervene:

     1. WordPress's <p> margin-block ~1.75em compounds in the flex column
        layout (flex siblings don't margin-collapse).

     2. Salient (main-styles-css) applies an unscoped `p { padding-bottom:
        1.5em }` rule. With unscoped 0,0,1 specificity it's beaten by our
        0,3,1 scoping in theory, but in practice some Salient builds apply
        it via more specific selectors (e.g. `.container-wrap p`) that
        win. v0.36.22 missed this and the paragraph was getting our 14px
        margin-bottom PLUS Salient's ~24px padding-bottom = ~38px effective
        gap. Use `padding: 0 !important` to be defensive — matches the
        same justification used elsewhere in salient-coexistence.md
        (defence 1, 2, 7).

   Then adjacency:
     - title  → paragraph         : title.margin-bottom is the gap (14px/12px)
     - mockup → paragraph (TOP)   : mockup has no margins; we need a top
                                    margin on the paragraph so it breathes
     - paragraph → mockup         : paragraph.margin-bottom is the gap (14px)
     - paragraph → list           : we DON'T want list.margin-top adding to
                                    paragraph.margin-bottom. Drop list's
                                    top margin via adjacent-sibling.
     - paragraph (last in card)   : no margin-bottom; card padding wins.

   Scoping via `.eux-bento-card .eux-bento-card__inner > p` means
   section-level paragraphs (eyebrow, section subtitle) outside any card
   are automatically immune.
   ========================================================================== */
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > p,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > .wp-block-paragraph {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--eux-ink-700);
	margin: 0 0 14px;
	/* Defend against Salient `p { padding-bottom: 1.5em }` (and similar) —
	   see salient-coexistence.md. Without this, the paragraph stacks ~24px
	   of padding on top of its margin and the gaps blow out. */
	padding: 0 !important;
}

/* Last paragraph in the card body — kill the bottom margin so the card's
   own padding-bottom handles spacing to the card edge. */
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > p:last-child,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > .wp-block-paragraph:last-child {
	margin-bottom: 0;
}

/* TOP variant only: when a paragraph immediately follows the mockup, the
   mockup has no bottom-margin (it's a flex item between full-width siblings)
   so the paragraph would sit flush. Give it a 14px top-margin to match the
   rhythm of title→mockup elsewhere. Covers all three flavours of mockup
   wrapper: our own block, a core/image, and the generic .eux-bento-mockup. */
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .eux-block--bento-mockup + p,
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .eux-block--bento-mockup + .wp-block-paragraph,
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .wp-block-image + p,
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .wp-block-image + .wp-block-paragraph,
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .eux-bento-mockup + p,
.eux-block--bento-box .eux-bento-card--top .eux-bento-card__inner > .eux-bento-mockup + .wp-block-paragraph {
	margin-top: 14px;
}

/* When the list immediately follows a paragraph, drop the list's top margin.
   The paragraph's own margin-bottom (14px) is already the gap; without this
   rule we'd get 14px + 14px = 28px between paragraph text and the first
   bullet. Specificity must beat the TOP variant's desktop list rule
   (`ul.eux-bento-card__list.wp-block-list` = 0,4,1), so we include the
   compound form here at 0,4,2. */
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > p + .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > p + ul.eux-bento-card__list,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > p + ul.eux-bento-card__list.wp-block-list,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > .wp-block-paragraph + .eux-bento-card__list,
.eux-block--bento-box .eux-bento-card .eux-bento-card__inner > .wp-block-paragraph + ul.eux-bento-card__list.wp-block-list {
	margin-top: 0;
}

/* Dark theme override for paragraph color */
.eux-block--bento-box--dark .eux-bento-card .eux-bento-card__inner > p,
.eux-block--bento-box--dark .eux-bento-card .eux-bento-card__inner > .wp-block-paragraph {
	color: rgba(244, 240, 236, 0.78);
}

/* ==========================================================================
   THEME: LIGHT (white section, white cards)
   ========================================================================== */
.eux-block--bento-box--light {
	background: var(--eux-white);
	color: var(--eux-black);
}

/* ==========================================================================
   THEME: CREAM (cream section, white cards)
   ========================================================================== */
.eux-block--bento-box--cream {
	background: var(--eux-cream-100);
	color: var(--eux-black);
}

/* ==========================================================================
   THEME: DARK (ink section, glass cards)
   --------------------------------------------------------------------------
   The mockup region inside dark cards stays cream-50 (same light-palette
   surface used in problem-trio) — consistent with the rest of the plugin.
   ========================================================================== */
.eux-block--bento-box--dark {
	background: var(--eux-ink-900);
	color: var(--eux-cream-100);
}

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

.eux-block--bento-box--dark .eux-bento-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

.eux-block--bento-box--dark .eux-bento-card__num {
	color: var(--eux-woo-300);
}

.eux-block--bento-box--dark .eux-bento-card__title {
	color: var(--eux-cream-100);
}

.eux-block--bento-box--dark .eux-bento-card__list li {
	color: rgba(244, 240, 236, 0.78);
}
.eux-block--bento-box--dark .eux-bento-card__list li::before {
	background: var(--eux-woo-300);
}

/* Dark mockup region stays cream-50 — consistent with problem-trio.
   Target the mockup by class so it works regardless of mockupPosition. */
.eux-block--bento-box--dark .eux-block--bento-mockup,
.eux-block--bento-box--dark .eux-bento-mockup {
	background: var(--eux-cream-50);
}

/* ==========================================================================
   BENTO MOCKUP — placeholder card visual (cross-hatch + label + caption)
   --------------------------------------------------------------------------
   Internal markup (from render.php):
     <div class="eux-bento-mockup">
       <div class="eux-bento-mockup__ph">
         <span class="eux-bento-mockup__label">IMAGE</span>
         <span class="eux-bento-mockup__caption">…</span>
       </div>
     </div>
   ========================================================================== */
.eux-block--bento-box .eux-bento-mockup {
	position: relative;
	overflow: hidden;
}

.eux-block--bento-box .eux-bento-mockup__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	background:
		repeating-linear-gradient(135deg,
			rgba(0, 0, 0, 0.04) 0 1px,
			transparent 1px 14px),
		var(--eux-cream-200);
}

.eux-block--bento-box .eux-bento-mockup__label {
	font-family: var(--eux-font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
}

.eux-block--bento-box .eux-bento-mockup__caption {
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.5);
	letter-spacing: -0.005em;
	text-align: center;
	text-wrap: balance;
	max-width: 22ch;
}

/* Dark theme placeholder — invert the cross-hatch */
.eux-block--bento-box--dark .eux-bento-mockup__ph {
	background:
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, 0.05) 0 1px,
			transparent 1px 14px),
		rgba(255, 255, 255, 0.04);
}
.eux-block--bento-box--dark .eux-bento-mockup__label {
	color: rgba(244, 240, 236, 0.5);
}
.eux-block--bento-box--dark .eux-bento-mockup__caption {
	color: rgba(244, 240, 236, 0.6);
}