/* ===== Bento 2 layout ===== */
.jbg-bento-2 {
  --jbg-gap: 45px;
  --jbg-bottom-width: 0.74;
  --jbg-left-bottom-shift: 242px; /* small upward nudge for even spacing */

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lt rtop"
    "txt rmid"
    "lb rb";
  gap: var(--jbg-gap);
  align-items: stretch;
}

.jbg-bento__tile {
  overflow: hidden;
  background: #0b0b0b;
  position: relative;
}

/* Grid areas */
.jbg-bento__leftTop     { grid-area: lt; }
.jbg-bento__text        { grid-area: txt; padding: 45px; display:flex; align-items:center; align-self:start; } /* don't stretch tall */
.jbg-bento__leftBottom  { grid-area: lb; margin-top: calc(-1 * var(--jbg-left-bottom-shift)); } /* pull up slightly */
.jbg-bento__rightTop    { grid-area: rtop; }
.jbg-bento__rightTall   { grid-area: rmid; }
.jbg-bento__rightBottom { grid-area: rb; }

/* Image presentation */
.jbg-bento__image-figure,
.jbg-bento__image-figure img {
  display: block;
  width: 100%;
  height: 100%;
}
.jbg-bento__image-figure { margin: 0; }
.jbg-bento__image-figure img { object-fit: cover; }

/* Aspect ratios to match art direction */
.jbg-bento__leftTop .jbg-bento__image-figure { aspect-ratio: 16 / 10; min-height: 470px; }

.jbg-bento__rightTop .jbg-bento__image-figure { aspect-ratio: 16 / 10; min-height: 360px; }
.jbg-bento__rightTall .jbg-bento__image-figure { aspect-ratio: 16 / 9; min-height: 420px; }

.jbg-bento__leftBottom {
  justify-self: end;
  width: calc(100% * var(--jbg-bottom-width));
}
.jbg-bento__leftBottom .jbg-bento__image-figure { aspect-ratio: 4 / 3; min-height: 450px; }

.jbg-bento__rightBottom .jbg-bento__image-figure { aspect-ratio: 16 / 10; min-height: 380px; }

/* Text tile */
.jbg-bento__text-inner { width: 100%; }
.jbg-bento__text-inner p { margin: 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }

/* Parallax (scoped to Bento 2) */
.jbg-bento-2--parallax .jbg-bento__tile {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: none;
}

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

/* Responsive */
@media (max-width: 1024px) {
  .jbg-bento-2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lt"
      "rtop"
      "rmid"
      "txt"
      "lb"
      "rb";
  }
  .jbg-bento__leftBottom { width: 100%; margin-top: 0; }
  .jbg-bento__rightTall .jbg-bento__image-figure { aspect-ratio: 16 / 10; }
}