/* blz_office_grid — office photo + copy + map, ported from
   editorial-tech-green.html (OFFICE & MAP block) with design tokens swapped
   to --blz-*. Inner class names kept for parity with the migrated pages. */

.office-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.office-photo { position: relative; border-radius: var(--blz-radius); overflow: hidden; box-shadow: var(--blz-shadow); aspect-ratio: 4/3.1; }
.office-photo img { width: 100%; height: 100%; object-fit: cover; }
.office-badge { position: absolute; top: 20px; right: 20px; background: rgba(248, 245, 240, .95); border-radius: 16px; padding: 12px 18px; text-align: center; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.office-badge b { display: block; font-family: var(--blz-serif); font-weight: 500; font-size: 24px; color: var(--blz-accent); }
.office-badge span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--blz-mute); }
.office-body p { font-size: 16px; color: var(--blz-mute); margin-top: 20px; max-width: 52ch; line-height: 1.75; }
/* no global reset in plugin context — normalize the list box model explicitly */
.office-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.office-facts li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--blz-ink-soft); }
.office-facts li::before { content: "\2713"; color: var(--blz-accent-2); font-weight: 700; flex: none; }
.office-map { margin-top: 36px; border-radius: var(--blz-radius); overflow: hidden; border: 1px solid var(--blz-line); box-shadow: var(--blz-shadow); height: 400px; }
.office-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.15) saturate(.9); }
/* optional CTA sits under the facts list */
.office-body .blz-btn { margin-top: 26px; }
/* stagger: the copy column follows the photo in (design used .rv .d1) */
.office-grid .office-body.d1 { transition-delay: .12s; }
@media (max-width: 1024px) { .office-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .office-map { height: 300px; } }