/* HOME·COLL (107) — "Collections this week" card tiles (D-481, option G3).
 * Four kind tiles previewing a collection's items — agreed family colour + icon
 * (D-454); the Watch tile carries the animation still. SINGLE SOURCE: the .hcol-*
 * prefix is styled ONLY here, imported by BOTH the WB card page (workbench/home/
 * collections.html) and the app (web/index.html), so it can't drift (card-dev
 * mirror, check 16). The carousel shell (nh-slider/nh-cxtrack/nh-mcard/nh-dots +
 * the module header/standfirst) is shared home-shell infra. Prefix: hcol.
 */

/* 2×2 preview of four items */
.hcol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }

.hcol-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12);
}
.hcol-i { width: var(--size-24); height: var(--size-24); flex: none; }
.hcol-i svg { width: 100%; height: 100%; display: block; }
.hcol-k {
  font-family: var(--font-label);
  font-weight: var(--weight-700);
  font-size: var(--size-12);
  letter-spacing: var(--tracking-05);
  text-transform: uppercase;
}
/* 🔴 THE TITLE RESERVES TWO LINES, ALWAYS. (D-545)
 *
 * `margin-top: auto` bottom-anchors the title, and the eyebrow is pinned to the top — so the hole
 * between them is WHATEVER IS LEFT OVER, and it moved with the length of the title: 38px under a
 * two-line title, 21px under a three-line one, and a canyon under "Weaning".
 *
 * ⚠️ NOBODY SAW THIS UNTIL THE CONTENT WAS REAL. The old tiles held four captions someone wrote to
 * fit — "Is she ready?", "First spoons" — all the same short length, so the hole was identical in
 * every tile and therefore invisible. THE CARD WAS DESIGNED AGAINST COPY CHOSEN TO SUIT IT. The
 * moment real titles went in, of real and differing lengths, the layout stopped holding.
 *
 * That is the mannequin bug arriving as a layout bug, and it is exactly what the shape work is for.
 *
 * TWO halves, and it needs both:
 *   · here — the title reserves 2 lines even when it only needs 1, so a short title cannot collapse
 *     upward and open a canyon. Every tool title is one line ("Weaning", "Sleep", "Growth").
 *   · in the CONTENT — a title may not exceed 24 characters, which is the longest that still fits
 *     two lines in a 119px tile at Fraunces 15px. MEASURED IN A REAL TILE — my first attempt
 *     measured a detached clone, which is not width-constrained, and said 32. It was wrong by a
 *     whole line. Enforced by
 *     tests/title-length.test.mjs, because it is a rule about COPY and copy is where it must hold. */
.hcol-c {
  font-family: var(--font-display);
  font-weight: var(--weight-500);
  font-size: var(--size-15);
  line-height: var(--leading-115);
  color: var(--text-primary);
  margin-top: auto;
  min-height: calc(2 * var(--leading-115) * var(--size-15));   /* two lines, reserved */
}

/* kind-family colour (D-454) — shape = icon, colour = family */
.hcol-tile.hcol-read  { background: var(--kind-read-fill); }
.hcol-tile.hcol-read  .hcol-i, .hcol-tile.hcol-read  .hcol-k { color: var(--kind-read-icon); }
.hcol-tile.hcol-do    { background: var(--kind-do-fill); }
.hcol-tile.hcol-do    .hcol-i, .hcol-tile.hcol-do    .hcol-k { color: var(--kind-do-icon); }
.hcol-tile.hcol-watch { background: var(--kind-watch-fill); }
.hcol-tile.hcol-watch .hcol-i, .hcol-tile.hcol-watch .hcol-k { color: var(--kind-watch-icon); }
.hcol-tile.hcol-track { background: var(--kind-track-fill); }
.hcol-tile.hcol-track .hcol-i, .hcol-tile.hcol-track .hcol-k { color: var(--kind-track-icon); }

/* the Watch tile carries the animation still (play + "Watch" over a scrim) */
.hcol-tile.hcol-anim { position: relative; overflow: hidden; background: var(--surface-sunken); }
.hcol-tile.hcol-anim > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ THE SCRIM MUST COVER THE ICON, NOT JUST THE CAPTION.
 * It used to fade to 5% opacity by 62% height — so the "WATCH" label and the play glyph, which
 * sit at the TOP of the tile, landed on bare artwork and were all but invisible. The bottom
 * caption read fine, which is exactly why it survived: the part being checked was legible and
 * the part above it was not.
 * A kind-label you cannot read is a kind-label that isn't there — and on this card the kind IS
 * the information (D-454: shape = kind). Darkened at both ends, still lightest through the
 * middle so the illustration is not smothered. */
.hcol-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,22,.62), rgba(20,24,22,.18) 48%, rgba(20,24,22,.46)); } /* token-exception */
.hcol-tile.hcol-anim .hcol-i,
.hcol-tile.hcol-anim .hcol-k,
.hcol-tile.hcol-anim .hcol-c { position: relative; color: var(--text-on-dark); }

/* ⚠️ THE TITLE IS CLAMPED TO TWO LINES (D-520).
 * The footer is a row: title on the left, "Collection · 9 items" on the right, baseline-aligned.
 * A three-line title grew that row from 20px to 61px — and since the carousel cards stretch to
 * the tallest, EVERY card in the rail got taller, and the meta lines stopped lining up with each
 * other as you swiped. One long title quietly deforms the whole rail.
 * Two lines is enough for any collection name we would actually write; if a title needs three,
 * the title is wrong, not the card. */
.hcol-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* press feedback (D-422 floor) — the card navigates; pressing a tile dims it */
.hcol-tile:active { opacity: 0.9; }

/* ── LOADING SKELETON (D-520) — holds the module's place so it doesn't POP IN and shove the
 * page down under a thumb that was already reaching for something. No shimmer (see 104). */
.hcol-tile.hcol-sk { background: var(--surface-sunken); }
.hcol-sk-line { display: block; width: 55%; height: var(--size-17); border-radius: var(--radius-4); background: var(--surface-sunken); }