/* ===========================================================
   Backyard Barista — card layer 06, 2026-08-30
   Loaded AFTER style-05.css. Scope: the browse grid only.

   ROLLBACK: delete the second <link> in layout.php. Direction
   05 is untouched on disk and comes straight back.

   WHY THIS EXISTS
   Direction 05's rule is "the page is a grid of ruled boxes"
   with zero gap and shared hairlines, producing a continuous
   ledger. That worked as a system and failed as a storefront:
   sixteen white cells sharing walls reads as a data table, not
   as sixteen separate backyards.

   This layer deliberately breaks one Direction 05 rule — that
   photos are the only things allowed to carry color. The
   illustration blocks now carry a tint. That is the change
   doing most of the work; everything else supports it.
   =========================================================== */

/* --- 1 + 5 · float the cards, three up instead of four ----- */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 24px;
  border-left: 0;
  border-top: 0;
}
.card {
  border: 1px solid var(--rule);
}
.card:hover { background: var(--paper); }

/* --- 2 · a tint per listing --------------------------------
   Six grounds, assigned by a hash of the title (NOT the listing
   id — ids here are all odd, so id % 6 could only ever hit three
   of the six and striped the grid).

   multiply is what makes this work at all: the illustrations are
   opaque PNGs with white baked in, so a background tint alone sat
   invisible behind them. Under multiply the white drops to the
   tint and the black linework stays black — the drawing reads as
   printed on colored stock, which is the point.                */
.card .card-img { background: #ebe8e2; }
.card.t0 .card-img { background: #e2eadc; }  /* sage   */
.card.t1 .card-img { background: #f3e0d2; }  /* clay   */
.card.t2 .card-img { background: #f6ecd2; }  /* butter */
.card.t3 .card-img { background: #dfe9f1; }  /* sky    */
.card.t4 .card-img { background: #f2e2e2; }  /* rose   */
.card.t5 .card-img { background: #eae6dd; }  /* stone  */

.card-img img { mix-blend-mode: multiply; }

/* --- 3 · closed cafes step back ----------------------------
   Half the grid is closed at any hour. It should not carry the
   same weight as somewhere you can walk to right now.         */
.card-closed { border-color: var(--rule-soft); }
.card-closed .card-img { opacity: .45; }
.card-closed h3 { color: var(--mid); }
.card-closed .card-body p { color: var(--muted); }

/* --- 4 · the metadata line stops reading as a table row ----- */
.card-body p.small {
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid var(--rule-soft);
}

/* --- mobile · compact rows ---------------------------------
   The stacked layout ran 13,686px for sixteen cafes, with the
   illustration eating ~70% of every card. Thumbnail left, name
   and one line right. contain + multiply means the letterboxed
   margin is the tint too, so the thumb reads as one solid chip
   instead of a cropped drawing.                               */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { display: grid; grid-template-columns: 104px 1fr; align-items: stretch; }
  .card-img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 96px;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .card-img img { object-fit: contain; padding: 7px; }
  .card-body { padding: 10px 13px 11px; }
  .card-body h3 { font-size: .95rem; margin: .3rem 0 .15rem; }
  .card-body p { font-size: .78rem; }
  .card-body p.muted:not(.small) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-body p.small { margin-top: .4rem; padding-top: .35rem; }
  .card-toprow { gap: 6px; }
  .card-toprow .rating { font-size: .72rem; }
  .card-closed .card-img { opacity: .55; }
}