/* Screenshots on the marketing pages.
 *
 * The design ships grey `.shot` placeholders — a hatched box with a caption
 * describing what should go there. The vendor step swaps the caption for a real
 * <img>; these are the styles that image needs.
 *
 * A separate file rather than an edit to brand.css, which is design output and
 * is replaced wholesale on the next sync. `.shot` itself is deliberately left
 * alone: it still styles the frame around the image, and it is still there for
 * any section added before it has a capture.
 *
 * Listed in GENERATED_SITE in scripts/vendor-site.mjs, or the vendor step
 * prunes it — it deletes anything under public/site that the design does not
 * have, and the design has never heard of this file.
 */

/* The frame stops being a placeholder once it holds a picture: no hatching, no
 * min-height fighting the image's own aspect ratio, no padding insetting it. */
.shot:has(.shot-img) {
  background-image: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.shot-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: inherit;
}

/* The hero, and anything else much wider than it is tall. Capped so a 2800px
 * capture does not push the section taller than the viewport on a laptop. */
.shot-img.wide {
  max-height: 60vh;
  object-fit: contain;
  object-position: top center;
}

/* A narrow capture — the admin sidebar, 1520x880 — would otherwise stretch to
 * the full column width and lose its detail to upscaling. */
.shot-img.panel {
  max-width: 560px;
  margin-inline: auto;
}