/* News Swiper CSS - Mobile horizontal scroll */

/* Desktop: Normal flex layout, all cards visible */
.news-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}

.swiper-news-grid {
  /* overflow: visible; */
  width: 100%;
}

.swiper-news-grid .swiper-wrapper {
  display: flex;
  /* gap: 24px; */
  flex-wrap: nowrap;
  width: 100%;
}

.swiper-news-grid .swiper-slide {
  /* flex: 1; */
  flex: 0 0 calc((100% - 72px) / 4);
  min-width: 0;
  max-width: 330px;
}

.news-grid .news-card {
  /* flex: 1; */
  flex: 0 0 calc((100% - 72px) / 4);
  width: calc((100% - 72px) / 4);
  min-width: calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
  box-sizing: border-box;
  transition: all 0.3s ease;
  animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

@media (min-width: 768px) {
  .swiper-news-grid .swiper-slide {
    /* flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px; */
    flex: 0 0 calc((100% - 54px) / 2.5);
    width: calc((100% - 54px) / 2.5);
    min-width: calc((100% - 54px) / 2.5);
    max-width: calc((100% - 54px) / 2.5);
    box-sizing: border-box;
  }
}

/* Tablet & iPad (769px - 1366px): Horizontal Scroll - Following product-promotion pattern */
@media (min-width: 920px) and (max-width: 1439px) {
  .swiper-news-grid {
    /* overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #D1D1D1 transparent; */
  }

  .swiper-news-grid::-webkit-scrollbar {
    height: 6px;
  }

  .swiper-news-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .swiper-news-grid::-webkit-scrollbar-thumb {
    background: #D1D1D1;
    border-radius: 3px;
  }

  .swiper-news-grid::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
  }

  .swiper-news-grid .swiper-wrapper {
    /* gap: 18px; */
  }

  .swiper-news-grid .swiper-slide {
    /* flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px; */
    flex: 0 0 calc((100% - 72px) / 4);
    width: calc((100% - 72px) / 4);
    min-width: calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
    box-sizing: border-box;
  }
}

@media (min-width: 1440px) {
  .swiper-news-grid .swiper-slide {
    /* flex: 1; */
    /* flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    max-width: 330px; */
  }

  .swiper-news-grid .swiper-slide {
    /* flex: 1; */
    flex: 0 0 calc((100% - 72px) / 4);
    width: calc((100% - 72px) / 4);
    min-width: calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
    box-sizing: border-box;
  }

  .swiper-news-grid .swiper-slide:last-child {
    margin-right: 0 !important;
  }
}

@media (max-width: 768px) {

  .swiper-news-grid {
    width: calc(100% + 32px);
    /* margin-left: -16px;
    margin-right: -16px; */
    /* padding-left: 16px !important; */
    padding-right: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .swiper-news-grid .swiper-slide:last-child {
    /* width: 240px !important; */
    /* margin-right: 18px !important; */
  }
}

/* Mobile: Enable swiper with horizontal scrolling */
@media (max-width: 767px) {
  .swiper-news-grid {
    width: 100vw;
    max-width: 100vw;
    /* margin-left: -16px; */
    /* margin-right: -16px; */
    padding-left: 16px;
    padding-right: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .swiper-news-grid .swiper-wrapper {
    display: flex !important;
    /* gap: 4px !important; */
    gap: 0px !important;
    flex-wrap: unset !important;
    margin: 0;
  }

  /* .swiper-news-grid .swiper-wrapper::after {
    content: '';
    flex: 0 0 8px;
    width: 8px;
  } */

  .swiper-news-grid .swiper-slide {
    flex: 0 0 auto !important;
    width: 240px !important;
    height: auto !important;
    min-width: unset;
    max-width: unset;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .swiper-news-grid .swiper-slide:last-child {
    /* width: 240px !important; */
    /* margin-right: 0 !important; */
  }
}