/* wg21.org Books page.
   Reuses the About-family scaffold (header, content width, eyebrow/title/lead)
   via @import "about.css", which itself pulls in shared-vars + masthead +
   navbar tokens. This file adds only the featured-book layout. */
@import "about.css";

/* About-family type scale (--copy/--title/--lead) is keyed off specific body
   classes; opt the Books page in so the shared header styles read correctly. */
body.books-page { --copy: 16px; --title: 18px; --lead: 20px; }

.books { padding-bottom: 80px; }

/* Constrain the feature block to the same content column as the header. */
.book-feature {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Banner artwork: full-width within the column, links through to the PDF. */
.book-banner-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--card);
}
.book-banner {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Book details + call to action. */
.book-body { padding-top: 32px; max-width: 720px; }
.book-label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.book-label .slash { color: var(--accent-blue); }
.book-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.book-subtitle {
  margin: 6px 0 0;
  font-size: var(--lead);
  line-height: 1.4;
  color: var(--ink-soft);
}
.book-meta {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
}
.book-blurb {
  margin: 20px 0 0;
  font-size: var(--copy);
  line-height: 1.65;
  color: var(--ink);
}

/* Call-to-action row: "Read online" (primary) + "Read the PDF" (secondary). */
.book-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

/* Primary call to action — accent-blue pill, consistent with site buttons. */
.book-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid var(--accent-blue);
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
/* Keep white text/icon on hover: the shared `a:hover` rule (shared-vars.css)
   would otherwise recolor the label to --accent-2, matching the bg. */
.book-cta:hover {
  background: var(--accent-bright, #003bb8);
  border-color: var(--accent-bright, #003bb8);
  color: #fff;
  text-decoration: none;
}
.book-cta svg { width: 16px; height: 16px; }

/* Secondary variant — outline that fills on hover. */
.book-cta-secondary {
  background: transparent;
  color: var(--accent-blue);
}
.book-cta-secondary:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* Shown until the PDF is uploaded via the CMS (Wagtail Documents). */
.book-pending {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .book-title { font-size: 28px; }
}