/**
 * Grit partner coloring-book landing (grit/partner_book)
 *
 * Registry-driven QR landing for partner venues' coloring books
 * (portal/partner_books.py). Loads on top of grit-brand.css (extends
 * website/grit/base.html), so it inherits Merriweather, lowercase headers,
 * the purple/blue palette. Mobile-first — the QR is scanned on phones.
 *
 * Conversion-first: one page, one ask. The email capture sits inside the
 * first mobile viewport. Page-scoped (only partner_book.html links it), so
 * it also suppresses the generic footer launch-list and the nav waitlist
 * pills — one page, one email path (the passport page's pattern).
 */

.book-hero {
  background: linear-gradient(160deg, var(--color-blue) 0%, var(--color-purple) 100%);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem);
  /* Fill the viewport below the navbar so the dark footer doesn't ride up. */
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
}

.book-content {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.book-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.book-content h1 {
  color: #fff;
  font-size: clamp(1.65rem, 4.5vw, var(--text-3xl));
  margin-bottom: 0.6rem;
}

.book-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.25rem;
}

.book-prize {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  border-left: 3px solid rgba(154, 213, 202, 0.9);
  padding-left: 0.8rem;
}

/* ---- Waitlist capture card ---- */
.book-capture {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  text-align: left;
}

.book-capture .launch-list-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.book-capture .launch-list-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.8rem 1.1rem;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  color: #1a1a2e;
}

.book-capture .launch-list-form button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}

.book-capture .launch-list-form button:disabled {
  opacity: 0.7;
  cursor: default;
}

.book-capture .launch-list-error {
  margin: 0.6rem 0 0;
  color: #ffd7d7;
  font-size: 0.9rem;
}

/* Shown by launch-list.js on a successful capture (inline display:none in
   the template is the pre-submit state, matching the footer's contract). */
.book-capture .launch-list-thanks {
  margin: 0.85rem 0 0;
}

.book-capture .launch-list-thanks p {
  margin: 0;
}

/* Opt-in mechanics, one line under the form. */
.book-fineprint {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

/* ---- One page, one email path ----
   Suppress the competing generic captures — the footer launch-list and BOTH
   nav waitlist pills — while the capture card is on the page. Browsers
   without :has() keep the extra forms (graceful degradation).

   The waitlist selector MUST carry the #mobileDrawer ID: drawer.css declares
   `#mobileDrawer .drawer-join-bottom { display: block !important; }` (1-1-0),
   which outranks any class-only rule when both are !important. Both pills
   (desktop `d-lg-block` and drawer bottom) live inside #mobileDrawer. */
body:has(.book-capture) .footer-launch-list {
  display: none !important;
}

body:has(.book-capture) #mobileDrawer .nav-item .btn-brand-primary {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Cover art (2026-09-07)

   Whoever loads this page just scanned a QR off a physical book, so the
   first thing they should see is that book — visual proof they landed
   right, which no amount of copy provides.

   The constraint this has to respect is the one at the top of the file:
   the email capture stays inside the first mobile viewport. So the cover
   is deliberately SMALL on phones (a confirmation, not a hero) and only
   becomes a proper column once there is width to spend.

   .book-cover reserves a fixed box and the image is contained inside it,
   so the two different aspect ratios in the registry (partner books
   900x1243, The Stewards square) both sit correctly and neither causes
   layout shift. Never set an aspect-ratio here — it would crop one of
   them.
   --------------------------------------------------------------------- */
.book-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 640px;
  margin: 0 auto;
}

.book-cover {
  flex: none;
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  /* Lifts the cover off the blue/purple gradient so it reads as a
     physical object rather than a flat pasted rectangle. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

/* Short phones (iPhone SE class, 667px tall) cannot afford the full cover:
   measured at 375x667, the generous version pushed the join button off the
   bottom, which breaks the one-ask contract this file opens with. The cover
   is reassurance; the capture is the point, so on a short viewport the
   cover yields. Keyed on HEIGHT, not width — a tall phone keeps the big
   cover regardless of how narrow it is.

   Budget this against the SITEWIDE ALPHA BAR, not the bare page: the bar
   (base.html, gated on GRIT_ALPHA_HERO_DATE) costs ~56px and renders in
   prod but not in a local checkout with the env unset, so tuning without
   it silently overstates the room available — which is how the button
   slipped below the fold once already. Verify with
   GRIT_ALPHA_HERO_DATE set. */
@media (max-width: 767.98px) and (max-height: 740px) {
  .book-layout {
    gap: 0.45rem;
  }
  .book-cover {
    width: 62px;
    height: 78px;
  }
  .book-badge {
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.66rem;
  }
  .book-content h1 {
    font-size: 1.45rem;
    margin-bottom: 0.4rem;
  }
  .book-lead,
  .book-prize {
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.45;
  }
}

@media (min-width: 768px) {
  /* Two-up: the cover gets real size using horizontal space the centred
     single column was leaving empty, and the copy keeps its measure. */
  .book-layout {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 960px;
  }
  .book-cover {
    width: 300px;
    height: 415px;
  }
  .book-content {
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  .book-content {
    text-align: center;
  }
  .book-capture {
    text-align: left;
  }
}