/* components/book-carousel.css
   The homepage "تالیفات" carousel: a 3D coverflow-style shelf with one
   centered book, the rest fanned out and tilted behind it in depth.
   Below 30rem (mobile) the coverflow tilt is dropped for a flat,
   swipeable row instead (see the max-width:29.99rem block below).

   Reuses .book-card / .book-cover from components/books.css for the cover
   itself; this file positions cards, styles the arrows, and styles the
   title/CTA caption shown below the stage for the front-facing book.
   Positioning is driven by a per-item `data-offset` attribute (-2..2) that
   public/js/index.js keeps in sync with the active slide, and that same
   script copies the front card's title/link into the caption. */

.book-carousel__stage {
  --bc-card-w: 12rem;
  --bc-step: 7.5rem;
  --bc-depth: 4.5rem;
  --bc-tilt: 32deg;

  position: relative;
}

@media (min-width: 30rem) {
  .book-carousel__stage {
    --bc-card-w: 15rem;
    --bc-step: 10rem;
    --bc-depth: 6.25rem;
  }
}

@media (min-width: 48rem) {
  .book-carousel__stage {
    --bc-card-w: 18rem;
    --bc-step: 13rem;
    --bc-depth: 8.25rem;
  }
}

/* Large screens: the stage breaks out of the homepage's 40rem column
   (home.css) so the outer (±2) books aren't clipped by the viewport's
   overflow: hidden, with room left for the arrows beside them. Width stays
   auto with equal negative margins, so it stays centred in RTL too (a fixed
   width would over-constrain the box and RTL drops margin-left, pinning it
   off to the left). 60rem fits within 64rem minus body padding. */
@media (min-width: 64rem) {
  .book-carousel__stage {
    --bc-stage-w: 60rem;
    margin-inline: calc((100% - var(--bc-stage-w)) / 2);
  }
}

.book-carousel__viewport {
  position: relative;
  /* No top padding needed for the hover-lift: .book-card (books.css)
     reserves that space itself via margin-top: --card-hover-lift, so
     hovering only ever brings it back flush with this edge. */
  height: calc(var(--bc-card-w) * 1.45 + 0.25rem);
  overflow: hidden;
  perspective: 1400px;
  touch-action: pan-y;
}

.book-carousel__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.book-carousel__item {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--bc-card-w);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.45s ease;
}

.book-carousel__item .book-card {
  /* The carousel, not :hover, drives this card's lift/scale. */
  pointer-events: none;
}

.book-carousel__item[data-offset="0"] .book-card {
  pointer-events: auto;
}

.book-carousel__item[data-offset="0"] {
  transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1);
  z-index: 5;
}

.book-carousel__item[data-offset="-1"] {
  transform: translateX(calc(-50% - var(--bc-step))) translateZ(calc(var(--bc-depth) * -1)) rotateY(var(--bc-tilt)) scale(0.82);
  z-index: 4;
  opacity: 0.85;
}

.book-carousel__item[data-offset="1"] {
  transform: translateX(calc(-50% + var(--bc-step))) translateZ(calc(var(--bc-depth) * -1)) rotateY(calc(var(--bc-tilt) * -1)) scale(0.82);
  z-index: 4;
  opacity: 0.85;
}

.book-carousel__item[data-offset="-2"] {
  transform: translateX(calc(-50% - var(--bc-step) * 1.9)) translateZ(calc(var(--bc-depth) * -1.8)) rotateY(calc(var(--bc-tilt) * 1.15)) scale(0.64);
  z-index: 3;
  opacity: 0.5;
}

.book-carousel__item[data-offset="2"] {
  transform: translateX(calc(-50% + var(--bc-step) * 1.9)) translateZ(calc(var(--bc-depth) * -1.8)) rotateY(calc(var(--bc-tilt) * -1.15)) scale(0.64);
  z-index: 3;
  opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Caption: title + "view details" CTA for the front-facing book, below */
/* the stage (not inside the card) so a long title can wrap freely      */
/* instead of being squeezed into the cover's box. index.js keeps its   */
/* text/link in sync with whichever card is front-facing.               */
/* ------------------------------------------------------------------ */

.book-carousel__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: calc(1.5rem + 1vh);
  text-align: center;
}

.book-carousel__title {
  max-width: 28rem;
  font-size: 1.65rem;
  line-height: 1.5;
  font-weight: 600;
  color: black;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.book-carousel__subtitle {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: #333333;
}

/* Directional slide used by index.js when the front book changes: the
   outgoing title exits one way and the incoming title enters from the
   opposite side, matching whichever arrow (or swipe) triggered the change. */
.book-carousel__title--exit-left,
.book-carousel__title--enter-left {
  transform: translateX(-1.25rem);
  opacity: 0;
}

.book-carousel__title--exit-right,
.book-carousel__title--enter-right {
  transform: translateX(1.25rem);
  opacity: 0;
}

.book-carousel__title--notransition {
  transition: none !important;
}

.book-carousel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1.1rem;
  color: #434343;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid #d4d4d4;
  border-radius: 0.5rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.book-carousel__cta::after {
  content: "←";
}

@media (hover: hover) {
  .book-carousel__cta:hover {
    background: #000;
    color: #fff;
    border-color: #000;
  }
}

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

/* Mobile: flat (no 3D tilt) instead of coverflow, with the center cover
   sized up as large as the viewport allows. Neighbours are scaled down
   (--bc-side-scale) and pushed out by a correspondingly large --bc-step
   (half the center card plus half the shrunk neighbour, so it sits beside
   the center card rather than hidden behind it) — still enough to read as
   "swipe for more"; index.js adds the swipe. The card's padding
   (components/books.css) is dropped here too, so the cover itself fills
   the full --bc-card-w instead of being inset by it. */
@media (max-width: 29.99rem) {
  .book-carousel__stage {
    --bc-card-w: 15rem;
    --bc-side-scale: 0.65;
    --bc-step: calc(var(--bc-card-w) / 2 + (var(--bc-card-w) * var(--bc-side-scale)) / 2 + 0.5rem);
  }

  .book-carousel__viewport {
    perspective: none;
    height: calc(var(--bc-card-w) * 1.5 + 0.7rem);
  }

  .book-carousel__item .book-card {
    padding: 0;
  }

  .book-carousel__item[data-offset="-1"] {
    transform: translateX(calc(-50% - var(--bc-step))) scale(var(--bc-side-scale));
    opacity: 0.55;
  }

  .book-carousel__item[data-offset="1"] {
    transform: translateX(calc(-50% + var(--bc-step))) scale(var(--bc-side-scale));
    opacity: 0.55;
  }

  .book-carousel__item[data-offset="-2"],
  .book-carousel__item[data-offset="2"] {
    opacity: 0;
    pointer-events: none;
  }
}

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

/* ------------------------------------------------------------------ */
/* Arrows: always visible, on desktop and mobile alike.                */
/* ------------------------------------------------------------------ */

.book-carousel__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid #9c9c9c;
  border-radius: 50%;
  background: white;
  color: black;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.book-carousel__arrow svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Mobile: close to the screen edges rather than out by the fanned
   side-cards, which are cropped and mostly hidden at this width anyway. */
.book-carousel__arrow--prev {
  left: 0.35rem;
}

.book-carousel__arrow--next {
  right: 0.35rem;
}

@media (min-width: 30rem) {
  .book-carousel__arrow--prev {
    left: 0.25rem;
  }

  .book-carousel__arrow--next {
    right: 0.25rem;
  }
}

@media (hover: hover) {
  .book-carousel__arrow:hover {
    background: black;
    color: white;
  }
}

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

.book-carousel__arrow:active {
  transform: scale(0.92);
}