@media (min-width: 992px) {
  /* Gallery component styles for novogradnja single pages */
  .nc-sidebar-title--gallery {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }

  .single-novogradnja .sidebar .nc-sidebar-title--gallery {
    margin-top: 20px !important;
  }

  .single-novogradnja .sidebar .ngg-galleryoverview,
  .single-novogradnja .sidebar .ngg-gallery {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Desktop-only: nudge the sidebar NextGEN gallery down so its top
     lines up with the featured image top. Adjust value if needed. */
  .single-novogradnja .sidebar .ngg-galleryoverview,
  .single-novogradnja .sidebar .ngg-gallery {
    margin-top: 60px !important;
  }

  /* If gallery immediately follows the featured image, ensure spacing */
  .entry-thumb + .nc-sidebar-title--gallery {
    margin-top: 20px !important;
  }
}


/* Shared variables: slide height and section gap. Declared on the page
  root selector so sidebar and content can reference the same values. */
.single-novogradnja {
  --nc-gallery-slide-height: 400px; /* desktop default */
  --nc-section-gap: 20px; /* consistent vertical gap between sections */
}

/* Default: ensure main info panel has the standard top gap when there
   is no featured image preceding it. If a featured image exists, the
   .entry-thumb rules set margin-bottom and the following selector
   overrides this to avoid doubled spacing. */
.single-novogradnja .nc-main-info-panel {
  margin-top: 32px !important;
}

/* Make gallery thumbnails fill their boxes and crop to avoid empty space.
  Uses object-fit + aspect-ratio with a legacy fallback. Scoped to the
  sidebar on novogradnja single pages to avoid global side effects. */
.single-novogradnja .sidebar .ngg-galleryoverview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.single-novogradnja .sidebar .ngg-gallery-thumbnail {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3; /* change to 16/9 or 1/1 to taste */
}

.single-novogradnja .sidebar .ngg-gallery-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.single-novogradnja .sidebar .ngg-gallery-thumbnail img,
.single-novogradnja .sidebar .ngg-gallery-thumbnail a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1/1) {
  .single-novogradnja .sidebar .ngg-gallery-thumbnail {
    height: 0;
    padding-top: 75%; /* 4/3 -> 75% ; adjust if using different ratio */
  }
  .single-novogradnja .sidebar .ngg-gallery-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* FORCE uniform thumbnail size regardless of original image aspect ratio.
   Broaden selectors to cover NextGEN's various markup patterns and
   provide an easy size variable. */
.single-novogradnja .sidebar {
  --nc-gallery-item-size: 160px;
}

/* Ensure featured image at least matches gallery slideshow height */
.single-novogradnja .entry-thumb {
  min-height: var(--nc-gallery-slide-height);
  height: auto !important;
  overflow: hidden;
}

/* Use preceding-element margin to create the section gap consistently
   (gallery/map and featured image/main info). */
.single-novogradnja .entry-thumb {
  margin-bottom: var(--nc-section-gap) !important;
}

.single-novogradnja .entry-thumb img,
.single-novogradnja .entry-thumb picture img {
  width: 100% !important;
  height: 100% !important;
  min-height: var(--nc-gallery-slide-height) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Handle alternate featured image markup and enforce container height
   so it never becomes shorter than the gallery slideshow. These
   stronger rules counter inline styles from plugins or theme. */
.single-novogradnja .entry-thumb .wp-post-image,
.single-novogradnja .entry-thumb .post-thumbnail img,
.single-novogradnja .entry-thumb picture,
.single-novogradnja .entry-thumb figure {
  height: 100% !important;
  min-height: var(--nc-gallery-slide-height) !important;
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* Keep main info panel spacing consistent with map<->gallery gap */
.entry-thumb + .nc-main-info-panel,
.entry-thumb ~ .nc-main-info-panel {
  margin-top: 0 !important; /* spacing comes from entry-thumb margin-bottom */
}

/* Make gallery -> map gap consistent */
.single-novogradnja .sidebar .ngg-galleryoverview,
.single-novogradnja .sidebar .ngg-gallery {
  margin-bottom: var(--nc-section-gap) !important;
}

/* Ensure the gallery container is never shorter than the featured image
   so the map (location) starts lined up with the main info panel. */
.single-novogradnja .sidebar .ngg-galleryoverview,
.single-novogradnja .sidebar .ngg-gallery {
  min-height: var(--nc-gallery-slide-height) !important;
  display: block !important;
}

.single-novogradnja .sidebar .nc-map-wrapper {
  /* Base: spacing comes from gallery margin-bottom. When the gallery
     is smaller than the featured image (thumbnails view), increase the
     map top margin so the map's top lines up with the main info panel.
     Calculation: gap + (full-slide-height - gallery-thumbnail-height).
     Use max() so we never go below the standard gap. */
  margin-top: max(var(--nc-section-gap), calc(var(--nc-section-gap) + var(--nc-gallery-slide-height) - var(--nc-gallery-item-size))) !important;
}

.single-novogradnja .sidebar .ngg-galleryoverview,
.single-novogradnja .sidebar .ngg-gallery {
  grid-auto-rows: auto; /* allow rows to size to content */
}

.single-novogradnja .sidebar li.ngg-gallery-thumbnail,
.single-novogradnja .sidebar .ngg-gallery-thumbnail,
.single-novogradnja .sidebar .ngg-gallerybox,
.single-novogradnja .sidebar .ngg-gallery-thumb,
.single-novogradnja .sidebar .ngg-gallery-image,
.single-novogradnja .sidebar .ngg-image {
  width: 100% !important;
  height: var(--nc-gallery-item-size) !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

.single-novogradnja .sidebar li.ngg-gallery-thumbnail a,
.single-novogradnja .sidebar .ngg-gallerybox a,
.single-novogradnja .sidebar .ngg-gallery-thumb a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.single-novogradnja .sidebar li.ngg-gallery-thumbnail img,
.single-novogradnja .sidebar .ngg-gallery-thumbnail img,
.single-novogradnja .sidebar .ngg-gallerybox img,
.single-novogradnja .sidebar .ngg-gallery-thumb img,
.single-novogradnja .sidebar .ngg-gallery-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Small screens: reduce thumbnail size */
@media (max-width: 600px) {
  .single-novogradnja .sidebar {
    --nc-gallery-item-size: 120px;
  }
}

/* Sidebar slideshow: force a uniform slide box and make images cover it.
  Targets NextGEN slideshow/gallery markup variations used in the sidebar. */

.single-novogradnja .sidebar .ngg-slideshow,
.single-novogradnja .sidebar .ngg-gallerybox,
.single-novogradnja .sidebar .ngg-galleryoverview .ngg-slideshow,
.single-novogradnja .sidebar .ngg-galleryoverview .ngg-gallerybox {
  height: var(--nc-gallery-slide-height) !important;
  max-height: var(--nc-gallery-slide-height) !important;
  overflow: hidden !important;
  position: relative !important;
}

.single-novogradnja .sidebar .ngg-slideshow img,
.single-novogradnja .sidebar .ngg-gallerybox img,
.single-novogradnja .sidebar .ngg-galleryoverview img,
.single-novogradnja .sidebar .ngg-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 600px) {
  .single-novogradnja {
    --nc-gallery-slide-height: 300px;
    --nc-section-gap: 14px;
  }
}

/* Aggressive slideshow normalization: handle different NextGEN markup patterns. */
.single-novogradnja .sidebar .ngg-slideshow .slides,
.single-novogradnja .sidebar .ngg-slideshow .slides li,
.single-novogradnja .sidebar .ngg-slideshow .slide,
.single-novogradnja .sidebar .ngg-gallerybox,
.single-novogradnja .sidebar .ngg-gallerybox .ngg-image {
  height: var(--nc-gallery-slide-height) !important;
  max-height: var(--nc-gallery-slide-height) !important;
  overflow: hidden !important;
  position: relative !important;
}

.single-novogradnja .sidebar .ngg-slideshow .slides li img,
.single-novogradnja .sidebar .ngg-slideshow img,
.single-novogradnja .sidebar .ngg-gallerybox img,
.single-novogradnja .sidebar .ngg-galleryoverview img,
.single-novogradnja .sidebar .ngg-image img,
.single-novogradnja .sidebar picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
}

/* Ensure slide containers use flex so child images stretch to full height */
.single-novogradnja .sidebar .ngg-slideshow .slides,
.single-novogradnja .sidebar .ngg-slideshow .slides li,
.single-novogradnja .sidebar .ngg-slideshow .slide,
.single-novogradnja .sidebar .ngg-gallerybox,
.single-novogradnja .sidebar .ngg-gallerybox .ngg-image {
  display: flex !important;
  align-items: stretch !important;
}

.single-novogradnja .sidebar .ngg-slideshow .slides li > *,
.single-novogradnja .sidebar .ngg-slideshow .slide > *,
.single-novogradnja .sidebar .ngg-gallerybox > *,
.single-novogradnja .sidebar .ngg-gallerybox .ngg-image > * {
  height: 100% !important;
  width: 100% !important;
}

.single-novogradnja .sidebar .ngg-slideshow img,
.single-novogradnja .sidebar .ngg-gallerybox img {
  max-height: none !important;
  min-height: 100% !important;
  min-width: 100% !important;
}

/* Handle NextGEN markup where slides are direct <a> children (no .slides/.slide).
   Force the slideshow container to a fixed height and make anchors/images
   fill and crop using object-fit. Override inline max-height and display rules. */
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow {
  max-height: none !important;
  height: var(--nc-gallery-slide-height) !important;
  width: 100% !important;
}

.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow > a img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Ensure Slick slider internals fill the slideshow height */
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-list,
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-track,
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-slide,
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-slide > div,
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-slide > div > a {
  height: var(--nc-gallery-slide-height) !important;
  min-height: var(--nc-gallery-slide-height) !important;
  max-height: var(--nc-gallery-slide-height) !important;
  overflow: hidden !important;
}

/* Force images inside slick slides to cover and ignore inline max-height */
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow .slick-slide img,
.single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow a img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* If NextGEN uses background-image on the slide container, ensure it covers. */
.single-novogradnja .sidebar .ngg-slideshow .slides li[style*="background-image"],
.single-novogradnja .sidebar .ngg-gallerybox[style*="background-image"],
.single-novogradnja .sidebar [style*="background-image"] {
  background-size: cover !important;
  background-position: center center !important;
}

/* Hide any inline images that may duplicate background-image slides */
.single-novogradnja .sidebar .ngg-slideshow img[style*="display:none"],
.single-novogradnja .sidebar .ngg-gallerybox img[style*="display:none"] {
  display: none !important;
}