/* contact — screen-specific styles. Merged into style.css once the screens settle. */

/* ============================================================== hero ===== */

/* The hero is a fixed-height photographic band: heading top-left, guest
   social-proof pinned bottom-left, the "Watch the Experience" card bottom-right
   (design: 353×318 at x=998 y=337). */

.terrago-contact-hero .wp-block-cover__inner-container { width: 100%; }

/* Stretch both columns so their content can be pinned to the same baseline. */
.terrago-contact-hero .wp-block-columns { align-items: stretch; min-height: 33rem; }
.terrago-contact-hero .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Heading wraps to two lines rather than running the full hero width. */
.terrago-contact-hero h1 {
  max-width: 32rem;
  margin: 0.5rem 0 0;
  line-height: 1.12;
}
.terrago-contact-hero .terrago-eyebrow { margin-bottom: 0; }

/* Quote sits at the bottom of the left column; everything above it stays put. */
.terrago-contact-hero .terrago-quote-inline { margin-top: auto; }

/* --- guest social proof (mirrors .terrago-quote-inline in home.css; declared
       here too so this page does not depend on another screen's sheet) ------ */

.terrago-contact-hero .terrago-quote-inline {
  max-width: 34rem;
  color: var(--wp--preset--color--contrast);
}
.terrago-contact-hero .terrago-quote-inline p {
  margin: 0.75rem 0 0.35rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}
.terrago-contact-hero .terrago-quote-attrib {
  display: block;
  font-size: var(--wp--preset--font-size--caption);
  opacity: 0.85;
}
.terrago-contact-hero .terrago-avatars { display: flex; }
.terrago-contact-hero .terrago-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wp--preset--color--contrast);
}
.terrago-contact-hero .terrago-avatars img + img { margin-left: -12px; }

/* --- hero card ---------------------------------------------------------- */

.terrago-herocard {
  width: 100%;
  max-width: 22.06rem; /* 353px in the design */
  margin-left: auto;
  padding: 1rem;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(1, 1, 1, 0.12);
}
/* The cover paints its inner content white; the card is white, so reset. */
.terrago-herocard,
.terrago-herocard p { color: var(--wp--preset--color--base); }
.terrago-herocard > :first-child { margin-top: 0; }
.terrago-herocard > :last-child { margin-bottom: 0; }
.terrago-herocard p {
  margin: 0 0 0.85rem;
  line-height: 1.55;
}
/* Wider crop than the generic 3:2 card media. */
.terrago-herocard .terrago-banner img {
  aspect-ratio: 322 / 148;
  object-fit: cover;
  width: 100%;
}
.terrago-herocard .wp-block-buttons { margin-top: 0.85rem; }
/* Fit-to-content, not the full card width. */
.terrago-herocard .wp-block-button__link {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

/* ================================================== form / aside column === */

/* "Prefer Email?" — the icon aligns with the heading, not the card's centre. */
.terrago-emailcard { align-items: flex-start; gap: 1rem; }
.terrago-emailcard .terrago-iconcircle {
  flex: 0 0 44px;
  margin-bottom: 0;
  margin-top: 0.15rem;
}
.terrago-emailcard h3 { margin-top: 0; margin-bottom: 0.25rem; }
.terrago-emailcard p { margin-bottom: 0; }

/* Portrait source image, landscape slot — crop rather than letterbox. */
.terrago-contact-aside img {
  width: 100%;
  aspect-ratio: 553 / 398;
  object-fit: cover;
  display: block;
}

/* --- Fluent Forms submit: right-aligned, with the design's arrow ---------- */
.terrago-formcard .ff_submit_btn_wrapper { text-align: right; }
.terrago-formcard .ff_submit_btn_wrapper .ff-btn-submit { float: none; }
.terrago-formcard .ff-btn-submit::after { content: " \2192"; }

/* ==================================== "What Can We Help With?" section ==== */

.terrago-help .terrago-sectionlabel { margin-bottom: 0; }

.terrago-helpgrid {
  display: grid;
  grid-template-columns: 49% 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.terrago-helpgrid__media {
  grid-row: span 2;
  margin: 0;
  border-radius: var(--terrago-radius);
  overflow: hidden;
  min-height: 23rem;
}
.terrago-helpgrid__media img {
  width: 100%;
  height: 100%;
  min-height: 23rem;
  object-fit: cover;
  display: block;
}

.terrago-helpcard {
  padding: 1.25rem;
  border-color: transparent;
  border-radius: var(--terrago-radius-sm);
  box-shadow: 0 6px 20px rgba(1, 1, 1, 0.05);
}
.terrago-helpcard .terrago-iconcircle {
  width: 52px;
  height: 52px;
  margin-bottom: 0.85rem;
}
.terrago-helpcard h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  margin: 0 0 0.35rem;
}
.terrago-helpcard p {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}

/* ========================================================= closing CTA === */

/* The card straddles the section boundary and the blue footer, as in the
   design. Two things fight this: core's constrained-layout rule zeroes the
   block's margin-block-end, and the footer's padding-top is an inline style on
   the template part. Both need the doubled class / !important treatment —
   specificity alone cannot win against an inline style. */
.terrago-contactcta-wrap.terrago-contactcta-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: -5.5rem !important;
}
/* The headroom has to go on the *inner* blue group — the template part's own
   <footer> wrapper is transparent, so padding there would not move the colour. */
main:has(.terrago-contactcta-wrap) ~ footer.wp-block-template-part > .wp-block-group {
  padding-top: 11rem !important;
}

.terrago-contactcta {
  padding: 2rem 2.5rem;
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(1, 1, 1, 0.08);
  gap: 2rem;
  align-items: center;
}
.terrago-contactcta__lede {
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 26rem;
}
.terrago-contactcta__lede .terrago-iconcircle {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  margin-bottom: 0;
}
.terrago-contactcta__lede h2 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}
.terrago-contactcta__lede p {
  margin: 0;
  line-height: 1.6;
  max-width: 34rem;
}
.terrago-contactcta__actions { gap: 0.75rem; flex-wrap: nowrap; }
.terrago-contactcta__actions .wp-block-button__link { white-space: nowrap; }

/* ============================================================ responsive == */

@media (max-width: 1024px) {
  .terrago-helpgrid { grid-template-columns: 1fr 1fr; }
  .terrago-helpgrid__media { grid-row: auto; grid-column: 1 / -1; min-height: 16rem; }
  .terrago-helpgrid__media img { min-height: 16rem; }
}

@media (max-width: 781px) {
  .terrago-contact-hero.wp-block-cover { padding-top: 6.5rem; }
  .terrago-contact-hero .wp-block-columns { min-height: 0; }
  .terrago-contact-hero .wp-block-column { justify-content: flex-start; }
  .terrago-contact-hero h1 { max-width: none; }
  .terrago-contact-hero .terrago-quote-inline { margin-top: 1.5rem; }
  .terrago-herocard { max-width: none; margin-left: 0; margin-top: 2rem; }

  .terrago-helpgrid { grid-template-columns: 1fr; }

  .terrago-contactcta { padding: 1.5rem; gap: 1.5rem; }
  .terrago-contactcta__lede { flex-wrap: wrap; gap: 1rem; }
  .terrago-contactcta__lede .terrago-iconcircle {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  .terrago-contactcta__lede h2 { font-size: 1.5rem; }
  .terrago-contactcta__actions { flex-wrap: wrap; }
  .terrago-contactcta-wrap.terrago-contactcta-wrap { margin-bottom: -3rem !important; }
  main:has(.terrago-contactcta-wrap) ~ footer.wp-block-template-part > .wp-block-group {
    padding-top: 6rem !important;
  }
  .terrago-formcard .ff_submit_btn_wrapper { text-align: left; }
}