/* =============================================================================
   Contact Page
   -----------------------------------------------------------------------------
   .contact-section           — two-column page wrapper (intro left, form right)
     .contact-intro           — title + description block (flex: 1)
     .contact-form            — white card form (563px, flex-shrink: 0)
       .form-field            — label + input wrapper
         .form-field__label   — field label
         .form-field__input   — text input or textarea
       .contact-form__submit  — full-width submit button
   ============================================================================= */

/* --- Page layout ------------------------------------------------------------ */
.contact-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-xxxxl);
  padding: var(--spacing-xxxl) var(--spacing-page-margins-lg) var(--spacing-page-margins);
  background-color: var(--background-default);
}

/* --- Intro block ------------------------------------------------------------ */
.contact-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  flex: 1 1 0;
}

.contact-intro__title {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: 0;
  color: var(--text-default);
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.contact-intro__desc {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-default);
  margin: 0;
}

/* --- Form card -------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  background-color: var(--colour-neutral-0);
  border: 1px solid var(--surface-neutral-border);
  border-radius: var(--corner-m-radius);
  flex: 1 1 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Field wrapper ---------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

/* --- Label ------------------------------------------------------------------ */
.form-field__label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--text-default);
}

/* --- Input & textarea ------------------------------------------------------- */
.form-field__input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-m);
  background-color: var(--colour-neutral-0);
  border: 1px solid var(--surface-neutral-border);
  border-radius: var(--corner-s-radius);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-default);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.form-field__input::placeholder {
  color: var(--colour-neutral-40);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--button-primary-enabled);
  box-shadow: 0 0 0 3px var(--surface-callout-border);
}

textarea.form-field__input {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

/* --- Submit button ---------------------------------------------------------- */
.contact-form__submit {
  width: 100%;
  padding: var(--spacing-xs);
  background-color: var(--button-primary-enabled);
  color: var(--button-primary-on-primary);
  border: none;
  border-radius: var(--corner-s-radius);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.15px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.contact-form__submit:hover:not(:active) {
  background-color: var(--button-primary-hover);
}

.contact-form__submit:active {
  background-color: var(--button-primary-pressed);
  transition: none;
}

.contact-form__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--button-primary-hover);
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-section {
    flex-direction: column;
    gap: var(--spacing-xxxl);
  }

  .contact-form {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding-inline: var(--spacing-l);
  }
}


/* Validation error text */
.form-field__error {
  display: none;
  font-family: var(--font-family);
  font-size: var(--type-labels-size);
  color: #c0392b;
  margin-top: var(--spacing-xxs);
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-field.has-error .form-field__input {
  border-color: #c0392b;
  outline-color: #c0392b;
}

/* Status message */
.contact-form__status {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  border-radius: var(--corner-s-radius);
  padding: var(--spacing-s) var(--spacing-m);
  display: none;
}

.contact-form__status.is-success {
  display: block;
  background-color: var(--surface-callout);
  border: 1.5px solid var(--surface-callout-border);
  color: var(--text-default);
}

.contact-form__status.is-error {
  display: block;
  background-color: #fdf2f2;
  border: 1.5px solid #e8b4b4;
  color: #7b2d2d;
}

/* Loading state */
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}