/**
 * @file shots.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description Pictures of pages side by side (components/Shots.js): each in the Object box's frame,
 *   the picture 150px tall and cut to its top, a caption under it with a typewriter line; a page
 *   with no picture shows a grey place with the words that say so. Two to a row, one under 1100px.
 *   The frame reads the shape tokens.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.0.0 — 2026-09-27 — Initial, with the values of admin-apps.css .adm-ap-pair, .adm-ap-shot,
 *     .adm-ap-shot-none, .adm-ap-shot-cap (page group G5).
 */

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .75rem 0 0; }
.shot { display: block; border: var(--shape-frame) solid var(--shape-frame-colour); background: var(--card-bg); }
.shot-picture { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top center; border-bottom: var(--shape-frame) solid var(--shape-frame-colour); background: var(--bg-surface); }
.shot-none { display: flex; align-items: center; justify-content: center; height: 150px; border-bottom: var(--shape-frame) solid var(--shape-frame-colour); font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); background: var(--bg-surface); }
.shot-caption { display: block; padding: 7px 10px; font-size: .8rem; }
.shot-sub { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .shots { grid-template-columns: minmax(0, 1fr); }
}