/* Contact page: layout only. Primitives come from components/ui.css (ui- classes). */

/* Desktop: intro + FAQ on the left, the form card spans both rows on the right */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro card"
    "faq card";
  column-gap: 5rem;
  align-items: start;
}

.ct-intro { grid-area: intro; min-width: 0; }
.ct-card-wrap { grid-area: card; min-width: 0; }
.ct-faq { grid-area: faq; min-width: 0; }

.ct-hero .ui-hero-sub { max-width: 460px; }

.ct-channels {
  --ui-stack-gap: 0.75rem;

  max-width: 520px;
  margin-top: 2.25rem;
}

.ct-faq {
  --ui-stack-gap: 0.625rem;

  max-width: 520px;
  margin-top: 2.25rem;
}

/* ---------- Form card ---------- */
.ct-card { --ui-card-pad: 2.25rem; }

.ct-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ct-form-head .ui-muted {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.ct-note { margin: 0; }

.ct-submit.is-loading > svg { display: none; }

/* ---------- Success state (replaces the form inside the card) ---------- */
.ct-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: var(--ct-sent-h, 521px);
  padding: 0.75rem 0;
  text-align: center;
}

.ct-sent-title {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  outline: none;
}

.ct-sent-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Text-only 48px button: the artboard keeps the 22px side padding */
.ct-sent-btn {
  margin-top: 0.75rem;
  padding: 0 1.375rem;
}

.ct-sent:not([hidden]) > * { animation: ct-rise 0.45s var(--ui-ease) both; }
.ct-sent:not([hidden]) > :nth-child(2) { animation-delay: 0.06s; }
.ct-sent:not([hidden]) > :nth-child(3) { animation-delay: 0.12s; }
.ct-sent:not([hidden]) > :nth-child(4) { animation-delay: 0.18s; }

@keyframes ct-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Between the artboards ---------- */
@media (max-width: 1100px) {
  .ct-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 3rem;
  }
}

/* Single column: intro, form, then the FAQ shortcuts (phone artboard order) */
@media (max-width: 900px) {
  .ct-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "intro"
      "card"
      "faq";
  }

  .ct-channels,
  .ct-faq { max-width: none; }

  .ct-card-wrap { margin-top: 2.25rem; }
}

@media (max-width: 768px) {
  .ct-hero { --ui-h1-size: 2.75rem; }

  .ct-hero .ui-hero-sub {
    max-width: none;
    margin-top: 0.75rem;
    font-size: 1.0625rem;
  }

  .ct-channels {
    --ui-stack-gap: 0.625rem;
    margin-top: 1.75rem;
  }

  .ct-card-wrap { margin-top: 1.75rem; }

  .ct-card { padding: 1.5rem 1.25rem; }

  .ct-form { gap: 0.875rem; }

  .ct-form .ui-textarea { height: 150px; }

  .ct-form-head { margin-bottom: 0.25rem; }

  .ct-form-head .ui-muted {
    margin-top: 0.375rem;
    font-size: 0.875rem;
  }

  .ct-note {
    align-items: flex-start;
    line-height: 1.45;
  }

  .ct-note > svg { margin-top: 2px; }

  .ct-submit { margin-top: 0.25rem; }

  .ct-sent { min-height: var(--ct-sent-h, 480px); }

  .ct-sent-title { font-size: 1.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-sent:not([hidden]) > * { animation: none; }
}