/* ==========================================================================
   Contact page — card polish + "from our blog" teaser (custom, non-Webflow)
   ========================================================================== */

/* ---- Column heights: keep both columns flush at the bottom ----
   Stretch both grid columns to the row height; whichever column is shorter
   gets the slack (the blog teaser grows to fill; the form fills below it). */
.contact-us-wrapper {
  align-items: stretch;
}
.contact-info-wrapper {
  justify-content: flex-start;
}
.blog-teaser {
  flex: 1 1 auto;
  justify-content: center;
}

/* ---- Contact cards: match the site-wide card border (see .team-card,
   .values-card, .services-main-card-body) instead of the wrapper's
   mismatched #eee outline ---- */
.contact-info-wrapper {
  outline: none;
}
.contact-info,
.contact-us-form-wrapper {
  border: 1px solid var(--card-border);
}

/* ---- Contact cards: clearer hierarchy & breathing room ---- */
.contact-details {
  display: flex;
  flex-direction: column;
}
.contact-details .heading-9 {
  margin: 0;
  line-height: 1.25;
}
/* company → uses the site's canonical <h5> eyebrow (Work Sans, 14px,
   4px tracking, uppercase); only tighten the leading for the card */
.contact-eyebrow {
  line-height: 1.5;
  margin-bottom: 4px;
}
/* person name → prominent */
.contact-details .heading-9 {
  font-size: 1.3rem;
  color: var(--secondary);
}
/* role */
.contact-details p._16px {
  margin: 4px 0 0;
  color: var(--dark-grey);
}

/* Contact links: stack vertically with even spacing (was an unbalanced wrap) */
.contact-links {
  margin-top: 20px;
  flex-direction: column;
  gap: 0px;
}
.flex-contact {
  align-items: center;
  gap: 10px;
}
.flex-contact p {
  margin: 0;
  color: var(--secondary);
  font-weight: 500;
}

/* ---- Button helper (mirrors css/challenges-carousel.css) ---- */
.button.btn-auto {
  width: auto;
  min-width: 0;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}

/* ==========================================================================
   Form — one consistent spacing system (replaces the ad-hoc spacer divs
   .space/.space-small/.space-text and the mismatched 10/15/20/30/42px paddings)
   ========================================================================== */

/* uniform padding on all four sides of the white card */
.contact-us-form-wrapper {
  padding: 40px;
}

/* neutralise every legacy spacer div inside the form card */
.contact-us-form-wrapper > .space,
.contact-us-form-wrapper > .space-small,
.contact-us-title-wrapper .space-tiny,
.contact-us-title-wrapper .space-text,
.message-title-field-wrapper .space-text {
  min-height: 0;
  height: 0;
}

/* title block: flush to the card padding + tidy internal rhythm */
.contact-us-title-wrapper {
  padding-left: 0;
  padding-right: 0;
}
.contact-us-title-wrapper h2 {
  margin-bottom: 0;
}
.contact-us-title-wrapper p {
  margin: 12px 0 0;
}

/* gap from the intro down to the first field row; kill Webflow's default
   `.w-form { margin-bottom: 15px }` so the bottom padding stays a clean 40px */
.contact-us-form {
  margin-top: 28px;
  margin-bottom: 0;
}

/* field rows: equal-width halves with a real gap; consistent row spacing.
   flex-basis 200px lets them sit side-by-side on desktop and stack on mobile. */
.contact-us-flex-container {
  gap: 20px;
  justify-content: flex-start;
  padding-top: 0;
  margin-bottom: 10px;
}
.contact-us-wrapper-half {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
}

/* label → input breathing room */
.text-field {
  margin-bottom: 6px;
}

/* message block (textarea + submit): flush, consistent gaps */
.message-title-field-wrapper {
  padding: 0;
}

/* inputs: fixed height + square (were 7vh, growing with the window) */
.booking-text-field {
  min-height: 0;
  height: 46px;
  border-radius: 0;
}
/* textarea: fixed height + square + consistent gap before the button.
   Uses min-height because Webflow's `textarea.w-input { height: auto }`
   outranks a plain `.text-area { height }`. */
.text-area {
  min-height: 120px;
  margin-bottom: 24px;
  border-radius: 0;
}

/* ---- "From our blog" teaser, sits under the two contacts ---- */
.blog-teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--secondary);
  padding: 32px 30px;
  color: var(--white);
}
/* uses the canonical <h5> eyebrow; only recolour for the dark card */
.blog-teaser-label {
  margin: 0 0 12px;
  line-height: 1.5;
  color: var(--primary);
}
.blog-teaser-title {
  margin: 0;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1.3;
}
.blog-teaser-text {
  margin: 12px 0 0;
  color: var(--light-gray);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* CTA — outlined arrow link that reads on the dark card */
.blog-teaser-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  text-transform: uppercase;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.blog-teaser-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  /* override the site-wide `a:hover` (colour→primary, letter-spacing→1px)
     so only the fill/border change on hover */
  color: var(--white);
  letter-spacing: 0.03em;
}
.blog-teaser-link svg {
  width: 16px;
  height: 16px;
}

/* On tablet/mobile the contact column stacks above the form — keep the
   teaser tidy full-width. */
@media screen and (max-width: 767px) {
  .blog-teaser {
    padding: 26px 24px;
  }
  /* lighter side padding so fields get more room on small screens */
  .contact-us-form-wrapper {
    padding: 28px;
  }
}