/* ==========================================================================
   Masera & Co — contact page additions to site.css (body.contact-page.v2):
   the form panel, text-only explore rows and per-photo focal points.
   ========================================================================== */

/* Page head: towers sit on the right, text on the shaded left */
body.v2 .contact-head { padding-top: clamp(160px, 13vw, 232px); }
body.v2 .contact-head .mc-pagehead-media img { object-position: 70% 55%; }
body.v2 .contact-head .mc-lead { max-width: 34em; }

/* 01 Get in touch: channels left, form panel right */
body.v2 .contact-main { padding-bottom: var(--mc-pad); }
body.v2 .contact-channels .mc-body { margin-top: clamp(20px, 2vw, 28px); max-width: 30em; }
body.v2 .contact-channels .mc-details { margin-top: clamp(32px, 3.4vw, 52px); }
body.v2 .contact-channels .mc-details dt { line-height: 1.5; }

body.v2 .contact-panel {
  --mc-gold-ink: #8E6B24;
  padding: clamp(28px, 3.4vw, 64px);
  background: var(--mc-stone);
  border-top: 2px solid var(--mc-gold-ink-strong);
  scroll-margin-top: 110px;
}

body.v2 .contact-panel-title {
  margin-top: 14px;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.6rem);
}

body.v2 .contact-panel-intro { margin-top: 14px; max-width: 32em; }
body.v2 .contact-panel .mc-form { margin-top: clamp(28px, 3vw, 44px); }

body.v2 .contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* 02 What happens next */
body.v2 .contact-next .mc-band img { object-position: 46% 26%; }
body.v2 .contact-next-body { padding-top: clamp(40px, 4vw, 64px); }
body.v2 .contact-next-intro { margin-top: clamp(20px, 2vw, 28px); max-width: 30em; }
body.v2 .contact-promise { margin-top: clamp(40px, 4vw, 64px); }
body.v2 .contact-promise .mc-statement { margin-top: 12px; }
body.v2 .contact-steps { margin-top: 0; }

/* 03 Explore: whole-row links without thumbnails */
body.v2 .contact-explore .mc-nav-row { grid-template-columns: minmax(0, 1fr) auto; }

@media (min-width: 1200px) {
  body.v2 .contact-main .contact-split { align-items: start; }
  body.v2 .contact-explore .mc-nav-row {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto;
  }
}

@media (max-width: 1199px) {
  body.v2 .contact-steps { margin-top: 8px; }
}

@media (max-width: 767px) {
  body.v2 .contact-head .mc-pagehead-media img { object-position: 74% 50%; }
  body.v2 .contact-head .mc-pagehead-shade {
    background: linear-gradient(180deg, rgba(11, 25, 44, 0.72) 0%, rgba(11, 25, 44, 0.64) 45%, rgba(11, 25, 44, 0.86) 100%);
  }
  body.v2 .contact-panel { padding: 28px 20px; }
  body.v2 .contact-submit .mc-btn { width: 100%; justify-content: center; }
  body.v2 .contact-explore .mc-nav-row { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1800px) {
  body.v2 .contact-panel-title { font-size: 3rem; }
}

/* Page head: stronger left-to-right shade so the lead clears the lit towers */
@media (min-width: 992px) {
  body.v2 .contact-head .mc-pagehead-shade {
    background:
      linear-gradient(90deg, rgba(10, 22, 40, 0.88) 0%, rgba(10, 22, 40, 0.8) 38%, rgba(10, 22, 40, 0.55) 62%, rgba(10, 22, 40, 0.18) 100%),
      linear-gradient(180deg, rgba(11, 25, 44, 0.55) 0%, rgba(11, 25, 44, 0) 22%, rgba(11, 25, 44, 0) 70%, rgba(11, 25, 44, 0.75) 100%);
  }
}

/* Form: the empty live region must not add a second row gap above the button */
body.v2 .contact-panel .mc-form-status { align-self: start; }
body.v2 .contact-panel .mc-form-status .d-block { margin-bottom: 0; }
body.v2 .contact-panel .contact-submit { margin-top: 8px; }
body.v2 .contact-panel .mc-form-status:not(:has(.d-block)) + .contact-submit { margin-top: -16px; }

/* 01 desktop: the short channels column follows the tall form */
@media (min-width: 1200px) {
  body.v2 .contact-channels {
    align-self: start;
    padding-top: clamp(28px, 3.4vw, 64px);
    position: sticky;
    top: 120px;
  }
}

/* Mobile page head: a little less height before the fold */
@media (max-width: 767px) {
  body.v2 .contact-head { padding-bottom: 48px; }
  body.v2 .contact-head .mc-lead { line-height: 1.55; }
}