/* ==========================================================================
   Pavilion — Contact (contact.html)
   Figma: "Contact – Dektop (1440)" · "Contact – Mobile (402)" · component "Contact form"
   ========================================================================== */

.contact {
  background: var(--color-off-white);
  padding: 80px var(--gutter) 128px;
  display: grid; grid-template-columns: 353px minmax(0, 1fr);
  grid-template-areas: "intro form" "asides form";
  grid-template-rows: auto 1fr; column-gap: 80px;
  max-width: calc(var(--page-max) + 0px); margin: 0 auto;
}
.contact .contact-form { grid-area: form; }
.contact__intro { grid-area: intro; display: flex; flex-direction: column; gap: 40px; }
.contact__lede { color: var(--color-black); }
.contact__asides { grid-area: asides; align-self: end; display: flex; flex-direction: column; gap: 40px; }
.contact__asides::before { content: ""; height: 1px; background: var(--color-gray-200); }
.contact__aside { display: flex; flex-direction: column; gap: 20px; }
.contact__aside + .contact__aside { border-top: 1px solid var(--color-gray-200); padding-top: 40px; }
.contact__aside-title { color: var(--color-maroon); font-weight: 400; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tablet 768–1099: stacked, form keeps two columns ---------- */
@media (max-width: 1099px) {
  .contact {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "asides";
    grid-template-rows: auto; row-gap: 40px; padding-bottom: 96px;
  }
  .contact__intro { max-width: 560px; }
  .contact__asides { align-self: start; max-width: 560px; }
}

/* ---------- Mobile < 768 ---------- */
@media (max-width: 767px) {
  .contact { padding: 32px 20px 64px; row-gap: 32px; }
  .contact__intro { gap: 20px; }
}

@media (min-width: 1441px) {
  .contact { padding-inline: 80px; }
}