/*
  inquiry.css — page layout for inquiry input screen.
  Local :root tokens compose from global design tokens (load base.css first).
  Uses global tokens: --space-*, --color-*, --layout-*, --z-index-*, --font-*,
  --line-height-*.
*/
:root {
  --inquiry-panel-padding-block: calc(var(--space-5xl) + var(--space-sm));
  --inquiry-panel-padding-inline: calc(
    var(--space-6xl) + var(--space-sm) + (var(--space-xs) / 2)
  );
  --inquiry-panel-padding-inline-tablet: calc(
    var(--space-5xl) + var(--space-sm)
  );
}

.p-inquiry__form .p-inquiry__section {
  position: relative;
  z-index: var(--z-index-raised);
  padding-top: var(--space-lg);
  padding-bottom: 0;
}

.p-inquiry__form .p-inquiry__lead {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  font-family: var(--font-main);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-primary);
}

.p-inquiry__form .p-inquiry__form-wrap {
  position: relative;
  z-index: var(--z-index-floating);
  isolation: isolate;
  pointer-events: auto;
  margin-top: var(--space-2xl);
  width: calc(100% + (var(--layout-padding-inline-mobile) * 2));
  margin-left: calc(-1 * var(--layout-padding-inline-mobile));
  margin-right: calc(-1 * var(--layout-padding-inline-mobile));
  padding-top: var(--space-2xl);
  padding-right: var(--layout-padding-inline-mobile);
  padding-bottom: var(--space-2xl);
  padding-left: var(--layout-padding-inline-mobile);
  background-color: var(--color-bg-alt);
}

@media (min-width: 768px) {
  .p-inquiry__form .p-inquiry__section {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-2xl);
  }

  .p-inquiry__form .p-inquiry__lead {
    margin-top: var(--space-5xl);
    margin-bottom: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-body);
  }

  .p-inquiry__form .p-inquiry__form-wrap {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: var(--inquiry-panel-padding-block)
      var(--inquiry-panel-padding-inline);
    background-color: var(--color-bg-alt);
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .p-inquiry__form .p-inquiry__form-wrap {
    padding: var(--space-5xl) var(--inquiry-panel-padding-inline-tablet);
  }
}

@media (min-width: 768px) and (max-width: 910px) {
  .p-inquiry__form .p-inquiry__form-wrap {
    padding: var(--space-3xl) var(--space-4xl);
  }
}