/* ==========================================================================
   VDPL Next — Estimate
   ========================================================================== */

/* The whole page is capped, not only the form section. Capping the section
   alone left the masthead heading starting 122px to the left of the form
   below it, which reads as the page having two different left edges. Scoped
   to the body class so the header and footer keep the site container. */
.vdpl-page-estimate .c-masthead > .l-wrap,
.vdpl-page-estimate .l-section-sm > .l-wrap {
  max-width: var(--container-narrow);
}

.e-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-12) var(--s-16);
  align-items: start;

  /* Capped narrower than the site container, and this is the fix for the gap
     that used to open up mid-section. The form column was `1fr` of a 1600px
     container - 906px at 1440 - while `.e-form` capped itself at 720px, so
     186px of the column was dead space that looked like a broken grid rather
     than a margin. Capping the SECTION instead means the column is the width
     the form wants, and the two columns stay a pair. A form page has no use
     for the full container anyway: the reading width is the constraint. */
  max-width: var(--container-narrow);
  margin-inline: auto;
}
@media (max-width: 980px) { .e-layout { grid-template-columns: 1fr; } }

/* The grid column is the cap now; a second one here would reopen the hole. */
.e-form { min-width: 0; }

/* .e-fields, .e-row, .e-notice, .e-trap and the two .e-fields > child rules
   all live in components.css now. They were declared here, in page-contact.css
   and in page-careers.css, and only one page stylesheet ever loads - so the
   booking-system walkthrough form, which loads demo.css, had no form layout at
   all. The .e-row breakpoint became a container query in the move: measured
   here, this form sits beside a 340px sidebar, so at a 1000px viewport the row
   is 501px and each field was 240px. */

/* ---- Side panel ---------------------------------------------------------- */

.e-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  position: sticky;
  top: calc(var(--s-20) + var(--s-4));
}
@media (max-width: 980px) { .e-side { position: static; } }

.e-next { display: flex; flex-direction: column; gap: var(--s-5); }
.e-next li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.e-next__num {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--t-label-ls);
  color: var(--c-accent-text);
}
.e-next p { color: var(--c-ink-2); margin-top: var(--s-1); }

.e-direct { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.e-direct a { color: var(--c-accent-text); }