/* ------------------------------------------------------------------
   Explore Pandharpur hero — temple cards (page 2540)
   Container id "hero-strip" -> grid (4 cols desktop / 2 mobile)
   Card: image fills the card; the temple name OVERLAYS the BOTTOM of
   the image in a translucent navy band, inset 10px from left/right
   and 5px from the bottom of the image. White text.
   ------------------------------------------------------------------ */

.elementor-element-hero-strip {
  row-gap: 14px;
  column-gap: 14px;
}

/* Move the two hero headings down to the middle of the hero, nicely spaced */
.elementor-element-c31916c {
  justify-content: center;
  padding-top: 90px !important;
  padding-bottom: 40px !important;
}
.elementor-element-c4ba7fe {
  margin-bottom: 14px !important;  /* perfect gap between the two heading lines */
}

/* Navy stroke around the two big hero headings (free Elementor has no Text Stroke)
   Stroke = each heading's own colour, slightly darkened, 4px thick */
.elementor-element-c4ba7fe .elementor-heading-title {
  -webkit-text-stroke: 4px #E3E3E3; /* darker shade of the white heading */
  paint-order: stroke fill;
}
.elementor-element-7272643 .elementor-heading-title {
  -webkit-text-stroke: 4px #D9A500; /* darker shade of the gold heading */
  paint-order: stroke fill;
}

/* Each card */
.elementor-element-hero-strip > .elementor-element {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 210px;
  gap: 0;
}

/* Image fills the entire card */
.elementor-element-hero-strip > .elementor-element .elementor-widget-image {
  position: absolute;
  inset: 0;
}
.elementor-element-hero-strip > .elementor-element .elementor-widget-image .elementor-widget-container,
.elementor-element-hero-strip > .elementor-element .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Temple name band — overlays the BOTTOM of the image */
.elementor-element-hero-strip > .elementor-element .elementor-widget-heading {
  position: absolute;
  z-index: 10;           /* keep the band above the image */
  left: 10px;            /* cropped 10px from the left edge of the image */
  right: 10px;           /* cropped 10px from the right edge of the image */
  bottom: 5px;           /* sits 5px above the bottom of the image */
  width: auto !important;  /* undo width:inherit !important so left/right insets apply */
  max-width: calc(100% - 20px);
  margin: 0;
  background: rgba(214, 153, 29, 0.8); /* translucent gold, matches Book Now button (#D6991D) */
  padding: 6px 8px;
  text-align: center;
  border-radius: 6px;
}
.elementor-element-hero-strip > .elementor-element .elementor-heading-title {
  color: #ffffff !important;
  line-height: 1.2;
  font-size: 15px;
}

/* Phones: 4 columns (matches desktop), shorter cards + smaller name text */
@media (max-width: 767px) {
  /* Slightly thinner 3px stroke on phones (4px -> 3px) */
  .elementor-element-c4ba7fe .elementor-heading-title {
    -webkit-text-stroke: 3px #E3E3E3;
  }
  .elementor-element-7272643 .elementor-heading-title {
    -webkit-text-stroke: 3px #D9A500;
  }

  /* Hero: background video is hidden on phones by Elementor, so show a
     static temple image so the hero background stays visible. */
  .elementor-element-c31916c {
    background-image: url('/wp-content/uploads/2026/10/ChatGPT-Image-Oct-3-2026-06_33_03-PM-1.png') !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .elementor-element-hero-strip > .elementor-element {
    min-height: 130px;
    border-radius: 8px;
  }
  .elementor-element-hero-strip > .elementor-element .elementor-widget-heading {
    padding: 3px 4px;
    border-radius: 4px;
  }
  .elementor-element-hero-strip > .elementor-element .elementor-heading-title {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
}