/* Product screenshots in the hero band - 2026-09-03.
   John: "the 2 photos of what it looks like on the Weld map tab need to be moved up
   into the blue area on the right of the 'Say the run out loud', same thing with tank
   and vessel and the report builder."

   Loads AFTER css/style.css and css/app-family.css and changes neither. The two-column
   hero itself is already app-family.css .herogrid (1.2fr .8fr, collapsing to one column
   at 900px) - a page opts in simply by dropping "solo" off its .herogrid.

   One shot: it fills the column. Two or three: the most representative one leads and the
   rest sit under it in a row, so three screenshots never turn into three postage stamps. */

.heroshots{display:flex;flex-direction:column;gap:14px;min-width:0}
.heroshots figure{margin:0;min-width:0}

.heroshots img{
  display:block;width:100%;height:auto;
  background:#fff;border:1px solid rgba(255,255,255,.18);border-radius:6px;
  box-shadow:6px 6px 0 rgba(0,0,0,.22);
}

.heroshots figcaption{
  font-size:12.5px;line-height:1.45;color:var(--dimD);
  margin-top:7px;max-width:46ch;
}

/* the secondary shots, side by side under the lead one */
.heroshots .rest{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.heroshots .rest figcaption{font-size:11.5px;margin-top:5px}

@media (max-width:900px){
  .heroshots{margin-top:10px}
  /* on a phone the hero is one column already - keep the shots readable, not shrunken */
  .heroshots .rest{grid-template-columns:1fr}
  .heroshots .rest figcaption{font-size:12.5px}
}