/* ==========================================================================
   Green Zone Living - Wellness Ecosystem Card Hover Effects
   Applied to the "Four Pillars of Restorative Living" section
   ========================================================================== */

/* --- Slow down all Elementor entrance animations on this page --- */
.elementor-6092 .animated {
  animation-duration: 1s !important;
}

/* Card containers - base setup */
.elementor-6092 .elementor-element-1f7824f,
.elementor-6092 .elementor-element-2281699,
.elementor-6092 .elementor-element-e546f58,
.elementor-6092 .elementor-element-918b7b5 {
  overflow: hidden !important;
  background-size: 105% auto !important;
  background-position: center !important;
  transition: background-size 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: default;
}

/* Background zoom on hover */
.elementor-6092 .elementor-element-1f7824f:hover,
.elementor-6092 .elementor-element-2281699:hover,
.elementor-6092 .elementor-element-e546f58:hover,
.elementor-6092 .elementor-element-918b7b5:hover {
  background-size: 125% auto !important;
}

/* Gradient overlay on cards */
.elementor-6092 .elementor-element-1f7824f::before,
.elementor-6092 .elementor-element-2281699::before,
.elementor-6092 .elementor-element-e546f58::before,
.elementor-6092 .elementor-element-918b7b5::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(13,33,28,0.05) 0%, rgba(13,33,28,0.15) 45%, rgba(13,33,28,0.94) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Inner text containers - position above overlay */
.elementor-6092 .elementor-element-b2a33b6,
.elementor-6092 .elementor-element-3067671,
.elementor-6092 .elementor-element-0a8c7fc,
.elementor-6092 .elementor-element-b590d08 {
  position: relative !important;
  z-index: 2 !important;
  justify-content: flex-end !important;
  height: 100% !important;
  transition: padding-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Hover: push content up slightly */
.elementor-6092 .elementor-element-1f7824f:hover .elementor-element-b2a33b6,
.elementor-6092 .elementor-element-2281699:hover .elementor-element-3067671,
.elementor-6092 .elementor-element-e546f58:hover .elementor-element-0a8c7fc,
.elementor-6092 .elementor-element-918b7b5:hover .elementor-element-b590d08 {
  padding-bottom: 10px !important;
}

/* Hide description text by default */
.elementor-6092 .elementor-element-1fcdc6f,
.elementor-6092 .elementor-element-25ed238,
.elementor-6092 .elementor-element-a3799fc,
.elementor-6092 .elementor-element-2245f7a {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Reveal description text on hover */
.elementor-6092 .elementor-element-1f7824f:hover .elementor-element-1fcdc6f,
.elementor-6092 .elementor-element-2281699:hover .elementor-element-25ed238,
.elementor-6092 .elementor-element-e546f58:hover .elementor-element-a3799fc,
.elementor-6092 .elementor-element-918b7b5:hover .elementor-element-2245f7a {
  max-height: 100px !important;
  opacity: 1 !important;
}

/* Mobile: always show description (no hover on touch devices) */
@media (max-width: 767px) {
  .elementor-6092 .elementor-element-1fcdc6f,
  .elementor-6092 .elementor-element-25ed238,
  .elementor-6092 .elementor-element-a3799fc,
  .elementor-6092 .elementor-element-2245f7a {
    max-height: 100px !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Master Plan Section - Equal width for image & video on mobile
   Fix: Image widget missing width-initial class, doesn't stretch like video
   ========================================================================== */
@media (max-width: 767px) {
  /* Stack image & video vertically instead of side by side */
  .elementor-element-e539b22 {
    flex-direction: column !important;
  }
  /* Force both widgets to full width */
  .elementor-element-e539b22 > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-e539b22 .elementor-element-dc6995e img {
    width: 100% !important;
    height: auto !important;
  }
  .elementor-element-e539b22 .elementor-element-807732e {
    --container-widget-width: 100% !important;
  }
}

/* ==========================================================================
   Master Plan "Low-Density Exclusivity" Section - Equal width for the two
   map images on mobile.
   Problem: the satellite map (widget f9b91ba / "Ravi-Plan") sits inside an
   extra nested container (271d71b9) whose 10px horizontal padding shrinks it
   to ~307px, while the master-plan drawing (widget 1768c99e) is in a single
   container and renders at ~334px. This makes the two images look unequal.
   Fix: neutralize the nested container padding and force both image widgets
   and their images to full width so both render at the same width.
   ========================================================================== */
@media (max-width: 767px) {
  /* Satellite map: drop the extra nested-container padding so it can reach
     the same content width as the other image. */
  .elementor-6092 .elementor-element-271d71b9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Both map image widgets -> full width */
  .elementor-6092 .elementor-element-f9b91ba,
  .elementor-6092 .elementor-element-f9b91ba > a,
  .elementor-6092 .elementor-element-f9b91ba img,
  .elementor-6092 .elementor-element-1768c99e,
  .elementor-6092 .elementor-element-1768c99e img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}