/* components/books.css
   Everything about book covers, in one file. Replaces book-cover.css + book-shelf.css.
   Load it on BOTH the homepage and the book page.

   Parts:
   1. .book-cover   the cover frame (homepage card + big cover on the book page)
   2. .book-card    borderless wrapper around the cover (homepage carousel), handling
                     hover/touch lift and the padding that reserves space for it

   The homepage's carousel layout (positioning, arrows, and the shared
   title/CTA caption below the stage) lives in components/book-carousel.css,
   which reuses .book-cover/.book-card from here.
*/


/* ------------------------------------------------------------------ */
/* 1. Cover frame (shared)                                             */
/* Keep aspect-ratio + radius identical on both pages, for a            */
/* consistent look between the homepage card and the book page.        */
/* ------------------------------------------------------------------ */

.book-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #eee;
  /* Until the <img> loads, this shows the blurred placeholder set inline in
     <head> (per-book background-image, keyed by [data-book]; see lib/books.js). */
  background-size: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Descendant (not child) selector: the <img> is now nested inside a <picture>. */
.book-cover img.book-cover__img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  /* Hides the alt text so the placeholder shows while loading or on failure;
     screen readers still read `alt`. */
  color: transparent;
}


/* ------------------------------------------------------------------ */
/* 3. Card: borderless wrapper around the cover                        */
/* ------------------------------------------------------------------ */

.book-card {
  /* How far the card lifts on hover. Also reserved as margin-top/bottom
     (below) so that lift never pushes the card past a clipping ancestor
     (e.g. the carousel viewport's overflow:hidden) — hovering only ever
     brings the card back toward its unlifted margin box, never past it. */
  --card-hover-lift: 0.35rem;

  display: block;
  padding: 1rem;
  margin: var(--card-hover-lift) 0;
  color: inherit;
  text-decoration: none;
  border-radius: 1rem;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}

.book-card .book-cover__img {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.book-card:focus-visible {
  outline: 2px solid black;
  outline-offset: 4px;
}

/* Mouse only: the card lifts, the cover zooms slightly and its own shadow
   (not a shadow cast by the padded card box, which looked like a loose
   glassy panel floating behind the cover) deepens. */
@media (hover: hover) {
  .book-card:hover,
  .book-card:focus-visible {
    transform: translateY(calc(-1 * var(--card-hover-lift)));
  }
}

/* Touch feedback. */
.book-card:active .book-cover__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .book-card,
  .book-card .book-cover__img {
    transition: none;
  }
}