/* =============================================================================
   Bento Box (acf/bento) — DY-Bento Figma spec
   Full-bleed color band → .theme-container → rounded box → core Grid group(s).
   Copy color derives from the box color; gallery row units come from
   container-query math so tiles align to the 4-column bento grid.
   ============================================================================= */

.bento--block {
	position: relative;
	padding: 90px 0;
}

/* --- full-bleed background band --- */
.bento--bg-gray           { background: var(--wp--preset--color--gray, #d9d9d9); }
.bento--bg-green          { background: var(--wp--preset--color--green, #1a3d39); }
.bento--bg-light-green    { background: var(--wp--preset--color--light-green, #395e5a); }
.bento--bg-brm-blue       { background: var(--wp--preset--color--brm-blue, #255598); }
.bento--bg-bmr-light-blue { background: var(--wp--preset--color--bmr-light-blue, #668ec6); }
.bento--bg-white          { background: var(--wp--preset--color--white, #fff); }
.bento--bg-cream          { background: var(--wp--preset--color--cream, #efede6); }
.bento--bg-none           { background: none; }

/* --- rounded inner box (Figma: radius 10, ~38px vertical / 48px side padding) --- */
.bento--box {
	--bento-gap: 30px;
	border-radius: 10px;
	padding: 38px 48px 48px;
	container-type: inline-size;
}
/* dark boxes → cream copy */
.bento--box-green       { background: var(--wp--preset--color--green, #1a3d39);       color: var(--wp--preset--color--cream, #efede6); }
.bento--box-light-green { background: var(--wp--preset--color--light-green, #395e5a); color: var(--wp--preset--color--cream, #efede6); }
.bento--box-brm-blue    { background: var(--wp--preset--color--brm-blue, #255598);    color: var(--wp--preset--color--cream, #efede6); }
/* light boxes → green copy. NOTE: BMR Light Blue is a mid-tone — green copy on
   it is only ~3.5:1, so keep it to headings/large type, not body paragraphs. */
.bento--box-bmr-light-blue { background: var(--wp--preset--color--bmr-light-blue, #668ec6); color: var(--wp--preset--color--green, #1a3d39); }
.bento--box-cream       { background: var(--wp--preset--color--cream, #efede6);       color: var(--wp--preset--color--green, #1a3d39); }
.bento--box-off-white   { background: var(--wp--preset--color--off-white, #fdfbf3);   color: var(--wp--preset--color--green, #1a3d39); }
.bento--box-white       { background: var(--wp--preset--color--white, #fff);          color: var(--wp--preset--color--green, #1a3d39); }
.bento--box-none        { background: none; padding: 0; }

/* copy inherits the derived color; accents flip by box darkness */
.bento--box :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:is(.bento--box-green, .bento--box-light-green, .bento--box-brm-blue) .is-style-arrow-link {
	color: var(--wp--preset--color--lime, #c3d941);
}

/* empty paragraphs are legitimate grid seats (they hold a cell in the text
   row so auto-placement puts images where the editor shows them) — the reset's
   `p:empty{display:none}` would drop them from the grid on the front end only
   (the editor canvas never renders paragraphs :empty), silently shifting every
   later tile up a row */
.bento--box .is-layout-grid > p:empty { display: block; }

/* --- grid group(s) inside the box ---
   Stacked sibling grids (e.g. Three Column = text-row grid + columns grid)
   keep the bento gap between them; the box has no layout of its own. */
.bento--box .is-layout-grid + .is-layout-grid { margin-block-start: var(--bento-gap); }

/* --- fixed gallery row units ---
   cqw is 1% of the box's content width, so the unit is (width − 3 gaps) / 4.
   Square (Gallery Tall): unit = column width. Short: unit = 0.75 × column. */
@supports (width: 1cqw) {
	.bento--rows-square .bento--box .is-layout-grid {
		grid-auto-rows: calc((100cqw - 3 * var(--bento-gap)) / 4);
	}
	.bento--rows-short .bento--box .is-layout-grid {
		grid-auto-rows: calc(0.75 * (100cqw - 3 * var(--bento-gap)) / 4);
	}
}

/* fixed-row grids: media tiles fill their spanned cells (cell-fill geometry —
   the Figma wide tile is 733×351, not a clean aspect ratio) */
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media,
.bento--box .wp-block-acf-media.bento--fill {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* editor canvas: the block wrapper nests the rendered figure one level deeper —
   these selectors never match on the front end (there the figure IS
   .wp-block-acf-media), but in the editor they keep the flex chain intact so
   tiles fill their cells instead of overflowing at intrinsic aspect */
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media .media--figure,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media .media--figure,
.bento--box .wp-block-acf-media.bento--fill .media--figure {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media .media--media,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media .media--media,
.bento--box .wp-block-acf-media.bento--fill .media--media {
	aspect-ratio: auto;
	flex: 1;
	min-height: 0;
}
/* auto-rows fill items still need a floor so an empty column can't collapse them */
.bento--rows-auto .bento--box .wp-block-acf-media.bento--fill .media--media { min-height: 300px; }

/* auto-row grids: loose media tiles sink to their cell's bottom edge, so e.g.
   the offset panorama bottom-aligns with the tall fill image beside it */
.bento--rows-auto .bento--box .is-layout-grid > .wp-block-acf-media:not(.bento--fill) { align-self: end; }

/* --- acf/media-slideshow: the same fill geometry ---------------------------
   Note `.wp-block-acf-media` and `.wp-block-acf-media-slideshow` are distinct
   class TOKENS, so none of the rules above reach a slideshow tile by accident
   — every one of them needs a twin. .slideshow--stage is the ratio box, i.e.
   the counterpart of .media--media. */
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media-slideshow,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media-slideshow,
.bento--box .wp-block-acf-media-slideshow.bento--fill {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--figure,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--figure,
.bento--box .wp-block-acf-media-slideshow.bento--fill .slideshow--figure {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--stage,
.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--stage,
.bento--box .wp-block-acf-media-slideshow.bento--fill .slideshow--stage {
	aspect-ratio: auto;
	flex: 1;
	min-height: 0;
}
.bento--rows-auto .bento--box .wp-block-acf-media-slideshow.bento--fill .slideshow--stage { min-height: 300px; }
.bento--rows-auto .bento--box .is-layout-grid > .wp-block-acf-media-slideshow:not(.bento--fill) { align-self: end; }

/* tighter inset inside a tile, in step with the caption pill's 10px */
.bento--box .slideshow--ring {
	top: 12px;
	right: 12px;
}

/* --- caption pill: overlay inside the tile (Figma), not hanging above --- */
@media (min-width: 756px) {
	.bento--box .media--caption {
		bottom: 10px;
		left: 10px;
		top: auto;
	}
	/* a Vimeo play bar owns the tile's bottom edge — the pill moves up */
	.bento--box .media--play-bar .media--caption {
		top: 10px;
		bottom: auto;
	}
}

/* --- text stacks (core/group flow items) get breathing room like the comps --- */
.bento--box .wp-block-group.bento--stack { min-width: 0; }

/* =============================================================================
   Dense-grid collapse (4+ columns, 756–992px) — client, 2026-08-10.
   A columnCount grid compiles to a FIXED `repeat(N, minmax(0,1fr))`, so a
   4-column bento was still four tracks at 760px: 136px each, unreadable. Two-
   and three-column grids are still comfortable there (~302px / ~190px tracks),
   so only 4+ get the extra headroom and everything else keeps the 756px
   boundary below.
   `.lwh-grid-cols-4up` is stamped by lwh_grid_column_count_class() in
   functions.php (front end) and js/editor.js (canvas) — CSS cannot see a
   grid's column count, core leaves N only in a generated container class.
   The rule set is the <756px one repeated: the two scopes differ in BOTH the
   width and the selector, so they can't be merged into one query. Keep them
   in step. (The .bento--block / .bento--box paddings are viewport-driven, not
   grid-driven, and deliberately stay at 756px.)
   ============================================================================= */
@media (min-width: 756px) and (max-width: 991.98px) {
	/* single column; `> *` (0,3,0) outranks core's per-child span classes (0,1,0) */
	.bento--box .is-layout-grid.lwh-grid-cols-4up {
		grid-template-columns: minmax(0, 1fr);
	}
	.bento--box .is-layout-grid.lwh-grid-cols-4up > * {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.bento--rows-square .bento--box .is-layout-grid.lwh-grid-cols-4up,
	.bento--rows-short  .bento--box .is-layout-grid.lwh-grid-cols-4up {
		grid-auto-rows: auto;
	}
	/* stacked tiles regain intrinsic height from the media aspect ratio */
	.bento--rows-square .bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media .media--media,
	.bento--rows-short  .bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media .media--media {
		aspect-ratio: 16 / 9;
	}
	.bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media.bento--fill .media--media {
		aspect-ratio: 3 / 4;
		flex: none;
	}
	/* acf/media-slideshow is interchangeable with a media tile — distinct class
	   tokens, so every rule above needs its twin */
	.bento--rows-square .bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media-slideshow .slideshow--stage,
	.bento--rows-short  .bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media-slideshow .slideshow--stage {
		aspect-ratio: 16 / 9;
	}
	.bento--box .is-layout-grid.lwh-grid-cols-4up > .wp-block-acf-media-slideshow.bento--fill .slideshow--stage {
		aspect-ratio: 3 / 4;
		flex: none;
	}
}

/* =============================================================================
   Mobile collapse (<756px) — no mobile comps yet; assumption flagged to Dapper.
   Everything stacks full-width in block order — including .bento--tile-sm,
   which used to flow 2-up (client, 2026-07-29). Fixed row units are dropped.
   ============================================================================= */
@media (max-width: 755.98px) {
	.bento--block { padding: 45px 0; }
	.bento--box { padding: 24px 20px; }
	.bento--box-none { padding: 0; }

	/* single column — .bento--tile-sm no longer flows 2-up, so the 2-col
	   template it needed is gone too. The `> *` rule still outranks core's
	   per-child span classes (0,2,0 vs 0,1,0). */
	.bento--box .is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.bento--box .is-layout-grid > * {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.bento--rows-square .bento--box .is-layout-grid,
	.bento--rows-short  .bento--box .is-layout-grid {
		grid-auto-rows: auto;
	}
	/* stacked tiles regain intrinsic height from the media aspect ratio */
	.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media .media--media,
	.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media .media--media {
		aspect-ratio: 16 / 9;
	}
	.bento--box .wp-block-acf-media.bento--fill .media--media {
		aspect-ratio: 3 / 4;
		flex: none;
	}
	/* acf/media-slideshow behaves identically to a media tile here — the block's
	   own ratio field is overridden inside bento exactly as media's is, so the
	   two are interchangeable in a stacked tile */
	.bento--rows-square .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--stage,
	.bento--rows-short  .bento--box .is-layout-grid > .wp-block-acf-media-slideshow .slideshow--stage {
		aspect-ratio: 16 / 9;
	}
	.bento--box .wp-block-acf-media-slideshow.bento--fill .slideshow--stage {
		aspect-ratio: 3 / 4;
		flex: none;
	}
}