/* =============================================
   NB - Portfolio Loop Carousel
   - Hover zoom matches nb-category-section.css
   - Gradient overlay improves "read more" contrast
   ============================================= */

/* Full-bleed (match reference). */
/* Container template (if used) */
.nb-portfolio-carousel--loop,
/* Widget-only setups (common in Elementor pages) */
.elementor-element.elementor-widget-loop-carousel.nb-portfolio-loop-carousel,
.elementor-element.nb-portfolio-loop-carousel {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: none !important;
}

.nb-portfolio-loop-carousel {
  --swiper-slides-gap: 0px !important;
  --e-swiper-slide-gap: 0px !important;
}

/* Remove any slide gap/margins injected by Swiper */
.nb-portfolio-loop-carousel .swiper-wrapper {
  gap: 0 !important;
}

.nb-portfolio-loop-carousel .swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
}

/* If less than 3 items, treat it like a static grid (no carousel UI) */
.nb-portfolio-loop-carousel--static .swiper-wrapper {
  transform: none !important;
  transition-duration: 0ms !important;
  display: grid !important;
  grid-template-columns: repeat(var(--nb-static-columns-mobile, 1), minmax(0, 1fr));
  gap: 0 !important;
}

@media (min-width: 768px) {
  .nb-portfolio-loop-carousel--static .swiper-wrapper {
    grid-template-columns: repeat(var(--nb-static-columns-tablet, 1), minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .nb-portfolio-loop-carousel--static .swiper-wrapper {
    grid-template-columns: repeat(var(--nb-static-columns-desktop, 1), minmax(0, 1fr));
  }
}

.nb-portfolio-loop-carousel--static .swiper-slide {
  width: auto !important;
  margin: 0 !important;
}

.nb-portfolio-loop-carousel--static .swiper-slide-duplicate {
  display: none !important;
}

.nb-portfolio-loop-carousel--static .elementor-swiper-button {
  display: none !important;
}

.nb-portfolio-slide .nb-portfolio-slide__media {
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
  --min-height: 380px !important;
}

@media (max-width: 1024px) {
  .nb-portfolio-slide .nb-portfolio-slide__media {
    --min-height: 320px !important;
  }
}

@media (max-width: 767px) {
  .nb-portfolio-slide .nb-portfolio-slide__media {
    --min-height: 240px !important;
  }
}

/* Make the image fill the media container so text can overlay */
.nb-portfolio-slide .nb-portfolio-slide__media .elementor-widget-image,
.nb-portfolio-slide .nb-portfolio-slide__media .elementor-widget-image .elementor-widget-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.nb-portfolio-slide .nb-portfolio-slide__media .elementor-widget-image a,
.nb-portfolio-slide .nb-portfolio-slide__media .elementor-widget-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.nb-portfolio-slide .nb-portfolio-slide__media .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Linear overlay ON the image (top -> bottom) */
.nb-portfolio-slide .nb-portfolio-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

/* "Read more" overlay text (heading inside the media container).
   Keep link on the image while allowing click-through on the text. */
.nb-portfolio-slide .nb-portfolio-slide__media .nb-portfolio-slide__readmore,
.nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading {
  z-index: 2;
  pointer-events: none;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Ensure "read more" stays white */
.nb-portfolio-slide .nb-portfolio-slide__media .nb-portfolio-slide__readmore,
.nb-portfolio-slide .nb-portfolio-slide__media .nb-portfolio-slide__readmore .elementor-heading-title,
.nb-portfolio-slide .nb-portfolio-slide__media .nb-portfolio-slide__readmore *,
.nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading,
.nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading .elementor-heading-title,
.nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading * {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Only show "Read more" (and allow clicking) for items marked as ready.
   Elementor outputs loop items as `.e-loop-item` and includes `data-elementor-type="loop-item"`. */
.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-readmore,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-readmore,
.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__readmore,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__readmore,
.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__media > .elementor-widget-heading {
  display: none !important;
}

/* If "Read more" is hidden, also remove the gradient overlay so images don't look disabled/dimmed. */
.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__media::after,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide .nb-portfolio-slide__media::after {
  background: none !important;
  opacity: 0 !important;
}

.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a,
.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a *,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a * {
  pointer-events: none !important;
}

.e-loop-item:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a,
[data-elementor-type="loop-item"]:not(.tag-ready):not(.portfolio-category-ready) .nb-portfolio-slide a {
  cursor: default !important;
}

/* Make carousel arrows clickable above slide links */
.nb-portfolio-loop-carousel .elementor-swiper-button,
.nb-portfolio-carousel--loop .elementor-swiper-button {
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Add a little inset so arrows aren't flush to the edges */
.nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-prev,
.nb-portfolio-carousel--loop .elementor-swiper-button-prev {
  left: 24px !important;
}

.nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-next,
.nb-portfolio-carousel--loop .elementor-swiper-button-next {
  right: 24px !important;
}

@media (max-width: 1024px) {
  .nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-prev,
  .nb-portfolio-carousel--loop .elementor-swiper-button-prev {
    left: 16px !important;
  }

  .nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-next,
  .nb-portfolio-carousel--loop .elementor-swiper-button-next {
    right: 16px !important;
  }
}

@media (max-width: 767px) {
  .nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-prev,
  .nb-portfolio-carousel--loop .elementor-swiper-button-prev {
    left: 12px !important;
  }

  .nb-portfolio-loop-carousel.elementor-arrows-position-inside .elementor-swiper-button-next,
  .nb-portfolio-carousel--loop .elementor-swiper-button-next {
    right: 12px !important;
  }
}

/* Hover zoom (same curve/scale as nb-category-section.css) */
@media (hover: hover) {
  .nb-portfolio-slide .nb-portfolio-slide__media:hover img {
    transform: scale(1.05);
  }
}