/**
 * section-hero-form-2026.css
 *
 * Layout + section-specific bits for the Partnership + Form hero used on
 * 2026 product-comparison landings (EAC, Gong, Clari, …).
 *
 * All primitives (colours, spacing, typography, radii, shadows) come from the
 * `:root` in `landing-2026-v5.css`. Only rules that are specific to this
 * section live here.
 *
 * Reuses the global `.lp26-form-card` component for the right-hand form.
 */

/* ─────────────────────────────────────────────────────────
   Section wrapper
   Figma 1200:3670 — hero is 816px tall below the 56px nav. We fill the
   first viewport fold so the form's consent + submit are always visible
   on load, and let the internal fields area scroll if the form is long.
   72px floor = overall-header-2026-full approximate height.
   ───────────────────────────────────────────────────────── */
.lp26-hero-partner-form {
  position: relative;
  width: 100%;
  background-color: var(--rg-white);
  /* Definite height so the card's max-height:100% + inner overflow:auto chain
   * resolves. With min-height alone, percentages don't resolve → card stretches
   * to fit its content and pushes submit below the fold. */
  height: calc(100dvh - 72px);
  min-height: 640px;
  /* Belt-and-suspenders: keep the form card/bg from spilling into the next
   * section if any child decides to overflow its bounded height. */
  overflow: hidden;
}

/* Figma: two equal columns inside a 1200px container, full-height 816px.
 * Override .lp26-container horizontal padding — Figma has content flush to
 * the left edge of the 1200 frame and the form-col gradient/border reaching
 * the right edge. Each column carries its own horizontal padding. */
.lp26-hero-partner-form__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  /* Fill the section's definite height so form-col has a resolvable height
   * (needed for the card's max-height:100% chain). Without this, inner
   * sizes to content and the form-col bleeds past the section bottom. */
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ─────────────────────────────────────────────────────────
   Left column — content
   ───────────────────────────────────────────────────────── */
.lp26-hero-partner-form__content-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rg-space-9) var(--rg-space-8) var(--rg-space-9) 0;
  /* Figma: olive-1 border on inner side — kept subtle for visual column split */
  border-right: 1px solid var(--rg-olive-1);
}

.lp26-hero-partner-form__content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--rg-space-8); /* 48px between badge, heading group */
  width: 100%;
  max-width: 552px;
}

/* Partnership badge — olive gradient pill with RG mark + partner mark */
.lp26-hero-partner-form__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rg-space-4); /* 16px */
  padding: var(--rg-space-3) var(--rg-space-5); /* 12px 24px */
  background-image: linear-gradient(
    to bottom,
    var(--rg-olive-3) 0%,
    var(--rg-olive-1) 100%
  );
  border: 2px solid var(--rg-olive-4);
  border-radius: var(--rg-radius-full);
  box-shadow: var(--rg-shadow-3);
  overflow: hidden;
}

.lp26-hero-partner-form__badge-logo,
.lp26-hero-partner-form__badge-partner {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Figma: RG mark renders raw (no radius). Partner mark is a 32×32 circle
 * (rounded-[16px] on 32 = 50%). Keeps square partner PNGs from bleeding. */
.lp26-hero-partner-form__badge-partner {
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--rg-white);
}

.lp26-hero-partner-form__badge-sep {
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-olive-8);
  font-weight: 400;
  user-select: none;
}

/* Headline — Playfair Display, interleaved <em> for italic green emphasis */
.lp26-hero-partner-form__headline {
  margin: 0;
  font-family: var(--rg-font-heading);
  font-weight: 500;
  font-size: var(--rg-fs-display);
  line-height: var(--rg-lh-display);
  letter-spacing: var(--rg-ls-display);
  color: var(--rg-accent-12);
}

.lp26-hero-partner-form__headline em,
.lp26-hero-partner-form__headline i {
  font-style: italic;
  color: var(--rg-accent-9);
  font-weight: inherit;
}

/* Description — body-large, two paragraphs stacked with 1em gap (blank line) */
.lp26-hero-partner-form__desc {
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-11);
  max-width: 552px;
}

.lp26-hero-partner-form__desc p {
  margin: 0 0 var(--rg-lh-b1) 0; /* blank-line rhythm between paragraphs */
}

.lp26-hero-partner-form__desc p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────
   Right column — decorative background + form card
   ───────────────────────────────────────────────────────── */
.lp26-hero-partner-form__form-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  /* stretch so the card-wrap can take the full height of the col — this is
   * what lets us constrain the card to the viewport and scroll its fields. */
  align-items: stretch;
  justify-content: center;
  padding: var(--rg-space-9) var(--rg-space-8); /* 64px 48px per Figma 1200:3691 */
  overflow: hidden;
  /* Figma: 111.4deg linear gradient from white 50% → accent-3 (mint) 88% */
  background-image: linear-gradient(
    111.4deg,
    var(--rg-white) 50.043%,
    var(--rg-accent-3) 88.331%
  );
  border: 1px solid var(--rg-olive-3);
}

/* Decorative rotated ellipse/grid SVG sitting behind the form card.
 * Reuses the same asset as the landing-2026 hero form column, which renders
 * the identical vector per Figma (nodes 1200:3691 and its landing-2026 twin). */
.lp26-hero-partner-form__form-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../../images/2026/forms/form-background.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  opacity: 1;
  z-index: 0;
}

/* Card wrap fills the form-col vertically + horizontally centers the card.
 * justify-content:center also vertically centers the card when it's shorter
 * than the col (short viewports still keep the card centred). */
.lp26-hero-partner-form__form-card-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Form card:
 * - Figma spec: 504×688, 32px inner padding, 24px gap between rows (node 1200:3699).
 * - max-height:100% keeps the card within the form-col (viewport-bounded), so
 *   the submit + consent are always above the fold per the Figma design.
 * - display:flex + overflow:hidden lets the inner .lp26-fields-area scroll
 *   while the legal-consent block and submit button stay pinned at the bottom. */
.lp26-hero-partner-form__form-card-wrap .lp26-form-card {
  max-width: 504px;
  max-height: 100%;
  padding: var(--rg-space-6); /* 32px — override global 40px to match Figma */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Let flexbox propagate height constraints all the way down to .lp26-fields-area. */
.lp26-hero-partner-form__form-card-wrap .lp26-native-form-wrap,
.lp26-hero-partner-form__form-card-wrap form.lp26-native-hs-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Scrollable field area. min-height:0 is required for flex-children to shrink
 * below their content size and trigger overflow — without it, overflow:auto
 * is ignored and the card grows past its max-height. */
.lp26-hero-partner-form__form-card-wrap .lp26-fields-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Offset the scrollbar so rows don't jump when it appears. */
  padding-right: var(--rg-space-1);
  margin-right: calc(-1 * var(--rg-space-1));
}

/* Subtle scrollbar — visible only while scrolling. */
.lp26-hero-partner-form__form-card-wrap .lp26-fields-area {
  scrollbar-width: thin;
  scrollbar-color: var(--rg-olive-5) transparent;
}
.lp26-hero-partner-form__form-card-wrap .lp26-fields-area::-webkit-scrollbar {
  width: 6px;
}
.lp26-hero-partner-form__form-card-wrap .lp26-fields-area::-webkit-scrollbar-thumb {
  background-color: var(--rg-olive-5);
  border-radius: 3px;
}

/* Row rhythm: Figma shows 24px between each row. Global v5.css uses 20px on
 * .hs-form-field margin-bottom — override inside this hero to match Figma. */
.lp26-hero-partner-form__form-card-wrap .hs-form-field {
  margin-bottom: var(--rg-space-5); /* 24px */
}

/* Consent + submit are pinned to the bottom and never shrink. Keep the 24px
 * rhythm above the consent block (gap from the last scrolled field). */
.lp26-hero-partner-form__form-card-wrap .legal-consent-container,
.lp26-hero-partner-form__form-card-wrap .hs_submit {
  flex-shrink: 0;
}

.lp26-hero-partner-form__form-card-wrap .legal-consent-container {
  margin-top: var(--rg-space-5);    /* 24px gap after scrollable fields */
  margin-bottom: var(--rg-space-5); /* 24px gap before submit button */
}

/* ─────────────────────────────────────────────────────────
   Tablet (≤1024px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Stacked layout — release the fixed desktop height so both columns can
   * grow with their content (form no longer needs to fit a single fold). */
  .lp26-hero-partner-form {
    height: auto;
    min-height: 0;
  }

  .lp26-hero-partner-form__inner {
    flex-direction: column;
  }

  .lp26-hero-partner-form__form-card-wrap .lp26-form-card {
    max-height: none;
    overflow: visible;
  }

  .lp26-hero-partner-form__form-card-wrap .lp26-fields-area {
    overflow-y: visible;
  }

  .lp26-hero-partner-form__content-col,
  .lp26-hero-partner-form__form-col {
    flex: 1 1 100%;
    width: 100%;
    padding: var(--rg-space-8);
    border-right: none;
  }

  .lp26-hero-partner-form__content-inner {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .lp26-hero-partner-form__headline {
    text-align: center;
  }

  .lp26-hero-partner-form__desc {
    max-width: 640px;
  }
}

/* ─────────────────────────────────────────────────────────
   Mobile (≤640px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Figma 1269:3772 — section bg gradient on mobile (white → accent-3) */
  .lp26-hero-partner-form {
    background-image: linear-gradient(
      98.83deg,
      var(--rg-white) 50.043%,
      var(--rg-accent-3) 88.331%
    );
  }

  /* Figma: outer column has 56px V / 16px H padding on mobile */
  .lp26-hero-partner-form__content-col,
  .lp26-hero-partner-form__form-col {
    padding: var(--rg-space-7-5) var(--rg-space-4); /* 56px 16px */
  }

  /* Figma 1269:3775 — chip + heading group are left-aligned on mobile */
  .lp26-hero-partner-form__content-inner {
    gap: var(--rg-space-6); /* 32px */
    align-items: flex-start;
    text-align: left;
  }

  /* Figma Heading/Mobile/H1/Medium = Playfair 36/38, tracking 0 */
  .lp26-hero-partner-form__headline {
    font-size: 36px;
    line-height: 38px;
    letter-spacing: 0;
    text-align: left;
  }
}