/*
   Contact page
   Requires: global.css (tokens, resets, topbar, footer), topbar.css

   The enquiry form's own styling -- .cc-contact__field, __radio, __submit and
   the rest -- already lives in topbar.css and is not scoped to the drawer, so
   it applies here unchanged. That is deliberate: one set of field styles for
   both surfaces. What this file must not do is reuse the class .cc-contact,
   which is the drawer shell and is position: fixed.

   Layout follows the house grid: 1512px, gutter each side, and the same
   472px + content split the article and About pages use, so the labels on the
   left line up with everything else on the site.
*/

.cc-contact-page {
  background: var(--cc-bg);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.cc-cp-hero {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: var(--cc-page-top) var(--cc-gutter) 0;
}

.cc-cp-hero__inner {
  display: grid;
  grid-template-columns: 472px 1fr;
  gap: 0 28px;
  align-items: start;
}

.cc-cp-hero__title {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-title-size);
  line-height: var(--cc-title-lh);
  font-weight: 400;
  color: var(--cc-ink);
  margin: 0 0 20px;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-cp-hero__lead {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.62;
  color: var(--cc-ink-2);
  max-width: 44ch;
  margin: 0;
}

.cc-cp-hero__image {
  overflow: hidden;
}

.cc-cp-hero__image img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}

/* ── Main ─────────────────────────────────────────────────────────────── */

.cc-cp-main {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
  margin-block-start: var(--cc-space-section);
}

.cc-cp-main__rule {
  height: var(--cc-hairline);
  background: var(--cc-archive);
  margin-block-end: var(--cc-rule-gap-section);
}

.cc-cp-main__grid {
  display: grid;
  grid-template-columns: 472px 1fr;
  gap: 0 28px;
  align-items: start;
}

/* ── Details column ───────────────────────────────────────────────────── */

.cc-cp-aside__block + .cc-cp-aside__block {
  margin-top: 40px;
}

.cc-cp-aside__label {
  display: block;
  font-family: var(--cc-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cc-archive);
  margin-bottom: 14px;
}

.cc-cp-aside__line {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.62;
  color: var(--cc-ink);
  margin: 0;
}

.cc-cp-aside__line + .cc-cp-aside__line {
  margin-top: 14px;
}

.cc-cp-aside__line-label {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-archive);
}

.cc-cp-aside__link {
  color: var(--cc-ink);
  text-decoration: none;
  border-bottom: var(--cc-hairline) solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

.cc-cp-aside__link:hover,
.cc-cp-aside__link:focus-visible {
  color: var(--cc-dark-parchment);
  border-bottom-color: var(--cc-dark-parchment);
}

.cc-cp-aside__line--address {
  color: var(--cc-ink-2);
}

/* ── Form column ──────────────────────────────────────────────────────── */

.cc-cp-form__intro {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.62;
  color: var(--cc-ink-2);
  margin: 0 0 32px;
  max-width: 52ch;
}

/*
   The drawer is a narrow column, so its form sits at full width. Here there is
   room, and a 640px measure keeps the inputs from stretching to a width that
   makes the labels hard to scan.
*/
.cc-contact-page .cc-contact__form,
.cc-contact-page .cc-contact__success {
  max-width: 640px;
}

/* The confirmation.

   topbar.css centres it and pushes it down 40px, which suits a narrow drawer
   where it is the only thing left on screen. In a 640px column beside a
   left-aligned intro it just looked adrift, so it is reset to sit in the flow
   like any other paragraph. */
.cc-contact-page .cc-contact__success p {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.62;
  color: var(--cc-ink);
  text-align: left;
  margin: 0;
}

/* "Tell us what you're looking for" is a prompt, and once the form is sent it
   is answered -- leaving it above the thank-you read as though nothing had
   happened. */
.cc-cp-form.cc-contact--sent .cc-cp-form__intro {
  display: none;
}

.cc-contact-page .cc-footer {
  margin-block-start: var(--cc-footer-gap);
}

/* ── Tablet ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .cc-cp-hero__inner,
  .cc-cp-main__grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  .cc-cp-hero__lead {
    max-width: none;
  }

  .cc-cp-hero__image img {
    height: 280px;
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .cc-cp-hero {
    padding-top: var(--cc-page-top);
  }

  .cc-cp-hero__inner,
  .cc-cp-main__grid {
    gap: 32px 0;
  }

  .cc-cp-hero__image img {
    height: 220px;
  }

  .cc-cp-aside__block + .cc-cp-aside__block {
    margin-top: 32px;
  }

  .cc-cp-form__intro {
    margin-bottom: 24px;
  }
}