/* ==========================================================================
   REPEX MEDIA CAROUSEL — carousel.css
   --------------------------------------------------------------------------
   Every rule is namespaced under .repex-carousel so it cannot leak into
   Blocksy, Elementor or WooCommerce styles — and so their styles cannot
   leak in either.

   Sizing is driven by CSS variables declared on .repex-carousel.
   JavaScript overwrites --repex-gap and --repex-radius from its config,
   so you can change those in ONE place (carousel.js) if you prefer.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ROOT + DESIGN TOKENS
   -------------------------------------------------------------------------- */

.repex-carousel {
  /* --- easy to change --- */
  --repex-card-w   : 340px;      /* card width, desktop                     */
  --repex-card-ar  : 340 / 420;  /* card aspect ratio -> 340x420 on desktop */
  --repex-gap      : 24px;       /* space between cards                     */
  --repex-radius   : 20px;       /* corner radius                           */
  --repex-max      : 1400px;     /* max content width                       */
  --repex-fade     : 90px;       /* width of the soft edge fade             */
  --repex-pad-y    : 26px;       /* breathing room so hover-scale + shadow
                                    are not clipped by overflow:hidden      */
  --repex-bg       : #ecedef;    /* placeholder colour behind a loading card */

  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  /* Isolate paint/layout from the rest of the page for extra performance. */
  contain: layout style;
}

/* Reset the box model only INSIDE our namespace. */
.repex-carousel,
.repex-carousel *,
.repex-carousel *::before,
.repex-carousel *::after {
  box-sizing: border-box;
}

/* Centre the content, cap it at 1400px, keep the section itself full width. */
.repex-carousel-inner {
  max-width: var(--repex-max);
  margin-inline: auto;
  padding: 0;
}


/* --------------------------------------------------------------------------
   2. VIEWPORT — the window that clips the moving strip
   -------------------------------------------------------------------------- */

.repex-viewport {
  position: relative;
  overflow: hidden;                 /* required: hides the off-screen clones */
  padding: var(--repex-pad-y) 0;    /* room for hover scale + shadow          */
  touch-action: pan-y;              /* vertical page scroll still works       */
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

/* Soft fade at both edges — switch off with data-edge-fade="false". */
.repex-carousel[data-edge-fade="true"] .repex-viewport {
  -webkit-mask-image: linear-gradient(to right,
              transparent 0,
              #000 var(--repex-fade),
              #000 calc(100% - var(--repex-fade)),
              transparent 100%);
          mask-image: linear-gradient(to right,
              transparent 0,
              #000 var(--repex-fade),
              #000 calc(100% - var(--repex-fade)),
              transparent 100%);
}

/* Visible keyboard focus ring (only for keyboard users, not mouse clicks). */
.repex-viewport:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: 10px;
}

.repex-carousel.is-dragging .repex-viewport { cursor: grabbing; }


/* --------------------------------------------------------------------------
   3. TRACK — the single element JavaScript animates
   -------------------------------------------------------------------------- */

.repex-track {
  display: flex;
  align-items: stretch;
  gap: var(--repex-gap);
  width: max-content;               /* as wide as its cards need             */
  margin: 0;
  padding: 0;
  list-style: none;

  /* GPU compositing: the browser gives this layer to the graphics card,
     so moving it never triggers layout or paint — only a cheap composite. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}


/* --------------------------------------------------------------------------
   4. CARD
   -------------------------------------------------------------------------- */

.repex-card {
  flex: 0 0 var(--repex-card-w);
  width: var(--repex-card-w);
  aspect-ratio: var(--repex-card-ar);

  /* !important guards against Blocksy/Elementor figure resets */
  margin: 0 !important;
  padding: 0 !important;

  position: relative;
  overflow: hidden;
  border-radius: var(--repex-radius);
  background: var(--repex-bg);
  box-shadow: 0 6px 18px rgba(15, 18, 22, 0.10);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* Media fills the card completely, no letterboxing. */
.repex-card .repex-media {
  display: block;
  width: 100% !important;
  height: 100%;
  max-width: none !important;       /* beats theme "img { max-width:100% }"  */
  margin: 0 !important;
  object-fit: cover;
  border-radius: inherit;

  /* Media ignores the mouse so the drag/swipe gesture is never interrupted
     by the browser's native image-drag behaviour. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Card hover — only on real pointer devices, never on touch. */
@media (hover: hover) and (pointer: fine) {
  .repex-card:hover {
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(15, 18, 22, 0.22);
  }
}

/* While dragging, kill the hover transition so the finger feels 1:1. */
.repex-carousel.is-dragging .repex-card {
  transition: none;
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .repex-carousel {
    --repex-card-w: 280px;
    --repex-fade  : 60px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .repex-carousel {
    --repex-card-w: 240px;
    --repex-gap   : 16px;
    --repex-fade  : 32px;
    --repex-pad-y : 18px;
  }
}


/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   --------------------------------------------------------------------------
   If the visitor has "reduce motion" switched on in their OS, the automatic
   animation is disabled entirely and the carousel becomes a normal,
   finger-friendly scroll strip with snap points.

   The class is added by JavaScript; the media query below is a backup in
   case JavaScript fails to load.
   -------------------------------------------------------------------------- */

.repex-carousel--reduced .repex-track {
  transform: none !important;
  will-change: auto;
}

.repex-carousel--reduced .repex-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  cursor: default;
  scrollbar-width: thin;
}

.repex-carousel--reduced .repex-card {
  scroll-snap-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .repex-track { transition: none !important; }
  .repex-card  { transition: none !important; }
}