/*
 * What's on our desk — issue detail page.
 * Renamed from reading-issue.css in Phase 1.
 */

.wood-issue { max-width: 70ch; }

.wood-issue .back {
  font-size: .9rem;
  margin-bottom: 1rem;
}

.wood-issue .back a {
  color: #777;
  text-decoration: none;
}

.wood-issue .back a:hover { color: #000; }

.wood-issue .issue-date {
  color: #777;
  margin-top: -.5rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}

.wood-issue .lead {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}


/* === "Read the full issue →" call-to-action =========================
   Rendered only when an HTML file has been uploaded to the issue's
   htmlIssue section. Placed high on the page (below intro, above the
   cover image) as the obvious primary action. Solid black block so
   it reads unambiguously as a button, not as a text link — the
   editorial HTML is the destination the whole page invites you to. */
.wood-issue .issue-html-cta {
  margin: 1.5rem 0 2.5rem;
}
.wood-issue .issue-html-cta a {
  display: inline-block;
  padding: .75rem 1.25rem;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  transition: opacity .18s ease;
}
.wood-issue .issue-html-cta a:hover,
.wood-issue .issue-html-cta a:focus {
  opacity: .8;
}

.wood-issue .issue-image {
  margin: 2rem 0;
}

/* Image is now wrapped in a lightbox trigger — the anchor should feel
   like the image itself, not a text link. Cursor gets a zoom-in cue so
   visitors know clicking enlarges the image. */
.wood-issue .issue-image a {
  display: block;
  cursor: zoom-in;
  border-bottom: 0;
  text-decoration: none;
}

.wood-issue .issue-image img {
  display: block;
  width: 100%;
  height: auto;
}

.wood-issue .issue-image figcaption {
  font-size: .85rem;
  color: #777;
  margin-top: .5rem;
  text-align: center;
}


/* === "Books in this issue" ===========================================
   Below the poster image: a small card row of the featured books, each
   linking to its shop product page. Uses the shared .shop-grid + the
   book-card snippet, so the cards look identical to /shop and update
   automatically with cover / price / stock. Sits inside the 70ch
   .wood-issue column — with minmax(180px, 1fr) in .shop-grid, that
   comfortably fits 3–4 covers per row on desktop, single column on
   narrow phones. Rendered only if featuredBooks is populated. */

.issue-featured-books {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-light);
}

.issue-featured-books-title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1rem;
  letter-spacing: .01em;
}