/* J&H 3D Animations: the frame around each animation. */

.jh3d {
  --jh3d-gutter: 30px; /* the theme's column gutter (2 × 15px padding) */
  position: relative;
  /* The wide frame reaches into the next column, whose empty area would otherwise sit on top
     and swallow the mouse over the right half. The fit script keeps the frame off that
     column's actual content, so nothing there gets covered. */
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 28px;
  aspect-ratio: var(--jh3d-ratio, 16 / 9);
  border: 1px solid #e3e6e8;
  /* Same colour as the animation's loading screen (set per animation), so nothing flashes. */
  background: var(--jh3d-bg, #e6e6e6);
}

.jh3d__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Desktop: also use the column beside the text (it's half the row, so 2 × width + gutter). */
@media (min-width: 992px) {
  .jh3d--wide:not(.jh3d--narrow) {
    width: calc(200% + var(--jh3d-gutter));
    max-width: none;
  }
}

@media (max-width: 767px) {
  .jh3d {
    aspect-ratio: var(--jh3d-ratio-mobile, 4 / 3);
  }
}

/* Only shown to logged-in editors when a shortcode names an unknown animation. */
.jh3d-missing {
  padding: 10px 14px;
  border-left: 4px solid #f6bd46;
  background: #fff8e6;
}