/* ===========================
   Basic layout (carousel container)
=========================== */
.glc-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Track holding all items */
.glc-track {
  display: flex;
  align-items: center;
  will-change: transform;
}

/* ===========================
   Individual items (logo containers)
=========================== */
.glc-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* remove fixed width/height so images scale naturally */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
}

/* ===========================
   Images inside containers
   Fit dynamically within container, preserve aspect ratio
=========================== */
.glc-item img {
  max-width: 100%; /* prevent overflow horizontally */
  max-height: 100%; /* prevent overflow vertically */
  width: auto; /* maintain natural aspect ratio */
  height: auto; /* maintain natural aspect ratio */
  object-fit: contain;
  display: block;
  margin: auto; /* center smaller logos */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backface-visibility: hidden;
}

/* ===========================
   Hover visual effects
=========================== */
.hover-grayscale .glc-item img:hover {
  filter: grayscale(100%);
}

.hover-scale .glc-item img:hover {
  transform: scale(1.1);
}

.hover-opacity .glc-item img:hover {
  opacity: 0.7;
}

.hover-none .glc-item img:hover {
  transform: none;
  filter: none;
  opacity: 1;
}

/* ===========================
   Carousel-specific styling examples
   Use gsap-carousel-[id] to target specific carousels
=========================== */

/* Example: Target a specific carousel by ID */
/*
.gsap-carousel-homepage-partners {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.gsap-carousel-homepage-partners .glc-item img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.gsap-carousel-homepage-partners .glc-item img:hover {
    filter: grayscale(0%);
}
*/

/* Example: Different styling for footer carousel */
/*
.gsap-carousel-footer-clients {
    background: #2c3e50;
    padding: 15px;
}

.gsap-carousel-footer-clients .glc-item img {
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.gsap-carousel-footer-clients .glc-item img:hover {
    opacity: 1;
}
*/