/* ============================================================================
   shots.css: screenshot previews for /work/ and the project pages.

   Loaded per page from src/pages/work.mjs. Two jobs:
     1. .shot        the full-width preview that sits near the top of a
                     project page, under the hero.
     2. .shot-thumb  the 16/10 thumbnail on a /work/ index card, plus
                     .shot-pending for the one card that has no shot to show.

   Every rule here is scoped to a .shot* class so nothing leaks into the
   shared card and figure styles in site.css.

   BRAND OS v3.0 "ATLAS". This sheet had the last three pasted hexes on the
   route: a #D9ECE7 frame that predated the token file and two rgba(0,26,26)
   shadow stacks. Both are gone. v3 §8.4 allows exactly two shadows — "0 1px 3px
   at 5% for resting sheets, 0 12px 30px -14px at 22% for floating ones.
   Nothing else" — which are --sh-sm and --sh-md, so those are what a screenshot
   frame uses now. Depth otherwise comes from a hairline, per law 3.
   ========================================================================= */

/* ---- FULL-WIDTH PREVIEW -------------------------------------------------- */

.shot-band {
  background: var(--paper);
  padding-top: clamp(30px, 4.5vw, 54px);
}

/* Sits directly under a stats band on pages that have one, so the top
   padding above collapses to nothing there and the shot rides up close. */
.proof + .shot-band { padding-top: clamp(24px, 3.5vw, 40px); }

.shot {
  margin: 0;
  max-width: 100%;
}

.shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-md);
  background: var(--band);
}

.shot figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- CARD THUMBNAILS ----------------------------------------------------- */

/* Rides on .card-media from site.css, which already supplies the 16/10 box,
   the clipping and the object-fit. This only adds the frame. */
.card-media.shot-thumb {
  border: 1px solid var(--hairline);
  background: var(--band);
}

.card-media.shot-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The card whose site is not published yet. Same box as a thumbnail so the
   grid stays level, but plainly not an image. */
.shot-pending {
  aspect-ratio: 16 / 10;
  margin: -4px -4px 16px;
  border-radius: calc(var(--r) - 4px);
  border: 1px dashed var(--hairline);
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, var(--hairline-soft) 9px 10px),
    var(--band);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* --faint on --band is 4.49:1, a hair under AA at 10.5px. --muted on the
     same fill is 5.72:1. */
  color: var(--muted);
}

/* The label wraps to two tidy lines rather than one line that grazes the box
   edge on a narrow card. */
.shot-pending span { display: block; max-width: 22ch; }

/* ---- SMALL SCREENS ------------------------------------------------------- */

/* Nothing here is allowed to exceed its container at 375px. The widths above
   are already fluid; this trims the radius so the frame does not look
   oversized next to body text on a phone. The shadow does not get a third
   value: a phone-sized variant of --sh-md would be the fourth shadow in a
   system that publishes two. It steps DOWN a rung to the resting sheet
   instead, which is the same move the reproduction ladder makes. */
@media (max-width: 560px) {
  .shot img {
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
  }
  .shot figcaption { letter-spacing: .06em; }
}