/* ---------------------------------------------------------------------------
 * contact.css — Contact template (Figma 753:1438).
 * The .gform_wrapper block below styles the real Gravity Form to the Figma once
 * a form ID is set via the crush_contact_form_id filter.
 * ------------------------------------------------------------------------- */

/* Figma text-node widths for this hero (753:1440). */
.page-hero--contact {
  --hero-heading-width: 1077px;
  --hero-lead-width: 416px;
}

/* --- Info column + form panel (753:1447) --------------------------------- */
.contact-panel {
  display: flex;
  align-items: center;
  min-height: 845px;
  /* Figma 753:1447 leaves 128px above the panels and 127 below. The build only
     had `min-height: 845px` with centred content, so once the live Gravity Form
     rendered taller than the design's 590px panel the breathing room collapsed
     to 4px (client round 23). Padding makes the rhythm explicit and the section
     grows with the form instead of squeezing against it. */
  padding-block: 128px 127px;
  background: var(--bg, #ffffff);
}

/* The inner row carried no side gutter, so above 1400px its content ran to the
   very edge of the viewport while every other page starts at the gutter. It now
   wears the shared `.container` primitive (see the markup) rather than
   re-implementing the cap and padding — re-implementing it left the panel on
   `--gutter` (20px) below 576px while every `.container` switches to
   `--gutter-mobile` (24px), a 4px drift the review caught (client round 21). */
.contact-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 495px) minmax(0, 1205px);
  /* The info column starts level with the top of the form box (client round 24).
     It used to centre against a panel that is now much taller than the design's
     590px, which left the heading floating halfway down. */
  align-items: start;
  justify-content: center;
  gap: 53px;
}

/* Figma's MAX on this container is the vertical axis (bottom-aligned); the
   horizontal axis is unset, so the column fills its 495px cell from the left. */
.contact-panel .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.contact-panel .details {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-panel h2 {
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 0.6875; /* 44/64 in Figma */
  color: var(--brand, #008AF7);
}

.contact-panel .lines {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-panel .lines li {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-panel .lines .cnm-icon {
  flex: none;
  width: 26px;
  height: 46px;
  color: var(--brand, #008AF7);
}

.contact-panel .lines a {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3889; /* 25/18 */
  color: var(--ink, #212529);
}

.contact-panel .lines a:hover,
.contact-panel .lines a:focus-visible {
  color: var(--brand, #008AF7);
}

.contact-panel .staff {
  display: flex;
  flex-direction: column;
  gap: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-panel .staff p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--muted, #909091);
}

.contact-panel .staff .name {
  font-weight: 900;
}

.contact-panel .staff a {
  color: inherit;
}

.contact-panel .staff a:hover,
.contact-panel .staff a:focus-visible {
  color: var(--brand, #008AF7);
}

/* Light grey brand mark sitting below the staff list. */
.contact-panel .watermark {
  width: 61px;
  height: 57px;
  background-color: var(--light, #E8E8E8);
  -webkit-mask-image: url("../img/logo-mark.svg");
  mask-image: url("../img/logo-mark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.contact-panel .form-panel {
  min-height: 590px;
  /* Figma 753:1447 draws this box with asymmetric padding — 80 top / 65 right /
     79 bottom / 66 left — which the build copied verbatim. Client asked for one
     value on all four sides (round 24). */
  padding: 66px;
  border-radius: 26px;
  background: rgba(217, 217, 217, 0.24);
}

.contact-panel .form-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--muted, #909091);
}

.contact-panel .form-placeholder span {
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * Gravity Forms — styled to the Figma form panel (753:1749). Two rows of three
 * fields (477 / 300 / 300 with a 20px gutter inside a 1117px row), then a
 * full-width message, then the outlined CTA.
 * ------------------------------------------------------------------------- */
.contact-panel .gform_wrapper form {
  margin: 0;
}

.contact-panel .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: minmax(0, 477fr) minmax(0, 300fr) minmax(0, 300fr);
  gap: 24px 20px;
}

/* Gravity Forms' orbital theme sets `.gfield { grid-column: 1 / -1 }` and its
   stylesheet loads after the theme's, so every field spanned the whole row and
   the Figma's three-up layout never appeared. These selectors carry one more
   class than the plugin's so the cascade lands our way without !important
   (client round 21). Fields flow three per row; the message spans the row. */
.contact-panel .form-panel .gform_wrapper .gform_fields > .gfield {
  grid-column: span 1;
}

.contact-panel .form-panel .gform_wrapper .gform_fields > .gfield:has(textarea) {
  grid-column: 1 / -1;
}

.contact-panel .gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-panel .gform_wrapper .gfield_label {
  margin: 0;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3333;
  color: var(--ink, #212529);
}

.contact-panel .gform_wrapper .gfield_required {
  color: var(--brand, #008AF7);
}

.contact-panel .gform_wrapper input[type="text"],
.contact-panel .gform_wrapper input[type="email"],
.contact-panel .gform_wrapper input[type="tel"],
.contact-panel .gform_wrapper select,
.contact-panel .gform_wrapper textarea {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #D9D9D9;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

.contact-panel .gform_wrapper textarea {
  height: 140px;
  padding: 16px;
  resize: vertical;
}

.contact-panel .gform_wrapper input:focus-visible,
.contact-panel .gform_wrapper select:focus-visible,
.contact-panel .gform_wrapper textarea:focus-visible {
  outline: 2px solid var(--brand, #008AF7);
  outline-offset: 2px;
}

.contact-panel .gform_wrapper .gform_footer {
  margin: 67px 0 0;
  padding: 0;
}

/* Gravity Forms 2.8+ paints its controls from design tokens, so the submit
   button ignored our colours no matter the selector — it reads
   `--gf-ctrl-btn-*`. Setting the tokens is the supported way in, and it keeps
   hover/focus consistent with .btn-layout.hollow (client round 21). */
.contact-panel .form-panel .gform_wrapper {
  --gf-ctrl-btn-bg-color-primary: transparent;
  --gf-ctrl-btn-color-primary: var(--brand, #008AF7);
  --gf-ctrl-btn-border-color-primary: var(--brand, #008AF7);
  --gf-ctrl-btn-bg-color-hover-primary: var(--brand, #008AF7);
  --gf-ctrl-btn-color-hover-primary: var(--white, #ffffff);
  --gf-ctrl-btn-border-color-hover-primary: var(--brand, #008AF7);
  --gf-ctrl-btn-bg-color-focus-primary: var(--brand, #008AF7);
  --gf-ctrl-btn-color-focus-primary: var(--white, #ffffff);
  --gf-ctrl-btn-border-color-focus-primary: var(--brand, #008AF7);
  /* Geometry comes from the same token set: the Figma CTA is a 2px outline,
     18px/900 type, 35px of horizontal padding and a 60px tall pill. */
  --gf-ctrl-btn-border-width-primary: 2px;
  --gf-ctrl-btn-font-size: 18px;
  --gf-ctrl-btn-font-weight: 900;
  --gf-ctrl-btn-padding-x: 35px;
  --gf-ctrl-btn-size: 60px;
  /* The submit renders at the "md" step, which reads its own tokens. */
  --gf-ctrl-btn-font-size-md: 18px;
  --gf-ctrl-btn-padding-x-md: 35px;
  --gf-ctrl-btn-size-md: 60px;
  --gf-ctrl-btn-radius: var(--radius, 3px);
  --gf-ctrl-btn-shadow: none;
  --gf-ctrl-btn-shadow-hover: none;
  --gf-ctrl-btn-shadow-focus: none;
}

/* Matches .btn-layout.hollow — outlined blue with the leading arrow. */
.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 35px;
  border: 2px solid var(--brand, #008AF7);
  border-radius: var(--radius, 3px);
  background: transparent;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3333;
  color: var(--brand, #008AF7);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button:hover,
.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button:focus-visible {
  background: var(--brand, #008AF7);
  color: var(--white, #ffffff);
  transform: translateY(-1px);
}

.contact-panel .gform_wrapper .gform_validation_errors {
  margin-bottom: 24px;
  color: var(--ink, #212529);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399px) {
  .contact-panel-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 40px;
  }

  /* Same 66px the client set for the desktop box — this band covers the common
     1200-1399 laptop widths, where the old 48px step made the request look
     unapplied (client round 24). The 32px step at ≤991 stays: 66px would eat a
     third of a phone's width. */
  .contact-panel .form-panel {
    padding: 66px;
  }
}

@media (max-width: 991px) {
  .contact-panel {
    min-height: 0;
    padding-block: 64px;
  }

  .contact-panel-inner {
    grid-template-columns: 1fr;
  }

  .contact-panel .form-panel {
    min-height: 0;
    padding: 32px;
  }

  .contact-panel .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }

  .contact-panel .gform_wrapper .gform_footer {
    margin-top: 32px;
  }
}