/**
 * Pre-footer CTA — single layout for all pages (copy + button + image → footer).
 * Legacy alias: .section-cta shares the same rules for any leftover selectors in style.css.
 */

.pre-footer-cta,
.section-cta {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: clamp(64px, 8vw, 120px) var(--layout-gutter) 0;
  background: var(--white);
}

.pre-footer-cta__inner,
.section-cta__inner {
  width: 100%;
  max-width: 1344px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 82px);
  align-items: end;
  min-width: 0;
}

.pre-footer-cta__content,
.section-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  max-width: 692px;
  padding-bottom: clamp(48px, 6vw, 96px);
}

.pre-footer-cta__copy,
.section-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.pre-footer-cta__body,
.section-cta__copy-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 629px;
}

.pre-footer-cta__title,
.section-cta__title {
  font-family: var(--font-inter, Inter), var(--font-display);
  font-size: clamp(36px, 3.75vw, 54px);
  line-height: 1.1;
  font-weight: var(--weight-extrabold);
  color: #004c6a;
  margin: 0;
}

.pre-footer-cta__title .accent,
.section-cta__title .accent {
  color: var(--coral);
}

.pre-footer-cta__title .accent--navy {
  color: #034e6c;
}

.pre-footer-cta__text,
.section-cta__text {
  font-family: var(--font-inter, Inter), var(--font-ui);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.1;
  margin: 0;
  color: var(--black);
}

.pre-footer-cta__text + .pre-footer-cta__text,
.section-cta__text + .section-cta__text {
  margin-top: 1.1em;
}

.pre-footer-cta__btn.btn,
.section-cta__btn.btn {
  flex-shrink: 0;
  min-height: 55px;
  border-radius: 32px;
  font-size: 18px;
  line-height: 28px;
  width: max-content;
  max-width: 100%;
}

.pre-footer-cta__visual,
.section-cta__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  /* height: clamp(280px, 55vw, 607px); */
  overflow: hidden;
  margin-bottom: 0;
  align-self: end;
}

.pre-footer-cta__visual img,
.section-cta__visual img {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: none;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center top;
}

.pre-footer-cta--img-contain .pre-footer-cta__visual img,
.pre-footer-cta--img-contain .section-cta__visual img {
  position: relative;
  width: min(958px, 100%);
  height: auto;
  max-height: 100%;
  margin-inline: auto;
  left: auto;
  top: auto;
  object-fit: contain;
  object-position: center bottom;
}

.pre-footer-cta--img-contain .pre-footer-cta__visual,
.pre-footer-cta--img-contain .section-cta__visual {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* height: clamp(320px, 50vw, 717px); */
  overflow: visible;
}

.pre-footer-cta--img-bleed .pre-footer-cta__visual img,
.pre-footer-cta--img-bleed .section-cta__visual img {
  width: 189%;
  left: -53%;
  object-fit: cover;
  object-position: center top;
}

.page-inner .pre-footer-cta,
.page-inner .section-cta {
  margin-top: 0;
  max-width: none;
  width: 100%;
}

@media (max-width: 1023px) {
  .pre-footer-cta,
  .section-cta {
    padding-bottom: 0;
  }

  .pre-footer-cta__inner,
  .section-cta__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 5vw, 40px);
  }

  .pre-footer-cta__content,
  .section-cta__content {
    order: 1;
    padding-bottom: 0;
    padding-inline: 0;
  }

  .pre-footer-cta__visual,
  .section-cta__visual {
    order: 2;
    align-self: stretch;
    height: clamp(260px, 58vw, 400px);
  }

  .pre-footer-cta__visual img,
  .section-cta__visual img {
    width: 100%;
    left: 0;
    object-fit: cover;
    object-position: center bottom;
  }

  .pre-footer-cta--img-contain .pre-footer-cta__visual,
  .pre-footer-cta--img-contain .section-cta__visual {
    height: clamp(260px, 58vw, 400px);
    overflow: hidden;
  }

  .pre-footer-cta--img-contain .pre-footer-cta__visual img,
  .pre-footer-cta--img-contain .section-cta__visual img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  body.page-legal .pre-footer-cta--img-contain .pre-footer-cta__visual {
    max-width: min(400px, 92vw);
    margin-inline: auto;
  }

  body.page-business .pre-footer-cta--img-contain .pre-footer-cta__visual {
    max-width: min(480px, 92vw);
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .pre-footer-cta,
  .section-cta {
    padding-top: 120px;
    min-height: clamp(480px, 41vw, 591px);
  }

  .pre-footer-cta__inner,
  .section-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
  }

  .pre-footer-cta__content,
  .section-cta__content {
    padding-bottom: clamp(48px, 6vw, 96px);
    padding-top: 0;
  }

  .pre-footer-cta__visual,
  .section-cta__visual {
    height: clamp(420px, 43vw, 619px);
    align-self: center;
  }

  .pre-footer-cta--img-contain .pre-footer-cta__visual,
  .pre-footer-cta--img-contain .section-cta__visual {
    height: clamp(320px, 50vw, 717px);
    overflow: visible;
  }

  /* Homepage — relationships image crop */
  body:not(.page-inner) .pre-footer-cta--img-bleed .pre-footer-cta__inner {
    grid-template-columns: minmax(692px, 1fr) 482px;
    max-width: 100%;
  }

  body:not(.page-inner) .pre-footer-cta--img-bleed .pre-footer-cta__visual {
    height: 607px;
  }

  /* About — partner CTA column balance */
  body.page-about .pre-footer-cta {
    padding-top: 24px;
    min-height: 591px;
  }

  body.page-about .pre-footer-cta__inner {
    grid-template-columns: minmax(0, 692fr) minmax(0, 654fr);
    gap: 0;
    max-width: 1300px;
  }

  body.page-about .pre-footer-cta__content {
    padding-top: 96px;
    padding-bottom: 0;
  }

  body.page-about .pre-footer-cta__visual {
    align-self: start;
    height: 619px;
  }

  body.page-about .pre-footer-cta__visual img {
    width: 100%;
    left: 0;
    object-fit: cover;
    object-position: center top;
  }

  body.page-about .pre-footer-cta__btn.btn {
    min-width: 354px;
  }

  /* Why TranslateOS */
  .page-why .pre-footer-cta__content {
    max-width: 494px;
  }

  .page-why .pre-footer-cta__text {
    max-width: 494px;
  }

  .page-why .pre-footer-cta__inner {
    grid-template-columns: minmax(280px, 494px) minmax(0, 1fr);
  }

  /* Legal — pre-footer duo (Figma 45933:35972), transparent WebP */
  body.page-legal .pre-footer-cta {
    padding-bottom: 0;
  }

  body.page-legal .pre-footer-cta__inner {
    align-items: end;
    /* 692px = max copy width (Figma), not 692fr — fr ratio was collapsing the image column */
    grid-template-columns: minmax(0, 692px) minmax(0, 1fr);
  }

  body.page-legal .pre-footer-cta--img-contain .pre-footer-cta__visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: min(738px, 100%);
    height: clamp(480px, 43vw, 619px);
    margin-inline: 0 0;
    margin-left: auto;
    overflow: visible;
    align-self: end;
  }

  body.page-legal .pre-footer-cta--img-contain .pre-footer-cta__visual img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
  }

  /* Education — pre-footer portrait (Figma 45933:35652) */
  body.page-education .pre-footer-cta {
    padding-bottom: 0;
  }

  body.page-education .pre-footer-cta__inner {
    align-items: end;
    grid-template-columns: minmax(0, 590px) minmax(0, 1fr);
  }

  body.page-education .pre-footer-cta__content {
    max-width: 590px;
  }

  body.page-education .pre-footer-cta__text {
    max-width: 590px;
  }

  body.page-education .pre-footer-cta--img-contain .pre-footer-cta__visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: min(518px, 100%);
    height: clamp(420px, 40vw, 526px);
    margin-left: auto;
    overflow: visible;
    align-self: end;
  }

  body.page-education .pre-footer-cta--img-contain .pre-footer-cta__visual img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
  }

  /* Business — pre-footer duo (Figma all business plan), transparent WebP */
  body.page-business .pre-footer-cta {
    padding-bottom: 0;
  }

  body.page-business .pre-footer-cta__inner {
    align-items: end;
    grid-template-columns: minmax(0, 692px) minmax(0, 1fr);
  }

  body.page-business .pre-footer-cta--img-contain .pre-footer-cta__visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: min(640px, 100%);
    height: clamp(380px, 38vw, 514px);
    margin-left: auto;
    overflow: visible;
    align-self: end;
  }

  body.page-business .pre-footer-cta--img-contain .pre-footer-cta__visual img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
  }

}

@media (max-width: 767px) {
  .pre-footer-cta,
  .section-cta {
    padding-top: 64px;
  }

  body:not(.page-inner) .pre-footer-cta__content {
    padding-inline: var(--layout-gutter);
  }

  body:not(.page-inner) .pre-footer-cta__visual {
    height: clamp(240px, 62vw, 360px);
  }
}

@media (max-width: 480px) {
  .pre-footer-cta__visual,
  .section-cta__visual {
    height: min(320px, 55vw);
  }
}