/* ============================================================
   PARTNERS / TRAVEL ADVISOR PROGRAM
   Scoped under .partners-page. Reuses site tokens from globals.css
   (Urbanist display, Work Sans body, --blue-* palette). Gold is
   reserved for navy sections (hero, final CTA); every other section
   alternates white/gray and uses blue accents, matching Groups.
   ============================================================ */

.partners-page {
  /* Gold is reserved for navy sections only (hero, final CTA, mobile
     sticky CTA). Every other section alternates white/gray like Groups
     and uses the blue accents below instead. */
  --pp-gold: #C8A14B;
  --pp-gold-soft: #E4C878;
  --pp-navy: var(--blue-90);
  /* Solid (non-opacity) light blue-gray for secondary hero text. Unlike
     white-text + opacity-6, this doesn't wash out where the hero photo's
     scrim fades and lighter pixels show through. */
  --pp-hero-muted: #C9D1E6;
  /* Shared with Groups' --gp-check-green so both inquiry-form
     checklists use the same green. */
  --pp-check-green: #2ECC71;
}

/* In-page "Request to Join" links glide to the application form.
   Scoped to this page only (partners.css loads on the Partners page)
   and disabled when the visitor prefers reduced motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Shared eyebrow / section label */
.partners-page .pp-eyebrow {
  font-family: "Work Sans";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-70);
}
.partners-page .pp-eyebrow--gold { color: var(--pp-gold); }

.partners-page .pp-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 40px;
}
.partners-page .pp-section-head h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-90);
}
.partners-page .pp-section-head .pp-lede {
  color: var(--dark-70);
  max-width: 62ch;
}

/* Mobile sticky CTA — reuses the site's pill-button-primary-mod. */
.partners-page .pill-button-primary-mod { gap: 8px; }

/* Hero CTA — reuses the site's main-button/big-button-mod primary treatment. */
.partners-page .pp-hero-actions .main-button { gap: 8px; }
.partners-page .pp-hero-actions .main-button svg { width: 18px; height: 18px; }

/* ============================================================
   HERO
   ============================================================ */
.partners-page .pp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
}
.partners-page .pp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Bias the crop toward the right edge so the advisor and couple stay in
     frame even when the section's aspect ratio forces a horizontal crop —
     the left half of the source photo is empty wall, built for this. */
  background-position: right center;
  opacity: 1;
}
/* Directional scrim, same navy family and peak intensity as Groups'
   hero wash (rgb(29,40,70), ~0.9 peak) — just shaped to fade left to
   right instead of a uniform wash, since the headline/CTA sit on the
   left. No fully-opaque plateau, so the photo stays faintly visible
   even under the text instead of being blocked solid. */
.partners-page .pp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(29, 40, 70, 0.92) 0%,
    rgba(29, 40, 70, 0.88) 30%,
    rgba(29, 40, 70, 0.7) 48%,
    rgba(29, 40, 70, 0.4) 64%,
    rgba(29, 40, 70, 0.12) 82%,
    rgba(29, 40, 70, 0) 95%);
}
.partners-page .pp-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 10vw, 128px) 0 clamp(48px, 7vw, 84px);
  gap: 0;
}
.partners-page .pp-hero-inner {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.partners-page .pp-hero-inner h1 { max-width: 15ch; }
.partners-page .pp-hero-sub {
  max-width: 62ch;
  margin: 0;
  /* Solid color, not white-text + opacity-6 — stays legible over the
     photo even where the scrim fades. */
  color: var(--pp-hero-muted);
  opacity: 1;
}

.partners-page .pp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}
.partners-page .pp-hero-actions .main-button { margin-top: 0; }

/* "Already a partner? Sign in" — a self-contained pill so its
   affordance doesn't depend on the contrast of whatever photo pixel
   sits behind it. */
.partners-page .pp-hero-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pp-hero-muted);
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: 9px 16px 9px 18px;
}
.partners-page .pp-textlink {
  background: none;
  border: none;
  color: var(--light-00);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.partners-page .pp-textlink:hover { color: var(--pp-gold-soft); }

/* Trust bar */
.partners-page .pp-trust {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}
.partners-page .pp-trust-item {
  color: rgba(255, 255, 255, 0.9);
  font-family: "Work Sans";
  font-size: 14px;
}
.partners-page .pp-trust-item strong { color: var(--light-00); font-weight: 700; }
.partners-page .pp-trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pp-gold); }

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.partners-page .pp-section { padding: clamp(56px, 8vw, 96px) 0; }
.partners-page .pp-section--gray { background-color: var(--light-10); }
.partners-page .pp-section--navy { background-color: var(--blue-90); }
.partners-page .pp-section .flex-content { gap: 0; }

/* ============================================================
   CARD GRID  (Why partner / Sales tools)
   ============================================================ */
.partners-page .pp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.partners-page .pp-card {
  background-color: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.partners-page .pp-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-50);
  box-shadow: 0 16px 32px rgba(41, 51, 88, 0.12);
}
.partners-page .pp-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-05);
  margin-bottom: 6px;
}
.partners-page .pp-card-icon svg { width: 22px; height: 22px; stroke: var(--blue-70); }
/* Matches Groups' .gp-who-card text treatment: a navy title carries
   hierarchy instead of sitting in the same gray as the body copy. */
.partners-page .pp-card h3 {
  font-family: "Work Sans";
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.3;
}
.partners-page .pp-card p {
  font-family: "Work Sans";
  font-size: 14.5px;
  font-weight: 400;
  color: var(--dark-70);
  line-height: 1.6;
}
.partners-page .pp-card .pp-card-link {
  margin-top: 4px;
  font-weight: 700;
  color: var(--blue-70);
}

/* ============================================================
   STEPS — reuses shared .hi-steps; only the wrapper padding here
   ============================================================ */
.partners-page .pp-steps-cta { display: flex; justify-content: center; }
.partners-page .pp-steps-cta .blue-button { margin-top: 0; padding: 14px 28px; }

/* ============================================================
   BENEFIT ROWS  (image + text, alternating)
   ============================================================ */
.partners-page .pp-benefits {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}
.partners-page .pp-split {
  display: flex;
  gap: 56px;
  align-items: center;
}
.partners-page .pp-split--reverse { flex-direction: row-reverse; }
/* Benefit rows vary in copy length row to row; anchoring to the top
   (instead of centering) keeps the four rows reading as a tidy column
   instead of images floating at different vertical offsets. */
.partners-page .pp-benefits .pp-split { align-items: flex-start; }
.partners-page .pp-split-media { flex: 1; }
.partners-page .pp-split-media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.partners-page .pp-split-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.partners-page .pp-split-body h3 { font-family: "Urbanist", sans-serif; font-weight: 700; }
.partners-page .pp-split-body p { color: var(--dark-70); }
.partners-page .pp-pullquote {
  margin-top: 6px;
  padding-top: 20px;
  border-top: 3px solid var(--blue-70);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--blue-90);
  font-size: clamp(18px, 2vw, 22px);
  max-width: 380px;
}
.partners-page .pp-proof {
  margin-top: 44px;
  text-align: center;
  color: var(--dark-70);
}
.partners-page .pp-proof strong { color: var(--blue-90); font-weight: 700; }

/* ============================================================
   TESTIMONIALS — moved to shared.css as .testi-* (reused by Groups)
   ============================================================ */
/* Partners alternates white/gray section by section; override the
   shared component's light-10 background here only, so Groups (which
   uses its own gray-based rhythm) keeps its original background. */
.partners-page .testi-container-mod { background-color: var(--light-00); }

/* ============================================================
   FAQ — reuses shared _FAQ.cshtml (.hfq-*), same override pattern as
   testimonials above: white here so the page keeps a clean
   white/gray/white/gray rhythm (Team, gray, sits right before it).
   ============================================================ */
.partners-page .hfq-container-mod { background-color: var(--light-00); }

.testi-container-mod .pp-section-head {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   TEAM SPLIT (reuses pp-split; image via .pp-split-media)
   ============================================================ */
.partners-page .pp-team .pp-split-body h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-90);
}
.partners-page .pp-team .pp-split-body .pp-textlink-blue {
  color: var(--blue-70);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* ============================================================
   FINAL CTA / APPLICATION FORM (navy)
   Mirrors the Groups inquiry layout (benefits left, form card right)
   but keeps Partners' own tokens: gold accent, Urbanist headings.
   ============================================================ */
.partners-page .pp-cta {
  background-color: var(--blue-90);
}
.partners-page .pp-cta-content {
  gap: 0;
}
/* Left-aligned intro block, in multiples of 8px:
   eyebrow → headline → body stay close (16px) since each elaborates
   the last; a bigger 48px break opens the two-column form below. */
.partners-page .pp-cta-head {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.partners-page .pp-cta-content h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  margin-top: 16px;
}
.partners-page .pp-cta-body {
  margin-top: 16px;
  font-family: "Work Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.partners-page .pp-inq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
  align-items: start;
}
.partners-page .pp-inq-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners-page .pp-inq-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  font-family: "Work Sans";
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  text-align: left;
}
.partners-page .pp-inq-text { flex: 1 1 auto; min-width: 0; order: 2; }
.partners-page .pp-inq-check {
  order: 1;
  width: 22px;
  height: 22px;
  background: rgba(46, 204, 113, 0.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.partners-page .pp-inq-check svg {
  width: 12px;
  height: 12px;
  stroke: var(--pp-check-green);
  fill: none;
}
.partners-page .pp-inq-contact {
  margin-top: 28px;
  font-family: "Work Sans";
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  text-align: left;
}
.partners-page .pp-inq-contact a { color: var(--pp-gold-soft); font-weight: 700; }
.partners-page .pp-form-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  min-height: 480px;
  display: flex;
  align-items: flex-start;
}
.partners-page .pp-form-wrap .hs-form-frame {
  width: 100%;
  min-height: 450px;
}

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.partners-page .pp-mobile-cta {
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1100px) {
  .partners-page .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 964px) {
  .partners-page .pp-split,
  .partners-page .pp-split--reverse { flex-direction: column; align-items: stretch; }
  .partners-page .pp-split-media img { max-height: 320px; }
  .partners-page .pp-inq-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media screen and (max-width: 640px) {
  .partners-page .pp-cards { grid-template-columns: 1fr; }

  /* The headline now spans the full width instead of sitting in a clear
     left column, so the directional scrim would leave the photo's right
     side (and the text on top of it) too exposed. Fall back to a flatter,
     more uniform wash tuned for legibility over the whole section. */
  .partners-page .pp-hero-bg { opacity: 0.4; }
  .partners-page .pp-hero::after {
    background: linear-gradient(160deg, var(--blue-90) 0%, rgba(29, 40, 70, 0.9) 55%, rgba(29, 40, 70, 0.78) 100%);
  }

  .partners-page .pp-trust { gap: 10px 20px; }
  .partners-page .pp-trust-item { flex: 0 0 auto; }
  .partners-page .pp-trust-dot { display: none; }

  .partners-page .pp-mobile-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px 5%;
    background-color: var(--blue-90);
    border-top: 2px solid var(--pp-gold);
  }
  .partners-page .pp-mobile-cta .pill-button {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }
  .partners-page main,
  .partners-page.venture-ashore-content {
    padding-bottom: 76px;
  }
}