/* ===== FAULKNER MAGAZINE SLIDER STYLING ===== */

/* Main slider container - clip on all sizes so swipe doesn't move the page */
.faulkner-magazine-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0 40px 0; /* Added top padding for hover expansion */
  overflow-x: hidden;
}

/* Responsive top padding for different screen sizes */
@media (min-width: 1200px) {
  .faulkner-magazine-slider {
    padding: 60px 0 40px 0; /* More top padding on larger screens */
  }
}

@media (min-width: 1400px) {
  .faulkner-magazine-slider {
    padding: 70px 0 40px 0; /* Even more top padding on very large screens */
  }
}

/* Slider container - no overflow:hidden here so nav buttons (positioned below) stay visible */
.magazine-slider-container {
  position: relative;
  width: 100%;
}

/* Slider track - horizontal container for items */
.magazine-slider-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
  max-width: 100%;
  align-items: flex-start; /* Align items to top to maintain consistent height */
  min-height: 510px; /* Ensure consistent height */
  padding-top: 30px;
}

/* Individual magazine slider item */
.magazine-slider-item {
  flex: 0 0 auto;
  width: 33.333%; /* 3 items visible by default */
  padding: 0 15px;
  box-sizing: border-box;
}

/* Magazine thumbnail container */
.magazine-thumbnail {
  position: relative;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.magazine-thumbnail:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Style the DearFlip thumbnail */
.magazine-thumbnail ._df_thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: all 0.3s ease;
}

.df-popup-thumb .df-book-wrapper {
  display: flex;
}

/* Navigation arrows */
.magazine-slider-prev,
.magazine-slider-next {
  position: absolute;
  bottom: -30px; /* Closer to the magazines */
  background: transparent;
  border: none;
  width: 17px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0;
}

.magazine-slider-prev {
  left: calc(50% - 50px); /* Position 50px left of center */
  background-image: url('../img/arrow-left.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.magazine-slider-next {
  left: calc(50% + 10px); /* Position 10px right of center */
  background-image: url('../img/arrow-right.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.magazine-slider-prev:hover {
  opacity: 0.8; /* Only change opacity on hover */
}

.magazine-slider-next:hover {
  opacity: 0.8; /* Only change opacity on hover */
}

.magazine-slider-prev:disabled,
.magazine-slider-next:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.magazine-slider-prev:disabled:hover {
  opacity: 0.3; /* Only change opacity when disabled */
}

.magazine-slider-next:disabled:hover {
  opacity: 0.3; /* Only change opacity when disabled */
}

/* Responsive design */
@media (max-width: 1024px) {
  .magazine-slider-item {
    width: 50%; /* Show 2 items on tablet */
  }

  .magazine-thumbnail {
    height: 350px;
  }

  .magazine-slider-prev {
    left: 10px;
  }

  .magazine-slider-next {
    right: 10px;
  }
}

@media (max-width: 981px) {
  .magazine-slider-item {
    width: 50%; /* Show 2 items on tablet */
  }

  .magazine-thumbnail {
    height: 300px;
  }

  .magazine-slider-prev,
  .magazine-slider-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .magazine-slider-prev {
    left: calc(50% - 50px); /* Match desktop spacing for tablet */
  }

  .magazine-slider-next {
    left: calc(50% + 10px); /* Match desktop spacing for tablet */
  }
}

@media (max-width: 768px) {
  .faulkner-magazine-slider {
    height: 600px;
    padding: 30px 0 50px 0; /* More bottom padding for mobile */
  }

  .magazine-thumbnail {
    height: 280px;
  }

  .magazine-slider-prev,
  .magazine-slider-next {
    width: 35px;
    height: 35px;
    bottom: -40px; /* Move arrows further down on mobile */
  }

  .magazine-slider-prev {
    left: calc(50% - 50px); /* Match desktop spacing */
  }

  .magazine-slider-next {
    left: calc(50% + 10px); /* Match desktop spacing */
  }
}

@media (max-width: 480px) {
  .faulkner-magazine-slider {
    padding: 20px 0;
  }

  .magazine-slider-item {
    padding: 0 10px;
    width: 100%;
  }

  .magazine-thumbnail {
    height: 250px;
  }

  .magazine-slider-prev {
    left: calc(50% - 50px); /* Match desktop spacing */
  }

  .magazine-slider-next {
    left: calc(50% + 10px); /* Match desktop spacing */
  }
}

/* Loading state */
.faulkner-magazine-slider.loading .magazine-slider-track {
  opacity: 0.5;
}

/* Animation for smooth transitions */
.magazine-slider-item {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure DearFlip thumbnails are properly styled */
.magazine-thumbnail ._df_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Override any DearFlip default styles that might interfere */
.magazine-thumbnail ._df_thumb {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}