/* 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; }
}

/* 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);
}