/* Source guide: pages/callback.css
 * Page-specific presentation.
 * Load order: base.css, components.css, page stylesheet, refresh.css.
 * Later rules intentionally refine earlier layouts; preserve cascade order.
 */

/* Callback page: keep the form in view without hiding context or preview limitations. */
/* Group: Contact introduction beside the callback form. */
.callback-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.callback-intro h1 {
  font-size: 58px;
}
/* Group: Supporting photograph and crop. */
.callback-photo {
  margin: 30px 0 22px;
  max-width: 430px;
  height: 230px;
  overflow: hidden;
  border-radius: 12px;
}
.callback-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.callback-layout .form-panel h2 {
  font-size: 28px;
  margin-bottom: 12px;
}
.callback-layout .form-panel .button {
  width: 100%;
}
/* Group: What happens after the first conversation. */
.next-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.next-steps .numbered-list {
  margin-top: 0;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .callback-layout,
  .next-steps {
    gap: 45px;
  }
  .callback-intro h1 {
    font-size: 49px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .callback-layout,
  .next-steps {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .callback-intro h1 {
    font-size: 43px;
  }
  .callback-intro h1 br:last-child {
    display: none;
  }
  .callback-photo {
    height: 210px;
    max-width: none;
  }
  .callback-layout .form-panel {
    padding: 25px;
  }
}

/* Give the callback form a full column on tablets as well as phones. */
/* Viewport (max-width: 900px): component adjustments at this breakpoint. */
@media (max-width: 900px) {
  .callback-layout {
    grid-template-columns: 1fr;
  }
  .callback-intro h1 {
    font-size: clamp(32px, 6vw, 49px);
  }
}