/* ==========================================================================
   contact.html — page-specific layout only. Form controls, .form-group,
   .form-row, .field-error, .form-status and buttons are styled in
   css/styles.css; this file only arranges them. Colours are the shared
   variables, so both themes work.
   ========================================================================== */

/* ---------------- Form beside contact details ---------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.contact-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.contact-panel h2,
.contact-aside h2 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.contact-panel-intro {
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}

.contact-panel textarea { min-height: 170px; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.form-actions .form-note {
  flex: 1 1 220px;
  margin: 0;
  font-size: 0.85rem;
}

/* ---------------- Contact details ---------------- */

.contact-aside h2 { margin-bottom: 1.5rem; }

/* The items themselves are the shared .contact-info-item (icon + text);
   this only resets the list they sit in. */
.contact-details {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  color: var(--text);
}
.contact-details .contact-info-item:last-child { margin-bottom: 0; }
.contact-details p { overflow-wrap: anywhere; }

.contact-note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  padding: 1.1rem 1.25rem;
}
.contact-note + .contact-note { margin-top: 1rem; }
.contact-note h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.contact-note p {
  margin: 0;
  font-size: 0.92rem;
}

/* ---------------- What happens next ---------------- */

.next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  counter-reset: none;
}

.next-step {
  position: relative;
}

.next-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.next-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.next-step p { margin: 0; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .contact-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    align-items: start;
  }
  .contact-aside h2 { grid-column: 1 / -1; }
  .contact-details { grid-row: span 2; }
  .contact-note + .contact-note { margin-top: 0; }
  .contact-aside .contact-note:last-child { margin-top: 1rem; }
}

@media (max-width: 720px) {
  .contact-aside { display: block; }
  .contact-aside .contact-note:last-child { margin-top: 1rem; }
  .next-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .next-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
  }
  .next-step-num {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .contact-panel { padding: 1.35rem 1.1rem; }
  .form-actions .btn { width: 100%; text-align: center; }
}