/*
 * Book detail page styling.
 * Auto-loaded by header.php's cache-busting stylesheet helper because the
 * file lives at assets/css/templates/<template>.css and the helper checks
 * file_exists() for the current template.
 *
 * Two main components:
 *   • .buy-bar         — price + Add-to-Cart paired as one unit.
 *                        Desktop: in-flow after the description.
 *                        Mobile (≤767px): fixed at viewport bottom so the
 *                        visitor can buy from anywhere on the page.
 *   • .book-meta       — bibliographic <dl> rendered as a tidy two-column
 *                        grid (label / value).
 */


/* === Buy bar (desktop, in-flow) ====================================== */

.buy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
}

.buy-bar-price {
  font-size: 1.25rem;
  line-height: 1;
  white-space: nowrap;
}

.buy-button {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: var(--color-black);
  color: var(--color-white);
  border: 0;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: opacity .2s;
}
.buy-button:hover {
  opacity: .85;
}


/* === Bibliographic data ============================================== */

.book-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.5rem;
  margin: 1.5rem 0;
}
.book-meta dt {
  color: var(--color-text-grey);
  font-size: .9rem;
}
.book-meta dd {
  margin: 0;
}


/* ====================================================================
   Mobile (≤ 767px) — sticky buy bar at viewport bottom.
   ==================================================================== */

@media (max-width: 767px) {

  /* Float the buy bar to the bottom of the viewport, always visible. */
  .buy-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: .9rem var(--padding);
    background: var(--color-background);
    border-top: 1px solid var(--color-light);
    /* extend the touch target on iOS safe-area devices (notch / home bar) */
    padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  }

  /* Make sure the page content isn't covered by the fixed bar. */
  .book {
    padding-bottom: 6rem;
  }

  /* Slight size adjustments inside the bar for thumb-friendly tap. */
  .buy-button {
    padding: .8rem 1.25rem;
  }
}