.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-906 .elementor-element.elementor-element-71256a6 img{width:100%;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-906 .elementor-element.elementor-element-c73077b.elementor-element{--align-self:center;}.elementor-906 .elementor-element.elementor-element-c73077b{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-906 .elementor-element.elementor-element-c73077b .elementor-share-btn__icon{--e-share-buttons-icon-size:2.4em;}@media(max-width:1024px){ .elementor-906 .elementor-element.elementor-element-c73077b{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){ .elementor-906 .elementor-element.elementor-element-c73077b{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}/* Start custom CSS for theme-post-featured-image, class: .elementor-element-71256a6 */.elementor-906 .elementor-element.elementor-element-71256a6 { display: block; }/* End custom CSS */
/* Start custom CSS *//* ===== CIBLEX — SINGLE CASE STUDY (906) — document Custom CSS =====
   SHARED BLOCK. An identical copy is stored in the Custom CSS of all
   three single templates:
       805  Ciblex Blog Single        (CPT blog,       taxonomy sector)
       907  Ciblex News Single        (CPT news,       taxonomy news-sector)
       906  Ciblex Case Study Single  (CPT case-study, taxonomy case-studies-sector)
   If you change one, change all three.
   Archive: POST-805-907-906-single-templates-custom-css.css
   Do NOT flip this document to draft to edit it — that is what silently
   empties custom_css.
   ======================================================================= */


/* ======================================================================
   RELATED ARTICLES RAIL — drag continuously instead of card-by-card

   WHAT THE RAIL ACTUALLY IS
   Not Swiper, not Slick, not an Elementor carousel. It is native CSS
   scroll-snapping plus a short pointer-drag handler in the site-wide
   snippet (Elementor > Custom Code), which prints at body end:

       .cbx-rel-rail              { overflow-x: auto;
                                    scroll-snap-type: x mandatory;
                                    scroll-behavior: smooth; }
       .cbx-rel-rail.cbx-dragging { scroll-behavior: auto; }

       pointerdown -> rail.classList.add('cbx-dragging')
       pointermove -> rail.scrollLeft = startLeft - deltaX     (1:1, no easing)
       pointerup   -> rail.classList.remove('cbx-dragging')

   THE BUG
   While a drag is in progress the snippet turns smooth scrolling OFF but
   leaves `scroll-snap-type: x mandatory` ON. Mandatory snapping re-snaps
   the scroll offset after EVERY write to scrollLeft, so the 1:1 drag is
   quantised to whole cards — the rail refuses to rest between two cards
   and flicks from one to the next as you drag. That is exactly the
   reported "transition is instant / slides change suddenly / there is no
   smooth movement".

   THE FIX
   Suspend snapping for the duration of the drag only. The rail then
   tracks the pointer continuously; the moment the pointer is released
   .cbx-dragging comes off, `x mandatory` returns, and the browser eases
   to the nearest card under the rail's own `scroll-behavior: smooth` —
   which is the natural, eased snap that was asked for. No JS needed, and
   the snippet is not modified.

   SPECIFICITY
   The snippet prints at BODY END, i.e. later in the document than this
   file (a <link> in the head), so a tie on specificity would go to the
   snippet. Every rule below is therefore written `html body …` to win on
   specificity rather than on order. !important is used only where the
   snippet itself uses it.
   ====================================================================== */

html body .cbx-rel-rail.cbx-dragging {
  scroll-snap-type: none !important;
}

html body .cbx-rel-rail {
  scroll-behavior: smooth;
  /* a fast flick settles in the rail instead of chaining to the page */
  overscroll-behavior-x: contain;
}

/* A drag that begins on a picture or a headline must not turn into the
   browser's own image-drag or into a text selection — both abort the
   drag half way, and are a large part of why the rail felt broken. */
html body .cbx-rel-rail {
  -webkit-user-select: none;
  user-select: none;
}
html body .cbx-rel-rail img {
  -webkit-user-drag: none;
}/* End custom CSS */