/* RF Features widget — Reloadux Addons
 * All variables scoped to .rffeatures-root. Outer-padding is exposed via Elementor's
 * DIMENSIONS control on .features and is intentionally NOT set here.
 */

/* ---------- Tokens (scoped) ---------- */
.rffeatures-root {
  --rf-bg-section: #fafbff;
  --rf-bg-card-rest: #ffffff;
  --rf-bg-card-active: #1070d7;

  --rf-text-strong: #0e0f10;
  --rf-text-default: #2f2f2f;
  --rf-text-on-active: #ffffff;
  --rf-brand-primary: #1070d7;

  --rf-icon-rest: #51bc51;
  --rf-icon-active: #fec90d;

  --rf-card-title-rest: var(--rf-brand-primary);
  --rf-card-title-active: var(--rf-text-on-active);
  --rf-card-text-rest: var(--rf-text-default);
  --rf-card-text-active: var(--rf-text-on-active);

  --rf-section-gap: 40px;
  --rf-header-gap: 12px;
  --rf-list-gap: 16px;

  --rf-card-h: 495px;
  --rf-card-radius: 16px;
  --rf-card-pad: 24px;

  --rf-card-body-gap: 24px;
  --rf-icon-size: 34px;
  --rf-icon-size-chat: 36px;

  --rf-card-text-max: 227px;

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

  --rf-t-color: 280ms ease;

  /* Header alignment — overridden by Elementor's selectors_dictionary
     so a single CHOOSE control sets both flex and text alignment. */
  --rf-header-flex: center;
  --rf-header-text: center;
}

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

/* ---------- Section ---------- */
.rffeatures-root .features__inner {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--rf-bg-section);
  display: flex;
  flex-direction: column;
  gap: var(--rf-section-gap);
}

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

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

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

/* ---------- Cards ---------- */
.rffeatures-root .features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--rf-list-gap);
  width: 100%;
}

.rffeatures-root .feature {
  flex: 1 1 0;
  min-width: 0;
  height: var(--rf-card-h);
  border-radius: var(--rf-card-radius);
  background: var(--rf-bg-card-rest);
  padding: var(--rf-card-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--rf-t-color);
}

.rffeatures-root .feature__title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;
  color: var(--rf-card-title-rest);
  transition: color var(--rf-t-color);
}

.rffeatures-root .feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rf-card-body-gap);
  width: 100%;
}

.rffeatures-root .feature__text {
  margin: 0;
  max-width: var(--rf-card-text-max);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--rf-card-text-rest);
  transition: color var(--rf-t-color);
}

/* ---------- Hover (active) state — only on devices that support hover.
   On touch devices, the cards stay in their default look. */
@media (hover: hover) {
  .rffeatures-root .feature:hover {
    background: var(--rf-bg-card-active);
  }

  .rffeatures-root .feature:hover .feature__title {
    color: var(--rf-card-title-active);
  }

  .rffeatures-root .feature:hover .feature__text {
    color: var(--rf-card-text-active);
  }
}

/* ---------- Icons ---------- */
.rffeatures-root .icon {
  display: block;
  flex-shrink: 0;
  background-color: var(--rf-icon-rest);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color var(--rf-t-color);
}

@media (hover: hover) {
  .rffeatures-root .feature:hover .icon:not(.icon--chat):not(.icon--custom) {
    background-color: var(--rf-icon-active);
  }
}

.rffeatures-root .icon--chart {
  width: var(--rf-icon-size);
  height: var(--rf-icon-size);
  -webkit-mask-image: url("../icons/rf-features/chart.svg");
  mask-image: url("../icons/rf-features/chart.svg");
}

.rffeatures-root .icon--network {
  width: var(--rf-icon-size);
  height: var(--rf-icon-size);
  -webkit-mask-image: url("../icons/rf-features/network.svg");
  mask-image: url("../icons/rf-features/network.svg");
}

.rffeatures-root .icon--location {
  width: var(--rf-icon-size);
  height: var(--rf-icon-size);
  -webkit-mask-image: url("../icons/rf-features/location.svg");
  mask-image: url("../icons/rf-features/location.svg");
}

/* Chat icon: inlined SVG (not mask-image) so its bubble path and dot
   circle stroke pick up color from `currentColor`. */
.rffeatures-root .icon--chat {
  width: var(--rf-icon-size-chat);
  height: var(--rf-icon-size-chat);
  background-color: transparent;
  color: var(--rf-icon-rest);
  transition: color var(--rf-t-color);
}

.rffeatures-root .icon--chat .icon__svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .rffeatures-root .feature:hover .icon--chat {
    color: var(--rf-icon-active);
  }
}

/* Custom user-supplied icon (Font Awesome or uploaded SVG). Coloured
   via `color` / `currentColor` so both font icons and inline SVG that
   use `fill="currentColor"` shift on hover. */
.rffeatures-root .icon--custom {
  width: var(--rf-icon-size);
  height: var(--rf-icon-size);
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--rf-icon-rest);
  font-size: var(--rf-icon-size);
  line-height: 1;
  transition: color var(--rf-t-color);
}

.rffeatures-root .icon--custom svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (hover: hover) {
  .rffeatures-root .feature:hover .icon--custom {
    color: var(--rf-icon-active);
  }
}

/* ---------- Tablet ----------
   The 4-up grid still fits iPad landscape and portrait, but the
   desktop title size (30/36) wraps awkwardly when each card narrows
   to ~170-220px. Scale typography + padding down so the grid stays
   readable. */
@media (max-width: 1024px) {
  .rffeatures-root {
    --rf-card-h: 380px;
    --rf-card-pad: 16px;
    --rf-card-body-gap: 16px;
    --rf-icon-size: 28px;
    --rf-icon-size-chat: 30px;
    --rf-list-gap: 12px;
    --rf-section-gap: 32px;

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

  .rffeatures-root .features__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.5px;
  }

  .rffeatures-root .features__subtitle {
    font-size: 16px;
    line-height: 22px;
  }

  .rffeatures-root .feature__title {
    font-size: 22px;
    line-height: 28px;
  }

  .rffeatures-root .feature__text {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .rffeatures-root {
    --rf-section-gap: 32px;
    --rf-header-gap: 16px;
    --rf-list-gap: 12px;

    --rf-card-h: 290px;
    --rf-card-pad: 12px;

    --rf-card-body-gap: 12px;
    --rf-icon-size: 24px;
    --rf-icon-size-chat: 24px;

    --rf-card-text-max: 100%;

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

  .rffeatures-root .features__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.32px;
    max-width: 100%;
  }

  .rffeatures-root .features__subtitle {
    font-size: 14px;
    line-height: 20px;
    max-width: 100%;
  }

  /* Cards switch from equal-width grid to a horizontal scroll row.
     The list aligns with the section content on its LEFT (so the
     first card's edge sits at the section-title left position) and
     extends past the section padding on the RIGHT (so cards slide
     off-screen with no visible right gutter — feels endless). */
  .rffeatures-root .features__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: 0 calc(var(--rf-section-pad-x) * -1);
    padding-bottom: 4px;
  }

  .rffeatures-root .features__list::-webkit-scrollbar {
    display: none;
  }

  /* Card width sized so two full cards plus a small peek of the third
     are visible inside the list's width. The 24px subtracted is the
     two visible gaps (12 + 12) between the first three cards.
     c = (list.width − 24) / 2.07. */
  .rffeatures-root .feature {
    flex: 0 0 calc((100% - 24px) / 2.07);
    scroll-snap-align: start;
  }

  /* Card title weight bumps to Medium on mobile */
  .rffeatures-root .feature__title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }

  .rffeatures-root .feature__text {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rffeatures-root .feature,
  .rffeatures-root .feature__title,
  .rffeatures-root .feature__text,
  .rffeatures-root .icon,
  .rffeatures-root .icon--chat,
  .rffeatures-root .icon--custom {
    transition: none;
  }
}