/* ========================================================================
   Global
   ======================================================================== */

.main__inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 935px;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media not all and (min-width: 768px) {
    .main__inner {
        padding: 0.75rem;
        padding-top: 3.5rem;
    }
}

/* ========================================================================
   Styles Item Show
   ======================================================================== */

.item .item-images {
    position: relative;
    width: 100%;
    max-height: 400px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.item-images ul.item-slideshow-images {
    width: 100%;
    height: 325px;
    max-height: 400px;
}

.item-images .item-img {
    max-width: 100%;
    width: calc(100%);
    height: 100%;
    top: 0;
}

.item-images .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    inset-inline-start: 0;
    top: 0;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}

/* Desktop */
@media (min-width: 768px) {
    .item .item-images {
        max-height: 500px;
        overflow: hidden;
    }

    .item-images ul.item-slideshow-images {
        width: 100%;
        height: 100%;
    }

    .item-images .item-img img {
        width: 100%;
        height: 100%;
        object-position: center;
        inset-inline-start: 0;
        top: 0;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        object-fit: contain !important;
        background-position: 50% !important;
    }
}

/* ========================================================================
   Explore gallery Layout
   ======================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.gallery a {
  display: block;
}

.gallery__card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

.gallery__card  a {
  height: 100%;
  width: 100%;
}

.card__image {
  position: relative;
  aspect-ratio: 2.5/3;
  height: 100%;
  width: 100%;
}

@media (min-width: 640px) {
  .card__image {
    height: 13rem;
  }
}

@media (min-width: 1024px) {
  .card__image {
    height: 15rem;
  }
}

.card__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .gallery .gallery__card:nth-child(3),
    .gallery .gallery__card:nth-child(6),
    .gallery .gallery__card:nth-child(13),
    .gallery .gallery__card:nth-child(16),
    .gallery .gallery__card:nth-child(23),
    .gallery .gallery__card:nth-child(26) {
    grid-row: span 2 / span 2;
  }
}

.gallery .gallery__card:nth-child(3)   .card__image ,
    .gallery .gallery__card:nth-child(6)   .card__image ,
    .gallery .gallery__card:nth-child(13)  .card__image ,
    .gallery .gallery__card:nth-child(16)  .card__image ,
    .gallery .gallery__card:nth-child(23)  .card__image ,
    .gallery .gallery__card:nth-child(26)  .card__image {
  height: 100%;
}

/* ========================================================================
  Styles Videos Horizontal
 ========================================================================== */

/* Adaptation CSS pour scroll vertical */
#leukeVideos {
    display: grid;
    scroll-snap-type: y mandatory;
    overflow-y: auto; /* ou scroll si tu préfères */
    height: 87vh;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;     /* Firefox */
}

/* Cacher la scrollbar sur Chrome, Edge, Safari */
#leukeVideos::-webkit-scrollbar {
    display: none;
}

.video {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 87vh;
    display: flex;
    justify-content: center;
    align-items: center !important;
}

.video-container {
    position: relative;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
}

.home-video {
    height: 87vh;
    /* height: calc(87vh - 79px); */
    width: 100%;
    position: relative;
    padding: 5px 0 5px 0;
}

.home-video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.home-video .actions-button {
    margin-bottom: 40px;
}

.video-content-redius {
    border-radius: 1rem;
}

.video-content-redius .legende {
    max-width: 80% !important;
    max-height: 6rem !important;
}

/* Format Desktop */
@media (min-width: 768px) {
    #leukeVideos {
        height: 87vh;
    }

    .video {
        height: 87vh;
    }

    .home-video {
        height: 87vh;
        padding: 0px 0 5px 0;
    }

    .home-video .actions-button {
        margin-bottom: 20px;
    }

    .video-content-redius .legende {
        max-width: 100% !important;
        max-height: 6rem !important;
    }

    .home-video video {
        border-radius: 1rem;
    }

    .video-content-redius {
        border-radius: 1rem;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .home-video .actions-button .action-text {
        color: #ffffff !important;
    }
}

/* Très petit mobile (max 480px) */
@media (max-width: 480px) {
    .home-video .actions-button .action-text {
        color: #ffffff !important;
    }
}