/* ==========================================================================
   SAJ CTA — Elementor widget additions
   cta.css is an unchanged copy of the original; this file only adds what the
   widget needs on top of it. Breakpoints are the original ones.
   ========================================================================== */

/* ---- Background layers as custom properties --------------------------------
   Same three layers as cta.css (white wash, artwork, soft gradient); the wash
   and the base gradient become variables so the Style tab can change them.
   The artwork stays var(--saj-cta-bg-image): cta.css's relative default, or
   the Media Library image the widget prints inline. */
.saj-cta[data-saj-cta-widget] {
  background-image:
    var(--saj-cta-bg-wash, linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0) 60%)),
    var(--saj-cta-bg-image),
    var(--saj-cta-bg-base, linear-gradient(160deg, #F7FBFF 0%, #EAF3FC 100%));
}

/* ---- Elementor's global resets ---------------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; max-width: 100% }`
   and `.elementor a { box-shadow: none }` (specificity 0,1,1), which beat the
   original single-class rules. Restore the original values. */
.saj-cta .saj-cta__portrait-image {
  height: 100%;
}

.saj-cta .saj-cta__button {
  box-shadow: 0 22px 40px -20px rgba(244, 81, 30, 0.85);
}

.saj-cta .saj-cta__button:hover,
.saj-cta .saj-cta__button:focus-visible {
  box-shadow: 0 26px 44px -20px rgba(214, 64, 15, 0.9);
}

/* ---- Library icons ---------------------------------------------------------
   The original icons are stroked line art; Font Awesome / uploaded icons are
   filled, so they are drawn with the fill instead. */
.saj-cta .saj-cta__icon--custom svg {
  fill: currentColor;
  stroke: none;
}

.saj-cta .saj-cta__icon--custom i {
  font-size: calc(var(--saj-cta-icon-size) * 0.4);
  line-height: 1;
}

.saj-cta .saj-cta__button-arrow--custom {
  font-size: 22px;
  fill: currentColor;
  stroke: none;
}

.saj-cta i.saj-cta__button-arrow--custom {
  width: auto;
  height: auto;
}

/* ---- Feature count other than three ----------------------------------------
   The original row is drawn for three features. Fewer use fewer columns
   (the widget sets --saj-cta-feature-cols); more start a new row of three
   without a leading divider. */
@media (min-width: 1280px) {
  .saj-cta[data-saj-cta-widget] .saj-cta__features {
    grid-template-columns: repeat(var(--saj-cta-feature-cols, 3), auto);
  }

  .saj-cta[data-saj-cta-widget] .saj-cta__feature:nth-child(3n+4) {
    padding-left: 0;
  }

  .saj-cta[data-saj-cta-widget] .saj-cta__feature:nth-child(3n+4)::before {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .saj-cta[data-saj-cta-widget] .saj-cta__features {
    grid-template-columns: repeat(var(--saj-cta-feature-cols, 3), minmax(0, 1fr));
    row-gap: 22px;
  }

  .saj-cta[data-saj-cta-widget] .saj-cta__feature:nth-child(3n+4)::before {
    display: none;
  }
}