/* covers.css — real book covers (self-hosted from Open Library).
   Owned by the covers agent. Loaded after hearthmere.css so it may override.

   Goal: framed and precious. Each cover sits in a gilt hairline frame with a
   warm drop shadow, gleaming against the parchment cards and dark panels.
   Aesthetic borrows the gold tokens from hearthmere.css (--gold / --gold-bright)
   so nothing looks pasted on. WARM, SECURE, QUIET. */

/* ---------------------------------------------------------------------------
   Shared gilt frame for any real cover image (.cover.has-img).
   A thin gold key-line, an inset cream highlight (like the lip of a gilt frame),
   and a soft candlelit shadow beneath. Applies on cards, the detail page,
   and the cart row. The typographic .cover fallback keeps its own styling.
--------------------------------------------------------------------------- */
.cover.has-img{
  padding:0;
  overflow:hidden;
  background:#1c2a30;                 /* warm dark behind any letterboxing */
  border:1px solid var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(255,247,225,.28),   /* cream inner lip of the frame */
    inset 0 0 0 4px rgba(201,162,75,.22),    /* recessed gilt reveal         */
    0 14px 30px rgba(0,0,0,.5);              /* candlelit drop shadow         */
}
.cover.has-img img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center;
}

/* ---------------------------------------------------------------------------
   Card cover — the framed thumbnail at the top of every .card on home + browse.
   The <a> is the frame wrapper; the .cover inside holds the image (or the
   typographic fallback). Capped to a sensible height so it enriches rather
   than crowds, leaving room for tags, title, blurb, stars and the buy form.
--------------------------------------------------------------------------- */
.card-cover{
  display:block;
  width:auto;
  margin:0 auto 20px;
  max-width:148px;                   /* keeps the cover modest within the card */
  text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.card-cover .cover{
  width:100%;
  aspect-ratio:2/3;
  margin:0;
}
/* Gentle lift on hover, in sympathy with the card's own hover. */
.card:hover .card-cover{transform:translateY(-2px)}
.card-cover:hover{filter:brightness(1.04)}
.card-cover:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}

/* Slightly tighten the typographic fallback when shown at card-thumbnail size,
   so the drop-cap initial and title sit comfortably in the smaller frame. */
.card-cover .cover:not(.has-img){
  padding:14px 12px;
  box-shadow:inset 0 0 0 4px rgba(201,162,75,.16),0 10px 22px rgba(0,0,0,.45);
}
.card-cover .cover:not(.has-img) .c-initial{font-size:46px;margin-top:4px}
.card-cover .cover:not(.has-img) .c-title{font-size:15px}
.card-cover .cover:not(.has-img) .c-author{font-size:12px}

/* Soften the blurb a touch now the cover carries the visual weight,
   without hiding it. */
.card .blurb{font-size:16px;line-height:1.55}

/* ---------------------------------------------------------------------------
   Book detail page — the large sticky cover already uses .cover.has-img and
   inherits the gilt frame above. A marginally deeper shadow suits the scale.
--------------------------------------------------------------------------- */
.book-detail .cover.has-img{
  box-shadow:
    inset 0 0 0 1px rgba(255,247,225,.30),
    inset 0 0 0 5px rgba(201,162,75,.22),
    0 22px 48px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------------
   Cart mini cover — a small framed thumbnail in each satchel row.
   Sized by hearthmere's .cart-row .mini (width:64px, aspect-ratio 2/3);
   here we just give the image the gilt frame and a lighter shadow.
--------------------------------------------------------------------------- */
.cover.mini.has-img{
  box-shadow:
    inset 0 0 0 1px rgba(255,247,225,.26),
    inset 0 0 0 2px rgba(201,162,75,.22),
    0 6px 14px rgba(0,0,0,.45);
}
.cover.mini.has-img img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------------------
   Graceful degradation — never let an image overflow its frame, and keep the
   covers tidy on small screens. Lazy-load is set on the markup.
--------------------------------------------------------------------------- */
.cover img{max-width:100%}

@media (max-width:600px){
  .card-cover{max-width:128px;margin-bottom:18px}
}