/* Nest Butler - Offer Carousel Styles */

/* Outer Container (created by JS) - for spacing/padding */
.nb-carousel-container {
  width: 100%;
  position: relative;
}

/* Inner Carousel Wrapper (created by JS) - for mechanics */
.nb-offer-carousel-wrapper {
  position: relative;
  width: 100%;
  padding: 0; /* Arrows positioned outside */
  box-sizing: border-box;
}

/* Position arrows outside the carousel container */
.nb-offer-carousel-wrapper .nb-carousel-nav.nb-prev {
  left: -60px;
}

.nb-offer-carousel-wrapper .nb-carousel-nav.nb-next {
  right: -60px;
}

/* Optional: inside-nav “safe gutter”
   If a specific carousel needs arrows inside the wrapper (but NOT overlapping content),
   add `nb-nav-gutter` to the carousel container (same element as `nb-offer-carousel`).
   This adds horizontal padding to the scroll container and repositions nav buttons into
   that padded area. */
.nb-offer-carousel.nb-nav-gutter.e-con:not([class*="e-grid"]),
.nb-offer-carousel.nb-nav-gutter:not([class*="e-grid"]),
.nb-offer-carousel.nb-nav-gutter.e-con:not([class*="e-grid"]) > .e-con-inner,
.nb-offer-carousel.nb-nav-gutter:not([class*="e-grid"]) > .e-con-inner {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.nb-offer-carousel.nb-nav-gutter ~ .nb-carousel-nav.nb-prev {
  left: 12px !important;
}

.nb-offer-carousel.nb-nav-gutter ~ .nb-carousel-nav.nb-next {
  right: 12px !important;
}

/* =============================================
   FLEXBOX = CAROUSEL MODE (horizontal scroll)
   GRID = STATIC MODE (all cards visible)
   Toggle in Elementor: Container > Container Layout
   ============================================= */

/* Carousel Container - Apply flex to carousel itself OR .e-con-inner */
.nb-offer-carousel.e-con:not([class*="e-grid"]),
.nb-offer-carousel:not([class*="e-grid"]),
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner,
.nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  padding: 8px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.nb-offer-carousel:not([class*="e-grid"])::-webkit-scrollbar,
.nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

/* Cards - Force 3 cards visible in FLEXBOX/CAROUSEL mode */
/* Override Elementor's e-con-full which sets width:100% */
/* Target both: direct children AND children of .e-con-inner */
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con.e-con-full,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
.nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full,
.nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card,
.nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card.e-con-full {
  flex: 0 0 calc((100% - 48px) / 3) !important; /* 3 cards with 2 gaps */
  min-width: calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
  width: calc((100% - 48px) / 3) !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* SHOW-4 MODIFIER - Display 4 cards instead of 3 */
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .nb-offer-card,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con.e-con-full,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .e-con,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
.nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full {
  flex: 0 0 calc((100% - 72px) / 4) !important; /* 4 cards with 3 gaps (24px each) */
  min-width: calc((100% - 72px) / 4) !important;
  max-width: calc((100% - 72px) / 4) !important;
  width: calc((100% - 72px) / 4) !important;
}

/* Grid Layout - Override flexbox styles completely */
.nb-offer-carousel.e-con[class*="e-grid"] {
  display: grid !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
}

.nb-offer-carousel.e-con[class*="e-grid"] > .e-con,
.nb-offer-carousel.e-con[class*="e-grid"] > .e-child,
.nb-offer-carousel.e-con[class*="e-grid"] .nb-offer-card {
  flex: none !important;
  width: 100% !important;
  min-width: auto !important;
  max-width: none !important;
  scroll-snap-align: none !important;
}

/* Ensure consistent heading alignment */
.nb-offer-card .elementor-heading-title,
.nb-offer-card .elementor-widget-heading .elementor-heading-title,
.nb-offer-card .elementor-widget-heading,
.nb-offer-card h1,
.nb-offer-card h2,
.nb-offer-card h3,
.nb-offer-card h4,
.nb-offer-card h5,
.nb-offer-card h6 {
  min-height: 2.5em !important; /* Accommodate 2 lines (22px font * 1.2 line-height * 2) */
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}

/* Ensure cards align at top */
.nb-offer-card,
.nb-offer-card.e-con {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Ensure card children (image, content) are full width */
.nb-offer-card > .elementor-widget,
.nb-offer-card > .elementor-element,
.nb-offer-card > .e-con {
  width: 100% !important;
}

/* =============================================
   ICON SIZING VARIANT (opt-in)
   Add `nb-offer-icons` to the carousel container to prevent icon images
   from scaling to the full card width (Elementor default behaviour).
   ============================================= */

.nb-offer-carousel.nb-offer-icons .nb-offer-card .elementor-widget-image .elementor-widget-container {
  display: flex;
  justify-content: center;
}

.nb-offer-carousel.nb-offer-icons .nb-offer-card .elementor-widget-image img {
  display: block;
  width: min(140px, 40%);
  height: auto;
}

/* =============================================
   HOVER EFFECT - Show background image on hover
   ============================================= */

/* Card setup */
.nb-offer-card {
  /* Avoid !important so components (or Elementor UI) can override positioning when needed. */
  position: relative;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Dark overlay - covers background image by default */
.nb-offer-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000000 !important;
  z-index: 5 !important;
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: inherit;
  pointer-events: none;
}

/* Card content above overlay */
.nb-offer-card > .elementor-widget-wrap,
.nb-offer-card > .e-con-inner,
.nb-offer-card > .elementor-element {
  position: relative !important;
  z-index: 10 !important;
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: opacity;
}

/* HOVER: Fade out overlay to reveal background image
   Works on all devices - touchscreen laptops included
   Touch-only devices use tap-to-reveal via .is-revealed class (JS) */
.nb-offer-card:hover::after {
  opacity: 0 !important;
}

/* HOVER: Fade out all content */
.nb-offer-card:hover > .elementor-widget-wrap,
.nb-offer-card:hover > .e-con-inner,
.nb-offer-card:hover > .elementor-element {
  opacity: 0 !important;
}

/* TOUCH: Tap to reveal image (controlled by JS) */
.nb-offer-card.is-revealed::after {
  opacity: 0 !important;
}

.nb-offer-card.is-revealed > .elementor-widget-wrap,
.nb-offer-card.is-revealed > .e-con-inner,
.nb-offer-card.is-revealed > .elementor-element {
  opacity: 0 !important;
}

/* Disable hover effect in Elementor editor */
.elementor-editor-active .nb-offer-card:hover::after,
.elementor-editor-active .nb-offer-card::after {
  opacity: 0 !important;
  display: none !important;
}

.elementor-editor-active .nb-offer-card:hover > .elementor-widget-wrap,
.elementor-editor-active .nb-offer-card:hover > .e-con-inner,
.elementor-editor-active .nb-offer-card:hover > .elementor-element {
  opacity: 1 !important;
}

/* =============================================
   NO-HOVER MODIFIER - Disable hover effect
   Use: Add nb-no-hover class to carousel container
   ============================================= */

.nb-offer-carousel.nb-no-hover .nb-offer-card::after {
  display: none !important;
}

.nb-offer-carousel.nb-no-hover .nb-offer-card > .elementor-widget-wrap,
.nb-offer-carousel.nb-no-hover .nb-offer-card > .e-con-inner,
.nb-offer-carousel.nb-no-hover .nb-offer-card > .elementor-element {
  opacity: 1 !important;
}

.nb-offer-carousel.nb-no-hover .nb-offer-card:hover > .elementor-widget-wrap,
.nb-offer-carousel.nb-no-hover .nb-offer-card:hover > .e-con-inner,
.nb-offer-carousel.nb-no-hover .nb-offer-card:hover > .elementor-element {
  opacity: 1 !important;
}

/* Navigation Arrows */
.nb-carousel-nav {
  display: none; /* Hidden by default, shown by JS if >3 cards */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
}

.nb-carousel-nav:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #ccc;
}

.nb-carousel-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nb-carousel-nav.nb-prev {
  left: 0;
}

.nb-carousel-nav.nb-next {
  right: 0;
}

.nb-carousel-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Featured Projects Variant (single-slide view + always-visible image) */
.nb-projects-carousel-wrapper {
  padding: 0 48px;
}

.nb-projects-carousel:not([class*="e-grid"]),
.nb-projects-carousel.e-con:not([class*="e-grid"]) {
  gap: 16px !important;
}

.nb-projects-carousel:not([class*="e-grid"]) > .e-con,
.nb-projects-carousel:not([class*="e-grid"]) > .e-child,
.nb-projects-carousel:not([class*="e-grid"]) > .elementor-element,
.nb-projects-carousel:not([class*="e-grid"]) > [data-element_type],
.nb-projects-carousel:not([class*="e-grid"]) .nb-offer-card {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  scroll-snap-align: center !important;
}

.nb-projects-carousel .nb-offer-card::after {
  display: none !important;
}

.nb-projects-carousel .nb-offer-card > .elementor-widget-wrap,
.nb-projects-carousel .nb-offer-card > .e-con-inner,
.nb-projects-carousel .nb-offer-card > .elementor-element {
  opacity: 1 !important;
}

.nb-projects-carousel .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Show navigation when carousel is active */
.nb-carousel-active .nb-carousel-nav {
  display: flex;
}

/* Tablet - Show 2 cards (FLEXBOX/CAROUSEL mode only) */
@media (max-width: 1024px) {
  .nb-offer-carousel:not([class*="e-grid"]),
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner {
    gap: 20px !important;
  }

  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con.e-con-full,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    min-width: calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
    width: calc((100% - 20px) / 2) !important;
    flex-shrink: 0 !important;
  }

  .nb-carousel-nav {
    width: 40px;
    height: 40px;
  }

  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-prev {
    left: -50px;
  }

  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-next {
    right: -50px;
  }

  /* nb-show-4 on tablet - show 2 cards */
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con.e-con-full,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-show-4:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    min-width: calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
    width: calc((100% - 20px) / 2) !important;
  }
}

/* Mobile - Show 2 cards (FLEXBOX/CAROUSEL mode only) */
@media (max-width: 767px) {
  .nb-offer-carousel:not([class*="e-grid"]),
  .nb-offer-carousel:not([class*="e-grid"]) > .e-con-inner {
    gap: 16px !important;
  }

  /* Match exact specificity of desktop rules - 2 cards with 1 gap */
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full,
  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card.e-con-full {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    min-width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* On mobile/tablet, position arrows inside to avoid overflow */
  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-prev {
    left: 10px;
  }

  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-next {
    right: 10px;
  }
}

/* Small mobile - Show 1 card (very narrow screens) */
@media (max-width: 480px) {
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con.e-con-full,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full,
  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel:not([class*="e-grid"]) > .nb-offer-card.e-con-full {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: center !important;
  }

  .nb-carousel-nav {
    width: 36px;
    height: 36px;
  }

  .nb-carousel-nav svg {
    width: 14px;
    height: 14px;
  }

  /* On mobile, arrows inside since no space outside */
  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-prev {
    left: 10px;
  }

  .nb-offer-carousel-wrapper .nb-carousel-nav.nb-next {
    right: 10px;
  }
}