/* ── Carousel wrapper ──────────────────────────────────────────────────────── */

.rfj-carousel {
  position: relative;
  overflow: hidden;
  /* Isolate layout: changes inside cannot trigger reflow outside. */
  contain: layout style;
  /* height / max-width set by Elementor selectors */
}

/* ── Scrolling track ───────────────────────────────────────────────────────── */

.rfj-carousel-track {
  display: flex;
  will-change: transform;
}

.rfj-carousel--vertical .rfj-carousel-track {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.rfj-carousel--horizontal .rfj-carousel-track {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* ── Individual slides ─────────────────────────────────────────────────────── */

.rfj-carousel-item {
  flex-shrink: 0;
  box-sizing: border-box;
  /* height / padding-gap set by Elementor selectors */
}

.rfj-carousel--vertical .rfj-carousel-item {
  width: 100%;
}

/* ── Slide inner (layout wrapper) ──────────────────────────────────────────── */

.rfj-slide-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Compound slide directions — alignment driven by CSS custom properties
   set per-slide by Elementor (--rfj-align-x, --rfj-align-y). */
.rfj-inner--column {
  flex-direction: column;
  align-items:      var(--rfj-align-x, center);
  justify-content:  var(--rfj-align-y, flex-start);
}

.rfj-inner--row {
  flex-direction: row;
  justify-content:  var(--rfj-align-x, center);
  align-items:      var(--rfj-align-y, flex-start);
}

/* ── Image ─────────────────────────────────────────────────────────────────── */

.rfj-slide-image {
  display: block;
  width: 100%;
  min-height: 0; /* allows shrink inside flex column */
}

.rfj-slide-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* aspect-ratio / object-fit / border-radius set by Elementor selectors */
}

/* Deferred images start invisible and fade in once the src is set and loaded. */
.rfj-slide-image img[data-src] {
  opacity: 0;
}

.rfj-slide-image img:not([data-src]) {
  transition: opacity 0.3s ease;
}

/* Placeholder shown while a deferred image is fetching. */
.rfj-slide-image.rfj-loading {
  background: #f0f0f0;
}

/* ── Icon ──────────────────────────────────────────────────────────────────── */

.rfj-slide-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* font-size / color set by Elementor selectors */
}

.rfj-slide-icon svg {
  display: block;
}

/* ── Text ──────────────────────────────────────────────────────────────────── */

.rfj-slide-text {
  /* typography / color / padding / text-align set by Elementor selectors */
}