/* ============================================================
   booking.css - Layout for the booking page (book.html)
   ------------------------------------------------------------
   Goal: this is the "section" stylesheet for the booking page,
   the way legal.css is for the legal pages. The booking page
   reuses legal.css's standalone-page chrome (.legal-bar /
   .legal-foot) and the shared helpers; this file adds only the
   things unique to the page - the intro agenda list and the
   inline scheduling-embed container.

   It reuses the shared layers unchanged: tokens.css (every value
   below is a var(--…), nothing hardcoded), base.css (.container,
   .center, .lede) and components.css (.logo, .btn, .fine). No JS
   beyond js/booking_embed.js, which mounts the calendar.

   Authored MOBILE-FIRST. The embed is fluid (full container
   width) at every viewport, so no breakpoints are needed.

   Load order on book.html: tokens -> base -> components ->
   legal (shared chrome) -> booking (this file, last).
   ============================================================ */

/* ─── intro sub-heading - the one-line promise under the H1. Composes the shared
   .lede, just a touch bigger and bolder, and drops its 60ch width cap so the
   sentence stays on ONE line on desktop (it still wraps on phones too narrow to
   fit it, so it never forces horizontal scroll). Adds an equal --space-7 (40px)
   gap to the H1 above to match the .lede margin-bottom below, so the line sits
   evenly between the heading and the agenda. ─── */
.booking-intro {
  margin-top: var(--space-7);
  max-width: none;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

/* ─── intro agenda - the "what we'll cover" list above the calendar, with the
   same green check (✓) bullets as the pricing checklist (--color-go). The list
   is centered and sized to its longest line (width: fit-content) so no bullet
   wraps on desktop; the .container is centered, so text-align is reset to left
   here, and each row is a flex line - the check, then the text - like pricing. ─── */
.booking-agenda {
  list-style: none;
  width: fit-content;        /* as wide as the longest bullet, so no line wraps */
  max-width: 100%;           /* but never overflow a narrow screen (wraps there) */
  margin: 0 auto var(--space-7);
  text-align: left;
}
.booking-agenda li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}
.booking-agenda li:last-child { margin-bottom: 0; }
.booking-agenda li::before {
  content: "\2713";
  flex: 0 0 auto;
  color: var(--color-go);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
}

/* ─── inline-embed container - the third-party calendar injects its <iframe>
   here (js/booking_embed.js). The min-height reserves the box so the page does
   not shift when the calendar paints (no CLS). ─── */
.booking-embed {
  width: 100%;
  min-height: var(--booking-min-height);
}

/* ─── fallback line under the calendar - the always-present "Book a call" link
   (its href is also the single source of the booking link the embed uses). ─── */
.booking-alt {
  margin-top: var(--space-5);
}