/* ===========================================================================
   CONTACT — /contact (src/pages.js contact())

   The shared primitives this page is built from — .page-hero, .card, .field,
   .btn, .alert — live in style.css. What is here is only the two-column
   arrangement and the treatment specific to this page.
   =========================================================================== */

.contact-section {
  padding: 0 0 var(--section-y);
  background: var(--surface-page);
}

/* The form carries the weight, the aside supports it. Both columns are capped
   so neither stretches into an unreadable measure on a large monitor. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* Grid items default to min-content width; without this a long placeholder or
   an unbroken email address widens the column instead of wrapping. */
.contact-main {
  min-width: 0;
}

/* --- Form card ------------------------------------------------------------ */

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 20px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.05),
    0 24px 48px -28px rgb(0 0 0 / 0.7);
}

/* A form is a single column of fields; the bottom margin on .field is the
   rhythm, so the last one should not add a gap above the button. */
.form-card > .field:last-of-type {
  margin-bottom: 0.4rem;
}

.form-card .btn-block {
  margin-top: 1.4rem;
}

/* --- Aside ----------------------------------------------------------------
   Sticks alongside the form on desktop: the form is tall, and the list of what
   the call covers is the reason someone keeps filling it in.
   -------------------------------------------------------------------------- */

/* Normal flow, not a flex column.

   As flex items, every child's own margin stacked on top of the container's
   gap: the heading below carried a 0.9rem bottom margin *plus* a 1.5rem gap,
   putting it further from the list it introduces than from the card above it.
   In normal flow the margins are the only thing setting the rhythm, so each
   piece of spacing is declared once, where it belongs. */
.contact-aside {
  position: sticky;
  top: calc(76px + 1.25rem);
}

.contact-aside > .card {
  margin-bottom: 2rem;
}

.contact-aside .card {
  background: linear-gradient(
    160deg,
    rgb(var(--color-tertiary-rgb) / 0.07),
    rgb(var(--color-secondary-rgb) / 0.02)
  );
  border-color: rgb(var(--color-tertiary-rgb) / 0.2);
}

/* 0.6em is the bottom margin every other heading on the site carries, from the
   base rule in style.css. */
.contact-aside h2 {
  margin: 0 0 0.6em;
  font-size: 1.15rem;
}
.contact-aside h3 {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
}

.contact-aside dl {
  margin: 0;
}
.contact-aside dd a {
  color: var(--accent);
  text-decoration: none;
  /* Long addresses must not push the column wider than its track. */
  overflow-wrap: anywhere;
}
.contact-aside dd a:hover {
  text-decoration: underline;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

/* One column well before the form gets cramped: paired fields need roughly
   13rem each plus the gap, and the aside needs a readable measure of its own. */
@media (max-width: 980px) {
  .form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Nothing to stick to once it is in the flow. */
  .contact-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .form-card {
    padding: 1.35rem 1.15rem;
    border-radius: 16px;
  }
  .contact-aside > .card {
    margin-bottom: 1.6rem;
  }
}

/* Small phones — the card gives up its side inset and rounded corners rather
   than squeezing the inputs into a narrow strip. */
@media (max-width: 420px) {
  .contact-section .container {
    padding-inline: 0;
  }
  .form-card {
    border-radius: 0;
    border-inline: 0;
  }
  .contact-aside {
    padding-inline: var(--content-pad);
  }
}

@media (min-width: 1600px) {
  .form-layout {
    gap: 3.5rem;
  }
  .contact-aside h3 {
    font-size: 1.12rem;
  }
}