/* ===== Book Detail (desktop-first) ===== */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: -2;
  background-image: var(--bg-url, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(18px) saturate(1.2);
  transform: scale(1.05);
}
body::after{
  content:""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0.55));
}

.section{ max-width: 1000px; }

.book-layout{
  display: grid;
  grid-template-columns: 300px 1fr; /* smaller, more suitable desktop cover */
  gap: 22px;
  align-items: start;
}
/* place cover on the right (RTL) by assigning it to the second column */
.book-cover{ grid-column: 2; }
.book-content{ grid-column: 1; display: grid; gap: 10px; }

.book-cover img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.book-title{ margin: 0; font-weight: 900; }
.book-author{ font-weight: 800; color: var(--ink-muted); }
.book-desc{ line-height: 2; color: var(--ink); }

/* Actions: two buttons side-by-side on desktop */
.book-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.book-actions .btn{ min-width: 180px; justify-content: center; }
@media (min-width: 681px){
  .book-actions .btn{ flex: 0 1 auto; } /* side by side */
}

/* ===== Mobile ===== */
@media (max-width: 680px){
  .section{ padding: 32px 16px !important; }
  .book-layout{ grid-template-columns: 1fr; gap: 14px; }
  .book-cover{ grid-column: 1; order: 1; }
  .book-content{ grid-column: 1; order: 2; }
  .book-actions .btn{ width: 100%; } /* stacked full width on phone */
}


/* ---- Adjustments: enlarge cover a bit on laptop, remove border/white bg ---- */
.book-layout{ display:flex; align-items:flex-start; gap:30px; }
.book-cover{ flex: 0 0 300px; background: none !important; }
.book-cover img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: none !important;          /* remove any border */
  background: none !important;      /* ensure no white container */
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.book-content{ flex: 1; display:flex; flex-direction:column; gap:18px; }
.book-title, .book-desc, .book-author{ margin:0; }
.book-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 680px){
  .book-layout{ flex-direction: column; gap:14px; }
  .book-actions{ flex-direction: column; }
  .book-actions .btn{ width:100%; }
}