/* ============================================
 * Book Order — Choose your format (Figma 918:1778)
 *
 * Cream surface, centred heading, two pricing cards side by side
 * (mobile: stacked), centred footnote below. The featured (physical)
 * card carries a 4px pink border; the digital card a hairline navy
 * border. Cards stretch to equal height; the button pins to the card
 * foot so both align regardless of list length.
 * ============================================ */

.tlm-bo-format {
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
}

.tlm-bo-format__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  align-items: center;
}

.tlm-bo-format__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);
  color: var(--color-navy);
  text-align: center;
}

.tlm-bo-format__grid {
  display: grid;
  /* minmax(0,1fr) lets the track shrink below its content min-width so
     a long feature line never blows the column past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  width: 100%;
}

/* ----- Card ----- */

.tlm-bo-format__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 48px 32px;
  background-color: var(--color-white);
  /* Hairline at rest on BOTH cards, matching the site's pricing tables.
     Activation keeps the 1px border and adds a 2px pink ring via
     box-shadow, so the thickness never changes (no layout shift). */
  border: 1px solid var(--color-border-card);
  border-radius: 12px;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Active state — same pink-border + 2px ring treatment as the pricing
   cards. The card is tabindex=0 so a mobile tap focuses it; :focus (not
   :focus-visible) is used so touch reliably triggers it, and
   :focus-within covers focusing the inner button link. */
.tlm-bo-format__card:focus,
.tlm-bo-format__card:focus-within {
  border-color: var(--color-pink-stop);
  box-shadow: 0 0 0 2px var(--color-pink-stop);
}

/* Hover (desktop). Guarded so a touch tap doesn't leave it stuck. */
@media (hover: hover) {
  .tlm-bo-format__card:hover {
    border-color: var(--color-pink-stop);
    box-shadow: 0 0 0 2px var(--color-pink-stop);
  }
}

.tlm-bo-format__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tlm-bo-format__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-align: center;
}

.tlm-bo-format__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-align: center;
}

.tlm-bo-format__blurb {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
}

.tlm-bo-format__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-navy-divider);
}

/* ----- Feature list ----- */

.tlm-bo-format__list {
  /* flex-grow so the button below pins to the card foot, aligning the
     two cards' buttons even when the lists differ in length. */
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-bo-format__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
}

.tlm-bo-format__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background-color: var(--color-navy);
  border-radius: var(--radius-pill);
}

.tlm-bo-format__check svg {
  width: 12px;
  height: 12px;
}

.tlm-bo-format__button {
  width: 100%;
}

/* ----- Footnote ----- */

.tlm-bo-format__note {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  text-align: center;
}

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

@media (min-width: 1024px) {
  .tlm-bo-format {
    padding-block: var(--space-5xl);
  }

  .tlm-bo-format__inner {
    gap: 64px;
  }

  .tlm-bo-format__title {
    font-size: var(--text-h2);
  }

  .tlm-bo-format__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* equal-height cards so the pink-bordered physical card and the
       shorter digital card line up top and bottom. */
    align-items: stretch;
  }

  .tlm-bo-format__card {
    gap: var(--space-lg);
  }
}