/* BrightKidz Hub — the listing card
 *
 * A separate file from site.css, which another agent owns. Loaded after it, so
 * the rules here win where they overlap; nothing here is !important.
 *
 * WHAT THIS FIXES. A listing was a bold title over two lines of grey summary,
 * seventy-six times — a text list wearing a border, on a site whose home page
 * already answers the question properly with six ink-blocked board tiles. The
 * card now uses the SAME devices as those tiles: a solid block of the subject's
 * ink, a big flat motif, a 3px rule and a hard 2px offset shadow. A listing
 * reads as a set of coloured things before it reads as words.
 *
 * The world's material rules are unchanged and inherited, not restated: flat
 * ink, --stroke 3px, --shadow 2px/2px with zero blur, --die-cut 4px corners.
 */

/* ------------------------------------------------------------ the block -- */

/* Grid rather than the flex column it replaces, for one reason: found.js
   APPENDS a "Found" chip to a card at runtime, and a single-column grid
   auto-places that chip at the end exactly as flex did — while giving the
   phone layout below a second column to work with. */
.article-list .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .45rem;
}

/* The ink header. It bleeds to the card's edges through the card's own 1rem
   padding, so the ink is a BLOCK the card is built from rather than a swatch
   sitting inside it — DESIGN.md asks each subject ink to carry whole areas. */
.article-list .card > .card-mark {
  display: block;
  position: relative;
  margin: -1rem -1rem .35rem;
  height: 5.5rem;
  background: var(--ink);
  border-bottom: var(--stroke) solid var(--rule);
  /* 1px, not 4px: this sits INSIDE a 3px rule that is itself die-cut at 4px,
     and matching the outer radius leaves a sliver of stock in the corner. */
  border-radius: 1px 1px 0 0;
  overflow: hidden;
}

/* Left, not centred. The eye lands on the glyph and then travels straight
   down to the title; a centred mark sends it back across the card first. */
.article-list .card > .card-mark > .card-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 3.6rem;
  color: var(--stock);
  display: block;
}

/* ------------------------------------------------------------- the text -- */

.article-list .card > a {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--board);
  text-decoration: none;
}

/* TWO LINES, NOT FIVE. The summaries run to 160 characters and at a card's
   width that was four or five lines of grey — the thing that made a listing
   read as prose. Two lines is enough to say what the article is; the article
   itself is one tap away and is where the rest belongs.

   Clamping degrades safely: a browser without line-clamp simply shows the
   whole summary, which is today's behaviour. */
.article-list .summary {
  font-size: .88rem;
  line-height: 1.45;
  margin: 0;
  /* The colour is site.css's, deliberately NOT restated. A first pass here
     set 74% and measured 6.56:1 against the 7.07:1 it replaced — under the
     7:1 DESIGN.md asks for on body text, for no reason but carelessness.
     Inheriting it means one authority and no drift. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The subject line on the find page sits last and reads as a label, not as
   more prose. */
.article-list .card > .card-subject { margin: .1rem 0 0; }

/* ------------------------------------------------------------- the chip -- */

/* MEASURED, AND IT IS THE SAME BUG site.css ALREADY RECORDS ONE FIX FOR.
   That fix is `align-self: flex-start`, which controls the INLINE axis only
   while the card is a flex COLUMN. Switching the card to a grid made
   align-self control the BLOCK axis instead, so the chip stretched the full
   width of the card and read as a button again — a full-width ink bar saying
   "Play". `justify-self` is the grid-axis equivalent and is what the chip
   needs here. Both are set so this holds whichever way a future card lays
   itself out. */
.article-list .card > .activity-chip {
  justify-self: start;
  align-self: start;
  margin: .15rem 0 0;
}

/* ------------------------------------------------------------ the found -- */

/* found.js appends this at runtime. It gets the ink treatment the activity
   chip already has so a finished card reads as marked rather than annotated,
   and `justify-self` keeps it from stretching across the card the way a grid
   item otherwise does. */
.article-list .card > .found-chip {
  justify-self: start;
  margin: .15rem 0 0;
  font-size: .72rem;
  font-weight: 700;
}

/* A found card keeps its place and gains a heavier edge — the site never
   hides what a child has finished. */
.article-list .card.is-found { box-shadow: var(--shadow-lift); }

/* -------------------------------------------------------------- hovers --- */

/* The board tiles lift on hover; the cards now do the same, so the two
   surfaces answer a pointer the same way. Discrete, not ambient. */
@media (hover: hover) {
  .article-list .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--rule);
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-list .card:hover { transform: none; }
}

/* ---------------------------------------------------------- phone width -- */

/* ONE ROW PER ARTICLE, NOT ONE BLOCK. At 34rem site.css drops the grid to a
   single column, and a full-width card with a 5.5rem ink band is a 300px-tall
   object — seventy-six of them is a very long scroll for the phone PRODUCT.md
   names as a primary scene. So the mark rotates to the left edge and the card
   becomes a row: still ink-first, still icon-led, about a third the height.
   34rem matches site.css's own breakpoint so the two never disagree about
   what "narrow" means.

   The mark is positioned rather than placed in a grid column deliberately:
   the number of children varies (chip, summary, the runtime Found chip), and
   a spanning grid item has to know the row count it spans. */
@media (max-width: 34rem) {
  .article-list .card {
    padding: .9rem 1rem .9rem 6.6rem;
    min-height: 5.6rem;
    align-content: center;
    gap: .3rem;
  }
  .article-list .card > .card-mark {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5.6rem;
    height: auto;
    margin: 0;
    border-bottom: 0;
    border-right: var(--stroke) solid var(--rule);
    border-radius: 1px 0 0 1px;
  }
  .article-list .card > .card-mark > .card-icon {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.1rem;
    height: 3.1rem;
  }
  /* Still two lines. One was tried and measured: at this width it truncated
     to "Have yo..." on most rows, which is grey that says nothing. The icon
     column is what makes the row scannable, so the summary can stay useful. */
  .article-list .summary { font-size: .84rem; }
}

/* A BOOK IS ONE THING ON THE SHELF, AND A DIFFERENT KIND OF THING.

   It spans the row while its neighbours are auto-fill tiles, so from 34rem up
   -- where the grid is two and three across -- it breaks the column rhythm the
   way the Play shelf breaks the games grid's. Below that every card is already
   a full-width row with a left spine, so the shape cannot carry the difference
   and the WORDS do: "6 parts, in order" sits where a card's activity chip sits,
   between the title and the summary.

   THE MARK IS DELIBERATELY NOT TOUCHED. A first draft gave this card its own
   grid columns to put the glyph on the left; measured at 1280px that stretched
   the ink band to 863px and squeezed the title into 83px, because the mark is a
   full-bleed HEADER here, not a cell. Rendering caught it and the rule is gone
   -- the band is the card's own, at every width.

   NOT BIGGER, EITHER. This card REPLACES the six part-cards that used to sit
   here, so `Fire and air` went from six cards to one and the page got shorter.
   The Play shelf already paid for "different by being big" at 2,179px.

   IT SPANS ONLY WHEN IT *IS* THE SHELF, and `:only-child` says exactly that
   rather than guessing a count. Spanning unconditionally was measured at
   twenty books: 4,923px of full-width cards, one per row, which is the list
   this card exists not to be. A book sharing its shelf takes an item's place
   like any other item and lets the parts line carry the difference; twenty
   books are twenty tiles in the grid, not twenty rows. */
.article-list .card.is-book:only-child { grid-column: 1 / -1; }
/* Matches .card-subject, which is the same job: one small ink line of fact. */
.book-parts { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink); }

/* Very narrow phones: the mark shrinks rather than the text, because at 320px
   the title is what has to keep its measure. */
@media (max-width: 22rem) {
  .article-list .card { padding-left: 5.3rem; min-height: 5rem; }
  .article-list .card > .card-mark { width: 4.4rem; }
  .article-list .card > .card-mark > .card-icon { width: 2.5rem; height: 2.5rem; }
}

/* Printed board, no night version (DESIGN.md). Contrast preference is
   honoured instead: the mark keeps a rule of its own so the ink block is
   still bounded when colour is not doing the work. */
@media (prefers-contrast: more) {
  .article-list .card > .card-mark { border-bottom-width: var(--stroke); }
}


/* Read is badged like everything else, but it is the kind that asks least of a
   child, so it is drawn as an outline rather than a solid block. Every card
   now says what it is; the three DOING kinds still carry the ink. */
.article-list .card[data-activity="Read"] > .activity-chip {
  color: var(--ink); background: var(--stock);
}