/* =========================================================
   Custom Overrides - Maitreyee Hydro Systems
   (kept separate from main.css so template updates are easy)
========================================================= */

/* ---- Our Products submenu: full width, no text break ---- */
.header-main .main-menu ul li .submenu.submenu-products {
  min-width: max-content;
  width: max-content;
  white-space: nowrap;
}

.header-main .main-menu ul li .submenu.submenu-products li a {
  white-space: nowrap;
  padding-right: 32px;
}

/* Nested Steam Bath flyout (Luxury / InstaEasy) */
.header-main .main-menu ul li .submenu.submenu-products li .submenu {
  min-width: 180px;
  width: max-content;
  white-space: nowrap;
}

.header-main .main-menu ul li .submenu.submenu-products li .submenu li a {
  padding-right: 22px;
}

/* =========================================================
   Gallery Sections (Home Page + Gallery Page)
   Bootstrap grid with dark hover overlay + custom lightbox
========================================================= */
#gallery {
  padding-top: 0;
}

#gallery .section-title {
  margin-bottom: 40px;
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: rgba(30, 30, 30, 0.08) 0px 4px 16px 0px;
  transition: box-shadow 0.35s ease-in-out, transform 0.35s ease-in-out;
}

.img-wrapper:hover {
  box-shadow: rgba(30, 30, 30, 0.18) 0px 12px 28px 0px;
  transform: translateY(-4px);
}

.img-wrapper img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease-in-out;
}

.img-wrapper:hover img {
  transform: scale(1.08);
}

.img-overlay {
  background: rgba(15, 20, 15, 0.55);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s ease-in-out;
}

.img-overlay i {
  color: #fff;
  font-size: 2.2em;
  transform: scale(0.6);
  transition: transform 0.4s ease-in-out;
}

.img-wrapper:hover .img-overlay i {
  transform: scale(1);
}

/* Lightbox overlay (shared styling for both gallery-home.js and gallery-page.js) */
.gallery-lightbox-overlay {
  background: rgba(10, 12, 10, 0.92);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-lightbox-overlay img {
  margin: 0;
  width: 86%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  padding: 0;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 40px 0px;
}

@media screen and (min-width: 768px) {
  .gallery-lightbox-overlay img {
    width: 64%;
  }
}

@media screen and (min-width: 1200px) {
  .gallery-lightbox-overlay img {
    width: 52%;
  }
}

.gallery-lightbox-nav,
.gallery-lightbox-exit {
  color: #fff;
  font-size: 1.4em;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-exit:hover {
  background: var(--theme);
}

.gallery-lightbox-nav:first-child {
  margin-right: 14px;
}

.gallery-lightbox-nav:nth-child(3) {
  margin-left: 14px;
}

@media screen and (min-width: 768px) {
  .gallery-lightbox-nav {
    width: 56px;
    height: 56px;
    font-size: 1.7em;
  }
}

.gallery-lightbox-exit {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.2em;
  z-index: 2;
}

@media (max-width: 991px) {
  .gallery-lightbox-nav:first-child {
    position: absolute;
    left: 10px;
    margin-right: 0;
  }

  .gallery-lightbox-nav:nth-child(3) {
    position: absolute;
    right: 10px;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .img-wrapper img {
    height: 200px;
  }

  /* touch devices don't hover: show the overlay icon softly at all times */
  .img-overlay {
    opacity: 1;
    background: rgba(15, 20, 15, 0.18);
  }

  .img-overlay i {
    transform: scale(0.75);
    font-size: 1.8em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }
}

/* =========================================================
   Uniform, responsive product card / image sizing
   Every product photo (hero images + portfolio cards) keeps
   the same width:height ratio so cards line up evenly,
   regardless of the original photo's dimensions.
========================================================= */

/* Product detail page hero image (Sauna, Hydro Pneumatic, Steam Bath, etc.) */
.service-details-content .service-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
}

.service-details-content .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

/* Homepage / About "Our Projects" portfolio cards */
.project-thumb-box-items-style-1 {
  aspect-ratio: 4 / 3;
  height: auto;
}

.project-thumb-box-items-style-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991px) {
  .project-thumb-box-items-style-1 {
    aspect-ratio: unset;
    height: 320px;
  }
}

@media (max-width: 575px) {
  .project-thumb-box-items-style-1 {
    height: 240px;
  }
}