/* /assets/css/book.css */

.book-hero {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.book-title {
  font-size: var(--h1);
  margin: 0 0 var(--space-2);
}

.book-byline {
  margin: 0;
  font-family: var(--serif);
  letter-spacing: 0.35px;
  font-size: 18px;
}

.book-byline a {
  color: var(--oak);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--serif);
  letter-spacing: 0.35px;
  margin: 0 0 var(--space-3);
}

.crumbs a {
  color: var(--oak);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.crumb-sep { opacity: 0.7; }

/* Top layout */
.book-top {
  padding: var(--space-6) 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: start;
}

/* Cover */
.book-cover {
  max-width: 450px;
  justify-self: start;
  margin: 0;
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.book-cover a { display: block; line-height: 0; }
.book-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.cover-note {
  margin: 0;
  padding: 10px 14px 14px;
  font-size: 13px;
  opacity: 0.85;
}

/* Right panel */
.book-panel {
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(75, 54, 33, 0.18);
}

.panel-label {
  margin: 0;
  font-family: var(--serif);
  letter-spacing: 0.45px;
  color: var(--oak);
  font-weight: 700;
  font-variant-caps: small-caps;
}

.panel-price {
  margin: 0;
  font-family: var(--serif);
  letter-spacing: 0.45px;
  color: var(--oak);
  font-size: 22px;
  font-weight: 800;
}

.panel-formats {
  margin: 0;
  display: grid;
  gap: 4px;
}

.panel-formats .label {
  font-family: var(--serif);
  letter-spacing: 0.35px;
  opacity: 0.85;
}

.panel-formats .value {
  font-family: var(--serif);
  letter-spacing: 0.25px;
}

.panel-jump {
  margin: 0;
  font-family: var(--serif);
  letter-spacing: 0.3px;
}

.panel-jump a {
  color: var(--oak);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.panel-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.92;
  background: rgba(245,240,230,0.65);
  border: 1px solid rgba(75, 54, 33, 0.18);
  border-radius: 14px;
  padding: 12px;
}

/* Payhip wrapper */
.payhip-box {
  padding: 12px;
  background: rgba(245,240,230,0.75);
  border: 1px solid rgba(75, 54, 33, 0.20);
  border-radius: 14px;
}


/* Free ZIP wrapper */
.download-box {
  padding: 12px;
  background: rgba(245,240,230,0.75);
  border: 1px solid rgba(75, 54, 33, 0.20);
  border-radius: 14px;
}
.free-download-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #5CA941;

    background-color: #60B044 !important;
    background-image: linear-gradient(#8ADD6D, #60B044) !important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8ADD6D), to(#60B044)) !important;
    background-image: -ms-linear-gradient(top, #8ADD6D, #60B044) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8ADD6D', endColorstr='#60B044');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8ADD6D', endColorstr='#60B044')";
    background-repeat: repeat-x !important;

    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25) !important;
    cursor: pointer;
}
/* Body */
.book-body {
  padding: 0 0 var(--space-6);
}

.section-title {
  font-size: var(--h2);
  margin: 0 0 var(--space-3);
}

.prose {
  max-width: 90ch;
  font-size: var(--text-lg);
}

/* Info box */
.info-box {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: rgba(255,255,255,0.30);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.info-lead {
  margin: 0 0 var(--space-4);
  opacity: 0.95;
}

.book-facts {
  margin: 0 0 var(--space-4);
  display: grid;
  gap: 10px;
}

.fact {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  align-items: baseline;
}

.fact dt {
  font-family: var(--serif);
  letter-spacing: 0.35px;
  opacity: 0.85;
}

.fact dd { margin: 0; }

.note-block {
  margin: 0;
  line-height: 1.55;
}

/* Related */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding: var(--space-3) 0;
}

.section-head {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.section-note {
  margin: 0;
  opacity: 0.85;
  max-width: 80ch;
}

.related-card {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
}

.related-cover {
  display: block;
  background: rgba(255,255,255,0.25);
}

.related-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;   /* matches your 475×712 thumbs */
  object-fit: cover;
  display: block;
}

.related-meta {
  padding: var(--space-4);
  display: grid;
  gap: 8px;
}

.related-title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.2px;
}

.related-title a {
  color: var(--ink);
  text-decoration: none;
}

.related-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.related-author {
  margin: 0;
  opacity: 0.88;
}

.related-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.price {
  font-family: var(--serif);
  letter-spacing: 0.3px;
  color: var(--oak);
}

.price--free {
  color: var(--oak);
}

@media (max-width: 750px) {
  .related-grid { grid-template-columns: repeat(2, 1fr);max-width:550px; }
}
@media (max-width: 380px) {
  .related-grid { grid-template-columns: repeat(1, 1fr);max-width:250px;margin:0 auto; }
}
@media (max-width: 700px) {
  .list-hero { padding-top: var(--space-5); }
  .related-meta { padding: var(--space-4); }
  .page-link { min-width: 36px; height: 32px; }
}


/* Responsive */
@media (max-width: 550px) {
  .book-top { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 160px 1fr; }
}

@media (max-width: 550px) {
  .book-panel { order: -1; }
  .book-cover { order: 0; margin:0 auto;}
}
@media (max-width: 750px) {
  .book-hero { padding-top: var(--space-5); }
  .prose { font-size: 16px; }
  .fact { grid-template-columns: 1fr; }
}
/* --- Book cover sizing + nicer framing (override) --- */

/* Give the cover column a “book-ish” width instead of a big flexible fraction */
.book-top{
  grid-template-columns: minmax(220px, 340px) 1fr;
}

/* On wide screens, allow a touch more width but keep it sensible */
@media (min-width: 1100px){
  .book-top{
    grid-template-columns: minmax(240px, 360px) 1fr;
  }
}

/* Let the grid column control the size (not max-width: 450px) */
.book-cover{
  max-width: none;
}

/* Add a subtle inner mat so the cover feels framed and smaller */
.book-cover a{
  padding: 12px;
  background: rgba(255,255,255,0.18);
}

/* Make the image feel like a “plate” inside the frame */
.book-cover img{
  border-radius: calc(var(--radius) - 8px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
/* --- Mobile order fix for book page --- */

@media (max-width: 650px){
  .book-top{
    grid-template-columns: 1fr;
  }

  /* Move the buy/info panel above the cover */
  .book-panel{
    order: 1;
  }

  .book-cover{
    order: 2;
    margin-top: var(--space-4);
    justify-self: center;
  }

  /* Slightly reduce the cover size on phones */
  .book-cover img{
    max-width: 260px;
  }
}