/* ============================================
   FFF – Section Highlight (Homepage)
   Add on SECTION: fff-section-highlight
   Optional: is-left | is-right
   Goal: make one section stand out (subtle, clean)
============================================ */

.et_pb_section.fff-section-highlight{
  position: relative !important;
  overflow: hidden !important;
}

/* Keep content above decoration */
.et_pb_section.fff-section-highlight > .et_pb_row{
  position: relative !important;
  z-index: 2 !important;
}

/* Default side: left */
.et_pb_section.fff-section-highlight:before{
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 0 !important;

  width: 6px !important;
  border-radius: 0 4px 4px 0 !important;

  /* FFF blue, slightly alive */
  background: linear-gradient(180deg,
    rgba(66,103,178,0.95),
    rgba(66,103,178,0.55)
  ) !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

/* Soft halo behind the section (subtle, not “card”) */
.et_pb_section.fff-section-highlight:after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  /* gentle emphasis without changing BG color strongly */
  box-shadow:
    inset 0 0 0 1px rgba(12,18,28,0.06),
    0 10px 26px rgba(15,23,42,0.06) !important;

  border-radius: 4px !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* Right variant */
.et_pb_section.fff-section-highlight.is-right:before{
  left: auto !important;
  right: 0 !important;
  border-radius: 4px 0 0 4px !important;
}

/* Slightly more visible on hover (desktop only) */
@media (hover: hover) and (pointer: fine){
  .et_pb_section.fff-section-highlight:hover:after{
    box-shadow:
      inset 0 0 0 1px rgba(66,103,178,0.16),
      0 14px 34px rgba(15,23,42,0.10) !important;
  }
}

/* Mobile: thinner stripe, tighter offsets */
@media (max-width: 767px){
  .et_pb_section.fff-section-highlight:before{
    top: 10px !important;
    bottom: 10px !important;
    width: 4px !important;
  }

  .et_pb_section.fff-section-highlight:after{
    border-radius: 4px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .et_pb_section.fff-section-highlight:after{
    transition: none !important;
  }
}