/* Shared, period-correct multimedia presentation and JPEGView window. */

.mac7-lightbox-source img { cursor: zoom-in; }
.mac7-lightbox-source a { display: inline-block; max-width: 100%; }
.mac7-lightbox-source.has-broken-image { min-height: 82px; display: grid; place-items: center; border: 1px solid var(--mac7-line); background: repeating-linear-gradient(135deg, var(--mac7-white) 0 5px, var(--mac7-platinum) 5px 6px); }
.mac7-lightbox-source.has-broken-image::after { content: "?"; width: 30px; height: 34px; display: grid; place-items: center; border: 1px solid var(--mac7-line); background: var(--mac7-white); font: 700 18px/1 var(--mac7-ui-font); }

.wp-block-image.is-style-clarisworks-placed,
.wp-block-gallery.is-style-clarisworks-placed {
  padding: 6px;
  border: 1px solid var(--mac7-line);
  background: var(--mac7-white);
}
.wp-block-image.is-style-clarisworks-placed img,
.wp-block-gallery.is-style-clarisworks-placed img { display: block; }
.wp-block-image.is-style-clarisworks-placed figcaption,
.wp-block-gallery.is-style-clarisworks-placed figcaption { margin: 6px 2px 1px; text-align: left; }

.wp-block-image.is-style-scrapbook-clipping,
.wp-block-gallery.is-style-scrapbook-clipping {
  padding: 9px;
  border: 1px solid var(--mac7-line);
  background: var(--mac7-white);
  box-shadow: 4px 4px 0 var(--mac7-line-soft);
}
.wp-block-image.is-style-scrapbook-clipping figcaption,
.wp-block-gallery.is-style-scrapbook-clipping figcaption {
  padding-top: 6px;
  border-top: 1px dotted var(--mac7-line-soft);
  text-align: left;
}

.wp-block-image.is-style-system-screenshot,
.wp-block-gallery.is-style-system-screenshot { position: relative; padding: 25px 4px 4px; border: 1px solid var(--mac7-line); background: var(--mac7-platinum); box-shadow: 3px 3px 0 var(--mac7-line-soft); }
.wp-block-image.is-style-system-screenshot::before,
.wp-block-gallery.is-style-system-screenshot::before {
  content: "";
  height: 20px;
  position: absolute;
  top: 3px;
  right: 4px;
  left: 4px;
  border-bottom: 1px solid var(--mac7-line);
  background: repeating-linear-gradient(var(--mac7-white) 0 2px, var(--mac7-title-stripe) 2px 3px);
}
.wp-block-image.is-style-system-screenshot img,
.wp-block-gallery.is-style-system-screenshot img { padding: 0; border: 1px solid var(--mac7-line); box-shadow: none; }

.wp-block-image.is-style-unframed-pict,
.wp-block-gallery.is-style-unframed-pict { padding: 0; border: 0; background: transparent; box-shadow: none; }
.wp-block-image.is-style-unframed-pict img,
.wp-block-gallery.is-style-unframed-pict img { padding: 0; border: 0; box-shadow: none; }

.mac7-featured-image > a { width: 100%; display: block; }
.mac7-featured-image figcaption { margin-top: 7px; }

.mac7-jpegview-dialog {
  width: min(1040px, calc(100vw - 42px));
  max-width: none;
  height: min(780px, calc(100vh - 42px));
  max-height: none;
  padding: 0;
  border: 0;
  color: #000;
  background: transparent;
  overflow: visible;
}
.mac7-jpegview-dialog::backdrop {
  background-color: rgba(0, 0, 0, .58);
  background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px);
  background-size: 2px 2px;
}
.mac7-jpegview-window { height: 100%; display: grid; grid-template-rows: 27px 26px minmax(0, 1fr) auto 24px; border: 2px solid #000; background: #fff; box-shadow: 7px 7px 0 #000; }
.mac7-jpegview-titlebar { display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 2px solid #000; background: repeating-linear-gradient(#fff 0 2px, #000 2px 3px); font: 700 11px/1 var(--mac7-ui-font); }
.mac7-jpegview-titlebar strong { max-width: calc(100% - 75px); padding: 2px 12px; overflow: hidden; background: #fff; text-overflow: ellipsis; white-space: nowrap; }
.mac7-jpegview-close { width: 14px; height: 14px; position: absolute; left: 6px; border: 1px solid #000; border-radius: 0; background: #fff; box-shadow: inset 1px 1px #777; }
.mac7-jpegview-menus { display: flex; align-items: center; gap: 1px; padding: 0 7px; overflow-x: auto; border-bottom: 1px solid #000; background: #fff; }
.mac7-jpegview-menus button,
.mac7-jpegview-menus a { min-height: 23px; padding: 4px 9px; border: 0; border-radius: 0; color: #000; background: #fff; font: 10px/1 var(--mac7-ui-font); text-decoration: none; white-space: nowrap; }
.mac7-jpegview-menus :where(button, a):hover,
.mac7-jpegview-menus :where(button, a):focus { color: #fff; background: #000; outline: 0; }
.mac7-jpegview-canvas { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: auto; background: #000; }
.mac7-jpegview-image { display: block; image-rendering: auto; }
.mac7-jpegview-dialog[data-zoom="fit"] .mac7-jpegview-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mac7-jpegview-dialog[data-zoom="100"] .mac7-jpegview-image { max-width: none; max-height: none; width: auto; height: auto; }
.mac7-jpegview-caption { min-height: 0; padding: 7px 10px; margin: 0; border-top: 1px solid #000; background: #fff; font: 11px/1.4 var(--mac7-ui-font); }
.mac7-jpegview-caption:empty { display: none; }
.mac7-jpegview-status { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 4px 26px 4px 8px; position: relative; border-top: 1px solid #777; background: #eee; color: #333; font: 9px/1 var(--mac7-ui-font); }
.mac7-jpegview-status::after { content: ""; width: 15px; height: 15px; position: absolute; right: 2px; bottom: 2px; background: repeating-linear-gradient(135deg, transparent 0 3px, #000 3px 4px); }
.mac7-jpegview-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 650px) {
  .mac7-jpegview-dialog { width: calc(100vw - 10px); height: calc(100vh - 18px); }
  .mac7-jpegview-window { grid-template-rows: 29px 32px minmax(0, 1fr) auto 28px; box-shadow: 3px 3px 0 #000; }
  .mac7-jpegview-menus { padding-inline: 3px; }
  .mac7-jpegview-menus button,
  .mac7-jpegview-menus a { min-height: 29px; padding-inline: 7px; }
  .mac7-jpegview-status { grid-template-columns: 1fr auto; }
  .mac7-jpegview-status span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .mac7-jpegview-dialog[open] .mac7-jpegview-window { animation: mac7-window-open 110ms steps(2, end); }
  @keyframes mac7-window-open { from { transform: scale(.97); opacity: .3; } to { transform: scale(1); opacity: 1; } }
}