/* ---------------------------------------------------------------------------
   Home page "Book a call" section.

   Hand-authored, like nav.css: the design export has a Book a call CTA but no
   scheduler behind it. Markup lives in php/_booking.php. Built only from
   tokens.css variables so it stays in step with the rest of the export.
   ------------------------------------------------------------------------ */

.pe-book {
  background: var(--surface-alt);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.pe-book-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 32px;
  display: grid;
  /* minmax(0, ...) so the iframe column can shrink below its intrinsic width. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
}

.pe-book-eyebrow {
  color: var(--text-accent);
  margin-bottom: 10px;
}

.pe-book-title {
  color: var(--text-primary);
  margin: 0 0 16px;
}

.pe-book-lede {
  color: var(--text-secondary);
  margin: 0 0 24px;
  max-width: 46ch;
}

.pe-book-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pe-book-list li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Tick mark: a soft disc with a two-border check rotated onto it. */
.pe-book-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-100);
}

.pe-book-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--blue-700);
  border-bottom: 2px solid var(--blue-700);
  transform: rotate(-45deg);
}

.pe-book-alt {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

.pe-book-cal {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  overflow: hidden;
}

.pe-book-cal iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  border-radius: calc(var(--radius-lg) - 8px);
}

@media (max-width: 900px) {

  .pe-book-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 52px 24px;
  }

  .pe-book-lede {
    max-width: none;
  }
}

@media (max-width: 720px) {

  .pe-book-inner {
    padding: 44px 22px;
  }

  .pe-book-cal {
    padding: 6px;
  }

  .pe-book-cal iframe {
    height: 560px;
  }
}