/* ============================================================================
   Book detail page — Figma frame "05" (148:867), 1200px container.
   Cover + metadata hero → Available Translations table → "translate it" band.
   ========================================================================== */

.page--book-detail .section { padding-block: 60px 0; }

/* ------- Hero: cover + info ---------------------------------------------- */
.book-detail {
  display: flex;
  gap: 30px;                 /* Figma: 30px between cover and info */
  align-items: flex-start;
}
.book-detail__cover { flex: 0 0 300px; }
.book-detail__cover img {
  display: block;
  width: 300px;              /* Figma: 300×450 cover, radius 4 */
  height: 450px;
  object-fit: cover;
  border-radius: 4px;
}
.book-detail__info { flex: 1; min-width: 0; }

.book-detail__title {
  /* Figma: 24/33px, weight 400, #333. */
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin: 0 0 30px;
}

/* Labelled metadata blocks: label (regular) + value (bold), ~80px pitch. */
.book-detail__field { margin-bottom: 30px; }
.book-detail__label,
.book-detail__value {
  font-size: var(--font-size-lg);   /* 18/25px */
  line-height: 25px;
  color: var(--color-body-strong);
  margin: 0;
}
.book-detail__value { font-weight: var(--font-weight-bold); }

.book-detail__rule {
  border: 0;
  border-top: 1px solid #D9D9D9;
  margin: 0 0 30px;
}

.book-detail__about {
  /* Figma: 18/25px, weight 700, #333. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin: 0 0 10px;
}
.book-detail__blurb {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  margin: 0 0 38px;
  max-width: none;
}

/* Orange pill CTA — Figma: radius 100, 70px tall, 18/700 white. */
.book-detail__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 40px;
  border-radius: 100px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.book-detail__download:hover,
.book-detail__download:focus-visible {
  background: var(--color-orange-hover);
  color: var(--color-white);
}
.book-detail__download--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ------- Available Translations ------------------------------------------ */
.book-detail__section-rule {
  border: 0;
  border-top: 1px solid #D9D9D9;
  margin: 60px 0 0;          /* 60px below the hero */
}

.book-trans__header {
  text-align: center;
  max-width: 820px;
  margin: 60px auto 30px;
}
.book-trans__title {
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin: 0 0 15px;
}
.book-trans__subtitle {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  margin: 0;
}

/* Table sits in a #F2F2F2 rounded panel; each row is a white rounded card. */
.book-trans__panel {
  background: var(--color-bg-shaded);   /* #F2F2F2 */
  border-radius: 20px;
  padding: 20px 30px 30px;
}
.book-trans__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;                /* thin gap between row cards */
  font-size: var(--font-size-lg);       /* 18px */
}
/* Figma column x-starts (within the 1140 inner): 35 / 205 / 387 / 587 / 898. */
.book-trans__col--lang       { width: 205px; }
.book-trans__col--translator { width: 182px; }
.book-trans__col--version    { width: 200px; }
.book-trans__col--model      { width: 311px; }

.book-trans__table th {
  text-align: start;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  color: #949494;                       /* Figma: gray header labels */
  padding: 0 0 20px;
}
.book-trans__table th:first-child { padding-inline-start: 35px; }

.book-trans__table td {
  height: 78px;
  vertical-align: middle;
  background: var(--color-white);
  color: var(--color-body-strong);
}
/* #6707 — LOGICAL radii. These were physical (`10px 0 0 10px` / `0 10px 10px 0`)
   while the padding beside them was already logical, so in Arabic the row kept its
   rounding on the left/right regardless of direction: the first cell (rendered on
   the RIGHT in RTL) was rounded on its inner edge and square on the outer one,
   which is the "uneven / not smooth" white container reported in #6707.
   border-{start,end}-{start,end}-radius follow the writing direction. */
.book-trans__table td:first-child {
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  padding-inline-start: 35px;
}
.book-trans__table td:last-child {
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  padding-inline-end: 35px;
}

.book-trans__link {
  color: var(--color-orange);
  font-weight: var(--font-weight-bold);
}
.book-trans__link:hover { text-decoration: underline; }
.book-trans__pending { color: var(--color-muted); }

.book-trans__footnote {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: #949494;
  margin: 30px 0 0;
  max-width: none;
}

/* ------- "Don't see the language" band ----------------------------------- */
.book-translate-cta {
  background: #FBF2E6;                   /* Figma: cream band */
  padding-block: 60px;
  margin-top: 60px;
}
.book-translate-cta__title {
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin: 0 0 15px;
}
.book-translate-cta__text {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  margin: 0;
  max-width: none;
}

/* ------- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .book-detail { flex-direction: column; align-items: center; text-align: center; }
  .book-detail__rule { display: none; }
}
@media (max-width: 768px) {
  .book-trans__panel { padding: 16px; overflow-x: auto; }
  .book-trans__table { min-width: 640px; }
}