/* ============================================
 * Book Promo — section module
 *
 * Cream-background two-column section promoting the
 * book "Referred". Left column: gradient-accented h2 +
 * intro paragraph + "Get the book" CTA with arrow icon.
 * Right column: book photograph in a rounded white card.
 *
 * Mobile (default): stacks vertically — copy first,
 * image below.
 * Desktop (≥1024px): 2-column flex row, left copy at
 * 520px, right image at 667×777, justified so they sit
 * at opposite ends of the inner container.
 *
 * Horizontal padding + max-width cap live in layout.css
 * via the `.tlm-section` and `.tlm-container` classes
 * on the HTML. Buttons live in buttons.css. The
 * `tlm-heading-accent` utility lives in base.css.
 * This file owns only book-promo-unique layout.
 * ============================================ */

.tlm-book-promo {
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-white);
  color: var(--color-text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-book-promo__inner {
  display: flex;
  flex-direction: column;
  /* Standards-aligned card-stack rhythm (32px). Was 60. */
  gap: var(--space-lg);
}

/* ----- Left column: copy -----
 *
 * Mobile: __copy is `display: contents` so its children (title +
 * support) become direct children of __inner. That lets us slot
 * the image (__visual) between them via `order`. Result on mobile:
 *   title → image → support (body + CTA).
 * Desktop restores __copy as a column flex container so the
 * 2-column row layout works as before.
 */

.tlm-book-promo__copy {
  display: contents;
}

.tlm-book-promo__title { order: 1; }
.tlm-book-promo__visual { order: 2; }
.tlm-book-promo__support { order: 3; }

.tlm-book-promo__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.tlm-book-promo__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Figma value 44px; --space-xl 48px is closest token (9% off). */
  gap: var(--space-xl);
}

.tlm-book-promo__body {
  margin: 0;
  max-width: 455px;
  font-family: var(--font-sans);
  /* Mobile: 16/1.5 per body standard. Tablet+ bumps to 18/1.6. */
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
}

/* Two consecutive paragraphs read as one block: pull the second up so
   the inter-paragraph gap is tight, not the --space-xl support gap
   (which is meant for body -> CTA). */
.tlm-book-promo__body + .tlm-book-promo__body {
  margin-top: calc(var(--space-md) - var(--space-xl));
}

/* Mobile: CTA full-width per mobile-standards. Tablet+ reverts
   to natural width (left-anchored in the copy column). */
.tlm-book-promo__cta {
  width: 100%;
  align-self: stretch;
}

.tlm-book-promo__book-title {
  font-weight: var(--weight-semibold);
  font-style: italic;
}

/* ----- Right column: book image ----- */

.tlm-book-promo__visual {
  margin: 0;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tlm-book-promo__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Mobile keeps the image's natural aspect; desktop overrides
     to match the Figma 667×777 frame. */
}

/* ============================================
 * TABLET (≥768px)
 * ============================================ */

@media (min-width: 768px) {
  .tlm-book-promo__body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .tlm-book-promo__cta {
    width: auto;
    align-self: flex-start;
  }
}

/* ============================================
 * DESKTOP (≥1024px)
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-book-promo {
    /* Symmetric body-section rhythm: 120/120 desktop. */
    padding-block: var(--space-5xl);
  }

  .tlm-book-promo__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    /* Figma column gap 93px; 60px in the tablet band so the two columns
       fit, opening to 80px at wide desktop (block below). */
    gap: var(--space-2xl);
  }

  /* Restore __copy as a column flex container so title + support
     stack inside the left column (instead of dissolving into __inner
     via display: contents on mobile). */
  .tlm-book-promo__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Was a hard 520px non-shrinking column, which (with the 667px
       visual) forced ~1267px of content and clipped even at 1440.
       Now shrinkable: prefers 520 but compresses in the tablet band. */
    flex: 0 1 520px;
    min-width: 0;
    /* Match the image height so the heading and CTA sit at the
       top and bottom of the column. Figma uses a fixed 269px gap
       to achieve the same effect; flex space-between is the
       fluid equivalent. */
    justify-content: space-between;
  }

  .tlm-book-promo__title {
    font-size: var(--text-h2);
  }

  .tlm-book-promo__visual {
    /* Prefers the Figma 667px but scales down proportionally rather
       than overflowing. aspect-ratio replaces the fixed 777px height
       so the box keeps the 667x777 shape at any width. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 667px;
    aspect-ratio: 667 / 777;
  }

  .tlm-book-promo__image {
    height: 100%;
  }
}

/* Wide desktop: restore the roomier 80px Figma column gap. */
@media (min-width: 1360px) {
  .tlm-book-promo__inner {
    gap: var(--space-4xl);
  }
}