/* Full source images, not cropped thumbnails or live embedded customer sites. */
.saku-image-frame,
.saku-project-visual .saku-image-frame {
  width: min(100%, var(--saku-source-width, 1200px));
  max-width: 100%;
  margin: 0 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 42px #0c263414;
}
.saku-image-frame .browser-bar { background: #f1f5f7; }
.saku-image-frame.phone-device { width: min(100%, 320px, var(--saku-source-width, 320px)); border: 5px solid var(--ink); background: #07182b; }
.saku-image-frame.phone-device .saku-image-frame__caption { background: #fff; }
.saku-image-frame .browser-bar span { font-family: inherit; font-size: 11px; color: #526878; }
.saku-image-frame .saku-image-frame__viewport {
  height: auto;
  min-height: 0;
  max-height: clamp(220px, 65vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  background: #f3f6f7;
}
.saku-image-frame--detail .saku-image-frame__viewport { max-height: clamp(260px, 68vh, 760px); }
.saku-image-frame .saku-image-frame__viewport img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  object-position: top;
}
.saku-image-frame__viewport:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: -3px; }
.saku-image-frame .saku-image-frame__hint {
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: #edfafa;
  color: #245e61;
  font-size: 12px;
  line-height: 1.7;
}
.saku-image-frame__hint[hidden] { display: none !important; }
.saku-image-frame .saku-image-frame__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: #526878;
  line-height: 1.8;
}
.saku-image-frame__caption span { min-width: 0; overflow-wrap: anywhere; }
.saku-image-frame__caption a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 680px) {
  .saku-image-frame .saku-image-frame__caption { gap: 2px 12px; padding: 10px 12px; font-size: 11px; }
  .saku-image-frame .saku-image-frame__hint { padding: 8px 12px; font-size: 11px; }
}