/* Books Expression of Interest page.
   Layers on top of the shared warm-gallery system (styles.css). Reuses the
   design tokens (--bg, --surface, --accent, --border, --shadow), the card
   surface treatment, button styles, section rhythm, and the persistent
   chapter navigator. No new fonts and no dark-mode override. */

/* Full-width hero: the outer hero surface spans the whole content width (no
   60ch cap and no companion column); the copy keeps its own readable measure
   inside the card. */
.books-hero-content {
  grid-template-columns: 1fr;
}

.books-hero-content .hero-text {
  max-width: 66ch;
}

/* Concise single-column hero: the copy and the Follow the books action, no
   aside panel. */
.books-panel,
.books-eoi-form {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.books-section,
.books-form-section {
  margin-top: 28px;
}

/* Two book cards, side by side, collapsing to one column. A flex column keeps
   the two cards the same height on desktop: the cover frame, heading, and
   anticipation block sit at the top, flexible description content fills the
   middle, and the CTA is anchored to the shared bottom edge via margin-top
   auto (no fixed offsets). Mobile stacks naturally in one column. */
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
  align-items: stretch;
}

.books-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}

.books-panel-text {
  margin: 0;
  color: var(--muted);
  max-width: 42ch;
}

/* Anticipation block: a quiet availability badge plus the exact standing
   invitation copy, at the same structural position in every card. */
.book-availability {
  margin: 4px 0 0;
  justify-self: start;
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
}

.books-anticipation {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* CTA anchored to the card's bottom edge so both cards align on desktop. */
.books-panel-cta {
  margin: auto 0 0;
  padding-top: 10px;
}

/* Centered, readable EOI form with a bounded measure. */
.books-form-section {
  display: grid;
  justify-items: center;
}

.books-eoi-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  padding: 28px;
}

/* Prevent a 320px horizontal overflow. The shared styles.css turns every
   <label> into a display:grid container, and this form plus .books-fieldset are
   grids too; their implicit auto tracks (minmax(auto,auto)) refuse to shrink
   below intrinsic control widths, forcing overflow at 320px. Pinning each track
   to minmax(0,1fr) lets every level shrink to the content box. min-width:0 and
   max-width:100% are kept as belt-and-suspenders. (.books-choice/.books-consent
   are flex, so a grid track is a no-op there; .books-honeypot label keeps its
   own `none` via higher specificity.) */
.books-eoi-form fieldset,
.books-eoi-form label {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.books-eoi-form input,
.books-eoi-form select,
.books-eoi-form textarea {
  min-width: 0;
  max-width: 100%;
}

.books-fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.books-fieldset legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--muted);
  font-weight: 500;
}

.books-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-template-columns: none;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.books-choice input {
  width: auto;
}

/* Per-book estimated-copies control. Hidden and disabled while its book is
   unselected (removed from the a11y tree and tab order); revealed and enabled
   when the checkbox is checked. The [hidden] guard is explicit because the
   display:grid declaration would otherwise override the UA hidden default. */
.books-qty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin-left: 26px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
}

.books-qty[hidden] {
  display: none;
}

.books-qty label {
  color: var(--muted);
  font-size: 0.92rem;
}

.books-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  grid-template-columns: none;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
}

.books-consent input {
  flex: 0 0 auto;
  width: auto;
  margin-top: 4px;
}

.books-consent span {
  line-height: 1.55;
}

/* Turnstile widget container. The widget iframe is injected here once the
   official script is loaded explicitly by books.js. max-width keeps any
   widget overflow contained to the form column instead of the page. */
.books-turnstile {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  min-height: 65px;
}

.books-turnstile:empty {
  min-height: 0;
}

.books-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.books-noscript {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Visually hidden honeypot: removed from sight and screen readers, kept in the
   form so bots auto-filling fields still submit it. */
.books-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.books-honeypot label {
  grid-template-columns: none;
}

@media (max-width: 960px) {
  .books-hero-content {
    grid-template-columns: 1fr;
  }

  .books-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .books-panel,
  .books-eoi-form {
    padding: 20px;
  }

  .books-qty {
    margin-left: 0;
  }

  /* Phone readability: the live status line (errors and confirmations) and
     the per-book quantity labels read at a full 16px. */
  .books-status,
  .books-qty label,
  .books-anticipation {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .books-choice {
    transition: none;
  }
}

/* Mobile reading layout (mobile-layout-v2). Appended after this sheet's own
   breakpoints so it is the final word at <=760px: single-column book cards
   with full-measure text, full-width CTAs, and the EOI form stacked at the
   same 20px padding the 640px block's 320px box-model relies on. books.css
   also loads on the home page, so the home books preview gets the same
   treatment. Desktop (>=761px) is untouched. */
@media (max-width: 760px) {
  .books-grid {
    gap: 22px;
    margin-top: 22px;
  }

  .books-panel {
    gap: 8px;
    padding: 20px;
  }

  .books-panel-text {
    max-width: none;
    font-size: 1rem;
  }

  .books-panel-cta .button {
    width: 100%;
  }

  .books-eoi-form {
    padding: 20px;
  }

  .books-qty {
    margin-left: 0;
  }

  /* Phone readability across the whole band, not only <=640px. */
  .books-status,
  .books-qty label,
  .books-anticipation {
    font-size: 1rem;
  }

  .books-turnstile {
    width: 100%;
  }

  #books-submit {
    width: 100%;
  }
}