/* RF Partnership widget — Reloadux Addons
 * All variables scoped to .rfpartnership-root so multiple instances
 * cannot collide.
 */

/* ---------- Tokens (scoped) ---------- */
.rfpartnership-root {
  --rf-bg-section: #ffffff;
  --rf-brand-primary: #1070d7;

  --rf-text-default: #2f2f2f;
  --rf-text-strong: #000000;
  --rf-text-muted-opacity: 0.5;

  --rf-border-muted: #f0f0f0;

  --rf-logo-size: 111.557px;
  --rf-logo-gap: 28px;
  --rf-logo-stride: calc(var(--rf-logo-size) + var(--rf-logo-gap));

  --rf-section-pad-top: 64px;
  --rf-section-pad-bottom: 72px;
  --rf-section-pad-x: 24px;

  --rf-section-gap: 48px;
  --rf-content-gap: 40px;
  --rf-header-gap: 16px;
  --rf-testimonial-gap: 16px;

  --rf-logo-border-w: 1px;
  --rf-active-ring-w: 5px;

  --rf-transition-slide: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  --rf-transition-state: background-color 400ms ease, color 400ms ease,
    border-color 400ms ease, box-shadow 400ms ease, transform 400ms ease,
    opacity 400ms ease;
}

/* ---------- Box-sizing reset for our subtree only ---------- */
.rfpartnership-root *,
.rfpartnership-root *::before,
.rfpartnership-root *::after {
  box-sizing: border-box;
}

/* Clip the logos' 100vw breakout so it can't trigger document-level
   horizontal scroll (100vw includes the scrollbar). `clip` over `hidden`
   so it doesn't establish a containing block for fixed children. */
.rfpartnership-root {
  overflow-x: clip;
}

/* ---------- Section frame ---------- */
.rfpartnership-root .partnership__inner {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--rf-bg-section);
  border-radius: 16px;
  padding: var(--rf-section-pad-top) var(--rf-section-pad-x) var(--rf-section-pad-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-section-gap);
}

.rfpartnership-root .partnership__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-content-gap);
  width: 100%;
}

/* ---------- Header ---------- */
.rfpartnership-root .partnership__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-header-gap);
  text-align: center;
}

.rfpartnership-root .partnership__title {
  margin: 0;
  max-width: 750px;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.96px;
  font-weight: 400;
  color: var(--rf-text-strong);
}

.rfpartnership-root .partnership__subtitle {
  margin: 0;
  max-width: 750px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--rf-text-default);
}

/* ---------- Testimonial ---------- */
.rfpartnership-root .testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-testimonial-gap);
  text-align: center;
  width: 100%;
}

.rfpartnership-root .testimonial__quote {
  margin: 0;
  max-width: 1058px;
}

.rfpartnership-root .testimonial__quote p {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--rf-brand-primary);
  transition: opacity 280ms ease;
}

.rfpartnership-root .testimonial__cite {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--rf-text-default);
  opacity: var(--rf-text-muted-opacity);
  transition: opacity 280ms ease;
}

.rfpartnership-root .testimonial.is-changing .testimonial__quote p,
.rfpartnership-root .testimonial.is-changing .testimonial__cite {
  opacity: 0;
}

.rfpartnership-root .testimonial.is-empty .testimonial__quote p,
.rfpartnership-root .testimonial.is-empty .testimonial__cite {
  opacity: 0;
}

/* ---------- Logos carousel ----------
   Span the full viewport width regardless of how many parent
   containers (Elementor section, widget container, .partnership
   outer padding, .partnership__inner padding/max-width) sit
   between us and the edge. The negative `margin-left` of
   `calc(50% - 50vw)` pulls the row's left edge to the viewport's
   left edge, and the matching right margin balances it. */
.rfpartnership-root .logos {
  align-self: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}

.rfpartnership-root .logos__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.rfpartnership-root .logos__track {
  --active-index: 6; /* JS updates; CSS does the translate */
  list-style: none;
  margin: 0;
  /* Vertical padding leaves room for the active ring not to be clipped. */
  padding: calc(var(--rf-active-ring-w) + 4px) calc(50% - (var(--rf-logo-size) / 2));
  display: flex;
  gap: var(--rf-logo-gap);
  transform: translateX(
    calc(var(--active-index) * var(--rf-logo-stride) * -1)
  );
  transition: var(--rf-transition-slide);
  will-change: transform;
}

.rfpartnership-root .logos__track.is-snapping {
  transition: none;
}

/* ---------- Logo item ---------- */
.rfpartnership-root .logo {
  flex: 0 0 var(--rf-logo-size);
  width: var(--rf-logo-size);
  height: var(--rf-logo-size);
  position: relative;
  border-radius: 50%;
  background: #ffffff;
  border: var(--rf-logo-border-w) solid var(--rf-border-muted);
  overflow: hidden;
  cursor: pointer;
  transition: var(--rf-transition-state);
}

.rfpartnership-root .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 300ms ease, transform 300ms ease;
  opacity: 0.9;
}

/* The Premier source PNG has a blue ring at the outer 8.2% of the
   image. Scaling the image up by 18% pushes that ring past the
   overflow:hidden boundary so it never shows — only the active-state
   ring (below) is ever visible. The same percentage works at any
   container size, so this rule needs no media-query override. */
.rfpartnership-root .logo--has-baked-ring img {
  transform: scale(1.18);
  transform-origin: center;
}

.rfpartnership-root .logo:hover img {
  opacity: 1;
}

/* Active state uses box-shadow so the brand ring doesn't shift layout. */
.rfpartnership-root .logo.is-active {
  border-color: transparent;
  box-shadow: 0 0 0 var(--rf-active-ring-w) var(--rf-brand-primary);
}

.rfpartnership-root .logo.is-active img {
  opacity: 1;
}

.rfpartnership-root .logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--rf-brand-primary), 0 0 0 5px rgba(16, 112, 215, 0.25);
}

/* ---------- Visually hidden live region ---------- */
.rfpartnership-root .logos__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tablet ----------
   Desktop sizing (logo 111px, title 48px, quote 30px) is too big for
   iPad portrait/landscape. Scale tokens down to an intermediate set
   that sits between desktop and the existing mobile values. */
@media (max-width: 1024px) {
  .rfpartnership-root {
    --rf-logo-size: 88px;
    --rf-logo-gap: 20px;

    --rf-section-pad-top: 48px;
    --rf-section-pad-bottom: 56px;
    --rf-section-pad-x: 24px;

    --rf-section-gap: 36px;
    --rf-content-gap: 32px;
  }

  .rfpartnership-root .partnership__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.5px;
    max-width: 480px;
  }

  .rfpartnership-root .partnership__subtitle {
    font-size: 16px;
    line-height: 22px;
    max-width: 540px;
  }

  .rfpartnership-root .testimonial__quote p {
    font-size: 24px;
    line-height: 32px;
  }

  .rfpartnership-root .testimonial__cite {
    font-size: 18px;
    line-height: 24px;
  }
}

/* ---------- Phone ----------
   Capped at 600px (not 768px) so the 350px title cap and logo/spacing
   downsizing inside this block don't engage at iPad portrait. */
@media (max-width: 600px) {
  /* Edge-to-edge on phones — drop the inner radius so the section
     background runs to the screen edges. */
  .rfpartnership-root .partnership__inner {
    border-radius: 0 !important;
  }

  .rfpartnership-root {
    --rf-logo-size: 57.663px;
    --rf-logo-gap: 14.473px;

    --rf-section-pad-top: 40px;
    --rf-section-pad-bottom: 40px;
    --rf-section-pad-x: 24px;

    --rf-section-gap: 48px;
    --rf-content-gap: 24px;
    --rf-header-gap: 16px;
    --rf-testimonial-gap: 16px;

    --rf-logo-border-w: 0.5px;
    --rf-active-ring-w: 2.5px;
  }

  .rfpartnership-root .partnership__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.32px;
    max-width: 350px;
  }

  .rfpartnership-root .partnership__subtitle {
    font-size: 14px;
    line-height: 20px;
    max-width: 100%;
    color: #0e0f10;
  }

  .rfpartnership-root .testimonial__quote p {
    font-size: 24px;
    line-height: 30px;
  }

  .rfpartnership-root .testimonial__cite {
    font-size: 16px;
    line-height: 22px;
  }

  .rfpartnership-root .testimonial__quote {
    max-width: 100%;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rfpartnership-root .logos__track,
  .rfpartnership-root .logo,
  .rfpartnership-root .logo img,
  .rfpartnership-root .testimonial__quote p,
  .rfpartnership-root .testimonial__cite {
    transition: none;
  }
}