/* =========================================================
   KAZI APPROVED SECTION
   Dedicated styles for the Kazi Approved carousel section
   ========================================================= */

/* Section Container */
.approved-cover-special {
  background: #1A1818;
  width: 100%;
  padding-bottom: 0;
}

/* Title Wrapper */
.approved-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  border-top: 1px solid #424242;
  padding-top: 80px; /* Increased for more space at top */
  padding-bottom: 30px !important; /* Small breathing room below title */
  margin-bottom: 10px !important; /* Small gap between title and content */
}

/* Section Title */
.approved-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 40px; /* More space below title to push image down */
  padding-bottom: 10px;
  text-transform: uppercase;
  color: #FFF;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
}

/* Swiper Container */
.approved-cover-special .digital-cover-swiper {
  overflow: hidden;
  margin-top: -40px; /* Move content up to center it better */
  margin-bottom: 0;
}

/* Swiper Slide */
.approved-cover-special .swiper-slide-digital {
  max-width: 500px;
  width: 100%;
  cursor: url(../img_bg/drag.svg), auto;
}

/* Swiper Wrapper */
.approved-cover-special .swiper-wrapper-digital {
  background: inherit;
  cursor: url(../img_bg/drag.svg), auto;
}

/* Card Container */
.approved-card {
  background: #1A1818;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
  padding: 0 20px 20px 20px;
  margin-top: 0 !important;
}

/* Card Image */
.approved-card img {
  width: 90%;
  height: auto;
  min-height: 350px;
  max-height: 500px;
  object-fit: contain;
  margin-top: 0 !important;
  margin-bottom: 15px;
}

/* Category Label */
.approved-card .approved-category {
  color: #FFF;
  font-family: 'General Sans', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.5;
  line-height: 110%;
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
}

.approved-card .approved-category:hover {
  opacity: 1;
  background: transparent !important;
}

/* Article Title */
.approved-card .approved-article-title {
  color: #FFF;
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  margin-bottom: 60px; /* Space between article title and dots */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.approved-card .approved-article-title:hover {
  transition: .5s;
  color: var(--red, #9E2929);
}

/* Custom Kazi Approved Pagination Dots - Clean Minimalist Style */
.kazi-approved-pagination {
  display: none;
  border-top: 1px solid #424242;
  width: 100%;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  line-height: 0;
}

.kazi-approved-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
  margin: 0 6px;
  border: none;
}

.kazi-approved-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.kazi-approved-dot.active {
  background: #fff;
  transform: none;
  box-shadow: none;
}

/* View All Button Spacing - Keep close to pagination dots */
.approved-cover-special .kazi-approved-pagination + .gallery-view-button {
  margin-top: 0 !important;
  border-top: 1px solid #424242;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Extra Large Screens (1920px+) */
@media (min-width: 1920px) {
  .approved-title {
    font-size: 60px;
  }

  .approved-card .approved-category {
    font-size: 21px;
  }

  .approved-card .approved-article-title {
    font-size: 40px;
  }
}

/* Large Screens (1440px - 1599px) */
@media (min-width: 1440px) and (max-width: 1599px) {
  .approved-title-wrap {
    padding-top: 50px;
    padding-bottom: 35px;
  }

  .approved-title {
    font-size: 45px;
  }

  .approved-card .approved-category {
    font-size: 16px;
  }

  .approved-card .approved-article-title {
    font-size: 28px;
  }
}

/* Medium Screens (up to 1439px) */
@media (max-width: 1439px) {
  .approved-title-wrap {
    padding-top: 45px;
    padding-bottom: 30px;
  }

  .approved-title {
    font-size: 40px;
  }

  .approved-cover-special .swiper-slide-digital {
    width: 80%;
  }

  .approved-card .approved-article-title {
    font-size: 20px;
  }
}

/* Tablets (up to 1023px) */
@media (max-width: 1023px) {
  .approved-title-wrap {
    padding-top: 40px;
    padding-bottom: 25px;
  }

  .approved-title {
    font-size: 32px;
    text-align: center;
  }

  .approved-cover-special .swiper-slide-digital {
    width: 60%;
  }

  .approved-card img {
    margin-bottom: 5px;
    min-height: 300px;
    max-height: 500px;
  }

  .approved-card .approved-article-title {
    font-size: 18px;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .approved-title-wrap {
    padding-top: 40px; /* More top space on mobile */
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .approved-title {
    font-size: 32px; /* Larger heading on mobile */
    text-align: center;
    padding: 0 20px;
  }

  .approved-cover-special .swiper-slide-digital {
    width: 80%;
  }

  .approved-card {
    padding: 0 15px 20px 15px;
  }

  .approved-card img {
    width: 100%;
    margin-bottom: 10px;
    min-height: 250px;
    max-height: 400px;
  }

  .approved-card .approved-category {
    font-size: 16px; /* Larger category text on mobile */
  }

  .approved-card .approved-article-title {
    font-size: 16px; /* Smaller for better mobile fit */
    margin-bottom: 40px; /* Less space on mobile */
  }

  /* Show custom pagination dots on mobile */
  .kazi-approved-pagination {
    display: flex !important;
  }
}