/* ==========================================================================
   Component: contact form (.cm-contact-form)
   Wraps the Webform "contact" block on /contact-us. Layers Contact
   Media's tokens over Bootstrap's default form-control styling — scoped
   so it only touches this one form, not every Bootstrap form sitewide.
   ========================================================================== */

.cm-contact-form {
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  box-shadow: 0 18px 40px -28px rgba(24, 32, 41, 0.26);
  overflow: hidden;
}

/* Same branded top rule as the .cm-devcard hero visuals, so the card
   doesn't read as a bare white box. */
.cm-contact-form__rule {
  height: 8px;
  background: linear-gradient(90deg, var(--cm-red-light), var(--cm-red) 55%, var(--cm-red-press));
}

.cm-contact-form__body {
  padding: 40px;
}

.cm-contact-form h2 {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}

.cm-contact-form .form-item,
.cm-contact-form .js-form-item {
  margin-bottom: 20px;
}

.cm-contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  margin-bottom: 8px;
}

.cm-contact-form .form-control,
.cm-contact-form .form-select,
.cm-contact-form input[type="text"],
.cm-contact-form input[type="email"],
.cm-contact-form input[type="tel"],
.cm-contact-form select,
.cm-contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--cm-ink);
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  padding: 13px 18px;
  transition: border-color var(--cm-dur) var(--cm-ease),
    box-shadow var(--cm-dur) var(--cm-ease);
}

.cm-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.cm-contact-form .form-control:focus,
.cm-contact-form .form-select:focus,
.cm-contact-form input:focus,
.cm-contact-form select:focus,
.cm-contact-form textarea:focus {
  outline: none;
  border-color: var(--cm-red);
  box-shadow: 0 0 0 3px var(--cm-red-tint);
}

.cm-contact-form .webform-button--submit,
.cm-contact-form button[type="submit"],
.cm-contact-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-red);
  color: #fff;
  cursor: pointer;
  transition: background var(--cm-dur) var(--cm-ease),
    transform var(--cm-dur) var(--cm-ease);
}

.cm-contact-form .webform-button--submit:hover,
.cm-contact-form button[type="submit"]:hover,
.cm-contact-form input[type="submit"]:hover {
  background: var(--cm-red-hover);
  transform: translateY(-2px);
}

/* The "Call 0161 726 5101" processed-text intro above the fields. */
.cm-contact-form .webform-type-processed-text p {
  font-size: 17px;
  color: var(--cm-muted);
  margin: 0 0 28px;
}

/* Pair Name + Email on one row. Each field is wrapped in its own single-item
   "webform-flexbox" div (Webform's markup, not ours), so the earlier flex
   rule on that wrapper never actually had a second item to sit beside —
   every field rendered full-width, one per row, regardless of the "flex"
   class names. A CSS Grid on the form itself, with each field's wrapper
   explicitly placed by its Drupal ID, achieves the pairing without touching
   the (module-owned) markup. Everything not explicitly placed spans the
   full width and falls into its own row via normal grid auto-flow. */
.cm-contact-form #cm-cntct-frm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.cm-contact-form #cm-cntct-frm > * {
  grid-column: 1 / -1;
}

.cm-contact-form #cm-cntct-frm #edit-flexbox {
  grid-column: 1 / 2;
}

.cm-contact-form #cm-cntct-frm #edit-flexbox-01 {
  grid-column: 2 / 3;
}

@media (max-width: 560px) {
  .cm-contact-form #cm-cntct-frm #edit-flexbox,
  .cm-contact-form #cm-cntct-frm #edit-flexbox-01 {
    grid-column: 1 / -1;
  }
}

/* Two-column layout: contact-info panel + form card (contact-us only). */
#contact-form .cm-contact-form-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: start;
}

/* Deliberately quieter than .cm-contact-form: tinted flat panel instead of
   a white card with the same shadow/rule treatment, so it reads as a
   secondary aside rather than a second, competing card. */
.cm-contact-panel {
  background: var(--cm-paper-2);
  border-left: 3px solid var(--cm-red);
  border-radius: var(--cm-radius-insert);
  padding: 24px 26px;
}

.cm-contact-panel__kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cm-muted-2);
}

.cm-contact-panel__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cm-muted);
}

.cm-contact-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Case-study teaser card: a photo + real proof point below the panel,
   filling the column's leftover height beside the (taller) form. */
.cm-contact-teaser {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  overflow: hidden;
  transition: box-shadow var(--cm-dur) var(--cm-ease),
    transform var(--cm-dur) var(--cm-ease);
}

.cm-contact-teaser:hover {
  box-shadow: 0 18px 40px -28px rgba(24, 32, 41, 0.26);
  transform: translateY(-2px);
}

.cm-contact-teaser__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  flex: none;
}

.cm-contact-teaser__body {
  padding: 18px 20px;
}

.cm-contact-teaser__tag {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cm-muted-2);
}

.cm-contact-teaser__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cm-ink);
}

.cm-contact-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-red);
}

@media (max-width: 700px) {
  #contact-form .cm-contact-form-grid {
    grid-template-columns: 1fr;
  }
}