/* =============================================================================
   BUAMS AI new-ui — DEMO PAGE
   Loads AFTER landing.css, which supplies .bui-section, .bui-faq and the
   shared type scale this page reuses.

   Layout: the booking column and the callback form sit side by side above
   992px. Which one is wider depends on whether a calendar is configured — with
   an embed the calendar leads, without one the form is the primary action and
   .is-form-led swaps the emphasis. Both are always present.
   ============================================================================= */

.bui-demo-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--bui-space-10);
  align-items: start;
}

/* No calendar configured: the form IS the conversion, so it gets the wider
   column and the agenda becomes the supporting material. */
.bui-demo-grid.is-form-led {
  grid-template-columns: .95fr 1.05fr;
}

.bui-demo-heading {
  margin: 0 0 var(--bui-space-2);
  font-size: var(--bui-text-h1);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.02em;
  color: var(--bui-ink-900);
}

.bui-demo-sub {
  margin: 0 0 var(--bui-space-6);
  max-width: 56ch;
  font-size: var(--bui-text-body);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Calendar embed ───────────────────────────────────────────────────────
   The container carries the border and radius; the iframe fills it. Third
   party scheduling widgets bring their own chrome and paint their own white,
   so overflow is clipped rather than trusting them to respect the radius. */
.bui-demo-embed {
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  background: var(--bui-surface);
  overflow: hidden;
}

.bui-demo-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.bui-demo-embed-fallback {
  margin: var(--bui-space-3) 0 0;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

/* ── Agenda ───────────────────────────────────────────────────────────────
   An ordered list because the call really does run in this order, so the
   numbering carries information rather than decorating four items. The markers
   are suppressed because the icons already index them visually. */
.bui-demo-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bui-space-5);
}

.bui-demo-agenda-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bui-space-6) var(--bui-space-8);
}

.bui-demo-agenda-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--bui-space-4);
  align-items: start;
}

.bui-demo-agenda-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bui-radius-md);
  background: var(--bui-primary-100);
  color: var(--bui-primary-700);
  font-size: 1.1rem;
}

.bui-demo-agenda-title {
  display: block;
  margin-bottom: var(--bui-space-1);
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-demo-agenda-body {
  display: block;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Callback card ───────────────────────────────────────────────────────── */
.bui-demo-card {
  padding: var(--bui-space-6);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-sm);
}

.bui-demo-card-title {
  margin: 0 0 var(--bui-space-1);
  font-size: var(--bui-text-h2);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.015em;
  color: var(--bui-ink-900);
}

.bui-demo-card-sub {
  margin: 0 0 var(--bui-space-5);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* Two fields per row where both are short. Collapses below 480px, where a
   half-width phone field is worse than a stacked one. */
.bui-demo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--bui-space-4);
}

.bui-demo-form-error {
  margin-bottom: var(--bui-space-3);
}

.bui-demo-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-2);
  margin: var(--bui-space-4) 0 0;
  font-size: var(--bui-text-xs);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-500);
}

.bui-demo-privacy .bi {
  margin-top: 2px;
  color: var(--bui-success);
}

/* ── Success panel ────────────────────────────────────────────────────────
   Replaces the form in place. Centre-aligned because it is a terminal state
   with nothing to scan, unlike the form it replaces. */
.bui-demo-success {
  text-align: center;
  padding: var(--bui-space-4) 0 var(--bui-space-2);
}

.bui-demo-success:focus { outline: none; }

.bui-demo-success:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 4px;
  border-radius: var(--bui-radius-md);
}

.bui-demo-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--bui-space-4);
  border-radius: var(--bui-radius-pill);
  background: var(--bui-success-bg);
  color: var(--bui-success);
  font-size: 1.5rem;
}

.bui-demo-success-title {
  margin: 0 0 var(--bui-space-2);
  font-size: var(--bui-text-h2);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-demo-success-body {
  margin: 0 auto var(--bui-space-4);
  max-width: 40ch;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-demo-success-alt {
  margin: 0;
  padding-top: var(--bui-space-4);
  border-top: 1px solid var(--bui-line);
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

.bui-demo-alt {
  margin: var(--bui-space-4) 0 0;
  text-align: center;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

/* ── Responsive ───────────────────────────────────────────────────────────
   Below 992px the columns stack, and whichever variant is showing puts its
   PRIMARY action first. With a calendar that is the calendar; without one the
   agenda is only supporting material and the form leads. Getting this the
   wrong way round on a phone means scrolling past a 720px embed to reach the
   thing that converts. */
@media (max-width: 991.98px) {
  .bui-demo-grid,
  .bui-demo-grid.is-form-led {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bui-space-8);
  }

  .bui-demo-grid.is-form-led .bui-demo-aside { order: -1; }

  .bui-demo-agenda-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479.98px) {
  .bui-demo-row { grid-template-columns: minmax(0, 1fr); }
  .bui-demo-card { padding: var(--bui-space-5); }
}