/* ==========================================================================
   Fuller Living — Contact
   Emotional objective: "It's safe to reach out." Warm, easy, low-pressure.
   ========================================================================== */

.contact-main > section { position: relative; width: 100%; }
.contact-hero { background-color: var(--color-bg); }
.contact-body { background-color: var(--color-bg); padding-top: 0; }

/* Layout: form + aside */
.contact-body__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ------------------------------------------------------------- FORM ------- */
.contact-form-wrap {
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
}
.contact-form-wrap__title { margin: 0 0 var(--space-lg); font-size: var(--text-h3); }
.contact-form__field { margin-bottom: var(--space-md); }
.contact-form__field label { display: block; margin-bottom: var(--space-2xs); }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.contact-form__submit { margin-top: var(--space-2xs); }
.contact-form__note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ------------------------------------------------------------ ASIDE ------- */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.contact-aside__block > p { color: var(--color-text-muted); }
.contact-aside__title { margin: 0 0 var(--space-2xs); font-size: var(--text-h4); }
.contact-aside__subtitle {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-lg);
  color: var(--color-heading);
}

/* Social pill links */
.contact-aside__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
}
.contact-aside__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--color-heading);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.contact-aside__social svg { width: 1.15rem; height: 1.15rem; color: var(--fl-teal-deep); }
.contact-aside__social a:hover {
  border-color: var(--fl-teal-deep);
  background-color: var(--fl-teal-tint);
}
.contact-aside__cta { width: 100%; }

/* Gentle crisis note — supportive, not alarming */
.contact-aside__crisis {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--fl-periwinkle-tint);
  border-left: 3px solid var(--fl-periwinkle);
  border-radius: var(--radius-sm);
}
.contact-aside__crisis p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.contact-aside__crisis strong { color: var(--color-heading); }

/* ---------------------------------------------------------- RESPONSIVE ---- */
@media (min-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .contact-body__inner {
    grid-template-columns: 1.25fr 0.85fr;
    gap: var(--space-2xl);
  }
}