/* ---- Gallery: a section whose ## heading carries {.viz-gallery} ----
   Markup, on a heading of any level (##, ###, ...):
       ## More Examples of Data Visualization {.viz-gallery}

       ![Caption. Source: ...](images/s04/x.png){#fig-x tag="Heatmap"}

   Pandoc's section divs move the heading's class onto its <section>, so
   everything below that heading, down to the next ## heading, is styled
   here. `tag="..."` on a figure arrives in the HTML as data-tag on the
   figure's outer div, and is drawn as a small label above the picture.
   HTML only: the PDF ignores both the class and the tag and keeps one
   figure per row with its caption in the margin.

   LAYOUT. A wall of columns, not a grid of rows: the figures flow down the
   columns like a masonry wall, so pictures of different heights pack without
   gaps. The section widens into the margin column, which its figures no
   longer need, since their captions move under them. Columns are at least
   250px wide, so a phone gets one, and below Quarto's 768px breakpoint the
   section stays inside the body column.

   Each image shows the whole chart (never cropped) at its own height; click
   it to enlarge (assets/zoom.html). Captions are shown in full, smaller,
   under each image. The full reference a margin caption would carry is
   dropped; the author-year link in the caption stays. */

#quarto-document-content section.viz-gallery {
  display: block !important;
  grid-column: body-content-start / page-end-inset !important;
  columns: 3 250px;
  column-gap: 1.75rem;
}
@media (max-width: 767.98px) {
  #quarto-document-content section.viz-gallery {
    grid-column: body-content-start / body-content-end !important;
  }
}
section.viz-gallery > :is(h2, h3, h4),
section.viz-gallery > p,
section.viz-gallery > .callout { column-span: all; }   /* text above the wall spans it */
section.viz-gallery hr { display: none; }

/* Presentation mode (assets/present.html) makes slides by setting `hidden` on
   sections and blocks. The display: block !important rules above would beat
   the browser's [hidden] { display: none }, leaving the gallery on every
   slide, so [hidden] wins here, with an ID to outrank the section rule. */
#quarto-document-content section.viz-gallery[hidden],
#quarto-document-content section.viz-gallery [hidden] { display: none !important; }

/* A figure made by an R chunk sits inside two more wrappers, .cell and
   .cell-output-display, and Quarto makes each of them a body + margin grid
   too; left alone they squeeze the figure and its caption into a narrow
   track. Treat them like the figure: plain blocks that never split. */
section.viz-gallery .cell,
section.viz-gallery .cell-output-display {
  display: block !important;
  grid-column: auto !important;
  break-inside: avoid;
  margin: 0;
}

/* undo the body + margin grid each figure carries for its margin caption */
section.viz-gallery .quarto-float,
section.viz-gallery figure.quarto-float {
  display: block !important;
  grid-column: auto !important;
  margin: 0 0 1.5rem 0 !important;
  break-inside: avoid;
}
section.viz-gallery figure.quarto-float { margin: 0 !important; }
section.viz-gallery figure.quarto-float > div { margin: 0; }

/* the chart-type tag, from tag="..." on the figure */
section.viz-gallery .quarto-float[data-tag]::before {
  content: attr(data-tag);
  display: inline-block;
  margin: 0 0 0.4rem 0;
  padding: 0.2rem 0.45rem 0.15rem;
  font-size: 0.68rem; line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff;
  background: var(--uw-purple, #32006e);
  border-radius: 2px;
}

section.viz-gallery img.figure-img {
  width: 100% !important;   /* fills the card; a width=60% kept for the PDF would shrink it */
  height: auto !important;
  margin: 0;
  border-radius: 4px;
  cursor: zoom-in;
}

section.viz-gallery figcaption.margin-caption {
  position: static !important;
  grid-column: auto !important;
  width: auto !important;
  margin: 0.4rem 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;   /* Quarto's margin-caption size outranks a plain rule */
  line-height: 1.4 !important;
  text-align: left;
}
section.viz-gallery figcaption .csl-entry { display: none; }