/* covid-19-greece-stats — the LANDING page only (declared with `css:` in _index.md).
   Everything generic to a data article (`article_plots`, `article_table`) lives in the theme; what
   is here is the one thing that exists only on this hub, so the shared stylesheet stays clean.
   If the generator ever emits an `article_lplot` alongside `covid_lplot`, this moves to the theme
   unchanged. → doc/theme_features.md, doc/custom_css.md */

/* The hub is not an article that happens to have pictures: it is an INDEX OF FIGURES, one cluster
   per part. Each cluster is a set of three charts that only means something read together (the same
   measure against three different country groupings), so they stay on one row and break together.
   A contact sheet, in other words — which is what the page has always been, just not looking it. */
div.covid_lplot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 30px;
}

/* The cluster's first child is its label, linking to the part page. It spans the row and is set in
   the monospace register the site uses for every other "this is a section of the catalog" line, so
   the hub reads as an index rather than as captions floating over pictures. */
div.covid_lplot > a:first-child {
  grid-column: 1 / -1;
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 5px;
  transition: color .15s ease, border-color .15s ease;
}
div.covid_lplot > a:first-child:hover {
  color: var(--orange-dark);
  border-bottom-color: var(--orange);   /* the ground-line marks the row you are about to open */
}
div.covid_lplot br { display: none; }   /* the label's line break; the grid does that job now */

/* Same plate as a full-size chart (theme: a.article_plots), so a thumbnail and the figure it opens
   are visibly the same kind of object. */
div.covid_lplot > a:not(:first-child) {
  display: block;
  padding: 6px;
  background: var(--page-bg);
  border: 1px solid var(--rule);
  transition: border-color .15s ease;
}
div.covid_lplot > a:not(:first-child):hover { border-color: var(--orange); }
div.covid_lplot > a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
div.covid_lplot img.lplot { display: block; width: 100%; height: auto; }

/* These are dense line charts: below roughly 240px of plate the axis labels stop resolving, so the
   row drops to two and then to one rather than shrinking past legibility. The breakpoints are the
   site's existing layout steps, not new ones. */
@media (max-width: 1159px) { div.covid_lplot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { div.covid_lplot { grid-template-columns: 1fr; } }