/* One partial, shared/_reading_boxes, is the markup behind every card on both brands — the
   destination boxes on gantry.software and the blog cards on hyperclank.com — and its `variant`
   local is what picks the modifiers below. The grid is capped at --measure-wide here rather than
   by its host, so a page wanting another width sets it on its own wrapper. */
.c-reading-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  inline-size: 100%;
  max-inline-size: var(--measure-wide);
  margin-inline: auto;
  list-style: none;
  padding: 0;
  text-align: start;
}
/* Stretched, so every card in a row stands as tall as the tallest. */
.c-reading-boxes > li { display: flex; }
/* The two blog grids: --wide is one card at the grid's full width, --pair two to a row. Both drop
   the card itself — no border, no ground, no padding — so the only frame on screen is the
   picture's, which is why the hover cue below has to move to the picture and the text. */
.c-reading-boxes--wide { grid-template-columns: 1fr; }
.c-reading-boxes--pair { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl) var(--space-lg); }
.c-reading-boxes--wide .c-reading-box,
.c-reading-boxes--pair .c-reading-box {
  gap: var(--space-md);
  padding: 0;
  background: none;
  border: 0;
}
.c-reading-boxes--wide .c-reading-box:hover .c-reading-box__frame,
.c-reading-boxes--wide .c-reading-box:focus-visible .c-reading-box__frame,
.c-reading-boxes--pair .c-reading-box:hover .c-reading-box__frame,
.c-reading-boxes--pair .c-reading-box:focus-visible .c-reading-box__frame { border-color: var(--accent); }
.c-reading-boxes--wide .c-reading-box__label,
.c-reading-boxes--pair .c-reading-box__label { font-size: var(--text-2xl); }
.c-reading-boxes--wide .c-reading-box__blurb,
.c-reading-boxes--pair .c-reading-box__blurb { font-size: var(--text-lg); }

/* On a blog card the date leads, as it does in the list of posts under them, and the ▸ goes: a
   destination box points somewhere, a post card is the post. */
.c-reading-boxes--wide .c-reading-box__meta,
.c-reading-boxes--pair .c-reading-box__meta { order: -1; }
/* The pair card is a stack with one gap, which would apply under the date as well and float it
   clear of the picture, so the gap is set to what the date wants and the blocks under the picture
   take their own space back. */
.c-reading-boxes--pair .c-reading-box { gap: var(--space-xs); }
.c-reading-boxes--pair .c-reading-box__head { margin-block-start: var(--space-sm); }
.c-reading-boxes--wide .c-reading-box__glyph,
.c-reading-boxes--pair .c-reading-box__glyph { display: none; }

/* The wide card reads across rather than down, and is the one place the card is a grid rather
   than a stack: the same markup is re-placed here, so the words need no wrapper element of their
   own. The picture takes two fifths, which is what keeps a single post from towering. */
.c-reading-boxes--wide .c-reading-box {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
}
.c-reading-boxes--wide .c-reading-box__meta { grid-column: 1 / -1; grid-row: 1; }
.c-reading-boxes--wide .c-reading-box__frame { grid-column: 1; grid-row: 2 / span 2; }
.c-reading-boxes--wide .c-reading-box__head { grid-column: 2; grid-row: 2; }
.c-reading-boxes--wide .c-reading-box__blurb { grid-column: 2; grid-row: 3; margin-block-start: var(--space-xs); }
.c-reading-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  inline-size: 100%;
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  padding: var(--space-md);
  color: var(--text-bright);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
/* The whole card is one <a>, so 04-elements' hover underline would rule a line under every word
   in it; the cue is the edge and the colour instead. */
.c-reading-box:hover,
.c-reading-box:focus-visible { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* The slot holds its 16:9 whether or not a picture is in it, so a card without one stands as tall
   as its neighbours instead of running short. */
.c-reading-box__frame {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: var(--bw) solid var(--line);
}
.c-reading-box__shot { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.c-reading-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.c-reading-box__label { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.c-reading-box__glyph { color: var(--text-muted); }
.c-reading-box:hover .c-reading-box__glyph,
.c-reading-box:focus-visible .c-reading-box__glyph { color: var(--accent); }
.c-reading-box__blurb { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-copy); }
/* Optional: the blog cards pass a date, the destination boxes pass nothing. */
.c-reading-box__meta {
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
}

/* Narrow screens give every grid one card per row, and the wide card stacks like the rest: there
   is no room beside a picture. */
@media (max-width: 40rem) {
  .c-reading-boxes,
  .c-reading-boxes--pair { grid-template-columns: 1fr; }
  .c-reading-boxes--wide .c-reading-box { display: flex; }
  .c-reading-boxes--wide .c-reading-box__blurb { margin-block-start: 0; }
}