/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="featured-project-slider"] {}

/* default slides */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide {
  transition: transform 0.4s, opacity 0.4s, margin 0.4s;
  opacity: 0.6;
  width: 450px !important;
  margin: 0 15px;
  position: relative;
  top: 52px;
}

section[data-module="featured-project-slider"] .custom-swiper-nav {
    width: 60px;
    height: 60px;
}

section[data-module="featured-project-slider"] .custom-swiper-nav img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
/* Remove default Swiper arrow icon */
section[data-module="featured-project-slider"] .swiper-button-prev::after,
section[data-module="featured-project-slider"] .swiper-button-next::after {
    display: none !important;
}


section[data-module="featured-project-slider"] .swiper-button-prev.custom-swiper-nav {
  position: absolute;
  left: 408px;
}

/* Remove default Swiper button effects */
section[data-module="featured-project-slider"] .custom-swiper-nav,
section[data-module="featured-project-slider"] .custom-swiper-nav *,
section[data-module="featured-project-slider"] .swiper-button-prev,
section[data-module="featured-project-slider"] .swiper-button-next {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent focus / active blue overlay */
section[data-module="featured-project-slider"] .custom-swiper-nav:focus,
section[data-module="featured-project-slider"] .custom-swiper-nav:active,
section[data-module="featured-project-slider"] .custom-swiper-nav img:focus,
section[data-module="featured-project-slider"] .custom-swiper-nav img:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent image drag / selection highlight */
section[data-module="featured-project-slider"] .custom-swiper-nav img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}


section[data-module="featured-project-slider"] .swiper-slide .slide-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(4, 67, 134, 0) 0%,
        rgba(4, 67, 134, 0) 45%,
        rgba(4, 67, 134, 0.6) 70%,
        rgba(4, 67, 134, 1) 100%
    );
}

/* hover effect (non-active) */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide:hover {
  transform: translateY(-8px);
  opacity: 0.85;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

/* active (center) slide */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide-active {
  opacity: 1;
  z-index: 2;
  margin: 0 15px;
  width: 600px !important;
  height: auto;
  position: relative;
  top: 4px;
  transform: translateY(-4px);
}

/* ZOOM-IN EFFECT FOR ACTIVE IMAGE */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide-active img {
  transform: scale(1.06);
  transition: transform 0.6s ease;
}

/* For non-active images (normal scale) */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide img {
  transition: transform 0.6s ease;
  transform: scale(1);
}

/* container <a> */
section[data-module="featured-project-slider"] .project-carousel a.slide-inner {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}

/* overlay */
section[data-module="featured-project-slider"] .project-carousel .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: #fff;
  text-align: center;
  height: 150px;
  transition: bottom 0.4s ease;
	z-index: 1;
}

section[data-module="featured-project-slider"] .project-carousel .swiper-slide.swiper-slide-active .overlay {
  bottom: 24px;
}

/* Text styles */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #fff;
  line-height: 1.2;
  transition: all 0.3s ease;
}

section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay p {
  font-size: 16px;
  line-height: 1.5;
  transition: all 0.3s ease;
}

/* Active text */
section[data-module="featured-project-slider"] .project-carousel .swiper-slide.swiper-slide-active .overlay h3 {
  font-size: 24px;
}

section[data-module="featured-project-slider"] .project-carousel .swiper-slide.swiper-slide-active .overlay p {
  font-size: 18px;
  margin: 5px 0 0;
}


/* ===============================
     RESPONSIVE (≤1400px)
================================ */
@media (max-width: 1400px) {

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide {
    width: 350px !important;
    top: 45px;
  }

  section[data-module="featured-project-slider"] .fl-module > .fl-module-content {
    margin-left: -399px;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide-active {
    width: 500px !important;
    top: 10px;
  }

  section[data-module="featured-project-slider"] .project-carousel .overlay h3 {
    font-size: 20px;
  }

  section[data-module="featured-project-slider"] .project-carousel .overlay p {
    font-size: 16px;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay h3 {
    font-size: 16px;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay p {
    font-size: 14px;
  }
}

@media (max-width: 1080px) {
section[data-module="featured-project-slider"] .swiper-button-prev.custom-swiper-nav {
  left: 95px;
}
}

@media (max-width: 810px) {
section[data-module="featured-project-slider"] .swiper-button-prev.custom-swiper-nav {
  left: 295px;
}
}

/* ===================================
     MOBILE (≤480px)
=================================== */
@media (max-width: 480px) {

  section[data-module="featured-project-slider"] .project-carousel {
    overflow: hidden;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
    top: 0;
    opacity: 0.6;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide-active {
    width: 100% !important;
    opacity: 1;
    top: 0;
  }

  /* remove hover movement on mobile */
  section[data-module="featured-project-slider"] .project-carousel .swiper-slide:hover {
    transform: none;
  }

  /* reduce shadow on mobile */
  section[data-module="featured-project-slider"] .project-carousel .swiper-slide,
  section[data-module="featured-project-slider"] .project-carousel .swiper-slide-active {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
  }

  section[data-module="featured-project-slider"] .project-carousel .overlay {
    height: 132px;
    padding: 15px;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay h3 {
    font-size: 18px !important;
  }

  section[data-module="featured-project-slider"] .project-carousel .swiper-slide .overlay p {
    font-size: 16px !important;
  }

  section[data-module="featured-project-slider"] .project-carousel .overlay p {
    font-size: 14px;
  }
  section[data-module="featured-project-slider"] .swiper-button-prev.custom-swiper-nav {
    left: 5px;
    top: 230px;
	  width: 40px;
  }
  section[data-module="featured-project-slider"] .swiper-button-next.custom-swiper-nav {
  top: 230px;
	  width: 40px;
}
}