/* 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; }
/* Ramy 2026-09-24: "Etiologies (Gastroschisis/NEC/Atresia/Volvulus)" ran
   out of the card -- the slash-joined run is one unbreakable word. A grid
   item's min-width defaults to its min-content, so the card grew past its
   track instead; min-width:0 pins it to the track and overflow-wrap lets
   the long token break inside. Covers every card text line, both themes. */
.lcol-card { min-width: 0; }
.lcol-card h3, .lcol-syn, .lcol-by, .lcol-owner-name, .lcol-owner-sub { overflow-wrap: anywhere; }
.lcol-owner > div { min-width: 0; }
.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, .lcol-owner-by { font-size: 11px; color: #C7D2FE; line-height: 1.2; }
/* One gradient per kind (Ramy 2026-09-20). The first attempt kept all
   three in the indigo-violet family "because this is a library, not a
   paint chart" -- which made living and curated indistinguishable, the
   exact opposite of the point. Different HUE per kind now:

     living  = indigo -> violet   the flagship, continuously updated
     curated = teal -> emerald    somebody's hand-built shelf
     auto    = slate              machine-built, recedes deliberately

   Each variant re-tints its own muted text: #C7D2FE is indigo-200 and
   turns muddy on teal or slate. */
/* Ends at emerald-800, not -600: the lighter stop dropped the 12.5px
   muted text to 2.9:1, well under WCAG AA. This holds 6.0:1. */
.lcol-card-curated { background: linear-gradient(120deg, #134E4A 0%, #0F766E 55%, #065F46 100%); }
.lcol-card-curated .lcol-kicker,
.lcol-card-curated .lcol-syn,
.lcol-card-curated .lcol-by,
.lcol-card-curated .lcol-meta,
.lcol-card-curated .lcol-owner-sub,
.lcol-card-curated .lcol-owner-by { color: #A7F3D0; }   /* 5.99:1 */

.lcol-card-auto { background: linear-gradient(120deg, #1E293B 0%, #334155 55%, #475569 100%); }
.lcol-card-auto .lcol-kicker,
.lcol-card-auto .lcol-syn,
.lcol-card-auto .lcol-by,
.lcol-card-auto .lcol-meta,
.lcol-card-auto .lcol-owner-sub,
.lcol-card-auto .lcol-owner-by { color: #CBD5E1; }   /* 5.10:1 */

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

/* The base shadow is indigo-tinted; on teal and slate that reads as a
   colour cast rather than a shadow. */
.lcol-card-curated { box-shadow: 0 10px 15px -3px rgba(19,78,74,.25), 0 4px 6px -4px rgba(0,0,0,.08); }
.lcol-card-curated:hover { box-shadow: 0 16px 24px -8px rgba(19,78,74,.35); }
.lcol-card-auto { box-shadow: 0 10px 15px -3px rgba(30,41,59,.25), 0 4px 6px -4px rgba(0,0,0,.08); }
.lcol-card-auto:hover { box-shadow: 0 16px 24px -8px rgba(30,41,59,.35); }

/* Pulled statement (PLAN-HOMEPAGE-2026-09 Phase 0) — optional `pb.pull` on
   _collection_card.html: one thing an expert said in this collection, above
   the counts. Colours follow the card it sits on (light text on the
   gradient); the serif is the Reading Room display face, loaded in base.html. */
.lcol-pull { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.lcol-pull__text { margin: 0; font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-style: italic;
  font-size: 17px; line-height: 1.34; color: #fff; text-wrap: pretty; }
.lcol-pull__by { margin: 8px 0 0; font-size: 12.5px; color: #C7D2FE; }
.lcol-card-curated .lcol-pull__by { color: #A7F3D0; }   /* same muted tones the card's other meta uses */
.lcol-card-auto .lcol-pull__by { color: #CBD5E1; }
.lcol-pull__by b { color: #fff; font-weight: 600; }
.lcol-pull__ts { font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }

/* Provenance rows (PLAN-REDESIGN-SPRINT-2026-10 §B.9) — both themes; the
   Reading Room overrides are at the end of the file. */
.lcol-owner-by { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.lcol-auto-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1.5px dashed currentColor; border-radius: var(--rr-radius-media, 6px); opacity: .9; }
.lcol-auto-glyph svg { width: 17px; height: 17px; }

/* ── Reading Room, site-wide (PLAN-DESIGN-ROLLOUT-2026-09 Layer 2) ──────
   The homepage's paper collection card (pages/home-rr.css, .rr-collections)
   everywhere the flag is on: the /collections hub, /?q= results, space
   pages. The per-kind hue from 2026-09-20 survives as the kicker's dot
   instead of a gradient: living = the accent, curated = research blue,
   auto = ink-3, so the three kinds still read apart at a glance. The
   homepage's own `.rr .rr-collections .lcol-card` rules out-rank these, so
   the homepage keeps its larger sizes. */
html.rr-theme .lcol-card,
html.rr-theme .lcol-card-curated,
html.rr-theme .lcol-card-auto {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--rr-paper-raised); color: var(--rr-ink);
  border: 1px solid var(--rr-rule); border-radius: var(--rr-radius-card);
  box-shadow: none; transform: none; --lcol-dot: var(--rr-accent);
  min-width: 0;
}
html.rr-theme .lcol-card-curated { --lcol-dot: var(--rr-type-research); }
html.rr-theme .lcol-card-auto { --lcol-dot: var(--rr-ink-3); }
html.rr-theme .lcol-card:hover { border-color: var(--rr-ink); box-shadow: none; transform: none; color: var(--rr-ink); }
html.rr-theme .lcol-card .lcol-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--rr-ink-2);
}
html.rr-theme .lcol-card .lcol-kicker::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--rr-radius-pill); background: var(--lcol-dot);
}
html.rr-theme .lcol-card h3 {
  margin: 0; font-family: var(--rr-font-display); font-weight: 500; letter-spacing: 0;
  font-size: 24px; line-height: 1.15; color: var(--rr-ink);
  overflow-wrap: anywhere; min-width: 0;
}
html.rr-theme .lcol-card .lcol-syn,
html.rr-theme .lcol-card .lcol-by,
html.rr-theme .lcol-card .lcol-meta,
html.rr-theme .lcol-card .lcol-owner-sub,
html.rr-theme .lcol-card .lcol-pull__by { margin-top: 0; font-size: 13px; color: var(--rr-ink-3); }
html.rr-theme .lcol-card .lcol-syn b,
html.rr-theme .lcol-card .lcol-by b,
html.rr-theme .lcol-card .lcol-meta b,
html.rr-theme .lcol-card .lcol-pull__by b,
html.rr-theme .lcol-card .lcol-owner-name { color: var(--rr-ink); }
html.rr-theme .lcol-card .lcol-meta { margin-top: auto; padding-top: 6px; font-variant-numeric: tabular-nums; }
/* logos are drawn for white, so the plate stays the lightest paper with a rule */
html.rr-theme .lcol-card .lcol-owner img { background: var(--rr-paper-raised); border: 1px solid var(--rr-rule-soft); border-radius: var(--rr-radius-media); }
html.rr-theme .lcol-card .lcol-pull { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rr-rule-soft); }
html.rr-theme .lcol-card .lcol-pull__text { color: var(--rr-ink-2); }

/* ── Provenance (PLAN-REDESIGN-SPRINT-2026-10 §B.9) ──────────────────────
   Whose shelf is this. A curated card's owner row gains a "Collection by"
   eyebrow; an auto-built card gets a row of the same shape — a dashed,
   line-drawn library glyph where the logo would be, "From across the
   library / Not curated by a person" where the name would be
   (_collection_auto_source.html). Opt-in via .lcol-card-prov, which the
   hubs set; the homepage catalogue does not. No new colours: the eyebrow
   shares the owner-sub tint, the glyph draws in currentColor. */
/* Reading Room: the per-kind gradients are gone, so the kinds must differ
   by more than an 8px dot. A curated shelf gets a bigger logo plate; the
   machine shelf recedes — flat paper and a dashed edge. */
html.rr-theme .lcol-card-prov .lcol-owner img { height: 38px; max-width: 132px; }
html.rr-theme .lcol-card-prov .lcol-owner-by { font-size: 11px; color: var(--rr-ink-3); }
html.rr-theme .lcol-card-prov.lcol-card-auto { background: var(--rr-paper); border-style: dashed; border-color: var(--rr-rule-strong); }
html.rr-theme .lcol-card-prov.lcol-card-auto:hover { border-color: var(--rr-ink); }
html.rr-theme .lcol-card .lcol-auto-glyph { color: var(--rr-ink-2); border-color: var(--rr-rule-strong); }