/* blz_bento — 12-column bento grid (.bento/.b + quote/stat/office tiles),
   ported from editorial-tech-green.html (BENTO block + .b-5 from OFFICE & MAP),
   tokens → --blz-*. Design inner class names kept for pixel/DOM parity, scoped
   under .bento (.b is far too generic to leave global). The icon square
   (.bico) is NOT here — blz-core's .blz-ico owns those rules.
   Span utilities (.b-4 … .b-12) sit after the kind blocks so the editor's
   span choice always wins over a kind's built-in span. */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; margin-top: 22px; }
.bento .b { border-radius: var(--blz-radius); padding: 36px 34px; border: 1px solid var(--blz-line); background: var(--blz-card-bg); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s; position: relative; overflow: hidden; }
.bento .b:hover { transform: translateY(-6px); box-shadow: var(--blz-shadow); }
/* white cards on dark bands: reassert ink so the heading-inherit-on-dark rule
   (which is for headings sitting directly on the dark bg) does not wash them out */
.blz-band--dark .bento .b { color: var(--blz-ink); }
.bento .b h3 { font-weight: 700; font-size: 18px; line-height: 1.3; }
.bento .b p { font-size: 14px; color: var(--blz-mute); line-height: 1.7; margin-top: 10px; }

/* ---------- quote tile ---------- */
.bento .b-quote { background: var(--blz-accent); color: #F0EBDF; border: none; display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
.bento .b-quote::before { content: "\201C"; display: block; font-family: var(--blz-serif); font-size: 70px; line-height: .62; color: var(--blz-accent-3); opacity: .6; margin-bottom: 10px; }
.bento .b-quote blockquote { font-family: var(--blz-serif); font-style: italic; font-weight: 320; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5; border: none !important; margin: 0 !important; padding: 0 !important; }
.bento .b-quote .who { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.bento .b-quote .who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(244, 240, 232, .35); }
.bento .b-quote .who b { font-size: 14px; display: block; }
.bento .b-quote .who span { font-size: 12.5px; color: rgba(240, 235, 223, .7); }

/* ---------- stat tile ---------- */
.bento .b-stat { grid-column: span 5; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.bento .b-stat .big { font-family: var(--blz-serif); font-weight: 300; font-size: 88px; line-height: 1; color: var(--blz-accent); }
.bento .b-stat .big small { font-size: 30px; color: var(--blz-accent-2); }
.bento .b-stat p { margin-top: 12px; }
.bento .b-stat .badges { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.bento .b-stat .badges img { height: 38px; filter: grayscale(1); opacity: .7; transition: .3s; }
.bento .b-stat .badges img:hover { filter: none; opacity: 1; }
.bento .b-stat .stars { color: var(--blz-accent-3); letter-spacing: 3px; font-size: 16px; }

/* ---------- office / image tile ---------- */
.bento .b-office { grid-column: span 6; padding: 0; border: none; min-height: 300px; }
.bento .b-office img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.bento .b-office:hover img { transform: scale(1.05); }
.bento .b-office .ov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(18, 32, 27, .85)); z-index: 1; }
.bento .b-office .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 30px; color: #F4F0E8; }
.bento .b-office .cap .y { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blz-accent-3); }
.bento .b-office .cap h3 { font-family: var(--blz-serif); font-weight: 420; font-size: 24px; margin-top: 8px; }
.bento .b-office .cap p { color: rgba(244, 240, 232, .85); margin-top: 6px; }

/* ---------- span utilities (always stamped by the render fn) ---------- */
.bento .b-4 { grid-column: span 4; }
.bento .b-5 { grid-column: span 5; }
.bento .b-6 { grid-column: span 6; }
.bento .b-8 { grid-column: span 8; }
.bento .b-12 { grid-column: span 12; }

/* ---------- responsive span collapses ---------- */
@media (max-width: 1024px) {
	.bento .b-stat, .bento .b-4, .bento .b-5, .bento .b-6, .bento .b-8, .bento .b-office { grid-column: span 6; }
}
@media (max-width: 640px) {
	.bento .b-stat, .bento .b-4, .bento .b-5, .bento .b-6, .bento .b-8, .bento .b-12, .bento .b-office { grid-column: span 12; }
}