/* ===== JBG Bento – Right Blurb (absolute blurb overlay) ===== */

.jbg-bento-right {
  position: relative; /* anchor for the absolute blurb */
  margin-inline: auto;
  overflow: visible;

  --gap: 32px;
  --radius: 0px;

  /* Column sizing for 1:1 control */
  --col-left: minmax(700px, 1fr); /* large left stack */
  --col-right: 360px;             /* narrow right stack */

  /* Element sizes / offsets */
  --blue-size: 160px;             /* small blue square */
  --topRight-height: 170px;       /* mint rectangle height */

  /* Blurb overlay */
  --blurb-width: clamp(380px, 41vw, 560px);
  --blurb-top: 220px;             /* vertical position of the overlay card */
  --blurb-right: 0;               /* stick to right edge */

  --offset-topRight-y:  10px;     /* mint tile drops a bit */
  --offset-blue-x:     -28px;     /* blue square tucks left */
  --offset-rightBottom-y: 6px;    /* small lift on the RB image */
}

/* === GRID underlay: only the images + color tiles === */
.jbgbr__grid {
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right); /* left column wider */
  grid-template-areas:
    "leftTop  topRight"
    "midLeft  ."
    "blueTile rightBottom";
  gap: var(--gap);
  align-items: start;
}

/* generic tile */
.jbgbr__tile {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: #0b0b0b;
}

/* areas */
.jbgbr__leftTop        { grid-area: leftTop; }
.jbgbr__topRightColor  { grid-area: topRight; min-height: 400px; width: 100%; }
.jbgbr__midLeft        { grid-area: midLeft; width: 100%; min-height:400px; }
.jbgbr__bottomLeftColor{
  grid-area: blueTile;
  width: var(--blue-size);
  height: var(--blue-size);
}
.jbgbr__rightBottom    { grid-area: auto; transform: translateY(-70px); width: 100%; }

/* image sizing to mirror the comp */
.jbgbr__image-figure,
.jbgbr__image-figure img { width: 100%; height: 100%; display: block; }
.jbgbr__image-figure { margin: 0; }
.jbgbr__image-figure img { object-fit: cover; }

.jbgbr__leftTop .jbgbr__image-figure       { aspect-ratio: 16 / 9; }
.jbgbr__midLeft .jbgbr__image-figure       { aspect-ratio: 21 / 9; }  /* wider bar */
.jbgbr__rightBottom .jbgbr__image-figure   { aspect-ratio: 4 / 5; max-height:310px; }   /* tall portrait */

/* === ABSOLUTE BLURB OVERLAY (out of flow) === */
.jbgbr__blurb.is-abs {
  position: absolute;
  right: var(--blurb-right);
  top: var(--blurb-top);
  width: var(--blurb-width);
  z-index: 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0b0b; /* will be overridden by inline style */
  color: #fff;         /* will be overridden by inline style */
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.jbgbr__blurb-inner { padding: 32px; }

.jbgbr__blurb .wp-block-group { margin: 0; }
.jbgbr__blurb .wp-block-paragraph { margin: 0 0 12px; line-height: 1.6; }

/* Eyebrow + Heading classes (apply these to the first two Paragraphs) */
.jbgbr__eyebrow { letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-size: 12px; margin: 0 0 12px; }
.jbgbr__heading { margin: 0 0 20px; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.1; }

/* Logos row inside blurb */
.jbgbr__logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.jbgbr__logo-img { max-height: 34px; width: auto; display: block; }

/* editor control overlay */
.jbgbr__controls { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.jbgbr__btn-remove { color:#c00; }

/* === Responsive: stack and make blurb in-flow === */
@media (max-width: 1140px) {
  .jbgbr__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "leftTop"
      "topRight"
      "midLeft"
      "blueTile"
      "rightBottom";
  }
  .jbg-bento-right {
    --offset-topRight-y:  0px;
    --offset-blue-x:      0px;
    --offset-rightBottom-y: 0px;
  }
  .jbgbr__bottomLeftColor { width: 120px; height: 120px; }
  .jbgbr__blurb.is-abs {
    position: static;
    width: auto;
    margin-top: 24px;
    box-shadow: none;
  }
}