/* Shared library-tile styles (features §6 surfacing).
   One tile shape used by the /library shelf, the homepage "Fresh this week"
   carousel + featured rail, and the story-page "You might also like" rail, via
   the templates/_story_tile.html macro — so all three surfaces stay identical. */

.shelf-title { color: var(--fg1, #2b3858); margin: 24px 0 10px; font-size: 1.15rem; font-family: var(--font-display, inherit); }

.story-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; margin-top: 8px;
}

/* Horizontal scroll-snap carousel — no JS lib (BS4 project, decision: keep it
   simple). overflow-x:auto + per-tile snap points. */
.scrolly {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.scrolly .story-tile { min-width: 230px; max-width: 230px; scroll-snap-align: start; }

.story-tile {
  background: var(--surface, #fff); border-radius: 16px; padding: 14px; text-decoration: none;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(31, 46, 92, 0.08));
  display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, box-shadow .15s ease;
}
.story-tile:hover { transform: translateY(-4px); text-decoration: none; box-shadow: var(--shadow-md, 0 6px 18px rgba(31, 46, 92, 0.08)); }
.story-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--bg-deep, #eef1f8);
}
.story-tile .placeholder {
  width: 100%; aspect-ratio: 1 / 1; background: var(--bg-deep, #eef1f8); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--fg3, #9aa6c2); font-size: 0.9rem; font-style: italic;
}
.story-tile h3 { font-size: 1.05rem; margin: 0; color: var(--fg1, #2b3858); font-family: var(--font-display, inherit); font-weight: 600; }
.story-tile .snippet {
  font-family: var(--font-prose, inherit); font-size: 0.9rem; color: var(--fg2, #6c7a99); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.story-tile .meta { font-size: 0.78rem; color: var(--fg3, #9aa6c2); }
.fresh-badge {
  display: inline-block; background: var(--accent-soft, #eaf0ff); color: var(--accent, #4a6cf7); font-size: 0.7rem;
  font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em;
}

/* Locked library tile — a not-signed-in visitor's tile beyond the free "latest N"
   set (decision 34 update, 2026-08-09). The tile stays browsable and clickable
   (a click lands on the sign-up wall — the conversion moment); the dimmed art +
   lock pill signal there's more to unlock by signing up. */
.story-tile { position: relative; }
.story-tile.is-locked img, .story-tile.is-locked .placeholder { opacity: var(--lock-art-opacity, .85); filter: saturate(.92); transition: opacity .15s ease; }
.story-tile.is-locked:hover img { opacity: var(--lock-art-opacity-hover, .94); }
.lock-badge {
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(31, 46, 92, .82); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .01em; backdrop-filter: blur(2px);
}
.lock-badge i, .lock-badge svg { width: 13px; height: 13px; }

/* Subtle "part of a series" indicator (decision 183): icon + word only, no
   series name on the card — a full name would crowd the tile; the elaborate
   reveal (which series, its cast) lives on the story page once opened. */
.series-badge {
  position: absolute; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(31, 46, 92, .78); color: #fff; font-size: .68rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .01em; backdrop-filter: blur(2px);
}
.series-badge svg { width: 11px; height: 11px; }