/* ══════════════════════════════════════════════════════════════════
   Dim Lantern · LIBRARY TREATMENT
   ──────────────────────────────────────────────────────────────────
   Gold hairline cover frame + re-cast "Step Inside" button plate.
   Additive. Appends after style.css, mobile.css, desktop.css so
   its rules win the cascade without !important.
   Loaded via <link rel="stylesheet" href="dim-lantern/library.css?v=1">
   ══════════════════════════════════════════════════════════════════ */

/* ── DESKTOP / TABLET (≥ 769px) ─────────────────────────────────── */
@media (min-width: 769px) {

  /* Cover — gold lantern hairline + warm bloom on hover */
  .book-card .book-cover,
  .book-card img.book-cover {
    border-radius: 3px;
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.35),
      inset 0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 24px -8px rgba(212, 175, 55, 0.18),
      0 18px 40px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.4s cubic-bezier(0.2, 1, 0.3, 1),
                transform   0.4s cubic-bezier(0.2, 1, 0.3, 1);
  }
  .book-card:hover .book-cover,
  .book-card:hover img.book-cover {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.75),
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      0 0 40px -6px rgba(212, 175, 55, 0.45),
      0 22px 52px rgba(0, 0, 0, 0.7);
  }

  /* "Step Inside" — the lantern plate
     (Overrides style.css's white-slab button without !important) */
  .book-card button {
    margin-top: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.1rem;
    background:
      linear-gradient(180deg, rgba(212,175,55,0.04) 0%, rgba(0,0,0,0) 50%, rgba(212,175,55,0.03) 100%),
      #0a0806;
    color: #d4af37;
    border: 1px solid rgba(212,175,55,0.45);
    border-radius: 3px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(212,175,55,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      0 2px 8px rgba(0,0,0,0.4);
    transition:
      color        0.3s ease,
      border-color 0.3s ease,
      background   0.4s ease,
      box-shadow   0.4s ease,
      transform    0.4s cubic-bezier(0.2,1,0.3,1);
  }
  /* arrow glyph (pure CSS, no icon dep) */
  .book-card button::after {
    content: '→';
    font-size: 0.85rem;
    letter-spacing: 0;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.2,1,0.3,1);
    opacity: 0.75;
  }
  /* gold sheen that sweeps across on hover */
  .book-card button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 30%,
      rgba(212,175,55,0.18) 50%,
      transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
  }
  .book-card button:hover {
    color: #f5e6b0;
    border-color: rgba(212,175,55,0.85);
    background:
      linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0) 50%, rgba(212,175,55,0.06) 100%),
      #0d0a05;
    box-shadow:
      inset 0 1px 0 rgba(212,175,55,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.5),
      0 0 24px -4px rgba(212,175,55,0.35),
      0 4px 14px rgba(0,0,0,0.55);
  }
  .book-card button:hover::before { transform: translateX(120%); }
  .book-card button:hover::after  { transform: translateX(3px); opacity: 1; }
  .book-card button:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.5),
      0 1px 4px rgba(0,0,0,0.4);
  }
  .book-card button:focus-visible {
    outline: none;
    border-color: #d4af37;
    box-shadow:
      0 0 0 3px rgba(212,175,55,0.25),
      inset 0 1px 0 rgba(212,175,55,0.18);
  }
}

/* ── MOBILE (≤ 768px) ───────────────────────────────────────────── */
/* Mobile cards are whole-tap (no inner button visible), so we only
   restyle the cover frame. */
@media (max-width: 768px) {
  .book-card .book-cover,
  .book-card img.book-cover {
    border-radius: 3px;
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.30),
      inset 0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 18px -6px rgba(212, 175, 55, 0.14),
      0 8px 24px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  }
  .book-card:active .book-cover,
  .book-card:active img.book-cover {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.70),
      inset 0 0 0 1px rgba(0, 0, 0, 0.45),
      0 0 28px -4px rgba(212, 175, 55, 0.35),
      0 8px 24px rgba(0, 0, 0, 0.6);
  }
}