/* This file is used only by home.html for carousel */
/*
CC 2.0 License Iatek LLC 2018
Attribution required
*/

/*! By default, screen wider than 991px will show 4 slides, no media query is necessary? */

/*! Show 3 slides on md if col-md-4, the 4th slid is off screen and will be rotated in next */
@media (min-width: 768px) and (max-width: 991px) {
    /**  DeepSeek:
      The selector:
      .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item
      targets the fourth carousel item and positions it off-screen to the right. This ensures that the
      carousel can smoothly transition to the next set of 3 items when rotating.

      By using this approach, the carousel maintains a consistent layout and animation, regardless
      of the screen width or the number of items being displayed.
    */
    /*!             1                                2                3                (4)            */
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

/*! Show 2 slides on sm if col-sm-6, the 3rd slide is off screen and will be rotated in next
  DeepSeek: Why do we use (max-width: 767.98px) instead of (max-width: 767.px)?
  Modern devices (especially high-DPI screens like Retina displays) often use fractional pixel values
  for rendering. For example, a device might report a screen width of 767.5px or 767.99px.
  o Using max-width: 767px might miss these fractional values, causing the media query to not apply
  when it should.
  o max-width: 767.98px ensures that even fractional values just below 768px are covered.
*/
@media (min-width: 576px) and (max-width: 767.98px) {
    /*!             1                                2                (3)            */
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

/*! Show 1 slide if the screen is narrower than 576px, the next slide is off screen and will be be rotated in next */
@media (min-width: 575.98px) {
    .carousel-item {
        margin-right: 0;
    }

    /*! show 2 items */
    /*!             1         (2)            */
    .carousel-inner .active + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    /** left or forward direction **/
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must also be positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*! MD Medium   3 Item Slide **/
/*! DeepSeek:
  The previous block (for @media (min-width: 768px) and (max-width: 991px)) prepares the fourth item
  by positioning it off-screen to the right (right: -33.3333%).

  This block complements it by:
    1. Displaying the Third Item:
      1.1 Ensures that the third item is visible when the carousel is idle.
    2. Handling Transitions:
      2.1 Positions the fourth item off-screen to the left or right, depending on the direction of
          the transition.
      2.2 Ensures smooth sliding animations when the carousel rotates.
*/
@media (min-width: 768px) {

    /** Step 1: Show the 3rd Item in the 3-Item Slide
      o This selector ensures that the third item in the carousel is displayed.
      o It targets the third sibling of the active item (.active + .carousel-item + .carousel-item)
        and sets its display property to block.
      o This ensures that the carousel shows 3 items at a time when the screen width is ≥ 768px.
    */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    /** Step 2: Disable Transition for the 3rd Item
      o This selector targets the third item when the carousel is not in transition (i.e., not
        sliding left or right).
      o It disables the transition property for the third item to ensure that it doesn’t animate
        unnecessarily when the carousel is idle.
      o This prevents any unintended visual glitches during transitions.
    */
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    /** Step 3: Position the Next Item for Smooth Transitions
      o This selector targets the next item in the carousel (the one that will slide into view).
      o It sets the position to relative and resets the transform property to translate3d(0, 0, 0).
      o This ensures that the next item is positioned correctly and ready to slide into view.
    */
    .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    /** Step 4: Handle Left (Forward) Direction Transitions
      o This selector targets the fourth item when the carousel is sliding left (forward).
      o It positions the fourth item off-screen to the left (transform: translate3d(-100%, 0, 0))
        so that it can slide into view smoothly.
      o The visibility: visible ensures that the item is visible during the transition.
    */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /** Step 5: Handle Right (Previous) Direction Transitions
      o This selector targets the fourth item when the carousel is sliding right (backward).
      o It positions the fourth item off-screen to the right (transform: translate3d(100%, 0, 0))
        so that it can slide into view smoothly.
      o The visibility: visible and display: block ensure that the item is visible during the
        transition.
    */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}


/*! LG  YC: Large 4 Item Slide **/
@media (min-width: 991px) {
    /*! show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }

    /*! Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /*! left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /*! right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*! LG 6th  -  if you want a carousel with 6 slides.  NOT USED
@media (min-width: 991px) {
*/
/* show 5th and 6th item
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
*/

/* Show 6th item
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      transition: none;
    }
*/

/* show 7th slide for animation when its a 6 slides carousel */
 /*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
        position: absolute;
        top: 0;
        right: -16.666666666%;
        z-index: -1;
        display: block;
        visibility: visible;
  }
  */

/* forward direction > */
  /*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
  */

/* prev direction < last item animation fix */
  /* .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
/*
}
*/