/* =============================================================================
   card-grid -- an index page that is a grid of cards, one per thing, each
   leading to a page of its own, with a one-line filter bar above it

   /hardware/ is the first page built on it. Nothing in here names a machine
   or a processor: a filter is a <select name="cpu">, a card answers it with
   data-cpu="286", and public/js/card-filter.js does the rest. The markup is
   in site/hardware.html and the rules for adding to it are in the README
   under "Card grids".
   ========================================================================== */

/* --- the filter bar ---------------------------------------------------------
   One ruled line: how many cards are showing, a pop-up menu per question, and
   the way back to all of them. It is one line so that the grid starts near
   the top of the screen. It is hidden in the markup and shown by the script,
   because without the script the menus would do nothing and every card is on
   the page anyway. */
.pick-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(4 * var(--u)) var(--pad);
  margin: 0 0 var(--pad);
  padding: calc(4 * var(--u)) 0;
  border-block: var(--hair) solid var(--ink);
  font-family: var(--font-px); font-size: var(--fs); line-height: 1.2;
}
.pick-bar[hidden], .pick-bar [hidden] { display: none; }
/* Wide enough for "10 of 10 machines", so the menus stay where they are when
   the count grows from "10 machines" to "4 of 10 machines". */
.pick-bar__count { margin: 0; min-width: 17ch; max-width: none; }
.pick { display: flex; align-items: center; gap: calc(4 * var(--u)); }
/* The menu is the browser's own <select> with the frame of a .btn. Its
   triangle belongs to the box round it, because a <select> takes no
   pseudo-element, and is the one the menu bar's pull-downs use. */
.pick__box { position: relative; display: block; }
.pick__box::after {
  content: "\25BE";
  position: absolute; top: 50%; right: calc(5 * var(--u));
  transform: translateY(-50%);
  font-size: 0.7em; line-height: 1;
  pointer-events: none;
}
.pick select {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  margin: 0;
  padding: calc(3 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u));
  border: var(--hair) solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: inherit; cursor: pointer;
}
/* A menu with a choice made in it is inverted, the way a selected icon is,
   and like a .btn--default it goes back to paper under the pointer. */
.pick select:hover, .pick select.is-chosen { background: var(--ink); color: var(--paper); }
.pick select.is-chosen:hover { background: var(--paper); color: var(--ink); }
.pick__box:has(select:hover)::after, .pick__box:has(select.is-chosen)::after { color: var(--paper); }
.pick__box:has(select.is-chosen:hover)::after { color: var(--ink); }
.pick select:focus-visible { outline: var(--hair) dotted var(--ink); outline-offset: var(--hair); }
.pick-bar .btn { padding-block: calc(3 * var(--u)); }

/* --- the grid ---------------------------------------------------------------
   Three abreast, then two, then one. A card is a window: a title bar, a
   picture cropped to 3:2 so a row lines up whatever shape the photographs
   were, a headline, and two facts with their icons. It is kept short, so
   that a whole row and the top of the next fit on a laptop screen. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.card { display: flex; flex-direction: column; min-width: 0; }
.card[hidden] { display: none; }
.card__image {
  aspect-ratio: 3 / 2;
  border-bottom: var(--hair) solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.card__image img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: auto;              /* a photograph, not a screendump */
}
.card .win__body {
  display: flex; flex-direction: column; flex: 1;
  padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
}
.card__kicker {
  margin: 0 0 calc(1 * var(--u));
  font-family: var(--font-px); font-size: var(--fs-px-small); line-height: 1.2;
}
.card h3 { margin: 0 0 calc(6 * var(--u)); font-size: var(--fs); line-height: 1.15; text-wrap: balance; }
.card h3 a { text-decoration: none; }
/* The headline's link is the whole card: one link to tab to, and nowhere on
   the card that is not it. */
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover, .card:focus-within {
  box-shadow: var(--shadow-off-lg) var(--shadow-off-lg) 0 0 var(--ink);
}
.card:hover h3 a, .card h3 a:focus-visible { text-decoration: underline; }

/* The two facts the filters sort by, each beside an icon. Ruled the way .specs
   is: the block is ink, the cells are paper, the gap between them is the line.

   The icon is a 23x23 bitmap (tools/make-cpu-icons.py) used as a mask over
   currentColor, so it follows the dock's Invert, and it is drawn at two screen
   pixels to one like everything else here. Each element names its own file:
   style="--icon: url(/img/cpu/at.svg)". */
.card__icon {
  display: block; flex: none;
  width: 46px; height: 46px;
  background: currentColor;
  -webkit-mask: var(--icon) center / 100% 100% no-repeat;
          mask: var(--icon) center / 100% 100% no-repeat;
}
.card__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hair);
  max-width: none;
  margin: auto 0 0;
  padding: var(--hair);
  background: var(--ink);
}
.card__facts > div {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  min-width: 0;
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  background: var(--paper);
}
.card__facts dd {
  margin: 0; min-width: 0;
  font-family: var(--font-px); font-size: var(--fs-px-small); line-height: 1.15;
}
.card__facts dd b { display: block; font-weight: 400; font-size: var(--fs); background: none; color: inherit; padding: 0; }

@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Where the bar no longer fits on a line it is two: the count, with Show all
   at the far end of it, then the menus side by side under their labels. Show
   all is placed over the count's row rather than after it, and the row is as
   tall as the button whether or not the button is there, so choosing a filter
   does not move the cards. */
@media (max-width: 900px) {
  .pick-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-bar__count {
    grid-column: 1 / -1; grid-row: 1;
    display: flex; align-items: center;
    min-width: 0; min-height: calc(1.2 * var(--fs) + 8 * var(--u));   /* a .btn in this bar */
  }
  .pick-bar .btn { grid-column: -2; grid-row: 1; justify-self: end; }
  .pick { flex-direction: column; align-items: stretch; gap: var(--u); min-width: 0; }
  .pick__label { font-size: var(--fs-px-small); }
}
@media (max-width: 720px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}