/* Steppe book page (src/_includes/steppe/book-detail.njk). Owner: WP2.
   The 3 layouts use the same markup and change only the grid.
   data-book-layout="a" is the default; js/book-layout.js sets "b" or
   "c" from ?layout=. The cover reuses .mo-book__plate
   (css/steppe/steppe-pages.css). */

/* All layouts */
.mo-book-detail{display:grid;gap:var(--space-7) 56px;align-items:start;margin-top:var(--space-6)}
.mo-book-detail__cover{grid-area:cover}
.mo-book-detail__head{grid-area:head}
.mo-book-detail__meta{grid-area:meta;display:flex;flex-direction:column;gap:var(--space-5)}
.mo-book-detail__about{grid-area:about;display:flex;flex-direction:column;gap:var(--space-5);max-width:66ch}
.mo-book-detail__title{margin:0;font-size:var(--text-display-2);line-height:var(--leading-tight)}
.mo-book-detail__meta .mo-book__meta{margin:0}
.mo-book-detail__about h2{margin:0}
.mo-book-detail__facts{display:grid;gap:var(--space-3);margin:0}
.mo-book-detail__facts>div{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-4);align-items:baseline}
.mo-book-detail__facts dd{margin:0;font-family:var(--font-ui);font-size:var(--text-ui-sm)}

/* A (default): cover beside the text. The cover stays in view while the
   reader scrolls a long description. */
.mo-book-detail[data-book-layout="a"]{grid-template-columns:minmax(220px,32%) minmax(0,1fr);grid-template-areas:"cover head" "cover meta" "cover about";grid-template-rows:auto auto 1fr}
.mo-book-detail[data-book-layout="a"] .mo-book-detail__cover{position:sticky;top:var(--mo-sticky-top)}

/* B: cover above the text. The head and the meta are centered; the
   description stays left-aligned. */
.mo-book-detail[data-book-layout="b"]{grid-template-columns:minmax(0,66ch);justify-content:center;grid-template-areas:"cover" "head" "meta" "about"}
.mo-book-detail[data-book-layout="b"] .mo-book-detail__cover{justify-self:center;width:min(360px,100%)}
.mo-book-detail[data-book-layout="b"] .mo-book-detail__head,
.mo-book-detail[data-book-layout="b"] .mo-book-detail__meta{text-align:center}

/* C: reading column with a side panel. The metadata reads as a
   reference card next to a wide text. */
.mo-book-detail[data-book-layout="c"]{grid-template-columns:minmax(0,1fr) minmax(260px,30%);grid-template-areas:"head cover" "about cover" "about meta";grid-template-rows:auto auto 1fr;position:relative;isolation:isolate}
.mo-book-detail[data-book-layout="c"]::before{content:"";grid-column:2;grid-row:1 / 4;align-self:stretch;background:var(--sand-2);border:1px solid var(--border-hairline);z-index:-1}
.mo-book-detail[data-book-layout="c"] .mo-book-detail__cover{padding:var(--space-6) var(--space-6) 0}
.mo-book-detail[data-book-layout="c"] .mo-book-detail__meta{padding:0 var(--space-6) var(--space-6)}
.mo-book-detail[data-book-layout="c"] .mo-book-detail__about{max-width:none}

/* All layouts at 1000px and below: one column. This block is last, so
   it takes precedence. */
@media (max-width:1000px){
  .mo-book-detail[data-book-layout]{grid-template-columns:minmax(0,1fr);grid-template-areas:"cover" "head" "meta" "about";grid-template-rows:auto}
  .mo-book-detail[data-book-layout] .mo-book-detail__cover{position:static;width:min(320px,100%)}
  .mo-book-detail[data-book-layout="c"]::before{display:none}
  .mo-book-detail[data-book-layout="c"] .mo-book-detail__cover,
  .mo-book-detail[data-book-layout="c"] .mo-book-detail__meta{padding:0}
}