/* ==========================================================================
   Booking Form — acf/tc94-booking
   ==========================================================================
   The block has two faces and this stylesheet dresses both.

   CARD (the default). The whole section is ours, so it is styled like every
   other panel on the site: a bordered sheet at prose width, a small badge
   saying what is behind the button, the form's name, a line of reassurance
   and one accent button. Nothing here depends on a third party loading.

   EMBED (opt in). Everything is the frame around someone else's page. Inside
   the iframe the form is Google's and none of these rules reach it, so the
   job is to make the window itself belong: the site's border, the site's
   radius, the site's white, and a note underneath in the site's voice. The
   height comes from the block as --tc94-booking-height because a cross-origin
   iframe cannot report its own content height; the fallback in the var()
   keeps the box sane if the attribute ever goes missing.
   ========================================================================== */

.tc94-booking {
  margin-top: var(--wp--preset--spacing--70);
}

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

.tc94-booking__card {
  max-width: var(--wp--custom--layout--container-prose);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  text-align: center;
  background-color: var(--wp--preset--color--surface-subtle);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--sm);
}

/* On a subtle section the panel would vanish into its own background, so it
   takes the white instead. The two never match. */
.tc94-section--subtle .tc94-booking__card {
  background-color: var(--wp--preset--color--base);
}

.tc94-section--dark .tc94-booking__card {
  background-color: var(--wp--custom--alpha--white-08);
  border-color: var(--wp--custom--color--border-on-dark);
  box-shadow: none;
}

.tc94-booking__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-ink);
  background-color: var(--wp--preset--color--accent-soft);
  border-radius: var(--wp--custom--radius--pill);
}

.tc94-booking__badge .tc94-icon {
  width: var(--wp--custom--icon--size-sm);
  height: var(--wp--custom--icon--size-sm);
}

.tc94-section--dark .tc94-booking__badge {
  color: var(--wp--custom--color--on-dark);
  background-color: var(--wp--custom--alpha--white-12);
}

/* The shared reset zeroes every p inside a tc94- element at (0,1,1), so these
   two need the card in front of them or their spacing never arrives. */
.tc94-booking__card .tc94-booking__card-title {
  margin: var(--wp--preset--spacing--40) 0 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--custom--color--text);
}

.tc94-section--dark .tc94-booking__card-title {
  color: var(--wp--custom--color--heading-on-dark);
}

.tc94-booking__card .tc94-booking__card-text {
  margin: var(--wp--preset--spacing--30) auto 0;
  max-width: var(--wp--custom--measure--short);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}

.tc94-section--dark .tc94-booking__card-text {
  color: var(--wp--custom--color--on-dark-muted);
}

.tc94-booking__card .tc94-btn {
  margin-top: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   Embed
   -------------------------------------------------------------------------- */

.tc94-booking__frame {
  position: relative;
  width: 100%;
  max-width: var(--wp--custom--layout--container-prose);
  height: var(--tc94-booking-height, 1100px);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--sm);
}

.tc94-booking__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* On a dark section the white window would float with no edge; the lighter
   border gives it one. */
.tc94-section--dark .tc94-booking__frame {
  border-color: var(--wp--custom--color--border-on-dark);
}

.tc94-booking__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  max-width: var(--wp--custom--layout--container-prose);
  margin: var(--wp--preset--spacing--40) auto 0;
}

.tc94-booking__note {
  margin: 0;
  max-width: var(--wp--custom--measure--short);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}

.tc94-section--dark .tc94-booking__note {
  color: var(--wp--custom--color--on-dark-muted);
}

@media (max-width: 29.9375rem) {
  .tc94-booking__card {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  }

  /* The link is only as tall as its own line, which is a small target on a
     phone. The padding grows the touch area and the negative margin pulls the
     layout back, so nothing moves. */
  .tc94-booking__foot .tc94-link-arrow {
    padding-block: 0.6875rem;
    margin-block: -0.6875rem;
  }
}