/* ===== JBG Bento Masonry – frontend ===== */
.jbg-bbm {
  /* Tweak as needed for perfect 1:1 art direction */
  --bbm-gap: clamp(18px, 2.5vw, 36px);
  --bbm-radius: 0;
  --bbm-accent: #1f57ff;      /* vertical bar color */
  --bbm-accent-w: 48px;       /* vertical bar width */

  color: var(--jbg-white, #fff);
}

/* Header */
.jbg-bbm__header {
  text-align: center;
  margin: 0 auto clamp(24px, 4vw, 40px);
  max-width: min(68ch, 90vw);
}
.jbg-bbm__eyebrow {
  font: 400 12px/1.2 var(--font-inter, system-ui, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 12px 0;
}
.jbg-bbm__headline {
  font: 600 clamp(22px, 3.2vw, 40px)/1.15 var(--font-inter, system-ui, sans-serif);
  margin: 0;
}

/* Grid layout (two main columns) */
.jbg-bbm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bbm-gap);
}

/* Left & right columns are nested grids */
.jbg-bbm__left,
.jbg-bbm__right {
  display: grid;
  gap: var(--bbm-gap);
}

/* Left: two rows (top, bottom) */
.jbg-bbm__left {
  grid-template-rows: auto auto;
}

/* Right: three rows (top, middle row with accent, bottom) */
.jbg-bbm__right {
  grid-template-rows: auto auto auto;
}

/* Mid row on the right: image + blue accent */
.jbg-bbm__row-mid {
  display: grid;
  grid-template-columns: 1fr var(--bbm-accent-w);
  gap: var(--bbm-gap);
}

/* Tiles */
.jbg-bbm__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--bbm-radius);
  background: #0b0b0b; /* fallback if no image set */
}

.jbg-bbm__image-figure,
.jbg-bbm__image-figure img {
  display: block;
  width: 100%;
  height: 100%;
}
.jbg-bbm__image-figure { margin: 0; }
.jbg-bbm__image-figure img { object-fit: cover; }

/* Accent bar */
.jbg-bbm__accent {
  border-radius: var(--bbm-radius);
  background: var(--bbm-accent);
}

/* Aspect/height tuning to match the comp */
.jbg-bbm__img--a .jbg-bbm__image-figure { aspect-ratio: 4 / 3; min-height: 460px; }
.jbg-bbm__img--b .jbg-bbm__image-figure { aspect-ratio: 16 / 10; min-height: 300px; }
.jbg-bbm__img--c .jbg-bbm__image-figure { aspect-ratio: 16 / 9; min-height: 280px; }
.jbg-bbm__img--d .jbg-bbm__image-figure { aspect-ratio: 16 / 10; min-height: 420px; }
.jbg-bbm__img--e .jbg-bbm__image-figure { aspect-ratio: 16 / 9; min-height: 360px; }

/* Make the inner Group (eyebrow/heading/paragraph) centered & constrained */
.jbg-bbm__header .wp-block-group {
  margin: 0 auto;
  max-width: min(68ch, 90vw);
  text-align: center;
}

/* Responsive: collapse to single column */
@media (max-width: 1024px) {
  .jbg-bbm__grid {
    grid-template-columns: 1fr;
  }
  .jbg-bbm__row-mid {
    grid-template-columns: 1fr;
  }
  .jbg-bbm__accent {
    height: clamp(28px, 6vw, 40px);
    width: 100%;
  }
}