/*
 * Footer Awards Carousel Styles
 * Based on Angular implementation
 */

/* Awards Container */
.awards-container {
  max-width: 85%;
  margin: auto;
}

/* Awards Images */
.awards-images {
  width: 200px;
  align-content: space-evenly;
}

/* Awards Title Styling */
.awards-title {
  font-family: Comfortaa, sans-serif;
  text-align: center;
  margin-bottom: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive Typography */
@media (min-width: 1024px) {
  .awards-title {
    font-size: 2.25rem;
    /* h1 equivalent */
    line-height: 2.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .awards-title {
    font-size: 1.875rem;
    /* h2 equivalent */
    line-height: 2.25rem;
  }
}

@media (max-width: 767px) {
  .awards-title {
    font-size: 1.25rem;
    /* h4 equivalent */
    line-height: 1.75rem;
  }
}

/* Awards Carousel Container */
.awards-carousel [data-carousel-track] {
  transition: transform 0.5s ease-in-out;
}

/* Award item styling - center items in carousel */
.awards-carousel-item {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: auto;
}

/* Responsive item widths - control how many items show at once */
@media (max-width: 1023px) {

  /* Mobile and tablet: show 1 item at a time */
  .awards-carousel-item {
    width: 100%;
    min-width: 100%;
  }
}

@media (min-width: 1024px) {

  /* Desktop: show 5 items at a time (20% each) */
  .awards-carousel-item {
    width: 20%;
    min-width: 20%;
  }
}

/* Award item hover effect */
.awards-carousel-item img {
  transition: transform 0.3s ease;
}

.awards-carousel-item:hover img {
  transform: scale(1.05);
}

/* Carousel Dots Styling */
.awards-carousel [data-carousel-dot] {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.awards-carousel [data-carousel-dot]::before {
  font-size: 36px;
  line-height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  content: "•";
  text-align: center;
  opacity: 0.5;
  color: #f1f1f1;
}

.awards-carousel [data-carousel-dot].active::before {
  opacity: 1;
  color: #1d52e1;
}

/* Hide dots on desktop when there are fewer than 7 awards */
@media (min-width: 768px) {
  .hide-dots-desktop [data-carousel-dot] {
    display: none;
  }
}