/* ===== JBG Bento – Left Blurb (Compact) ===== */
.jbg-bento-left-compact{
  --gap: 32px;
  --radius: 0px;
  --blue-size: 180px;
  --blue-offset-y: 16px;           /* fine vertical tweak */

  /* default columns similar to comp */
  --col-left: clamp(420px, 36vw, 560px);
  --col-right: minmax(520px, 1fr);
}

.jbglbc__grid{
  position: relative; /* for the floating blue square */
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right);
  grid-template-areas:
    "blurb     rightTop"
    "blurb     rightBottom";
  gap: var(--gap);
  align-items: start;
}

/* optional 50/50 split */
.jbg-bento-left-compact.jbglbc--split .jbglbc__grid{ grid-template-columns: 1fr 1fr; }

/* Areas */
.jbglbc__blurb{ grid-area: blurb; align-self: center; max-width: 40rem; }
.jbglbc__rightTop{ grid-area: rightTop; }
.jbglbc__rightBottom{ grid-area: rightBottom; min-height: 375px; flex:1; }

/* Floating blue tile – absolute at the right edge of the lower row */
.jbglbc__blue{
  position: relative;
  width: var(--blue-size);
  height: var(--blue-size);
  border-radius: var(--radius);
  pointer-events: none;
}

/* Generic tile/image */
.jbglbc__tile{ position:relative; overflow:hidden; border-radius:var(--radius); background:#0b0b0b; }
.jbglbc__image-figure,
.jbglbc__image-figure img{ width:100%; height:100%; display:block; }
.jbglbc__image-figure{ margin:0; }
.jbglbc__image-figure img{ object-fit:cover; }

/* Aspect ratios approximating screenshot */
.jbglbc__rightTop .jbglbc__image-figure{ aspect-ratio: 4 / 3; }

/* Blurb text */
.jbglbc__blurb-inner{ padding-right: 24px; }
.jbglbc__eyebrow{ letter-spacing:.12em; text-transform:uppercase; opacity:.85; font-size:12px; margin:0 0 14px; }
.jbglbc__heading{ margin:0 0 18px; font-size: clamp(28px, 4.4vw, 44px); line-height:1.1; }
.jbglbc__logos{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.jbglbc__logo-img{ max-height:34px; width:auto; display:block; }

/* Controls overlay */
.jbglbc__controls{ position:absolute; right:10px; bottom:10px; display:flex; gap:8px; z-index:2; }
.jbglbc__btn-remove{ color:#c00; }

/* Responsive */
@media (max-width: 1100px){
  .jbg-bento-left-compact{
    --col-left: 1fr;
    --col-right: 1fr;
  }
  .jbglbc__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "blurb"
      "rightTop"
      "rightBottom";
  }
  .jbglbc__blue{
    position: static;
    width: 140px;
    height: 140px;
    margin-left: auto;          /* keep it near the right side visually */
    margin-top: var(--gap);
  }
}