/* ============================================
   ImageSlider Component Styles - 1:4:4:1 Grid Layout
   ============================================ */

.image-slider {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 1rem);
  width: 100%;
}

/* Grid Section - 1:4:4:1 Layout */

.image-slider__grid {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr 1fr;
  gap: var(--spacing-sm, 1rem);
  width: 100%;
  grid-auto-rows: 1fr;
}

.image-slider__image {
  width: 100%;
  aspect-ratio: var(--image-aspect-ratio, 16/9);
  object-fit: cover;
  display: block;
}

.image-slider__image--center-left,
.image-slider__image--center-right {
  aspect-ratio: var(--image-aspect-ratio, 16/9);
}

.image-slider__image--left,
.image-slider__image--right {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
}

.image-slider__image {
  cursor: pointer;
  transition: opacity var(--transition-base, 300ms ease-in-out);
}

.image-slider__image:hover {
  opacity: 0.9;
}

/* Indicators Section */

.image-slider__indicators {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr 3fr 1fr;
  gap: var(--spacing-xs, 0.5rem);
  width: 100%;
}

.image-slider__indicator-group {
  display: flex;
  gap: 2px;
}

.image-slider__indicator-group:nth-child(1) {
  grid-column: 3;
}

.image-slider__indicator-group:nth-child(2) {
  grid-column: 4;
}

.image-slider__indicator {
  flex: 1;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition-base, 300ms ease-in-out);
}

.image-slider__indicator:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.image-slider__indicator.active {
  background-color: var(--color-primary, #003366);
}

/* Responsive */

@media (max-width: 768px) {
  .image-slider {
    gap: var(--spacing-sm, 1rem);
  }

  .image-slider__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs, 0.5rem);
  }

  .image-slider__image--left,
  .image-slider__image--right {
    display: none;
  }

  .image-slider__indicators {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .image-slider__indicator-group:nth-child(1),
  .image-slider__indicator-group:nth-child(2) {
    grid-column: 1;
  }
}