/* Collection cards — one design, used by the search results band and the
   /collections hub (Ramy 2026-09-18).
   Lifted out of home_v2.html so the two surfaces cannot drift: Ramy
   picked the search-results card and asked for the hub to match it, and
   two inline copies is how "Extended care teams" vs "team" happened. */

.lcol-card { display: block; border-radius: 16px; padding: 20px 22px; color: #fff; text-decoration: none;
  background: linear-gradient(120deg, #312E81 0%, #4F46E5 55%, #6D28D9 100%);
  box-shadow: 0 10px 15px -3px rgba(49,46,129,.25), 0 4px 6px -4px rgba(0,0,0,.08); transition: transform .12s, box-shadow .12s; }
.lcol-card:hover { transform: translateY(-2px); box-shadow: 0 16px 24px -8px rgba(49,46,129,.35); color: #fff; }
.lcol-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C7D2FE; }
.lcol-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 2px; color: #fff; text-wrap: balance; }
.lcol-syn, .lcol-by { font-size: 12.5px; color: #C7D2FE; margin-top: 5px; line-height: 1.45; }
.lcol-syn b, .lcol-by b { color: #fff; font-weight: 600; }
.lcol-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 12px; color: #C7D2FE; }
.lcol-meta b { color: #fff; font-weight: 700; }

/* Curated cards lead with WHO made them (Todd 2026-09-18: a Spotify
   auto-playlist versus a playlist from someone you trust), so the owner
   gets a logo and top billing instead of a line of small print. */
.lcol-owner { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
/* Ramy 2026-09-18: white plate, wider box, and `contain` rather than
   `cover`. A square crop guillotined the wide ones -- CCHMC's wordmark
   showed as "Cincinnati Childre". Logos are drawn for white, not for a
   violet gradient, so they get their own plate. */
.lcol-owner img { max-width: 76px; width: auto; height: 30px; border-radius: 6px;
  object-fit: contain; flex: none; background: #fff; padding: 3px 5px; }
.lcol-owner-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.lcol-owner-sub { font-size: 11px; color: #C7D2FE; line-height: 1.2; }
/* One gradient per kind, so the three are tellable apart at a glance
   without reading the kicker (Ramy 2026-09-18). They stay in the same
   indigo-violet family -- this is a library, not a paint chart.
     living  = indigo -> violet   (the default .lcol-card above)
     curated = deep plum          someone's shelf, warmer
     auto    = slate-blue         cooler, machine-built */
.lcol-card-curated { background: linear-gradient(120deg, #4C1D95 0%, #6D28D9 55%, #9333EA 100%); }
.lcol-card-auto    { background: linear-gradient(120deg, #1E293B 0%, #3730A3 55%, #4F46E5 100%); }

/* Hub grid */
.lcol-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 640px) { .lcol-grid { grid-template-columns: 1fr; } }