/* ==========================================================================
   Průvodce pro učitele, dvojice snímků vedle sebe
   ========================================================================== */

/* Snímky v textu si jinak vystačí s .prose-figure a data-theme-img: adresu
   jim podle nasazeného motivu přepisuje js/theme.js, takže čtenář vidí
   stránku ve svých barvách a druhá varianta se nestahuje.

   Jednou to nestačí. V oddílu o telefonu má být vidět, že hra vypadá
   v obou motivech stejně, a to jde ukázat jenom tak, že stojí vedle sebe.
   Tenhle blok je proto výjimka, ne pravidlo, a jen kvůli němu se nemá
   zatěžovat prose.css, který si tahá každá stránka webu.

   Rám s paspartou je tentýž postup jako u .install-shots (components.css),
   tedy reprodukce v učebnici. Zlom nemá vlastní breakpoint: obálka prose
   je celá stavěná na clamp() a --ui, takže se sloupce lámou samy, jakmile
   na dva nezbude místo. */
/* Snímek, který existuje ve dvou šířkách, stojí ve stránce v <picture>:
   nad zlomem se stáhne ten z počítače, pod ním ten z telefonu (adresy
   dopisuje js/theme.js, viz data-theme-img). <picture> je řádkový prvek
   a bez tohohle by pod snímkem zůstal proužek na účaří. */
.prose-figure picture {
  display: block;
}

/* Úzké snímky: telefon na výšku a vystředěný dialog. Roztažené přes celý
   sloupec by se zvětšovaly nad svoje rozlišení a rozmazaly by se, a snímek
   telefonu širokým 700 px navíc přestane vypadat jako telefon. Strop je
   proto pod šířkou souboru (tools/snimky.mjs, SIRKY), takže se obrázek
   vždycky jenom zmenšuje. */
.prose-figure--uzka {
  max-width: calc(440px * var(--ui));
  margin-inline: auto;
}

.prose-figure--telefon {
  max-width: calc(320px * var(--ui));
  margin-inline: auto;
}

.shot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(180px * var(--ui)), 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.shot {
  margin: 0;
  padding: calc(6px * var(--ui));
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-sm) / 2);
}

/* Popisek je jen jmenovka motivu, ne věta. Sází se proto jako štítek,
   stejně jako nadpisy sekcí v liště a v konzoli. */
.shot figcaption {
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--sp-2);
  text-align: center;
}