/* ===== Bento layout – 2 flex columns (no outer grid) ===== */
.jbg-bento-box-3 {
  /* knobs */
  --gap: 45px;
  /* spacing between left/right columns and left stack */
  --right-gap: 26px;
  /* spacing inside right column */
  --bottom-width: .74;
  /* width of right-middle/bottom vs right column (0–1) */
  --rightTall-h: clamp(560px, 78vh, 880px);

  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}

/* two columns */
.jbg-bento-box-3__leftCol,
.jbg-bento-box-3__rightCol {
  flex: 1 1 0;
  /* 50/50 columns */
  min-width: 0;
  /* prevent overflow from long content/images */
  display: flex;
  flex-direction: column;
}

/* stacks */
.jbg-bento-box-3__leftCol,
.jbg-bento-box-3__rightCol {
  gap: var(--gap);
}


/* tiles */
.jbg-bento-box-3__tile {
  position: relative;
  background: #0b0b0b;
  /* only visible if an image is missing */
}

/* ----- Right column specifics ----- */
.jbg-bento-box-3__rightBottom {
  align-self: flex-start;
  /* left-aligned inset */
  width: calc(100% * var(--bottom-width));
  /* shared inset width */
}


/* ----- Images ----- */
.jbg-bento-box-3__image-figure,
.jbg-bento-box-3__image-figure img {
  display: block;
  width: 100%;
  height: 100%;
}

.jbg-bento-box-3__image-figure {
  margin: 0;
}

.jbg-bento-box-3__image-figure img {
  object-fit: cover;
}

/* left column proportions */
.jbg-bento-box-3__leftTop .jbg-bento-box-3__image-figure {
  aspect-ratio: 16/10;
  min-height: 470px;
}

.jbg-bento-box-3__leftMiddle .jbg-bento-box-3__image-figure {
  aspect-ratio: 16/10;
  min-height: 420px;
}

.jbg-bento-box-3__leftBottom .jbg-bento-box-3__image-figure {
  aspect-ratio: 4/3;
  min-height: 450px;
}

/* right column proportions */
.jbg-bento-box-3__rightTall .jbg-bento-box-3__image-figure {
  aspect-ratio: 695/981;
  height: auto;
}

.jbg-bento-box-3__rightTall img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.jbg-bento-box-3__rightMiddle .jbg-bento-box-3__image-figure {
  aspect-ratio: 16/10;
  min-height: 420px;
}

.jbg-bento-box-3__rightBottom .jbg-bento-box-3__image-figure {
  aspect-ratio: 16/10;
  min-height: 360px;
}

/* ----- Text tile ----- */
.jbg-bento-box-3__text {
  padding: 45px;
  display: flex;
  align-items: center;
}

.jbg-bento-box-3__text-inner {
  width: 100%;
}

.jbg-bento-box-3__text-inner p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
}

/* ----- Optional parallax-safe toggles (unchanged) ----- */
.jbg-bento-box-3--parallax .jbg-bento-box-3__tile {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: none;
}

@media (prefers-reduced-motion:reduce) {
  .jbg-bento-box-3--parallax .jbg-bento-box-3__tile {
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Responsive: single column stack ===== */
@media (max-width:1024px) {
  .jbg-bento-box-3 {
    flex-direction: column;
  }

  /* unify gaps on mobile */
  .jbg-bento-box-3__leftCol {
    gap: var(--gap);
    width: 100%;
  }

  .jbg-bento-box-3__rightCol {
    gap: var(--gap);
    width: 100%;
  }

  /* reset insets/offsets */
  .jbg-bento-box-3__rightMiddle,
  .jbg-bento-box-3__rightBottom {
    width: 100%;
    margin-top: 0;
  }

  .jbg-bento-box-3__rightTall .jbg-bento-box-3__image-figure {
    height: auto;
    aspect-ratio: 9/7;
  }

}