/* Hallmark · component: product inquiry form · genre: modern-minimal · theme: existing industrial amber
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41) · mobile: pass (34, 49, 50–57)
 */

.product-inquiry {
  scroll-margin-top: calc(var(--site-header-height) + var(--space-lg));
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
  color: var(--color-ink);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}

.product-inquiry__header {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: var(--space-xl);
}

.product-inquiry__heading {
  min-width: 0;
}

.product-inquiry__title {
  max-width: 24ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
  font-weight: 700;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.product-inquiry__proof {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-inquiry__proof-item {
  display: grid;
  grid-template-columns: var(--space-sm) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
}

.product-inquiry__proof-item::before {
  width: var(--space-sm);
  height: var(--space-sm);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  content: "";
}

.product-inquiry__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-whisper);
}

.product-inquiry__field {
  display: grid;
  min-width: 0;
  gap: var(--space-xs);
  align-content: start;
}

.product-inquiry__field--full {
  grid-column: 1 / -1;
}

.product-inquiry__label {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.product-inquiry__field.has-error .product-inquiry__label {
  color: var(--color-error);
}

.product-inquiry__required {
  color: var(--color-accent-strong);
}

.product-inquiry__control {
  width: 100%;
  min-width: 0;
  min-height: 2.875rem;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  font-size: var(--text-base);
  line-height: 1.45;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.product-inquiry__control::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.product-inquiry__control:focus-visible {
  border-color: var(--color-ink-2);
  outline-color: var(--color-focus);
}

.product-inquiry__control:active {
  border-color: var(--color-ink-2);
}

.product-inquiry__control[readonly],
.product-inquiry__control:disabled {
  color: var(--color-muted);
  background: var(--color-paper-3);
  cursor: not-allowed;
  opacity: 0.72;
}

.product-inquiry__control.is-error {
  color: var(--color-ink);
  background: var(--color-error-soft);
  border-color: var(--color-error);
}

.product-inquiry__control.is-success {
  color: var(--color-ink);
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.product-inquiry__textarea {
  min-height: 8rem;
  resize: vertical;
}

.product-inquiry__feedback {
  min-height: 1.35em;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.product-inquiry__feedback.is-error {
  color: var(--color-error);
}

.product-inquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  grid-column: 1 / -1;
}

.product-inquiry__submit {
  display: inline-flex;
  min-width: 10.75rem;
  min-height: 2.875rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.product-inquiry__submit:focus-visible {
  outline-color: var(--color-focus);
}

.product-inquiry__submit:active {
  transform: translateY(var(--rule-hair));
}

.product-inquiry__submit:disabled,
.product-inquiry__submit[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.product-inquiry__submit[data-state="loading"]::after {
  width: var(--space-md);
  height: var(--space-md);
  border: 2px solid var(--color-accent-ink);
  border-block-start-color: transparent;
  border-radius: var(--radius-pill);
  content: "";
  animation: product-inquiry-spin 900ms linear infinite;
}

.product-inquiry__submit[data-state="error"] {
  color: var(--color-paper);
  background: var(--color-error);
  border-color: var(--color-error);
}

.product-inquiry__submit[data-state="success"] {
  color: var(--color-paper);
  background: var(--color-success);
  border-color: var(--color-success);
}

.product-inquiry__status {
  flex: 1 1 18rem;
  min-height: 1.5em;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.product-inquiry__status[data-state="error"] {
  color: var(--color-error);
}

.product-inquiry__status[data-state="success"] {
  color: var(--color-success);
}

@media (hover: hover) and (pointer: fine) {
  .product-inquiry__control:not(:disabled):not([readonly]):hover {
    color: var(--color-ink);
    background: var(--color-paper-2);
  }

  .product-inquiry__submit:not(:disabled):hover {
    color: var(--color-paper);
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    transform: translateY(calc(var(--rule-hair) * -1));
  }
}

@media (min-width: 48rem) {
  .product-inquiry__header {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
    align-items: start;
  }

  .product-inquiry__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-xl);
  }
}

@media (pointer: coarse) {
  .product-inquiry__control,
  .product-inquiry__submit {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-inquiry__control,
  .product-inquiry__submit {
    transition-duration: 50ms;
  }

  .product-inquiry__submit[data-state="loading"]::after {
    animation-duration: 1500ms;
  }
}

@keyframes product-inquiry-spin {
  to {
    transform: rotate(1turn);
  }
}