/* ========================================================================
   Snap gallery — magazine-cover system
   ------------------------------------------------------------------------
   Layered on top of the site-wide /assets/style.css (loaded first), this
   stylesheet adds the gallery-specific rules: the theme picker hero
   layout, the per-theme viewport sections, and the cell grid + badges.
   Same monochrome palette + cobalt accent + hairline rules + DM Serif /
   IBM Plex Mono typography as the rest of demo.regionallyfamous.com.
   ======================================================================== */

/* Theme picker (top-level docs/snaps/index.html) — full-width "magazine
   spreads", one per theme: large hero shot on the left, italic blurb +
   stats on the right, hairline rule between rows. Replaces the old
   rounded-card grid. */
.snap-picker {
  border-top: var(--hairline) solid var(--rule);
  margin-top: 1.5rem;
}
.snap-picker .theme {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: var(--hairline) solid var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.snap-picker .theme .hero {
  aspect-ratio: 16 / 10;
  border: var(--hairline) solid var(--rule);
  background: var(--paper) center / cover no-repeat;
  overflow: hidden;
}
.snap-picker .theme .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.snap-picker .theme .meta { display: flex; flex-direction: column; gap: .75rem; }
.snap-picker .theme .index {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.snap-picker .theme h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 0;
}
.snap-picker .theme .blurb {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}
.snap-picker .theme .stats {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.snap-picker .theme .stats .bad { color: var(--accent); }
.snap-picker .theme .stats .warn { color: var(--ink); border-bottom: 1px dotted var(--ink); padding-bottom: 1px; }
.snap-picker .theme .open {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: .25rem;
}
.snap-picker .theme .open .arrow { color: var(--accent); }
.snap-picker .theme:hover .hero { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 720px) {
  .snap-picker .theme { grid-template-columns: 1fr; }
}

/* Per-theme page (docs/snaps/<theme>/index.html) — one section per
   viewport (mobile / tablet / desktop / wide), each section sized to
   reflect what that viewport actually shoots:

     - mobile + tablet: tall portrait cells in a denser grid
     - desktop + wide: short landscape cells in a sparser grid

   Without per-viewport tuning, every cell shared a single 4/5 portrait
   frame — desktop and wide screenshots (which are landscape full-page
   PNGs averaging ~600x1100) ended up slivered into a tiny strip across
   the top of an oversized portrait box, leaving the rest of the cell
   blank and the whole grid reading as broken. The classes below are
   stamped onto each `<section class="viewport-section viewport-{vp}">`
   wrapper by `_render_theme_page` so the grid + frame ratio always
   tracks the source aspect. */
.viewport-section { margin-top: clamp(2rem, 4vw, 3rem); }
.viewport-section h2 {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: .65rem;
  border-bottom: var(--hairline) solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.viewport-section h2 .count { opacity: .55; font-weight: 400; }

.cells {
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.viewport-mobile .cells   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.viewport-tablet .cells   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.viewport-desktop .cells  { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.viewport-wide .cells     { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.cell { display: flex; flex-direction: column; gap: .5rem; }
.cell .frame {
  border: var(--hairline) solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  aspect-ratio: 4/5;
  display: block;
  transition: outline .12s ease;
}
/* Per-viewport frame ratios: roughly mirror each viewport's actual
   aspect so the cropped top-of-page preview reads as "a phone" or
   "a desktop" at a glance, not as a uniformly portrait postage stamp. */
.viewport-mobile  .cell .frame { aspect-ratio: 9 / 16; }
.viewport-tablet  .cell .frame { aspect-ratio: 3 / 4; }
.viewport-desktop .cell .frame { aspect-ratio: 16 / 11; }
.viewport-wide    .cell .frame { aspect-ratio: 16 / 9; }
.cell .frame:hover, .cell .frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.cell .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cell .meta { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; }
.cell .meta .slug {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.cell .meta .desc {
  font-family: var(--serif-text);
  font-style: italic;
  color: var(--muted);
  font-size: .82rem;
  flex-basis: 100%;
  line-height: 1.35;
}
.cell .badges { display: inline-flex; gap: .3rem; }
.cell .badge {
  display: inline-block;
  padding: 0 .35rem;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.55;
}
.cell .badge.err { color: var(--accent); border-color: var(--accent); }
.cell .badge.warn { color: var(--ink); }
.cell .badge.flow { color: var(--ink); border-style: dashed; }

/* Per-finding evidence crops -- a horizontal strip of small JPGs of
   the offending elements, captured by bin/snap.py alongside the full
   page screenshot. Reviewers see the full-page thumbnail to set
   context, then the crops to identify exactly which element fired
   which check, without scrubbing through a 3000px tall PNG. */
.cell .crops {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .25rem 0 0;
}
.cell .crop {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  color: inherit;
  border: var(--hairline) solid var(--rule);
  background: var(--paper);
  padding: 2px;
  max-width: 110px;
  font-family: var(--mono);
  font-size: .54rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: border-color .12s ease;
}
.cell .crop:hover, .cell .crop:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.cell .crop img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: cover;
  object-position: center top;
}
.cell .crop-kind {
  display: block;
  padding: 1px 3px 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell .crop-error { border-color: var(--accent); }
.cell .crop-error .crop-kind { color: var(--accent); }
.cell .crop-warn  { border-color: var(--ink); }
.cell .crop-info  { opacity: .8; }

/* Snap-page header (re-uses .subhero from /assets/style.css) */
.snap-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .5rem 0 .25rem;
}
.snap-header a { text-decoration: none; }
.snap-header a:hover { color: var(--accent); }